Merge branch 'main' into 3420-component-form-footer

.changeset/nervous-rocks-shop.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added Text Highlighted component.

.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/documentation/src/stories/components/text-highlighted/text-highlighted.docs.mdx

@@ -0,0 +1,20 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import * as TextHighlighedtStories from './text-highlighted.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={TextHighlighedtStories} />
+
+<div className="docs-title">
+  # Text Highlighted
+  <nav>
+    <link-design of={JSON.stringify(TextHighlighedtStories)}></link-design>
+  </nav>
+</div>
+
+<div>
+  The Text Highlighted can be used when a certain paragraph needs a higher attention than the other
+  paragraphs.
+</div>
+
+<Canvas of={TextHighlighedtStories.Default} sourceState="shown" />
+<StylesPackageImport components={['text-highlighted']} />

packages/documentation/src/stories/components/text-highlighted/text-highlighted.stories.ts

@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaComponent } from '@root/types';
+
+const meta: MetaComponent = {
+  id: '88318ccf-be8d-4bdf-b8dc-06b0b78e5e3d',
+  title: 'Components/Text Highlighted',
+  tags: ['package:WebComponents'],
+  component: 'post-text-highlighted',
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=1481-12917',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => html`
+    <p class="text-highlighted">
+      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/nextjs-integration/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

packages/styles/src/components/_index.scss

@@ -22,6 +22,7 @@
 @use 'forms';
 @use 'grid';
 @use 'icons';
+@use 'lead';
 @use 'list-group';
 @use 'modal';
 @use 'pagination';
@@ -34,6 +35,7 @@
 @use 'subnavigation';
 @use 'tables';
 @use 'tabs';
+@use 'text-highlight';
 @use 'timepicker';
 @use 'toast';
 @use 'tooltip';

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/components/text-highlight.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '../functions/tokens';
+@use '../tokens/components';
+
+tokens.$default-map: components.$post-text-highlighted;
+
+.text-highlighted {
+  background-color: tokens.get('post-text', 'highlighted-bg');
+  color: tokens.get('post-text', 'highlighted-fg');
+  padding: tokens.get('post-text', 'highlighted-padding-text');
+  margin-block-start: tokens.get('post-text', 'highlighted-height-space-bottom');
+  margin-block-end: tokens.get('post-text', 'highlighted-height-space-bottom');
+  border-radius: tokens.get('post-text', 'highlighted-border-radius');
+}

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