chore(docs): move typography pages to component

.changeset/sad-pumas-act.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Moved the base typography elements into one single `Foundations > Typography` page and the "Text Highlighted" and "List" elements into the `Components` folder to align with Figma.

packages/documentation/cypress/e2e/components/typography.cy.ts

@@ -0,0 +1,27 @@
+describe('Typography', () => {
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      cy.visit('/iframe.html?id=snapshots--typography');
+      cy.get('h1', { timeout: 30000 }).should('be.visible');
+      cy.get('a', { timeout: 30000 }).should('be.visible');
+      cy.get('p', { timeout: 30000 }).should('be.visible');
+      cy.get('legend', { timeout: 30000 }).should('be.visible');
+      // Test Inline Elements
+      cy.get('small', { timeout: 30000 }).should('be.visible');
+      cy.get('strong', { timeout: 30000 }).should('be.visible');
+      cy.get('em', { timeout: 30000 }).should('be.visible');
+      cy.get('sub', { timeout: 30000 }).should('be.visible');
+      cy.get('sup', { timeout: 30000 }).should('be.visible');
+      cy.get('mark', { timeout: 30000 }).should('be.visible');
+      cy.get('abbr', { timeout: 30000 }).should('be.visible');
+      cy.get('code', { timeout: 30000 }).should('be.visible');
+      cy.get('kbd', { timeout: 30000 }).should('be.visible');
+      cy.get('del', { timeout: 30000 }).should('be.visible');
+      cy.injectAxe();
+    });
+
+    it('Has no detectable a11y violations on load for all variants', () => {
+      cy.checkA11y('#root-inner');
+    });
+  });
+});

packages/documentation/src/stories/components/list/list-bullet.sample.scss

@@ -0,0 +1,7 @@
+@use '../../../../node_modules/@swisspost/design-system-styles/core' as post;
+
+.my-component {
+  ul {
+    @include post.list-bullet();
+  }
+}

packages/documentation/src/stories/components/list/list-inline.sample.scss

@@ -0,0 +1,7 @@
+@use '../../../../node_modules/@swisspost/design-system-styles/core' as post;
+
+.my-component {
+  ul {
+    @include post.list-inline();
+  }
+}

packages/documentation/src/stories/components/list/list-number.sample.scss

@@ -0,0 +1,7 @@
+@use '../../../../node_modules/@swisspost/design-system-styles/core' as post;
+
+.my-component {
+  ul {
+    @include post.list-number();
+  }
+}

packages/documentation/src/stories/foundations/typography/list/list.docs.mdx → packages/documentation/src/stories/components/list/list.docs.mdx

@@ -7,7 +7,7 @@ import SampleListNumber from './list-number.sample.scss?raw';
 
 <Meta of={ListStories} />
 
-# Lists
+# List
 
 <p className="lead">Use lists to group a collection of related items.</p>
 

packages/documentation/src/stories/foundations/typography/list/list.stories.ts → packages/documentation/src/stories/components/list/list.stories.ts

@@ -4,7 +4,7 @@ import { MetaExtended } from '@root/types';
 
 const meta: MetaExtended = {
   id: 'e76192bb-b2eb-487a-b9c1-ef938bccdfc4',
-  title: 'Foundations/Typography/Lists',
+  title: 'Components/List',
   tags: ['package:Styles'],
   parameters: {
     badges: [],

packages/documentation/src/stories/foundations/typography/highlighted-text/highlighted-text.docs.mdx → packages/documentation/src/stories/components/text-highlighted/text-highlighted.docs.mdx

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

packages/documentation/src/stories/foundations/typography/highlighted-text/highlighted-text.stories.ts → packages/documentation/src/stories/components/text-highlighted/text-highlighted.stories.ts

@@ -4,7 +4,7 @@ import { MetaExtended } from '@root/types';
 
 const meta: MetaExtended = {
   id: '88318ccf-be8d-4bdf-b8dc-06b0b78e5e3d',
-  title: 'Foundations/Typography/Highlighted Text',
+  title: 'Components/Text Highlighted',
   tags: ['package:Styles'],
   parameters: {
     badges: [],
@@ -22,7 +22,9 @@ type Story = StoryObj;
 export const Default: Story = {
   render: () => html`
     <p class="text-highlighted">
-      Use this component when you need to emphasize important information or make a section more noticeable to readers. The highlighted style helps the content break away from the normal text flow.
+      Use this component when you need to emphasize important information or make a section more
+      noticeable to readers. The highlighted style helps the content break away from the normal text
+      flow.
     </p>
   `,
 };