Markup accepted: inline content.
+ */ +@Component({ + tag: 'post-tag', + styleUrl: 'post-tag.scss', + shadow: true, +}) +export class PostTag { + @Element() host: HTMLPostTagElement; + + @State() classes: string; + + /** + * Defines the color variant of the component. + */ + @Prop() readonly variant: 'gray' | 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow' = + 'gray'; + + /** + * Defines the size of the component. + */ + @Prop() readonly size: null | 'sm' = null; + + /** + * Defines the icon `name` inside of the component. + * If not set the icon will not show up. + * To learn which icons are available, please visit our icon library. + */ + @Prop() readonly icon: null | string = null; + + constructor() { + this.setClasses = this.setClasses.bind(this); + } + + @Watch('variant') + variantChanged() { + this.setClasses(); + } + + @Watch('size') + sizeChanged() { + this.setClasses(); + } + + private setClasses() { + this.classes = ['tag', this.size ? `tag-${this.size}` : null, `tag-${this.variant}`] + .filter(c => c !== null) + .join(' '); + } + + connectedCallback() { + this.setClasses(); + } + + render() { + return ( +Markup accepted: inline content.
| + + +## Dependencies + +### Depends on + +- [post-icon](../post-icon) + +### Graph +```mermaid +graph TD; + post-tag --> post-icon + style post-tag fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 7b61d876ae..6ad5b611b6 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -14,3 +14,4 @@ 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'; +export { PostTag } from './components/post-tag/post-tag'; diff --git a/packages/demo/.tool-versions b/packages/demo/.tool-versions index d064b3eada..19ac4b9972 100644 --- a/packages/demo/.tool-versions +++ b/packages/demo/.tool-versions @@ -1 +1 @@ -nodejs 18.19.0 +nodejs 18.19.1 diff --git a/packages/demo/package.json b/packages/demo/package.json index 7c2532e979..fa3779d113 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -12,51 +12,51 @@ "lint": "ng lint" }, "dependencies": { - "@angular/animations": "17.2.4", - "@angular/cdk": "17.2.2", - "@angular/common": "17.2.4", - "@angular/compiler": "17.2.4", - "@angular/core": "17.2.4", - "@angular/forms": "17.2.4", - "@angular/localize": "17.2.4", - "@angular/platform-browser": "17.2.4", - "@angular/platform-browser-dynamic": "17.2.4", - "@angular/router": "17.2.4", + "@angular/animations": "17.3.0", + "@angular/cdk": "17.3.0", + "@angular/common": "17.3.0", + "@angular/compiler": "17.3.0", + "@angular/core": "17.3.0", + "@angular/forms": "17.3.0", + "@angular/localize": "17.3.0", + "@angular/platform-browser": "17.3.0", + "@angular/platform-browser-dynamic": "17.3.0", + "@angular/router": "17.3.0", "@ng-bootstrap/ng-bootstrap": "16.0.0", "@popperjs/core": "2.11.8", "@swimlane/ngx-datatable": "20.1.0", "@swisspost/design-system-intranet-header": "workspace:5.0.11", "@swisspost/design-system-styles": "workspace:6.6.4", "bootstrap": "5.3.2", - "core-js": "3.35.1", + "core-js": "3.36.0", "highlight.js": "11.9.0", "ngx-highlightjs": "10.0.0", "ngx-toastr": "18.0.0", "prettier": "2.8.8", "rxjs": "7.8.1", "tslib": "2.6.2", - "zone.js": "0.14.3" + "zone.js": "0.14.4" }, "devDependencies": { - "@angular-devkit/build-angular": "17.2.3", + "@angular-devkit/build-angular": "17.3.0", "@angular-eslint/builder": "17.2.1", "@angular-eslint/eslint-plugin": "17.2.1", "@angular-eslint/eslint-plugin-template": "17.2.1", "@angular-eslint/template-parser": "17.2.1", - "@angular/cli": "17.2.3", - "@angular/compiler-cli": "17.2.4", - "@angular/elements": "17.2.4", - "@angular/language-service": "17.2.4", + "@angular/cli": "17.3.0", + "@angular/compiler-cli": "17.3.0", + "@angular/elements": "17.3.0", + "@angular/language-service": "17.3.0", "@types/jasmine": "5.1.4", "@types/jasminewd2": "2.0.13", "@types/node": "18.17.19", "@typescript-eslint/eslint-plugin": "6.21.0", "@typescript-eslint/parser": "6.21.0", "eslint": "8.57.0", - "jasmine-core": "5.1.1", + "jasmine-core": "5.1.2", "jasmine-marbles": "0.9.2", "jasmine-spec-reporter": "7.0.0", - "karma": "6.4.2", + "karma": "6.4.3", "karma-chrome-launcher": "3.2.0", "karma-coverage": "2.2.1", "karma-coverage-istanbul-reporter": "3.0.3", @@ -64,10 +64,10 @@ "karma-jasmine-html-reporter": "2.1.0", "raw-loader": "4.0.2", "rimraf": "5.0.5", - "sass": "1.70.0", + "sass": "1.72.0", "sockjs": "0.3.24", "ts-node": "10.9.2", "typescript": "5.3.3", - "webpack": "5.90.1" + "webpack": "5.90.3" } } diff --git a/packages/demo/src/app/app.component.html b/packages/demo/src/app/app.component.html index 21d8b95b74..504c069775 100644 --- a/packages/demo/src/app/app.component.html +++ b/packages/demo/src/app/app.component.html @@ -378,7 +378,7 @@ Internet header diff --git a/packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html b/packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html index cb701ad125..b5ce4cf38d 100644 --- a/packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html @@ -8,7 +8,7 @@Accordion
For a similar behavior, check out our new
diff --git a/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html b/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html
index 21c19aa712..5fbde73b66 100644
--- a/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html
@@ -35,7 +35,7 @@
There already exists a
web component
diff --git a/packages/demo/src/app/home/home.component.html b/packages/demo/src/app/home/home.component.html
index df62b9177d..7c638bbceb 100644
--- a/packages/demo/src/app/home/home.component.html
+++ b/packages/demo/src/app/home/home.component.html
@@ -62,7 +62,7 @@ Dismissible alerts are deprecated
Automatic Migration ⚙️
appCopyToClipboard class="d-block mt-1 p-3" [languages]="['bash']" - highlight="npx ng update @swisspost/design-system-migrations --from=4 --to=5 --migrate-only" + highlight="npm install @swisspost/design-system-migrations +npx ng update @swisspost/design-system-migrations --from=4 --to=5 --migrate-only --allow-dirty +npm uninstall @swisspost/design-system-migrations" > diff --git a/packages/demo/src/app/post-sample/components/icons/icons-demo-page/icons-demo-page.component.html b/packages/demo/src/app/post-sample/components/icons/icons-demo-page/icons-demo-page.component.html index 96cab3b0df..c7e3ccdcb7 100644 --- a/packages/demo/src/app/post-sample/components/icons/icons-demo-page/icons-demo-page.component.html +++ b/packages/demo/src/app/post-sample/components/icons/icons-demo-page/icons-demo-page.component.html @@ -9,16 +9,14 @@We have something new for you!
switch to the brand new icon componentpost-icon
today. Go ahead and have a look at the
-
+
brand new icons documentation
featuring a search and over 800 icons.
Discover the new icons
diff --git a/packages/documentation/.storybook/main.ts b/packages/documentation/.storybook/main.ts
index aa5d72ea85..b32da12853 100644
--- a/packages/documentation/.storybook/main.ts
+++ b/packages/documentation/.storybook/main.ts
@@ -72,9 +72,9 @@ const config: StorybookConfig = {
STORYBOOK_GTM_PAGE_CONTEXT_SOURCE_CODE_VERSION: pkg.version,
STORYBOOK_GTM_PAGE_CONTEXT_ENVIRONMENT_DEV: 'localhost',
STORYBOOK_GTM_PAGE_CONTEXT_ENVIRONMENT_INT: 'preview-',
- STORYBOOK_GTM_PAGE_CONTEXT_ENVIRONMENT_PROD: 'design-system.post.ch,next.design-system.post.ch',
+ STORYBOOK_GTM_PAGE_CONTEXT_ENVIRONMENT_PROD: 'design-system.post.ch',
STORYBOOK_GTM_PAGE_CONTEXT_ENVIRONMENT_FALLBACK: 'dev',
- STORYBOOK_BASE_URL: 'https://next.design-system-post.ch',
+ STORYBOOK_BASE_URL: 'https://design-system.post.ch',
}),
async viteFinal(config, options) {
return mergeConfig(config, {
diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
index 0ff2ed3fe7..0679148e7c 100644
--- a/packages/documentation/.storybook/styles/preview.scss
+++ b/packages/documentation/.storybook/styles/preview.scss
@@ -2,6 +2,7 @@
// TODO: replace intranet.scss with index.scss as soon as the issues in the portal.scss are fixed
@use '@swisspost/design-system-styles/intranet.scss';
@use '@swisspost/design-system-styles/core.scss' as post;
+@use '@swisspost/design-system-styles/mixins/utilities';
#storybook-root,
#storybook-docs {
@@ -66,6 +67,11 @@
display: inline-block;
}
}
+
+ // General styles for content
+ a {
+ @include utilities.focus-style();
+ }
}
pre {
diff --git a/packages/documentation/README.md b/packages/documentation/README.md
index 28c7d5b643..5cc4ff97f3 100644
--- a/packages/documentation/README.md
+++ b/packages/documentation/README.md
@@ -13,7 +13,7 @@ Includes stories for the following packages:
## Documentation
-- Technical docs: [Swiss Post Design System](https://next.design-system.post.ch)
+- Technical docs: [Swiss Post Design System](https://design-system.post.ch)
- Design docs: [Experience Hub](https://www.experience-hub.ch/document/2803)
## Contribute
diff --git a/packages/documentation/cypress/e2e/components/card.cy.ts b/packages/documentation/cypress/e2e/components/card.cy.ts
index 4e6dfc474d..10462d1dcf 100644
--- a/packages/documentation/cypress/e2e/components/card.cy.ts
+++ b/packages/documentation/cypress/e2e/components/card.cy.ts
@@ -12,7 +12,7 @@ describe('Card', () => {
'heading-order': {
enabled: false,
},
- 'aria-allowed-attr': {
+ 'aria-prohibited-attr': {
// aria-label attribute is used as a prop on post-icon
enabled: false,
},
diff --git a/packages/documentation/cypress/e2e/components/range.cy.ts b/packages/documentation/cypress/e2e/components/range.cy.ts
index 2ecc90710f..7f53dfe008 100644
--- a/packages/documentation/cypress/e2e/components/range.cy.ts
+++ b/packages/documentation/cypress/e2e/components/range.cy.ts
@@ -1,7 +1,7 @@
describe('Range', () => {
describe('Accessibility', () => {
beforeEach(() => {
- cy.visit('/iframe.html?id=snapshots--range');
+ cy.visit('/iframe.html?id=snapshots--slider');
cy.get('.form-range', { timeout: 30000 }).should('be.visible');
cy.injectAxe();
});
diff --git a/packages/documentation/cypress/e2e/components/select.cy.ts b/packages/documentation/cypress/e2e/components/select.cy.ts
index 2fc2b29415..aac03e7723 100644
--- a/packages/documentation/cypress/e2e/components/select.cy.ts
+++ b/packages/documentation/cypress/e2e/components/select.cy.ts
@@ -1,7 +1,7 @@
describe('Select', () => {
describe('Accessibility', () => {
beforeEach(() => {
- cy.visit('/iframe.html?id=snapshots--range');
+ cy.visit('/iframe.html?id=snapshots--slider');
cy.get('.form-range', { timeout: 30000 }).should('be.visible');
cy.injectAxe();
});
diff --git a/packages/documentation/cypress/snapshots/components/tag.snapshot.ts b/packages/documentation/cypress/snapshots/components/tag.snapshot.ts
new file mode 100644
index 0000000000..cdca93ea72
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/components/tag.snapshot.ts
@@ -0,0 +1,13 @@
+describe('Tag', () => {
+ it('tag (html)', () => {
+ cy.visit('/iframe.html?id=snapshots--tag');
+ cy.get('.tag', { timeout: 30000 }).should('be.visible');
+ cy.percySnapshot('Tag (Standard HTML)', { widths: [1440] });
+ });
+
+ it('post-tag (wc)', () => {
+ cy.visit('/iframe.html?id=snapshots--post-tag');
+ cy.get('post-tag post-icon', { timeout: 30000 }).should('be.visible');
+ cy.percySnapshot('Tag (Web Component)', { widths: [1440] });
+ });
+});
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
index b98d319a1a..72516d4507 100644
--- a/packages/documentation/package.json
+++ b/packages/documentation/package.json
@@ -8,7 +8,7 @@
"type": "git",
"url": "https://github.com/swisspost/design-system.git"
},
- "homepage": "https://next.design-system.post.ch",
+ "homepage": "https://design-system.post.ch",
"bugs": {
"url": "https://github.com/swisspost/design-system/issues"
},
@@ -34,31 +34,31 @@
"bootstrap": "5.3.2"
},
"devDependencies": {
- "@geometricpanda/storybook-addon-badges": "2.0.1",
+ "@geometricpanda/storybook-addon-badges": "2.0.2",
"@lit/task": "1.0.0",
- "@open-wc/lit-helpers": "0.6.0",
- "@percy/cli": "1.27.7",
+ "@open-wc/lit-helpers": "0.7.0",
+ "@percy/cli": "1.28.1",
"@percy/cypress": "3.1.2",
"@pxtrn/storybook-addon-docs-stencil": "6.4.1",
"@storybook/addon-designs": "7.0.9",
- "@storybook/addon-docs": "7.6.12",
- "@storybook/addon-essentials": "7.6.12",
- "@storybook/addon-links": "7.6.12",
- "@storybook/addons": "7.6.12",
- "@storybook/blocks": "7.6.12",
- "@storybook/components": "7.6.12",
- "@storybook/core-events": "7.6.12",
- "@storybook/manager-api": "7.6.12",
- "@storybook/preview-api": "7.6.12",
+ "@storybook/addon-docs": "7.6.17",
+ "@storybook/addon-essentials": "7.6.17",
+ "@storybook/addon-links": "7.6.17",
+ "@storybook/addons": "7.6.17",
+ "@storybook/blocks": "7.6.17",
+ "@storybook/components": "7.6.17",
+ "@storybook/core-events": "7.6.17",
+ "@storybook/manager-api": "7.6.17",
+ "@storybook/preview-api": "7.6.17",
"@storybook/testing-library": "0.2.2",
- "@storybook/theming": "7.6.12",
- "@storybook/web-components": "7.6.12",
- "@storybook/web-components-vite": "7.6.12",
+ "@storybook/theming": "7.6.17",
+ "@storybook/web-components": "7.6.17",
+ "@storybook/web-components-vite": "7.6.17",
"@types/css-modules": "1.0.5",
"@types/mdx": "2.0.11",
- "@types/react": "18.2.53",
+ "@types/react": "18.2.66",
"@types/react-syntax-highlighter": "15.5.11",
- "cypress": "13.6.4",
+ "cypress": "13.7.0",
"cypress-axe": "1.5.0",
"lit": "3.1.2",
"lit-html": "3.1.2",
@@ -69,8 +69,8 @@
"rehype-autolink-headings": "^7.1.0",
"remark-autolink-headings": "7.0.1",
"rimraf": "5.0.5",
- "sass": "1.70.0",
- "storybook": "7.6.12",
+ "sass": "1.72.0",
+ "storybook": "7.6.17",
"typescript": "5.1.6"
},
"peerDependencies": {
diff --git a/packages/documentation/src/shared/tile/tile.component.scss b/packages/documentation/src/shared/tile/tile.component.scss
index 4a3a1406f5..fae7f73886 100644
--- a/packages/documentation/src/shared/tile/tile.component.scss
+++ b/packages/documentation/src/shared/tile/tile.component.scss
@@ -6,6 +6,10 @@ $tile-size: var(--post-docs-tile-size, 120px);
$tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
:host{
+ a {
+ @include utilities.focus-style();
+ }
+
.tile {
display: flex;
flex-direction: column;
diff --git a/packages/documentation/src/stories/components/accordion/accordion-item.stories.ts b/packages/documentation/src/stories/components/accordion/accordion-item.stories.ts
new file mode 100644
index 0000000000..c231f52e07
--- /dev/null
+++ b/packages/documentation/src/stories/components/accordion/accordion-item.stories.ts
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+ id: '3b86bc9b-3dcd-4788-a436-88fd18a6312d',
+ title: 'Components/Accordion Item',
+ component: 'post-accordion-item',
+ argTypes: {
+ collapsed: {
+ control: false,
+ },
+ headingLevel: {
+ control: false,
+ },
+ },
+};
+
+export default meta;
+
+// STORIES
+type Story = StoryObj;
+
+export const Default: Story = {
+ parameters: {
+ controls: {
+ exclude: ['accordion-item'],
+ },
+ },
+};
diff --git a/packages/documentation/src/stories/components/accordion/accordion.docs.mdx b/packages/documentation/src/stories/components/accordion/accordion.docs.mdx
index 402a75a5e0..627768eb43 100644
--- a/packages/documentation/src/stories/components/accordion/accordion.docs.mdx
+++ b/packages/documentation/src/stories/components/accordion/accordion.docs.mdx
@@ -1,5 +1,6 @@
import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
import * as accordionStories from './accordion.stories';
+import * as accordionItemStories from './accordion-item.stories';
import SampleCustomTrigger from './accordion-custom-trigger.sample?raw';
@@ -13,8 +14,14 @@ It is used to manage how content is shown and hidden across a set of collapsible
+## ` ... ... The current set of the post-specific sizing variables is deprecated in favour of a new naming system that is consistent with the Design. For further information, please read the discussion on sizing variables on GitHub and have a look at the implementation in Figma. There is a new solution with updated naming system up coming for spacing sizes. The current set of the post-specific spacing utility is deprecated in favour of a new naming system that is consistent with the Design. For further information, please read the discussion on sizing variables on GitHub and have a look at the implementation in Figma. There is a new solution with updated naming system up coming for spacing sizes.` around any HTML as the quote.
+ className="blockquote">` around any HTML as the quote.
<input type="range" /> for consistent cross-browser styling and
@@ -13,9 +13,9 @@ import StylesPackageImport from '../../../../shared/styles-package-import.mdx';
Create custom `range` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers.
-
+
When the component has been validated, don't forget to add a `
',
+ ],
+ showIcon: [false, true],
+ }).map(
+ (bombArgs: Args) =>
+ html`
To learn which icons are available, please visit our icon library.',
+ control: {
+ type: 'number',
+ },
+ if: {
+ arg: 'showIcon',
+ truthy: true,
+ },
+ table: {
+ category: 'General',
+ },
+ },
+ markup: {
+ name: 'Markup',
+ description:
+ 'The markup to put in the component.
Markup accepted: inline content.',
+ control: {
+ type: 'text',
+ },
+ table: {
+ category: 'General',
+ },
+ },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ render: (args: Args) => {
+ const classes = [
+ 'tag',
+ args.variant === 'null' ? args.variant : `tag-${args.variant}`,
+ args.size,
+ ]
+ .filter(c => c !== 'null')
+ .join(' ');
+
+ return html`
+ ',
+ ],
+ }).map(
+ (bombArgs: Args) =>
+ html`
+ npm install @swisspost/design-system-migrations
diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv5-6.component.ts b/packages/documentation/src/stories/misc/migration-guide/migrationv5-6.component.ts
index a62deacad8..5748da96af 100644
--- a/packages/documentation/src/stories/misc/migration-guide/migrationv5-6.component.ts
+++ b/packages/documentation/src/stories/misc/migration-guide/migrationv5-6.component.ts
@@ -90,8 +90,10 @@ export class MigrationV56Component extends LitElement {
You should now be able to run the following command to apply all automatic
migrations to your application:
npx ng update @swisspost/design-system-migrations --from=4 --to=5
- --migrate-only
+ --migrate-only --allow-dirty
+ npm uninstall @swisspost/design-system-migrations
+ npm install @swisspost/design-system-migrations
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
index fe7764c28f..53eb6f66f6 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
@@ -44,8 +44,8 @@ Post sizes can be used as suffixes in the same way. To find out which size name
#### Sass variables
{/* prettier-ignore */}
-
npx ng update @swisspost/design-system-migrations --from=5 --to=6
- --migrate-only
+ --migrate-only --allow-dirty
+ npm uninstall @swisspost/design-system-migrations
Sizing variables are deprecated
+Sizing variables are deprecated
Sizing variables are deprecated
+Sizing variables are deprecated