From 0fce6c5ebb654dbfe0991fb3f830aede1bf2ac1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 11 Jul 2024 17:01:04 +0200 Subject: [PATCH] :bug: Fix broken typography docs after upgrading to v8 --- .../foundations/typography/text.stories.jsx | 110 +++++++++++++++--- .../ds/foundations/typography/typography.mdx | 61 +++------- 2 files changed, 114 insertions(+), 57 deletions(-) diff --git a/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx index 1eaec1b8e..97f61f6f8 100644 --- a/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx +++ b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx @@ -2,7 +2,6 @@ import * as React from "react"; import Components from "@target/components"; const { Text } = Components; -const { StoryWrapper } = Components.storybook; const { typography } = Components.meta; const typographyIds = typography.sort(); @@ -16,31 +15,112 @@ export default { control: { type: "select" }, }, }, + parameters: { + controls: { exclude: ["children", "theme", "style"] }, + backgrounds: { default: "light" }, + }, + args: { + children: "Lorem ipsum", + theme: "light", + style: { + color: "var(--color-foreground-primary)", + background: "var(--color-background-primary)", + }, + }, + render: ({ style, children, theme, ...args }) => ( + // TODO: this
is a hack until we have proper theming +
+ {children} +
+ ), }; export const Default = { - render: ({ typography, ...args }) => ( - - - Lorem ipsum - - - ), args: { typography: "display", }, }; export const CustomTag = { - render: ({ typography, ...args }) => ( - - - Lorem ipsum - - - ), args: { typography: "display", as: "li", }, }; + +export const Display = { + args: { + typography: "display", + children: "Display 400 36px/1.4 Work Sans", + }, +}; + +export const TitleLarge = { + args: { + typography: "title-large", + children: "Title Large 400 24px/1.4 Work Sans", + }, +}; + +export const TitleMedium = { + args: { + typography: "title-medium", + children: "Title Medium 400 20px/1.4 Work Sans", + }, +}; + +export const TitleSmall = { + args: { + typography: "title-small", + children: "Title Small 400 14px/1.2 Work Sans", + }, +}; + +export const HeadlineLarge = { + args: { + typography: "headline-large", + children: "Headline Large 400 18px/1.4 Work Sans", + }, +}; + +export const HeadlineMedium = { + args: { + typography: "headline-medium", + children: "Headline Medium 400 16px/1.4 Work Sans", + }, +}; + +export const HeadlineSmall = { + args: { + typography: "headline-small", + children: "Headline Small 500 12px/1.2 Work Sans", + }, +}; + +export const BodyLarge = { + args: { + typography: "body-large", + children: "Body Large 400 16px/1.4 Work Sans", + }, +}; + +export const BodyMedium = { + args: { + typography: "body-medium", + children: "Body Medium 400 14px/1.3 Work Sans", + }, +}; + +export const BodySmall = { + args: { + typography: "body-small", + children: "Body Small 400 12px/1.3 Work Sans", + }, +}; + +export const CodeFont = { + args: { + typography: "code-font", + children: "Code Font 400 12px/1.2 Roboto Mono", + }, +}; diff --git a/frontend/src/app/main/ui/ds/foundations/typography/typography.mdx b/frontend/src/app/main/ui/ds/foundations/typography/typography.mdx index a3fae5d15..6171d4327 100644 --- a/frontend/src/app/main/ui/ds/foundations/typography/typography.mdx +++ b/frontend/src/app/main/ui/ds/foundations/typography/typography.mdx @@ -1,5 +1,6 @@ import { Canvas, Meta } from "@storybook/blocks"; import Components from "@target/components"; +import * as TextStories from "../typography/text.stories"; @@ -53,59 +54,44 @@ 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" - + -### Title large `title-large` +### Title Large `title-large` 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 medium `title-medium` +### Title Medium `title-medium` 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 small `title-small` +### Title Small `title-small` Uses the same size as body (large). - - Title small - 400 - 14px/1.2 "Work Sans" - + ## Headline -Page sections/subtitles, or names of less important objects in -page titles (automated action titles, for example). Same line height as title (medium). +Page sections/subtitles, or names of less important objects in page titles +(automated action titles, for example). Same line height as title (medium). -### Headline large `headline-large` +### Headline Large `headline-large` - - Headline large - 400 - 18px/1.4 "Work Sans" - + -### Headline medium `headline-medium` - - - Headline medium - 400 - 16px/1.4 "Work Sans" - +### Headline Medium `headline-medium` + ### Headline small `headline-small` - - Headline small - 500 - 12px/1.2 "Work Sans" - + ## Body @@ -113,35 +99,26 @@ page titles (automated action titles, for example). Same line height as title (m Generic content. - - Body large - 400 - 16px/1.4 "Work Sans" - + ### Body medium `body-medium` Default UI font. Most commonly used for body text. - - Body medium - 400 - 14px/1.3 "Work Sans" - - + ### Body small `body-small` 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" - + ## Code font `code-font` Default style for rendering code blocks. - - Code font - 400 - 12px/1.2 "Roboto Mono" - + ## Fonts