📎 Move typography-related components to their own folder

frontend/src/app/main/ui/ds.cljs

@@ -6,11 +6,11 @@
 
 (ns app.main.ui.ds
   (:require
-   [app.main.ui.ds.foundations.heading :refer [heading*]]
    [app.main.ui.ds.foundations.icon :refer [icon* icon-list]]
    [app.main.ui.ds.foundations.raw-svg :refer [raw-svg* raw-svg-list]]
-   [app.main.ui.ds.foundations.text :refer [text*]]
    [app.main.ui.ds.foundations.typography :refer [typography-list]]
+   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
+   [app.main.ui.ds.foundations.typography.text :refer [text*]]
    [app.main.ui.ds.storybook :as sb]))
 
 (def default

frontend/src/app/main/ui/ds/foundations/typography.stories.jsx

@@ -1,137 +0,0 @@
-import * as React from "react";
-import Components from "@target/components";
-
-const { Heading } = Components;
-const { StoryWrapper, StoryHeader, StoryGridRow } = Components.storybook;
-
-const typographyList = {
-  display: {
-    name: "Display",
-    id: "display",
-    size: "36px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  titleLarge: {
-    name: "Title large",
-    id: "title-large",
-    size: "24px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  titleMedium: {
-    name: "Title medium",
-    id: "title-medium",
-    size: "20px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  titleSmall: {
-    name: "Title small",
-    id: "title-small",
-    size: "14px",
-    weight: "400",
-    line: "1.2",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  headlineLarge: {
-    name: "Headline large",
-    id: "headline-large",
-    size: "18px",
-    weight: "400",
-    line: "1.4",
-    uppercase: true,
-    font: "Work Sans",
-  },
-  headlineMedium: {
-    name: "Headline medium",
-    id: "headline-medium",
-    size: "16px",
-    weight: "400",
-    line: "1.4",
-    uppercase: true,
-    font: "Work Sans",
-  },
-  headlineSmall: {
-    name: "Headline small",
-    id: "headline-small",
-    size: "12px",
-    weight: "500",
-    line: "1.2",
-    uppercase: true,
-    font: "Work Sans",
-  },
-  bodyLarge: {
-    name: "Body large",
-    id: "body-large",
-    size: "16px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  bodyMedium: {
-    name: "Body medium",
-    id: "body-medium",
-    size: "14px",
-    weight: "400",
-    line: "1.3",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  bodySmall: {
-    name: "Body small",
-    id: "body-small",
-    size: "12px",
-    weight: "400",
-    line: "1.3",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  codeFont: {
-    name: "Code font",
-    id: "code-font",
-    size: "12px",
-    weight: "400",
-    line: "1.2",
-    uppercase: false,
-    font: "Roboto Mono",
-  },
-};
-
-export const typographyIds = Object.values(typographyList).map(x => x.id);
-
-export default {
-  title: "Foundations/Typography",
-  component: Components.StoryHeader,
-};
-
-export const AllTypography = {
-  render: () => (
-    <StoryWrapper theme="default">
-      <StoryHeader>
-        <h1>All Typography</h1>
-        <p>Hover on a heading to see its ID</p>
-      </StoryHeader>
-      {Object.values(typographyList).map(
-        ({ id, name, size, weight, line, font }) => (
-          <StoryGridRow title={id} key={id}>
-            <Heading level="1" typography={id}>
-              {name} - {weight} - {size}/{line} {font}
-            </Heading>
-          </StoryGridRow>
-        ),
-      )}
-    </StoryWrapper>
-  ),
-  parameters: {
-    backgrounds: { disable: true },
-  },
-};

frontend/src/app/main/ui/ds/foundations/typography/heading.cljs

@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.heading
+(ns app.main.ui.ds.foundations.typography.heading
   (:require-macros
    [app.common.data.macros :as dm]
    [app.main.style :as stl])
@@ -25,7 +25,6 @@
   (assert (or (valid-level? level)
               (nil? level))
           (dm/str "Invalid level: " level ". Valid numbers are 1 to 6."))
-
   (assert (valid-typography? (dm/str typography))
           (dm/str typography " is an unknown typography"))
 

frontend/src/app/main/ui/ds/foundations/typography/heading.mdx

@@ -11,7 +11,7 @@ This component will add a heading tag element to our code.
 
 This components accepts to props:
 
-- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.). 
+- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.).
 - `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
 
 You can check passed props to renderized components on hover `level / typography`;
@@ -28,8 +28,8 @@ Assuming the namespace of the typography is required as `t`:
 ```clj
 (ns app.main.ui.foo
   (:require
-   [app.main.ui.ds.foundations.heading :refer [heading*]]
-   [app.main.ui.ds.foundations.typography :as t]))
+   [app.main.ui.ds.foundations.typography :as t]
+   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]))
 ```
 
 You can now use the typography IDs defined in the namespace:

frontend/src/app/main/ui/ds/foundations/typography/heading.scss

@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
 // Copyright (c) KALEIDOS INC
-@use "../typography.scss" as t;
+@use "../../typography.scss" as t;
 
 .display-typography {
   @include t.use-typography("display");

frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx

@@ -1,9 +1,11 @@
 import * as React from "react";
 import Components from "@target/components";
-import { typographyIds } from "./typography.stories";
 
 const { Heading } = Components;
 const { StoryWrapper } = Components.storybook;
+const { typography } = Components.meta;
+
+const typographyIds = typography.sort();
 
 export default {
   title: "Foundations/Typography/Heading",

frontend/src/app/main/ui/ds/foundations/typography/text.cljs

@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.text
+(ns app.main.ui.ds.foundations.typography.text
   (:require-macros
    [app.common.data.macros :as dm]
    [app.main.style :as stl])

frontend/src/app/main/ui/ds/foundations/typography/text.mdx

@@ -10,7 +10,7 @@ This component will add a text element to our code that will match the tag prop.
 
 This components accepts to props:
 
-- `tag` (default value: `p`) : Give a proper tag name (i.e. `p`, `span`, etc.). 
+- `tag` (default value: `p`) : Give a proper tag name (i.e. `p`, `span`, etc.).
 - `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
 
 You can check passed props to renderized components on hover `tag / typography`
@@ -28,8 +28,8 @@ Assuming the namespace of the typography is required as `t`:
 ```clj
 (ns app.main.ui.foo
   (:require
-   [app.main.ui.ds.foundations.text :refer [text*]]
-   [app.main.ui.ds.foundations.typography :as t]))
+   [app.main.ui.ds.foundations.typography :as t]
+   [app.main.ui.ds.foundations.typography.text :refer [text*]]))
 ```
 
 You can now use the typography IDs defined in the namespace:

frontend/src/app/main/ui/ds/foundations/typography/text.scss

@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
 // Copyright (c) KALEIDOS INC
-@use "../typography.scss" as t;
+@use "../../typography.scss" as t;
 
 .display-typography {
   @include t.use-typography("display");

frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx

@@ -1,9 +1,11 @@
 import * as React from "react";
 import Components from "@target/components";
-import { typographyIds } from "./typography.stories";
 
 const { Text } = Components;
 const { StoryWrapper } = Components.storybook;
+const { typography } = Components.meta;
+
+const typographyIds = typography.sort();
 
 export default {
   title: "Foundations/Typography/Text",

frontend/src/app/main/ui/ds/foundations/typography/typography.mdx

@@ -1,8 +1,7 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
-import * as TypographyStories from "./typography.stories";
+import { Canvas, Meta } from "@storybook/blocks";
 import Components from "@target/components";
 
-<Meta of={TypographyStories} />
+<Meta title="Foundations/Typography" />
 
 # Typography
 
@@ -19,7 +18,7 @@ This situation is something to be corrected in future improvements.
 Typographic colours are used in text elements such as headers
 and body and in the various components that make up the tool...
 
-The colours used in typography are the Foreground colours such 
+The colours used in typography are the Foreground colours such
 `--color-foreground-primary` or `--color-foreground-secondary`
 but different colours can be applied in specific component
 applications with their own styles, such as buttons.
@@ -55,7 +54,7 @@ for exceptions based on the size of the components.
 Hero style text for transitional pages (Login). If too large use large title in narrow windows.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Heading>
+  <Components.Text typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Text>
 </Canvas>
 
 ### Title large `title-large`
@@ -64,7 +63,7 @@ Page headers for main pages (dashboard, Profiles...). If too big use title
 (medium) in narrow windows.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Heading>
+  <Components.Text typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Text>
 </Canvas>
 
 ### Title medium `title-medium`
@@ -73,7 +72,7 @@ Default page title. Equivalent line height of 32px matches the height
 of buttons and other medium controls. Ideal for page header layout.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 ### Title small `title-small`
@@ -81,7 +80,7 @@ of buttons and other medium controls. Ideal for page header layout.
 Uses the same size as body (large).
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Heading>
+  <Components.Text typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Text>
 </Canvas>
 
 ## Headline
@@ -92,20 +91,20 @@ page titles (automated action titles, for example). Same line height as title (m
 ### Headline large `headline-large`
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 ### Headline medium `headline-medium`
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 
 ### Headline small `headline-small`
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Heading>
+  <Components.Text typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Text>
 </Canvas>
 
 ## Body
@@ -115,7 +114,7 @@ page titles (automated action titles, for example). Same line height as title (m
 Generic content.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 ### Body medium `body-medium`
@@ -123,7 +122,7 @@ Generic content.
 Default UI font. Most commonly used for body text.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Heading>
+  <Components.Text typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Text>
 </Canvas>
 
 
@@ -133,7 +132,7 @@ Small compact font with a line height of less than 16px.
 Use for single line scenarios, as the small size does not meet accessibility requirements.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Heading>
+  <Components.Text typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Text>
 </Canvas>
 
 ## Code font `code-font`
@@ -141,7 +140,7 @@ Use for single line scenarios, as the small size does not meet accessibility req
 Default style for rendering code blocks.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Heading>
+  <Components.Text typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Text>
 </Canvas>
 
 ## Fonts