diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs
index 14fde3f51..6143d4eb4 100644
--- a/frontend/src/app/main/ui/ds.cljs
+++ b/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
diff --git a/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
deleted file mode 100644
index 615d3729e..000000000
--- a/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
+++ /dev/null
@@ -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: () => (
-
-
- All Typography
- Hover on a heading to see its ID
-
- {Object.values(typographyList).map(
- ({ id, name, size, weight, line, font }) => (
-
-
- {name} - {weight} - {size}/{line} {font}
-
-
- ),
- )}
-
- ),
- parameters: {
- backgrounds: { disable: true },
- },
-};
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.cljs b/frontend/src/app/main/ui/ds/foundations/typography/heading.cljs
similarity index 97%
rename from frontend/src/app/main/ui/ds/foundations/heading.cljs
rename to frontend/src/app/main/ui/ds/foundations/typography/heading.cljs
index 59c8e3dde..374ae545f 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.cljs
+++ b/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"))
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.mdx b/frontend/src/app/main/ui/ds/foundations/typography/heading.mdx
similarity index 88%
rename from frontend/src/app/main/ui/ds/foundations/heading.mdx
rename to frontend/src/app/main/ui/ds/foundations/typography/heading.mdx
index 52e3bb120..ffda6ede4 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.mdx
+++ b/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. `
`, ``, etc.).
+- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. ``, ``, 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:
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.scss b/frontend/src/app/main/ui/ds/foundations/typography/heading.scss
similarity index 96%
rename from frontend/src/app/main/ui/ds/foundations/heading.scss
rename to frontend/src/app/main/ui/ds/foundations/typography/heading.scss
index 1cd69b7bc..67c16bd36 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.scss
+++ b/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");
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
similarity index 90%
rename from frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
rename to frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx
index 67cdb3a98..28336b90f 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
+++ b/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",
diff --git a/frontend/src/app/main/ui/ds/foundations/text.cljs b/frontend/src/app/main/ui/ds/foundations/typography/text.cljs
similarity index 97%
rename from frontend/src/app/main/ui/ds/foundations/text.cljs
rename to frontend/src/app/main/ui/ds/foundations/typography/text.cljs
index 0372a0b0f..e5e24907c 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.cljs
+++ b/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])
diff --git a/frontend/src/app/main/ui/ds/foundations/text.mdx b/frontend/src/app/main/ui/ds/foundations/typography/text.mdx
similarity index 90%
rename from frontend/src/app/main/ui/ds/foundations/text.mdx
rename to frontend/src/app/main/ui/ds/foundations/typography/text.mdx
index 0f526cf27..76c61a625 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.mdx
+++ b/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:
diff --git a/frontend/src/app/main/ui/ds/foundations/text.scss b/frontend/src/app/main/ui/ds/foundations/typography/text.scss
similarity index 96%
rename from frontend/src/app/main/ui/ds/foundations/text.scss
rename to frontend/src/app/main/ui/ds/foundations/typography/text.scss
index 1cd69b7bc..67c16bd36 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.scss
+++ b/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");
diff --git a/frontend/src/app/main/ui/ds/foundations/text.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
similarity index 90%
rename from frontend/src/app/main/ui/ds/foundations/text.stories.jsx
rename to frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx
index 271a09960..31cceaa5d 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.stories.jsx
+++ b/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",
diff --git a/frontend/src/app/main/ui/ds/foundations/typography.mdx b/frontend/src/app/main/ui/ds/foundations/typography/typography.mdx
similarity index 73%
rename from frontend/src/app/main/ui/ds/foundations/typography.mdx
rename to frontend/src/app/main/ui/ds/foundations/typography/typography.mdx
index e36d29271..a3fae5d15 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography.mdx
+++ b/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";
-
+
# 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.
### Title large `title-large`
@@ -64,7 +63,7 @@ Page headers for main pages (dashboard, Profiles...). If too big use title
(medium) in narrow windows.
### 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.
### 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).
## Headline
@@ -92,20 +91,20 @@ page titles (automated action titles, for example). Same line height as title (m
### Headline large `headline-large`
### Headline medium `headline-medium`
### Headline small `headline-small`
## Body
@@ -115,7 +114,7 @@ page titles (automated action titles, for example). Same line height as title (m
Generic content.
### Body medium `body-medium`
@@ -123,7 +122,7 @@ Generic content.
Default UI font. Most commonly used for body text.
@@ -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.
## 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.
## Fonts