feat: update typo (DSDS 1.0)

label-section marked as deprecated
digitalservicebund · Jul 15, 2024 · 88c6879 · 88c6879
1 parent 3685829
commit 88c6879
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 34 deletions.
diff --git a/src/components/typo.js b/src/components/typo.js
@@ -4,49 +4,64 @@ module.exports = function ({ addComponents, theme }) {
     letterSpacing: "0.01rem",
   };
 
-  const heading01 = {
+  const title = {
     ...shared,
     fontSize: "4rem",
-    lineHeight: 1.0625,
+    lineHeight: 1.1875,
+    hyphens: "auto",
+  };
+
+  const heading01 = {
+    ...shared,
+    fontSize: "2.5rem",
+    lineHeight: 1.25,
     hyphens: "auto",
+    "@media (min-width: 500px)": {
+      fontSize: "3rem",
+      lineHeight: 1.2083,
+    },
   };
 
   const heading02 = {
     ...shared,
-    fontSize: "1.875rem",
-    lineHeight: 1.2333,
+    fontSize: "2rem",
+    lineHeight: 1.1875,
   };
 
   const heading03 = {
     ...shared,
-    fontSize: "1.5rem",
-    lineHeight: 1.25,
+    fontSize: "1.625rem",
+    lineHeight: 1.2308,
   };
 
   const subhead = {
     ...shared,
-    fontSize: "1.125rem",
-    lineHeight: 1.4444,
+    fontSize: "1.25rem",
+    lineHeight: 1.5,
+  };
+
+  const label = {
+    fontWeight: "normal",
+    lineHeight: 1.25,
   };
 
   const label01 = {
-    ...shared,
+    ...label,
     fontSize: "1.125rem",
-    lineHeight: 1.4444,
+    letterSpacing: "0.01rem",
   };
 
   const label02 = {
+    ...label,
     fontSize: "1rem",
-    fontWeight: "normal",
-    lineHeight: 1.375,
   };
 
   const label03 = {
-    ...shared,
+    ...label,
     fontSize: "0.875rem",
-    lineHeight: 1.2857,
   };
 
+  // deprecated
   const labelSection = {
     fontSize: "0.6875rem",
     lineHeight: 1.4545,
@@ -55,47 +70,56 @@ module.exports = function ({ addComponents, theme }) {
     textTransform: "uppercase",
   };
 
-  const body01 = {
-    fontSize: "1rem",
+  const body = {
     fontWeight: "normal",
-    lineHeight: 1.625,
+    lineHeight: 1.5,
+  };
+
+  const body01 = {
+    ...body,
+    fontSize: "1.125rem",
     letterSpacing: "0.01rem",
   };
 
   const body02 = {
+    ...body,
+    fontSize: "1rem",
+  };
+
+  const body03 = {
+    ...body,
     fontSize: "0.875rem",
-    fontWeight: "normal",
-    lineHeight: 1.5714,
   };
 
   const link = {
-    fontWeight: "bold",
+    fontWeight: "normal",
+    lineHeight: 1.5,
     color: theme("colors.blue.800"),
+    textDecorationLine: "underline",
   };
 
   const link01 = {
     ...link,
-    fontSize: "1rem",
-    lineHeight: 1.625,
+    fontSize: "1.125rem",
     letterSpacing: "0.01rem",
   };
 
   const link02 = {
     ...link,
-    fontSize: "0.875rem",
-    lineHeight: 1.5714,
+    fontSize: "1rem",
   };
 
   const link03 = {
     ...link,
-    fontSize: "1.125rem",
-    lineHeight: 1.4444,
-    letterSpacing: "0.01rem",
+    fontSize: "0.875rem",
   };
 
   addComponents({
+    ".ds-title-reg": title,
     ".ds-heading-01-reg": heading01,
+    ".ds-heading-01-bold": { ...heading01, fontWeight: "bold" },
     ".ds-heading-02-reg": heading02,
+    ".ds-heading-02-bold": { ...heading02, fontWeight: "bold" },
     ".ds-heading-03-reg": heading03,
     ".ds-heading-03-bold": { ...heading03, fontWeight: "bold" },
     ".ds-subhead": subhead,
@@ -111,9 +135,16 @@ module.exports = function ({ addComponents, theme }) {
     ".ds-label-03-bold": { ...label03, fontWeight: "bold" },
     ".ds-label-section": labelSection,
     ".ds-body-01-reg": body01,
+    ".ds-body-01-bold": { ...body01, fontWeight: "bold" },
     ".ds-body-02-reg": body02,
-    ".ds-link-01-bold": link01,
-    ".ds-link-02-bold": link02,
-    ".ds-link-03-bold": link03,
+    ".ds-body-02-bold": { ...body02, fontWeight: "bold" },
+    ".ds-body-03-reg": body03,
+    ".ds-body-03-bold": { ...body03, fontWeight: "bold" },
+    ".ds-link-01-reg": link01,
+    ".ds-link-01-bold": { ...link01, fontWeight: "bold" },
+    ".ds-link-02-reg": link02,
+    ".ds-link-02-bold": { ...link02, fontWeight: "bold" },
+    ".ds-link-03-reg": link03,
+    ".ds-link-03-bold": { ...link03, fontWeight: "bold" },
   });
 };
diff --git a/src/stories/styleguide/Typography.mdx b/src/stories/styleguide/Typography.mdx
@@ -10,20 +10,36 @@ diese Parameter kann ihr an entsprechenden Stellen mehr oder weniger
 Aufmerksamkeit geschenkt werden. So lassen sich Hierarchien zwischen Elementen
 erzeugen.
 
+## Title
+
+Used as a labelling element of an initial prominent headline.
+
+### title-reg
+
+<Canvas of={TypographyStories.TitleReg} />
+
 ## Heading
 
 Einsatzgebiet: Überschriften, Unterüberschriften\
 Größen: 4\
 Farben: Schwarz
 
-### heading-01-reg
+### heading-01-reg (responsive)
 
 <Canvas of={TypographyStories.Heading01Reg} />
 
+### heading-01-bold (responsive)
+
+<Canvas of={TypographyStories.Heading01Bold} />
+
 ### heading-02-reg
 
 <Canvas of={TypographyStories.Heading02Reg} />
 
+### heading-02-bold
+
+<Canvas of={TypographyStories.Heading02Bold} />
+
 ### heading-03-reg
 
 <Canvas of={TypographyStories.Heading03Reg} />
@@ -68,6 +84,8 @@ Farben: Schwarz, Weiss, Grau900
 
 ### label-section
 
+deprecated, nicht mehr benutzen!
+
 <Canvas of={TypographyStories.LabelSection} />
 
 ## Body
@@ -80,24 +98,52 @@ Farben: Schwarz
 
 <Canvas of={TypographyStories.Body01Reg} />
 
+### body-01-bold
+
+<Canvas of={TypographyStories.Body01Bold} />
+
 ### body-02-reg
 
 <Canvas of={TypographyStories.Body02Reg} />
 
+### body-02-bold
+
+<Canvas of={TypographyStories.Body02Bold} />
+
+### body-03-reg
+
+<Canvas of={TypographyStories.Body03Reg} />
+
+### body-03-bold
+
+<Canvas of={TypographyStories.Body03Bold} />
+
 ## Links
 
 Einsatzgebiet: Links in Textabschnitten, Navigationselemente\
 Größen: 3\
 Farben: Blue800
 
+### link-01-reg
+
+<Canvas of={TypographyStories.Link01Reg} />
+
 ### link-01-bold
 
 <Canvas of={TypographyStories.Link01Bold} />
 
+### link-02-reg
+
+<Canvas of={TypographyStories.Link02Reg} />
+
 ### link-02-bold
 
 <Canvas of={TypographyStories.Link02Bold} />
 
+### link-03-reg
+
+<Canvas of={TypographyStories.Link03Reg} />
+
 ### link-03-bold
 
 <Canvas of={TypographyStories.Link03Bold} />
diff --git a/src/stories/styleguide/Typography.stories.ts b/src/stories/styleguide/Typography.stories.ts
@@ -30,12 +30,21 @@ export default meta;
 
 type Story = StoryObj<TypeArgs>;
 
+export const TitleReg = {
+  args: { name: "title-reg", text: loremWords(4) },
+} satisfies Story;
 export const Heading01Reg = {
   args: { name: "heading-01-reg", text: loremWords(4) },
 } satisfies Story;
+export const Heading01Bold = {
+  args: { name: "heading-01-bold", text: loremWords(4) },
+} satisfies Story;
 export const Heading02Reg = {
   args: { name: "heading-02-reg", text: loremWords(8) },
 } satisfies Story;
+export const Heading02Bold = {
+  args: { name: "heading-02-bold", text: loremWords(8) },
+} satisfies Story;
 export const Heading03Reg = {
   args: { name: "heading-03-reg", text: loremWords(8) },
 } satisfies Story;
@@ -69,15 +78,36 @@ export const LabelSection = {
 export const Body01Reg = {
   args: { name: "body-01-reg", text: loremSentences(4) },
 } satisfies Story;
+export const Body01Bold = {
+  args: { name: "body-01-bold", text: loremSentences(4) },
+} satisfies Story;
 export const Body02Reg = {
   args: { name: "body-02-reg", text: loremSentences(5) },
 } satisfies Story;
+export const Body02Bold = {
+  args: { name: "body-02-bold", text: loremSentences(5) },
+} satisfies Story;
+export const Body03Reg = {
+  args: { name: "body-03-reg", text: loremSentences(5) },
+} satisfies Story;
+export const Body03Bold = {
+  args: { name: "body-03-bold", text: loremSentences(5) },
+} satisfies Story;
+export const Link01Reg = {
+  args: { name: "link-01-reg", text: loremSentences(4) },
+} satisfies Story;
 export const Link01Bold = {
-  args: { name: "link-01-bold", text: loremWords(4) },
+  args: { name: "link-01-bold", text: loremSentences(4) },
+} satisfies Story;
+export const Link02Reg = {
+  args: { name: "link-02-reg", text: loremSentences(5) },
 } satisfies Story;
 export const Link02Bold = {
-  args: { name: "link-02-bold", text: loremWords(4) },
+  args: { name: "link-02-bold", text: loremSentences(5) },
+} satisfies Story;
+export const Link03Reg = {
+  args: { name: "link-03-reg", text: loremSentences(5) },
 } satisfies Story;
 export const Link03Bold = {
-  args: { name: "link-03-bold", text: loremWords(4) },
+  args: { name: "link-03-bold", text: loremSentences(5) },
 } satisfies Story;