Merge branch 'main' into 2023-11-19-update-icons

.changeset/clean-files-wonder.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added attached stories to changelog and search-icons pages to fix "Edit this page on Github" feature.

.changeset/kind-turkeys-join.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': minor
+---
+
+Added link to new documentation

.github/actions/artifact-download/action.yaml

@@ -44,13 +44,16 @@ runs:
       uses: dawidd6/action-download-artifact@v2
       with:
         name: ${{ inputs.name }}
-        path: ${{ inputs.folder }}
         run_id: ${{ github.event.workflow_run.id }}
         workflow_conclusion: success
 
     - name: Unzip artifacts
       shell: bash
-      run: unzip artifacts.zip
+      run: unzip artifacts.zip -d ${{ inputs.folder }}
+
+    - name: Clean up
+      shell: bash
+      run: rm -r artifacts.zip
 
     - name: Create outputs
       id: build

.github/actions/artifact-upload/action.yaml

@@ -37,10 +37,10 @@ runs:
 
     - name: Zip artifact folder
       shell: bash
-      run: zip artifacts.zip ${{ inputs.folder }} -r
+      run: cd ${{ inputs.folder }} && zip artifacts.zip . -r
 
     - name: Upload artifacts
       uses: actions/upload-artifact@v3
       with:
         name: ${{ inputs.name }}
-        path: artifacts.zip
+        path: ${{ inputs.folder }}/artifacts.zip

.github/workflows/build-documentation.yaml

@@ -42,9 +42,3 @@ jobs:
         with:
           name: design-system-documentation
           folder: packages/documentation/storybook-static
-
-      - name: Upload internet header package
-        uses: ./.github/actions/artifact-upload
-        with:
-          name: internet-header
-          folder: packages/internet-header/dist

.github/workflows/deploy-demo.yaml

@@ -34,6 +34,8 @@ jobs:
           name: design-system-demo
           folder: build-output
 
+      - run: ls -R
+
       - name: Deploy demo app to netlify
         uses: swisspost/design-system/.github/actions/deploy-to-netlify@main
         id: deploy

package.json

@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "2.26.2",
-    "start-server-and-test": "2.0.2"
+    "start-server-and-test": "2.0.3"
   },
   "optionalDependencies": {
     "@web-types/lit": "2.0.0-3"

packages/components-react/package.json

@@ -22,13 +22,13 @@
     "@swisspost/design-system-components": "workspace:1.6.2"
   },
   "devDependencies": {
-    "@types/node": "18.18.9",
+    "@types/node": "18.18.10",
     "@types/react": "18.2.37",
     "@types/react-dom": "18.2.15",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
-    "eslint": "8.53.0",
-    "eslint-config-standard-with-typescript": "39.1.1",
+    "eslint": "8.54.0",
+    "eslint-config-standard-with-typescript": "40.0.0",
     "eslint-plugin-import": "2.29.0",
     "eslint-plugin-n": "16.3.1",
     "eslint-plugin-promise": "6.1.1",

packages/components/package.json

@@ -56,7 +56,7 @@
     "bootstrap": "5.3.2",
     "cypress": "13.5.1",
     "cypress-storybook": "0.5.1",
-    "eslint": "8.53.0",
+    "eslint": "8.54.0",
     "eslint-plugin-react": "7.33.2",
     "jest": "27.5.1",
     "jest-cli": "27.5.1",

packages/demo/package.json

@@ -28,7 +28,7 @@
     "@swisspost/design-system-intranet-header": "workspace:5.0.4",
     "@swisspost/design-system-styles": "workspace:6.4.4",
     "bootstrap": "5.3.2",
-    "core-js": "3.33.2",
+    "core-js": "3.33.3",
     "highlight.js": "11.9.0",
     "ngx-highlightjs": "10.0.0",
     "ngx-toastr": "17.0.2",
@@ -51,9 +51,9 @@
     "@types/jasmine": "5.1.2",
     "@types/jasminewd2": "2.0.13",
     "@types/node": "18.17.19",
-    "@typescript-eslint/eslint-plugin": "6.11.0",
-    "@typescript-eslint/parser": "6.11.0",
-    "eslint": "8.53.0",
+    "@typescript-eslint/eslint-plugin": "6.12.0",
+    "@typescript-eslint/parser": "6.12.0",
+    "eslint": "8.54.0",
     "jasmine-core": "5.1.1",
     "jasmine-marbles": "0.9.2",
     "jasmine-spec-reporter": "7.0.0",

packages/demo/src/app/home/home.component.html

@@ -51,6 +51,26 @@ <h2 class="font-curve-large">Design System</h2>
 
 <div class="bg-light py-5">
   <div class="container">
+    <div class="alert alert-info" role="alert">
+      <h4 class="alert-heading">
+        The Swiss Post Design System documentation is migrating towards a new and revised version
+        based on storybook.
+      </h4>
+      <p>
+        Since it is still a beta version it is not yet complete, but in general the new storybook
+        version gives you a much better overview of the components and their possible states.
+      </p>
+      <div class="mt-3">
+        <a
+          href="https://next.design-system.post.ch"
+          rel="noopener"
+          target="_blank"
+          class="btn btn-primary"
+        >
+          🚀 Take me to the future!
+        </a>
+      </div>
+    </div>
     <div class="alert alert-primary" role="alert">
       <h4 class="alert-heading">The Swiss Post Design System is now compatible with Angular 16!</h4>
       <p>

packages/documentation/.storybook/blocks/footer.tsx

@@ -35,12 +35,14 @@ function getGitHubUrl(path: String) {
   return `${BASEURL}${path.replace(/^\./, '').replace(/\.stories\.ts$/, '.docs.mdx')}`;
 }
 
-export default (params: { pathToStoryFile: String }) => (
+export default (params: { pathToStoryFile?: String }) => (
   <>
     <div className="container mt-huge font-size-18 text-end">
-      <a href={getGitHubUrl(params.pathToStoryFile)} target="_blank" rel="noopener">
-        Edit this page on GitHub
-      </a>
+      {params.pathToStoryFile && (
+        <a href={getGitHubUrl(params.pathToStoryFile)} target="_blank" rel="noopener">
+          Edit this page on GitHub
+        </a>
+      )}
     </div>
     <footer className="docs-footer mt-huge bg-light">
       <div className="container">

packages/documentation/.storybook/blocks/layout.tsx

@@ -3,6 +3,7 @@ import { PropsWithChildren } from 'react';
 import '../styles/layout.scss';
 import Footer from './footer';
 import Header from './header';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 function shouldShowHeader() {
   return new URLSearchParams(window.location.search).get('id') === 'home--docs';
@@ -18,13 +19,14 @@ export default (props: PropsWithChildren<DocsContainerProps>) => {
     context.channel.data.docsPrepared[0].parameters.layout === 'fullscreen'
       ? 'container-fluid'
       : 'container';
-  const pathToStoryFile = context.storyIdToCSFFile.values().next().value.meta.parameters.fileName;
+  const pathToStoryFile = context?.storyIdToCSFFile?.values()?.next()?.value?.meta
+    ?.parameters?.fileName;
   return (
     <DocsContainer context={context}>
       <Unstyled>
         {shouldShowHeader() && <Header />}
         <div className={container}>{children}</div>
-        {shouldShowFooter() && <Footer pathToStoryFile={pathToStoryFile} />}
+        {shouldShowFooter() && <Footer pathToStoryFile={ifDefined(pathToStoryFile)} />}
       </Unstyled>
     </DocsContainer>
   );

packages/documentation/src/stories/components/input/input.docs.mdx

@@ -28,6 +28,8 @@ The following examples show the different characteristics of the component. Thes
 Wrap a pair of `<input>` and `<label>` elements in a `.form-floating` container to enable floating labels.<br/>
 But note that the `<input>` element must come first, so we can ensure the correct styles.
 
+Ensure that `placeholder` attribute is set (even with an empty value) so the label can act as a placeholder when no value is set.
+
     <Canvas of={InputStories.FloatingLabel} />
 
 ### Sizing

packages/documentation/src/stories/icons/search-icons/search-icons.blocks.tsx

@@ -48,6 +48,7 @@ export class Search extends React.Component {
               id="IconSearchFilter_Freetext"
               type="text"
               className="form-control"
+              placeholder=""
               value={this.state.freetext}
               onChange={this.searchFreetext.bind(this)}
               ref={this.freetextRef}

packages/documentation/src/stories/icons/search-icons/search-icons.docs.mdx

@@ -1,7 +1,8 @@
 import { Meta } from '@storybook/blocks';
 import { Search } from './search-icons.blocks';
+import * as SearchIcons from './search-icons.stories';
 
-<Meta title="Icons/Search for Icons" />
+<Meta of={SearchIcons} />
 
 # Search for icons
 

packages/documentation/src/stories/icons/search-icons/search-icons.stories.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Icons/Search for Icons',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

packages/documentation/src/stories/misc/changelog/changelog.docs.mdx

@@ -1,9 +1,8 @@
 import { Markdown, Meta } from '@storybook/blocks';
 import changelog from '../../../../../styles/CHANGELOG.md?raw';
 import { CodeOrSourceMdx } from '../../utilities/markdown/CodeOrSourceMdx';
+import ChangelogStories from './changelog.stories';
 
-<Meta
-  title="Misc/Changelog"
-/>
+<Meta of={ChangelogStories}/>
 
 <Markdown options={{ overrides: { code: CodeOrSourceMdx } }}>{changelog}</Markdown>

packages/documentation/src/stories/misc/changelog/changelog.stories.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Misc/Changelog',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

packages/icons/package.json

@@ -31,15 +31,15 @@
     "@tsconfig/node18": "18.2.2",
     "@types/jest": "29.5.8",
     "@types/mock-fs": "4.13.4",
-    "@types/node": "18.18.9",
+    "@types/node": "18.18.10",
     "@types/node-fetch": "2.6.9",
     "dotenv": "16.3.1",
     "http-server": "14.1.1",
     "https-proxy-agent": "7.0.2",
     "jest": "29.7.0",
     "mock-fs": "5.2.0",
     "node-fetch": "2.7.0",
-    "svgo": "3.0.3",
+    "svgo": "3.0.4",
     "ts-jest": "29.1.1",
     "ts-node": "10.9.1",
     "typescript": "5.2.2"

packages/internet-header/package.json

@@ -61,7 +61,7 @@
     "@types/iframe-resizer": "3.5.12",
     "@types/jest": "27.5.2",
     "@types/jquery": "3.5.27",
-    "@types/node": "18.18.9",
+    "@types/node": "18.18.10",
     "@types/throttle-debounce": "5.0.2",
     "babel-loader": "9.1.3",
     "bootstrap": "5.3.2",
@@ -76,7 +76,7 @@
     "rollup-plugin-scss": "4.0.0",
     "rollup-plugin-visualizer": "5.9.2",
     "sass": "1.69.5",
-    "start-server-and-test": "2.0.2",
+    "start-server-and-test": "2.0.3",
     "ts-jest": "27.1.5",
     "typescript": "4.9.5"
   }

packages/intranet-header-workspace/package.json

@@ -37,10 +37,10 @@
     "@angular/cli": "16.2.10",
     "@angular/compiler-cli": "16.2.12",
     "@types/jasmine": "5.1.2",
-    "@types/node": "18.18.9",
+    "@types/node": "18.18.10",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
-    "eslint": "8.53.0",
+    "eslint": "8.54.0",
     "jasmine-core": "5.1.1",
     "karma": "6.4.2",
     "karma-chrome-launcher": "3.2.0",

packages/styles/package.json

@@ -45,7 +45,7 @@
     "@percy/cli": "1.27.4",
     "@percy/cypress": "3.1.2",
     "@swisspost/design-system-icons": "workspace:1.0.14",
-    "@types/node": "18.18.9",
+    "@types/node": "18.18.10",
     "autoprefixer": "10.4.16",
     "copyfiles": "2.4.1",
     "cypress": "13.5.1",