swisspost · oliverschuerch · Nov 8, 2023 · Nov 3, 2023 · Nov 3, 2023 · Nov 3, 2023
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+We have extended the `@swisspost/design-system-components` package getting-started docs page to show multiple ways how it can be used/imported in different project setups.
@@ -6,7 +6,7 @@
   "main": "loader/index.cjs.js",
   "module": "loader/index.js",
   "es2017": "loader/index.2017.js",
-  "types": "dist/types/components.d.ts",
+  "types": "loader/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/post-components/post-components.esm.js",

@@ -1 +1,10 @@
 export { Components, JSX } from './components';
+
+// Export every single component so it gets included in the dist output
+export { PostAlert } from './components/post-alert/post-alert';
+export { PostCollapsible } from './components/post-collapsible/post-collapsible';
+export { PostIcon } from './components/post-icon/post-icon';
+export { PostTabs } from './components/post-tabs/post-tabs';
+export { PostTabHeader } from './components/post-tab-header/post-tab-header';
+export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';
+export { PostTooltip } from './components/post-tooltip/post-tooltip';
@@ -20,10 +20,6 @@ export const config: Config = {
     {
       type: 'docs-readme',
     },
-    {
-      type: 'www',
-      serviceWorker: null, // disable service workers
-    },
     {
       type: 'docs-json',
       file: 'dist/docs.json',

@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/@swisspost/design-system-components/dist/index.js"></script>
+  </head>
+  <body>
+    <post-icon name="1001"></post-icon>
+  </body>
+</html>
@@ -0,0 +1,11 @@
+<html>
+  <head>
+    <script type="module">
+      import { defineCustomElements as definePostComponents } from 'https://cdn.jsdelivr.net/npm/@swisspost/design-system-components/loader/index.js';
+      definePostComponents();
+    </script>
+  </head>
+  <body>
+    <post-icon name="1001"></post-icon>
+  </body>
+</html>
@@ -0,0 +1,11 @@
+<html>
+  <head>
+    <script type="module">
+      import { defineCustomElement as definePostIcon } from 'https://cdn.jsdelivr.net/npm/@swisspost/design-system-components/dist/components/post-icon.js';
+      definePostIcon();
+    </script>
+  </head>
+  <body>
+    <post-icon name="1001"></post-icon>
+  </body>
+</html>
@@ -0,0 +1,2 @@
+import { defineCustomElements as definePostComponents } from '@swisspost/design-system-components/loader';
+definePostComponents();
@@ -1,3 +1,2 @@
 import { defineCustomElement as definePostIcon } from '@swisspost/design-system-components/dist/components/post-icon';
-
 definePostIcon();
@@ -1,7 +1,10 @@
 import { Meta, Source } from '@storybook/blocks';
 import * as GettingStartedStories from './components.stories';
-import SampleUseAll from './components-use-all.sample?raw';
-import SampleUseSpecific from './components-use-specific.sample?raw';
+import SampleCdnAll from './components-cdn-all.sample.html?raw';
+import SampleCdnEsmAll from './components-cdn-esm-all.sample.html?raw';
+import SampleCdnEsmSpecific from './components-cdn-esm-specific.sample.html?raw';
+import SampleJsAll from './components-js-all.sample?raw';
+import SampleJsSpecific from './components-js-specific.sample?raw';
 
 <Meta of={GettingStartedStories} />
 
@@ -10,40 +13,35 @@ import SampleUseSpecific from './components-use-specific.sample?raw';
 [![npm version](https://badge.fury.io/js/@swisspost%2Fdesign-system-components.svg)](https://badge.fury.io/js/@swisspost%2Fdesign-system-components)
 
 A set of standard web components for easy integration with every framework or no framework at all.
+Depending on your project setup, there are different ways available to integrate our components.
 
-<ul>
-  <li><a href="#installation" target="_self">Installation</a></li>
-  <li><a href="#usage" target="_self">Usage</a></li>
-</ul>
+## Components without a framework
 
-## Installation
+If you're using a simple HTML page, you can add our components via a script tag.
 
-{/* https://stenciljs.com/docs/custom-elements#consuming-custom-elements */}
+<Source code={SampleCdnAll} language="html" />
+
+Alternatively, if you wanted to take advantage of ES Modules, you could include the components using an import statement.
+
+<Source code={SampleCdnEsmAll} language="html" />
 
-<Source
-  code={`npm install @swisspost/design-system-components`}
-  language="bash"
-/>
+This way, you can also include only specific components...
 
-## Usage
+<Source code={SampleCdnEsmSpecific} language="html" />
 
-Import all the available components into your project (for example into your `/src/main.ts` or `/src/index.js` file) and make them work:
+## Components with JavaScript bundler
 
-<Source
-  code={SampleUseAll}
-  language="javascript"
-/>
+If you're using a project setup which handels the bundling for you. You can simply import our components to your project.
+
+### Installation
+
+{/* https://stenciljs.com/docs/custom-elements#consuming-custom-elements */}
 
-Import specific components:
+<Source code={`npm install @swisspost/design-system-components`} language="bash" />
 
-<Source
-  code={SampleUseSpecific}
-  language="javascript"
-/>
+### Usage
 
-Use the imported components in your html:
+Import all or only specific components into your entry (e.g. `main.js`, `app.js`, ...) file.
 
-<Source
-  code={`<post-icon name="1000"></post-icon>`}
-  language="html"
-/>
+<Source code={SampleJsAll} language="javascript" />
+<Source code={SampleJsSpecific} language="javascript" />
@@ -14,13 +14,11 @@
   },
   "main": "loader/index.cjs.js",
   "module": "loader/index.js",
-  "es2015": "loader/index.es2017.js",
   "es2017": "loader/index.es2017.js",
-  "jsnext:main": "loader/index.es2017.js",
   "types": "loader/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
-  "unpkg": "loader/cdn.js",
+  "unpkg": "dist/swisspost-internet-header/swisspost-internet-header.esm.js",
   "publishConfig": {
     "access": "public"
   },

@@ -1 +1,14 @@
 export { Components, JSX } from './components';
+
+// Export every single component so it gets included in the dist output
+export { PostInternetHeader } from './components/post-internet-header/post-internet-header';
+export { PostInternetBreadcrumbs } from './components/post-internet-breadcrumbs/post-internet-breadcrumbs';
+export { PostInternetFooter } from './components/post-internet-footer/post-internet-footer';
+
+export { PostSkiplinks } from './components/post-skiplinks/post-skiplinks';
+export { PostMetaNavigation } from './components/post-meta-navigation/post-meta-navigation';
+export { PostLanguageSwitch } from './components/post-language-switch/post-language-switch';
+export { PostLogo } from './components/post-logo/post-logo';
+export { PostMainNavigation } from './components/post-main-navigation/post-main-navigation';
+export { PostSearch } from './components/post-search/post-search';
+export { PostKlpLoginWidget } from './components/post-klp-login-widget/post-klp-login-widget';
@@ -29,10 +29,6 @@ export const config: Config = {
     {
       type: 'docs-readme',
     },
-    {
-      type: 'www',
-      serviceWorker: null, // disable service workers,
-    },
     {
       type: 'docs-json',
       file: 'dist/docs.json',
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import { defineCustomElements as definePostComponents } from '@swisspost/design-system-components/loader';
		definePostComponents();
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,2 @@
		import { defineCustomElement as definePostIcon } from '@swisspost/design-system-components/dist/components/post-icon';

		definePostIcon();