📎 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

@@ -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

@@ -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 { Canvas, Meta } from "@storybook/blocks";
-import * as TypographyStories from "./typography.stories";
 import Components from "@target/components";
 
-<Meta of={TypographyStories} />
+<Meta title="Foundations/Typography" />
 
 # Typography
 
@@ -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