Merge branch 'main' into 3434-component-spacing-utilities

.changeset/eleven-keys-work.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Updated the style of headings (h1-h6).

.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

@@ -21,6 +21,7 @@
 @use 'forms';
 @use 'grid';
 @use 'icons';
+@use 'lead';
 @use 'list-group';
 @use 'modal';
 @use 'pagination';
@@ -33,6 +34,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/elements/_index.scss

@@ -1,2 +1,3 @@
 @use 'reset';
 @use 'body';
+@use 'heading';

packages/styles/src/elements/heading.scss

@@ -0,0 +1,62 @@
+@use '../functions/tokens';
+@use '../tokens/elements';
+
+tokens.$default-map: elements.$post-heading;
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  line-height: tokens.get('post-heading', 'line-height');
+  font-weight: tokens.get('post-heading', 'font-weight');
+}
+
+h1,
+.h1 {
+  font-size: tokens.get('post-h1', 'font-size');
+  margin-block-start: tokens.get('post-h1', 'margin-block-start');
+  margin-block-end: tokens.get('post-h1', 'margin-block-end');
+}
+
+h2,
+.h2 {
+  font-size: tokens.get('post-h2', 'font-size');
+  margin-block-start: tokens.get('post-h2', 'margin-block-start');
+  margin-block-end: tokens.get('post-h2', 'margin-block-end');
+}
+
+h3,
+.h3 {
+  font-size: tokens.get('post-h3', 'font-size');
+  margin-block-start: tokens.get('post-h3', 'margin-block-start');
+  margin-block-end: tokens.get('post-h3', 'margin-block-end');
+}
+
+h4,
+.h4 {
+  font-size: tokens.get('post-h4', 'font-size');
+  margin-block-start: tokens.get('post-h4', 'margin-block-start');
+  margin-block-end: tokens.get('post-h4', 'margin-block-end');
+}
+
+h5,
+.h5 {
+  font-size: tokens.get('post-h5', 'font-size');
+  margin-block-start: tokens.get('post-h5', 'margin-block-start');
+  margin-block-end: tokens.get('post-h5', 'margin-block-end');
+}
+
+h6,
+.h6 {
+  font-size: tokens.get('post-h6', 'font-size');
+  margin-block-start: tokens.get('post-h6', 'margin-block-start');
+  margin-block-end: tokens.get('post-h6', 'margin-block-end');
+}

packages/styles/src/layouts/portal/index.scss

@@ -1,5 +1,2 @@
 @use './grid';
 @use './subnavigation';
-@use './type';
-
-@include type.styles;

packages/styles/src/variables/_index.scss

@@ -8,7 +8,6 @@
 @forward 'commons';
 @forward 'elevation';
 @forward 'grid';
-@forward 'heading';
 @forward 'icons';
 @forward 'options';
 @forward 'spacing';