From 9d3a282c0a62b96b72d23b35df5c3f0f94189f8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Wed, 10 Jul 2024 14:09:49 +0200 Subject: [PATCH] :paperclip: Move typography-related components to their own folder --- frontend/src/app/main/ui/ds.cljs | 4 +- .../ui/ds/foundations/typography.stories.jsx | 137 ------------------ .../foundations/{ => typography}/heading.cljs | 3 +- .../foundations/{ => typography}/heading.mdx | 6 +- .../foundations/{ => typography}/heading.scss | 2 +- .../{ => typography}/heading.stories.jsx | 4 +- .../ds/foundations/{ => typography}/text.cljs | 2 +- .../ds/foundations/{ => typography}/text.mdx | 6 +- .../ds/foundations/{ => typography}/text.scss | 2 +- .../{ => typography}/text.stories.jsx | 4 +- .../{ => typography}/typography.mdx | 29 ++-- 11 files changed, 32 insertions(+), 167 deletions(-) delete mode 100644 frontend/src/app/main/ui/ds/foundations/typography.stories.jsx rename frontend/src/app/main/ui/ds/foundations/{ => typography}/heading.cljs (97%) rename frontend/src/app/main/ui/ds/foundations/{ => typography}/heading.mdx (88%) rename frontend/src/app/main/ui/ds/foundations/{ => typography}/heading.scss (96%) rename frontend/src/app/main/ui/ds/foundations/{ => typography}/heading.stories.jsx (90%) rename frontend/src/app/main/ui/ds/foundations/{ => typography}/text.cljs (97%) rename frontend/src/app/main/ui/ds/foundations/{ => typography}/text.mdx (90%) rename frontend/src/app/main/ui/ds/foundations/{ => typography}/text.scss (96%) rename frontend/src/app/main/ui/ds/foundations/{ => typography}/text.stories.jsx (90%) rename frontend/src/app/main/ui/ds/foundations/{ => typography}/typography.mdx (73%) 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. - Display - 400 - 36px/1.4 "Work Sans" + Display - 400 - 36px/1.4 "Work Sans" ### 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 large - 400 - 24px/1.4 "Work Sans" + Title large - 400 - 24px/1.4 "Work Sans" ### 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 medium - 400 - 20px/1.4 "Work Sans" + Title medium - 400 - 20px/1.4 "Work Sans" ### 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). - Title small - 400 - 14px/1.2 "Work Sans" + Title small - 400 - 14px/1.2 "Work Sans" ## Headline @@ -92,20 +91,20 @@ page titles (automated action titles, for example). Same line height as title (m ### Headline large `headline-large` - Headline large - 400 - 18px/1.4 "Work Sans" + Headline large - 400 - 18px/1.4 "Work Sans" ### Headline medium `headline-medium` - Headline medium - 400 - 16px/1.4 "Work Sans" + Headline medium - 400 - 16px/1.4 "Work Sans" ### Headline small `headline-small` - Headline small - 500 - 12px/1.2 "Work Sans" + Headline small - 500 - 12px/1.2 "Work Sans" ## Body @@ -115,7 +114,7 @@ page titles (automated action titles, for example). Same line height as title (m Generic content. - Body large - 400 - 16px/1.4 "Work Sans" + Body large - 400 - 16px/1.4 "Work Sans" ### Body medium `body-medium` @@ -123,7 +122,7 @@ Generic content. Default UI font. Most commonly used for body text. - Body medium - 400 - 14px/1.3 "Work Sans" + Body medium - 400 - 14px/1.3 "Work Sans" @@ -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. - Body small - 400 - 12px/1.3 "Work Sans" + Body small - 400 - 12px/1.3 "Work Sans" ## 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. - Code font - 400 - 12px/1.2 "Roboto Mono" + Code font - 400 - 12px/1.2 "Roboto Mono" ## Fonts