feat: lead text add styles for the lead text component (#3575)

Co-authored-by: karimim <[email protected]>
Co-authored-by: Philipp Gfeller <[email protected]>

.changeset/tidy-dolls-walk.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added lead text component for introductory paragraphs.

packages/documentation/src/stories/components/lead/lead.docs.mdx

@@ -0,0 +1,20 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import * as LeadStories from './lead.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={LeadStories} />
+
+<div className="docs-title">
+  # Lead
+  <nav>
+    <link-design of={JSON.stringify(LeadStories)}></link-design>
+  </nav>
+</div>
+
+<div>
+  A lead provides the reader with a summary of the most important information about the subsequent
+  paragraph or content. A paragraph is a group of sentences which belong to the same context.
+</div>
+
+<Canvas of={LeadStories.Default} sourceState="shown" />
+<StylesPackageImport components={['lead']} />

packages/documentation/src/stories/components/lead/lead.stories.ts

@@ -0,0 +1,29 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: 'b2b49569-42b8-40bb-93b3-a874415f625d',
+  title: 'Components/Lead text',
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=178-6713&node-type=frame&t=X3tyO53unPAPaH3B-0',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => html`
+    <p class="lead">
+      Lead text nullam quis risus eget urna mollis ornare veleu leo. Cum sociis natoque penatibus et
+      magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies
+      vehicula.
+    </p>
+  `,
+};

packages/styles/src/components/_index.scss

@@ -21,6 +21,7 @@
 @use 'forms';
 @use 'grid';
 @use 'icons';
+@use 'lead';
 @use 'list-group';
 @use 'modal';
 @use 'pagination';

packages/styles/src/components/lead.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+@use '../functions/tokens';
+@use '../tokens/components';
+
+tokens.$default-map: components.$post-lead;
+
+.lead {
+  font-size: tokens.get('post-lead', 'font-size');
+  font-weight: tokens.get('post-lead', 'font-weight');
+}

packages/styles/src/variables/_type.scss

@@ -181,9 +181,6 @@ $display3-weight: 300 !default;
 $display4-weight: 300 !default;
 $display-line-height: $headings-line-height !default;
 
-$lead-font-size: 1em !default;
-$lead-font-weight: 700 !default;
-
 $small-font-size: 80% !default;
 
 $text-muted: color.$gray-60;
@@ -195,10 +192,7 @@ $blockquote-padding-left: spacing.$size-small-regular !default;
 $blockquote-padding-left-xxl: spacing.$size-big !default;
 $blockquote-margin-top: spacing.$size-large !default;
 $blockquote-margin-y: spacing.$size-regular !default;
-$blockquote-footer-font-size: math.div(
-  $lead-font-size * sizing.strip-unit($small-font-size),
-  100
-) !default;
+$blockquote-footer-font-size: math.div(1em * sizing.strip-unit($small-font-size), 100) !default;
 $blockquote-cite-font-weight: $font-weight-normal !default;
 
 $hr-border-color: rgba(color.$black, 0.1) !default; // Design System