Merge branch 'chore/rename-components-angular' into feat/1381-compone…

…nts-release-web-components-as-angular-components
swisspost · Oct 18, 2023 · a2227b5 · a2227b5
2 parents bca9b49 + 8c68a92
commit a2227b5
Show file tree

Hide file tree

Showing 26 changed files with 752 additions and 156 deletions.
diff --git a/.changeset/clever-elephants-help.md b/.changeset/clever-elephants-help.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/internet-header': patch
+---
+
+Added hide-buttons prop to hide all breadcrumbs buttons.
diff --git a/.changeset/seven-bugs-appear.md b/.changeset/seven-bugs-appear.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed tabs count announcement with VoiceOver.
diff --git a/.changeset/violet-cycles-ring.md b/.changeset/violet-cycles-ring.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added a docs page for our grid-system.
diff --git a/.github/workflows/release-documentation.yaml b/.github/workflows/release-documentation.yaml
@@ -44,6 +44,7 @@ jobs:
         run: pnpm --filter "design-system-documentation..." build
 
       - name: Install netlify cli
+        if: steps.check.outputs.changed == 'true'
         run: pnpm -g i netlify-cli@15
 
       - name: Publish documentation to netlify

diff --git a/packages/components/src/components/post-tab-header/post-tab-header.tsx b/packages/components/src/components/post-tab-header/post-tab-header.tsx
@@ -29,17 +29,9 @@ export class PostTabHeader {
   render() {
     return (
       <Host data-version={version}>
-        <li class="nav-item">
-          <a
-            aria-selected="false"
-            class="tab-title nav-link"
-            href="#"
-            id={this.tabId}
-            role="tab"
-          >
-            <slot/>
-          </a>
-        </li>
+        <a aria-selected="false" role="tab" class="tab-title" href="#" id={this.tabId}>
+          <slot />
+        </a>
       </Host>
     );
   }

diff --git a/packages/components/src/components/post-tabs/post-tabs.tsx b/packages/components/src/components/post-tabs/post-tabs.tsx
@@ -1,4 +1,4 @@
-import { Component, Host, h, Element, Method, Event, EventEmitter, Prop } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
 import { version } from '../../../package.json';
 import { fadeIn, fadeOut } from '../../animations';
 
@@ -55,7 +55,9 @@ export class PostTabs {
     }
 
     const previousTab = this.activeTab;
-    const newTab : HTMLPostTabHeaderElement = this.host.querySelector(`post-tab-header[panel=${panelName}]`);
+    const newTab: HTMLPostTabHeaderElement = this.host.querySelector(
+      `post-tab-header[panel=${panelName}]`,
+    );
     this.activateTab(newTab);
 
     // if a panel is currently being displayed, remove it from the view and complete the associated animation
@@ -83,6 +85,7 @@ export class PostTabs {
 
     this.tabChange.emit(this.activeTab.panel);
   }
+
   private moveMisplacedTabs() {
     if (!this.tabs) return;
 
@@ -159,18 +162,16 @@ export class PostTabs {
   }
 
   private getPanel(name: string): HTMLPostTabPanelElement {
-    return this.host.querySelector(
-      `post-tab-panel[name=${name}]`
-    );
+    return this.host.querySelector(`post-tab-panel[name=${name}]`);
   }
 
   render() {
     return (
       <Host data-version={version}>
         <div class="tabs-wrapper">
-          <ul class="tabs nav" role="tablist">
+          <div class="tabs" role="tablist">
             <slot name="tabs" onSlotchange={() => this.enableTabs()} />
-          </ul>
+          </div>
         </div>
         <div class="tab-content">
           <slot onSlotchange={() => this.moveMisplacedTabs()} />

diff --git a/packages/documentation/.storybook/manager-head.html b/packages/documentation/.storybook/manager-head.html
@@ -1,18 +1,18 @@
 <script src="/assets/scripts/analytics-helper.js"></script>
 
 <script data-id="GtmConstants">
-  window.gtm.setConstant('ENVIRONMENTS', {
+  window?.gtm?.setConstant('ENVIRONMENTS', {
     dev: '%STORYBOOK_GTM_PAGE_CONTEXT_ENVIRONMENT_DEV%',
     int: '%STORYBOOK_GTM_PAGE_CONTEXT_ENVIRONMENT_INT%',
     prod: '%STORYBOOK_GTM_PAGE_CONTEXT_ENVIRONMENT_PROD%',
   });
 
-  window.gtm.setConstant('ENVIRONMENT_FALLBACK', '%STORYBOOK_GTM_PAGE_CONTEXT_ENVIRONMENT_FALLBACK%');
+  window?.gtm?.setConstant('ENVIRONMENT_FALLBACK', '%STORYBOOK_GTM_PAGE_CONTEXT_ENVIRONMENT_FALLBACK%');
 </script>
 
 <script data-id="GoogleTagManager">
   // Base
-  (function (w, d, s, l, i) {
+  (function(w, d, s, l, i) {
     w[l] = w[l] || [];
     w[l].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });
 
@@ -28,7 +28,7 @@
   window.dataLayer = window.dataLayer || [];
 
   // Page Context
-  window.addEventListener('storybook:ready', function () {
+  window.addEventListener('storybook:ready', function() {
     window.dataLayer.push({
       event: 'page_context', // constant, required
       spa: 'true', // constant, required
@@ -47,7 +47,7 @@
   });
 
   // Page Change
-  window.addEventListener('storybook:routeChange', function () {
+  window.addEventListener('storybook:routeChange', function() {
     window.dataLayer.push({
       event: 'page_change', // constant, required
       content_language: '%STORYBOOK_GTM_PAGE_CONTEXT_CONTENT_LANGUAGE%', // required
@@ -74,19 +74,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" data-chromatic="ignore" style="position: absolute; width: 0px; height: 0px">
   <symbol id="icon--folder" viewBox="0 0 32 32">
     <path fill="currentColor" stroke="currentColor" stroke-width="1"
-      d="M28.667 8H14.934c-.533 0-.933-.133-1.2-.4l-2.933-2.8c-.533-.533-1.333-.8-2.133-.8H3.335c-1.067 0-2 .933-2 2v22h29.333V10c0-1.067-.933-2-2-2zm.666 18.667H2.666V6c0-.4.267-.667.667-.667h5.333c.533 0 .933.133 1.2.4l2.8 2.8c.667.533 1.467.8 2.267.8h13.733c.4 0 .667.267.667.667v16.667z" />
+          d="M28.667 8H14.934c-.533 0-.933-.133-1.2-.4l-2.933-2.8c-.533-.533-1.333-.8-2.133-.8H3.335c-1.067 0-2 .933-2 2v22h29.333V10c0-1.067-.933-2-2-2zm.666 18.667H2.666V6c0-.4.267-.667.667-.667h5.333c.533 0 .933.133 1.2.4l2.8 2.8c.667.533 1.467.8 2.267.8h13.733c.4 0 .667.267.667.667v16.667z" />
   </symbol>
   <symbol id="icon--component" viewBox="0 0 32 32">
     <path fill="currentColor" stroke="currentColor" stroke-width="1"
-      d="M28 9.333V4.266c0-.8-.8-1.6-1.6-1.6h-5.067c-.667 0-1.2.267-1.733.667l-1.733 1.733c-.133.133-.4.267-.8.267H5.6c-.8 0-1.6.8-1.6 1.6v2.4H0v20h32v-20h-4zm-22.667-2.4c0-.133.133-.267.267-.267h11.467c.667 0 1.2-.267 1.733-.667l1.733-1.733c.267-.133.533-.267.8-.267h4.933c.267 0 .4.133.4.267v5.067H5.333v-2.4zM30.667 28H1.334V10.667h29.333V28z" />
+          d="M28 9.333V4.266c0-.8-.8-1.6-1.6-1.6h-5.067c-.667 0-1.2.267-1.733.667l-1.733 1.733c-.133.133-.4.267-.8.267H5.6c-.8 0-1.6.8-1.6 1.6v2.4H0v20h32v-20h-4zm-22.667-2.4c0-.133.133-.267.267-.267h11.467c.667 0 1.2-.267 1.733-.667l1.733-1.733c.267-.133.533-.267.8-.267h4.933c.267 0 .4.133.4.267v5.067H5.333v-2.4zM30.667 28H1.334V10.667h29.333V28z" />
     <path fill="currentColor" stroke="currentColor" stroke-width="1" d="M10.667 14.667h10.667V16H10.667v-1.333z" />
   </symbol>
   <symbol id="icon--document" viewBox="0 0 32 32">
     <path fill="currentColor" stroke="currentColor" stroke-width="1"
-      d="M5.333 2.667v26.666H20l6.667-6.666v-20H5.333zM20.667 26.78v-3.554h3.554l-3.554 3.554zm4.666-4.888h-6V28H6.667V4h18.666v17.893zM22.667 8.667H9.333V7.333h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334z" />
+          d="M5.333 2.667v26.666H20l6.667-6.666v-20H5.333zM20.667 26.78v-3.554h3.554l-3.554 3.554zm4.666-4.888h-6V28H6.667V4h18.666v17.893zM22.667 8.667H9.333V7.333h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334z" />
   </symbol>
   <symbol id="icon--bookmarkhollow" viewBox="0 0 32 32">
     <path fill="currentColor" stroke="currentColor" stroke-width="1"
-      d="M20.9 1.3H4.6c-1.1 0-2 .9-2 2v16l4.098-3.21v.338H6.7V30.6H28V8.4l-7.1-7.1zm.4 6.6V3.6l2.2 2.2L25.7 8h-4.4v-.1zM4.6 2.7h8.1c.3 0 .6.3.6.6v13.3l-3.8-3-.8-.6-.8.6-3.8 3V3.3c-.1-.3.2-.6.5-.6zm22.1 26.7H8V15.2l-.001.001v-.13L8.6 14.6l6 4.7v-16c0-.2 0-.4-.1-.6H20v6.6h6.7v20.1z" />
+          d="M20.9 1.3H4.6c-1.1 0-2 .9-2 2v16l4.098-3.21v.338H6.7V30.6H28V8.4l-7.1-7.1zm.4 6.6V3.6l2.2 2.2L25.7 8h-4.4v-.1zM4.6 2.7h8.1c.3 0 .6.3.6.6v13.3l-3.8-3-.8-.6-.8.6-3.8 3V3.3c-.1-.3.2-.6.5-.6zm22.1 26.7H8V15.2l-.001.001v-.13L8.6 14.6l6 4.7v-16c0-.2 0-.4-.1-.6H20v6.6h6.7v20.1z" />
   </symbol>
-</svg>
+</svg>
diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
@@ -24,7 +24,14 @@ const preview: Preview = {
           'Getting Started',
           ['Styles', 'Components'],
           'Foundations',
-          ['Typography', 'Color', 'Layout', 'Elevation', 'Accessibility'],
+          [
+            'Typography',
+            'Color',
+            'Layout',
+            ['Breakpoints', 'Grid', 'TODOS'],
+            'Elevation',
+            'Accessibility',
+          ],
           'Components',
           'Internet Header',
           ['Getting Started', 'Migration Guide', 'Header', 'Breadcrumbs', 'Footer'],

diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -30,8 +30,7 @@
     "@swisspost/design-system-icons": "workspace:1.0.12",
     "@swisspost/design-system-styles": "workspace:6.4.1",
     "@swisspost/internet-header": "workspace:1.10.0",
-    "bootstrap": "5.3.2",
-    "vite": "4.4.11"
+    "bootstrap": "5.3.2"
   },
   "devDependencies": {
     "@geometricpanda/storybook-addon-badges": "2.0.0",
@@ -53,12 +52,13 @@
     "@storybook/theming": "7.4.5",
     "@storybook/web-components": "7.4.5",
     "@storybook/web-components-vite": "7.4.5",
+    "@types/css-modules": "1.0.3",
     "@types/mdx": "2.0.7",
     "@types/react": "18.2.22",
     "@types/react-syntax-highlighter": "15.5.7",
     "cypress": "13.3.0",
-    "lit": "2.8.0",
-    "lit-html": "2.8.0",
+    "lit": "3.0.0",
+    "lit-html": "3.0.0",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/packages/documentation/src/stories/components/choice-card/choice-card.ts b/packages/documentation/src/stories/components/choice-card/choice-card.ts
@@ -142,7 +142,7 @@ export const choiceCardMeta: Meta = {
 
 let id_ct = 1;
 
-export const choiceCardDefault = (args: Args, name = 'control') => {
+export const choiceCardDefault = (args: Args) => {
   const [_, updateArgs] = useArgs();
 
   // Conditional classes
@@ -194,18 +194,18 @@ export const choiceCardDefault = (args: Args, name = 'control') => {
   };
 
   return html`
-    <div class=${cardClassMap}>
+    <div class="${cardClassMap}">
       <input
-        id=${id}
-        name="${args.type}-button-card-${name}"
-        class=${inputClasses}
-        type=${args.type}
-        ?disabled=${args.disabled}
-        .checked=${args.checked}
-        ?checked=${args.checked}
-        @input=${_handleInput}
-        @focus=${_handleFocus}
-        @blur=${_handleBlur}
+        id="${id}"
+        name="${args.type}-button-card-${args.inputName ?? 'control'}"
+        class="${inputClasses}"
+        type="${args.type}"
+        ?disabled="${args.disabled}"
+        .checked="${args.checked}"
+        ?checked="${args.checked}"
+        @input="${_handleInput}"
+        @focus="${_handleFocus}"
+        @blur="${_handleBlur}"
       />
       <label id="label-${id}" class="form-check-label" for="${id}">
         <span>${args.label}</span>
@@ -221,10 +221,14 @@ export const choiceCardGroup = (args: Args) => {
 
   const col = (label: string) => html`
     <div class="col-sm-6">
-      ${choiceCardDefault(
-        { ...args, label, checked: false, focused: false, validation: args.groupValidation },
-        'group',
-      )}
+      ${choiceCardDefault({
+        ...args,
+        label,
+        checked: false,
+        focused: false,
+        validation: args.groupValidation,
+        inputName: 'group',
+      })}
     </div>
   `;
 

diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss
@@ -1,21 +1,12 @@
 @use 'sass:list';
 @use 'sass:map';
 @use '@swisspost/design-system-styles/core' as post;
-
-$breakpointNames: (
-  xs: Extra small,
-  sm: Small,
-  rg: Regular,
-  md: Medium,
-  lg: Large,
-  xl: Extra large,
-  xxl: Extra extra large,
-);
+@use '../layout.shared' as shared;
 
 :export {
   @each $breakpoint, $value in post.$grid-breakpoints {
     $i: list.index(post.$grid-breakpoints, $breakpoint $value);
-    $name: map.get($breakpointNames, $breakpoint) or $breakpoint;
+    $name: map.get(shared.$breakpointNames, $breakpoint) or $breakpoint;
 
     breakpoint_#{$breakpoint}_name: $name;
 

diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid-container.sample.html b/packages/documentation/src/stories/foundation/layout/grid/grid-container.sample.html
@@ -0,0 +1,7 @@
+<body>
+  <header>...</header>
+  <main>
+    <div class="container">...</div>
+  </main>
+  <footer>...</footer>
+</body>
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid-scss-mixins.sample.scss b/packages/documentation/src/stories/foundation/layout/grid/grid-scss-mixins.sample.scss
@@ -0,0 +1,12 @@
+// Creates a wrapper for a series of columns
+@include make-row();
+
+// Make the column element grid-ready (applying everything but the width)
+@include make-col-ready();
+
+// Without optional size values, the mixin will create equal columns (similar to using .col)
+@include make-col();
+@include make-col($size, $columns: $grid-columns);
+
+// Offset with margins
+@include make-col-offset($size, $columns: $grid-columns);