chore(documentation): Rework getting started section and add Angular CUSTOM_ELEMENTS_SCHEMA info

.changeset/old-pumas-sit.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Reworked the getting-started section to better understand the different packages and add more info about Angular.

packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html

@@ -140,7 +140,7 @@ <h5 class="card-title">Card title</h5>
 </div>
 
 <h3>Card columns</h3>
-<p>Card columns can be checked out in the swiss post example below.</p>
+<p>Card columns can be checked out in the Swiss post example below.</p>
 
 <p>
   Default

packages/documentation/.storybook/preview.ts

@@ -25,13 +25,14 @@ const preview: Preview = {
 
           // Category - Getting Started
           'Getting Started',
-          ['Styles', 'Components', 'Components-Angular', 'Compatibility'],
+          ['Getting Started', 'Angular', 'Compatibility', 'Packages'],
 
           // Category - Foundations
           'Foundations',
           [
             'Typography',
             'Color',
+            'Icons',
             'Layout',
             ['Breakpoints', 'Containers', 'Grid', 'Columns', 'TODOS'],
             'Elevation',
@@ -40,41 +41,6 @@ const preview: Preview = {
 
           // Category - Components
           'Components',
-          [
-            'Accordion',
-            'Alert',
-            'Badge',
-            'Blockquote',
-            'Button',
-            'Button Group',
-            'Cards',
-            'Carousel',
-            'Collapsible',
-            'Datepicker',
-            'Dropdown',
-            'Forms',
-            'Heading',
-            'Icons',
-            ['Getting Started'],
-            'Internet Header',
-            ['Getting Started', 'Header'],
-            'Intranet Header',
-            'Modal',
-            'Notification overlay',
-            'Pagination',
-            'Popover',
-            'Progressbar',
-            'Spinner',
-            'Stepper',
-            'Subnavigation',
-            'Table',
-            'Tabs',
-            'Timepicker',
-            'Toast',
-            'Tooltip',
-            'Topic Teaser',
-            'Typeahead',
-          ],
 
           // Category - Patterns
           'Patterns',

packages/documentation/.storybook/styles/preview.scss

@@ -38,6 +38,9 @@
     h6 {
       margin-block: 1rem;
     }
+    .table,.table-responsive{
+      margin-block: 1.5rem 1rem;
+    }
   }
 
   .sbdocs-content .container {

packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts

@@ -64,7 +64,7 @@ const meta: Meta = {
         'The icon to display in the alert. By default, the icon depends on the alert type.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'To use a custom icon, you must first ' +
-        '<a href="?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
+        '<a href="/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
         '.</span>',
       if: {
         arg: 'noIcon',

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

@@ -138,7 +138,7 @@ const meta: Meta = {
         'Defines a custom icon.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'To use a custom icon, you must first ' +
-        '<a href="?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
+        '<a href="/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
         '.</span>',
       if: {
         arg: 'tag',

packages/documentation/src/stories/components/icons/components/icon.stories.ts → packages/documentation/src/stories/components/icons/icon.stories.ts

@@ -1,14 +1,14 @@
 import { spread } from '@open-wc/lit-helpers';
 import { Args, Meta, StoryObj } from '@storybook/web-components';
-import { Components } from '@swisspost/design-system-components';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { BADGE } from '../../../../../.storybook/constants';
-import { spreadArgs } from '../../../../utils';
+import { BADGE } from '../../../../.storybook/constants';
+import { spreadArgs } from '../../../utils';
+import { Components } from '@swisspost/design-system-components/src';
 
 const meta: Meta = {
   id: '0dcfe3c0-bfc0-4107-b43b-7e9d825b805f',
-  title: 'Components/Icons/Icon Component',
+  title: 'Components/Icon',
   component: 'post-icon',
   parameters: {
     badges: [BADGE.NEEDS_REVISION, BADGE.SINCE_V1],

packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.stories.ts → packages/documentation/src/stories/components/internet-header/breadcrumbs/breadcrumbs.stories.ts

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { spread } from '@open-wc/lit-helpers';
-import { BADGE } from '../../../../../../.storybook/constants';
-import { getAttributes } from '../../../../../utils';
+import { BADGE } from '../../../../../.storybook/constants';
+import { getAttributes } from '../../../../utils';
 import customItems from './overrides/custom-items';
 
 const meta: Meta<HTMLSwisspostInternetBreadcrumbsElement> = {

packages/documentation/src/stories/components/internet-header/components/footer/footer.stories.ts → packages/documentation/src/stories/components/internet-header/footer/footer.stories.ts

@@ -1,6 +1,6 @@
 import { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { BADGE } from '../../../../../../.storybook/constants';
+import { BADGE } from '../../../../../.storybook/constants';
 import customFooterConfig from './custom-config/custom-footer-config';
 import { spread } from '@open-wc/lit-helpers';
 

packages/documentation/src/stories/components/internet-header/components/header/header.stories.ts → packages/documentation/src/stories/components/internet-header/header/header.stories.ts

@@ -1,7 +1,7 @@
 import { Args, Meta, StoryObj } from '@storybook/web-components';
-import { BADGE } from '../../../../../../.storybook/constants';
+import { BADGE } from '../../../../../.storybook/constants';
 import { html } from 'lit';
-import { spreadArgs } from '../../../../../utils';
+import { spreadArgs } from '../../../../utils';
 import customConfig from './config/custom-config';
 import osFlyoutOverrides from './config/os-flyout-overrides';
 import languageSwitchOverrides from './config/language-switch-overrides';

packages/documentation/src/stories/components/intranet-header/intranet-header.docs.mdx

@@ -8,9 +8,7 @@ import SamplePostweb from './intranet-header-postweb.sample.html?raw';
 
 <Meta of={IntranetHeaderStories} />
 
-# @swisspost/design-system-intranet-header
-
-[![npm version](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header.svg)](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header)
+# Intranet-header
 
 <div className="alert alert-info alert-md">
   <h2 className="alert-heading">Angular only component</h2>
@@ -34,7 +32,7 @@ The Header Angular component for internal usage.
 
 ## Installation
 
-<Source code={`npm install @swisspost/design-system-intranet-header`} language="bash" />
+See <a href="/?path=/docs/7068be42-1a20-4a34-9e79-7fb7f9f2940f--docs">Internet-header package page</a>
 
 ## Usage
 

packages/documentation/src/stories/components/notification-overlay/notification-overlay.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'aab3f0df-08ca-4e33-90eb-77ffda6528db',
   title: 'Components/Notification overlay',
   parameters: {
     badges: [BADGE.WEB_COMPONENT_CANDIDATE],

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

@@ -3,6 +3,7 @@ import { html } from 'lit/static-html.js';
 import { BADGE } from '../../../../.storybook/constants';
 
 const meta: Meta = {
+  id: 'd0e645d0-3bf2-4b00-967a-5a1343107f60',
   title: 'Components/Spinner',
   render,
   decorators: [story => generateDecorators(story)],