@swisspost/design-system-components 1.2.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/cjs/post-collapsible.cjs.entry.js +1 -1
  2. package/dist/cjs/post-collapsible.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/post-collapsible/post-collapsible.css +20 -19
  4. package/dist/components/post-collapsible.js +1 -1
  5. package/dist/components/post-collapsible.js.map +1 -1
  6. package/dist/docs.json +1 -1
  7. package/dist/esm/post-collapsible.entry.js +1 -1
  8. package/dist/esm/post-collapsible.entry.js.map +1 -1
  9. package/dist/post-components/p-d1bc7b0b.entry.js +2 -0
  10. package/dist/post-components/{p-6588c1b7.entry.js.map → p-d1bc7b0b.entry.js.map} +1 -1
  11. package/dist/post-components/post-components.esm.js +1 -1
  12. package/package.json +14 -6
  13. package/dist/post-components/p-6588c1b7.entry.js +0 -2
package/dist/cjs/post-collapsible.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"post-collapsible.entry.cjs.js","mappings":"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","names":["checkBoolean","checkOneOf","h"],"sources":["./src/utils/get-element-height.ts","./src/utils/should-reduce-motion.ts","./src/utils/on-transition-end.ts","./src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","./src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nexport function getElementHeight(el: HTMLElement): number;\nexport function getElementHeight(el: HTMLElement, classWhenShown: string): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string[]): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: any = []): number {\n if (!Array.isArray(classesWhenShown)) classesWhenShown = [classesWhenShown];\n\n const classesToAdd = classesWhenShown.filter(klass => !el.classList.contains(klass));\n if (classesToAdd.length) el.classList.add(...classesToAdd);\n\n const scrollHeight = el.scrollHeight;\n\n if (classesToAdd.length) el.classList.remove(...classesToAdd);\n\n return scrollHeight;\n}\n","/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nexport function shouldReduceMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nimport { shouldReduceMotion } from './should-reduce-motion';\n\nexport async function onTransitionEnd(el: HTMLElement): Promise<void> {\n return new Promise(resolve => {\n if (shouldReduceMotion()) {\n resolve();\n } else {\n el.ontransitionend = () => {\n resolve();\n el.ontransitionend = null;\n };\n }\n });\n}\n","@use '@swisspost/design-system-styles/basics';\n@use '@swisspost/design-system-styles/components/accordion';\n@use '@swisspost/design-system-styles/components/transitions';\n\n:host {\n display: block;\n}\n","import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkBoolean, checkOneOf, getElementHeight, onTransitionEnd } from '../../utils';\n\nlet nextId = 0;\n\n@Component({\n tag: 'post-collapsible',\n styleUrl: 'post-collapsible.scss',\n shadow: true,\n})\nexport class PostCollapsible {\n /**\n * If `true`, the element is initially collapsed otherwise it is displayed.\n */\n @Prop() collapsed?: boolean = false;\n\n /**\n * Defines the hierarchical level of the collapsible header within the headings structure.\n */\n @Prop() headingLevel?: number = 2;\n\n @State() isOpen = true;\n @State() collapseClasses: string;\n @State() collapseHeight: string | null = null;\n @State() headingTag: string | undefined;\n @State() collapsibleId: string;\n @State() hasHeader: boolean;\n\n @Element() host: HTMLElement;\n\n isLoaded = false;\n collapsibleElement: HTMLElement;\n\n @Watch('collapsed')\n validateCollapsed(newValue = this.collapsed) {\n checkBoolean(newValue, 'The post-collapsible \"collapsed\" prop should be a boolean.');\n\n if (!this.isLoaded) {\n this.isOpen = !newValue;\n this.collapseClasses = this.getCollapseClasses();\n } else {\n setTimeout(() => {\n this.toggle(!newValue);\n });\n }\n }\n\n @Watch('headingLevel')\n validateHeadingLevel(newValue = this.headingLevel) {\n checkOneOf(\n newValue,\n [ 1, 2, 3, 4, 5, 6 ],\n 'The post-collapsible element requires a heading level between 1 and 6.',\n );\n\n this.headingTag = `h${newValue}`;\n }\n\n componentWillLoad() {\n this.validateCollapsed();\n this.validateHeadingLevel();\n\n this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n if (!this.hasHeader) {\n console.warn('Be sure to bind the post-collapsible to its control using aria-controls and aria-expanded attributes. More information here: https://getbootstrap.com/docs/5.2/components/collapse/#accessibility');\n }\n\n this.collapsibleId = this.host.id || `post-collapsible-${nextId++}`;\n this.collapseClasses = this.getCollapseClasses();\n }\n\n componentDidLoad() {\n this.isLoaded = true;\n this.collapsibleElement = this.host.shadowRoot.querySelector(`#${this.collapsibleId}--collapse`);\n }\n\n /**\n * Triggers the collapse programmatically.\n */\n @Method()\n async toggle(open: boolean = !this.isOpen): Promise<boolean> {\n if (open !== this.isOpen) {\n this.isOpen = !this.isOpen;\n\n this.startTransition();\n\n await onTransitionEnd(this.collapsibleElement).then(() => {\n this.collapseHeight = null;\n this.collapseClasses = this.getCollapseClasses();\n });\n\n return this.isOpen;\n }\n }\n\n startTransition() {\n const expandedHeight = getElementHeight(this.collapsibleElement, 'show');\n\n this.collapseHeight = `${this.isOpen ? 0 : expandedHeight}px`;\n this.collapseClasses = 'collapsing';\n\n setTimeout(() => {\n this.collapseHeight = `${this.isOpen ? expandedHeight : 0}px`;\n }, 50);\n }\n\n private getCollapseClasses() {\n return this.isOpen ? 'collapse show' : 'collapse';\n }\n\n render() {\n if (!this.hasHeader) {\n return (\n <div\n id={`${this.collapsibleId}--collapse`}\n class={this.collapseClasses}\n style={{ height: this.collapseHeight }}\n >\n <slot/>\n </div>\n );\n }\n\n return (\n <div class=\"accordion-item\">\n <this.headingTag class=\"accordion-header\" id={`${this.collapsibleId}--header`}>\n <button\n class={`accordion-button ${this.isOpen ? '' : 'collapsed'}`}\n type=\"button\"\n aria-expanded={`${this.isOpen}`}\n aria-controls={`${this.collapsibleId}--collapse`}\n onClick={() => this.toggle()}\n >\n <slot name=\"header\"/>\n </button>\n </this.headingTag>\n <div\n id={`${this.collapsibleId}--collapse`}\n class={`accordion-collapse ${this.collapseClasses}`}\n style={{ height: this.collapseHeight }}\n aria-labelledby={`${this.collapsibleId}--header`}\n >\n <div class=\"accordion-body\">\n <slot/>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"post-collapsible.entry.cjs.js","mappings":"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","names":["checkBoolean","checkOneOf","h"],"sources":["./src/utils/get-element-height.ts","./src/utils/should-reduce-motion.ts","./src/utils/on-transition-end.ts","./src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","./src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nexport function getElementHeight(el: HTMLElement): number;\nexport function getElementHeight(el: HTMLElement, classWhenShown: string): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string[]): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: any = []): number {\n if (!Array.isArray(classesWhenShown)) classesWhenShown = [classesWhenShown];\n\n const classesToAdd = classesWhenShown.filter(klass => !el.classList.contains(klass));\n if (classesToAdd.length) el.classList.add(...classesToAdd);\n\n const scrollHeight = el.scrollHeight;\n\n if (classesToAdd.length) el.classList.remove(...classesToAdd);\n\n return scrollHeight;\n}\n","/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nexport function shouldReduceMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","/*\n * Copyright 2022 by Swiss Post, Information Technology\n */\n\nimport { shouldReduceMotion } from './should-reduce-motion';\n\nexport async function onTransitionEnd(el: HTMLElement): Promise<void> {\n return new Promise(resolve => {\n if (shouldReduceMotion()) {\n resolve();\n } else {\n el.ontransitionend = () => {\n resolve();\n el.ontransitionend = null;\n };\n }\n });\n}\n","@use '@swisspost/design-system-styles/basics';\n@use '@swisspost/design-system-styles/components/accordion';\n@use '@swisspost/design-system-styles/components/transitions';\n\n:host {\n display: block;\n}\n","import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkBoolean, checkOneOf, getElementHeight, onTransitionEnd } from '../../utils';\n\nlet nextId = 0;\n\n@Component({\n tag: 'post-collapsible',\n styleUrl: 'post-collapsible.scss',\n shadow: true,\n})\nexport class PostCollapsible {\n /**\n * If `true`, the element is initially collapsed otherwise it is displayed.\n */\n @Prop() collapsed?: boolean = false;\n\n /**\n * Defines the hierarchical level of the collapsible header within the headings structure.\n */\n @Prop() headingLevel?: number = 2;\n\n @State() isOpen = true;\n @State() collapseClasses: string;\n @State() collapseHeight: string | null = null;\n @State() headingTag: string | undefined;\n @State() collapsibleId: string;\n @State() hasHeader: boolean;\n\n @Element() host: HTMLElement;\n\n isLoaded = false;\n collapsibleElement: HTMLElement;\n\n @Watch('collapsed')\n validateCollapsed(newValue = this.collapsed) {\n checkBoolean(newValue, 'The post-collapsible \"collapsed\" prop should be a boolean.');\n\n if (!this.isLoaded) {\n this.isOpen = !newValue;\n this.collapseClasses = this.getCollapseClasses();\n } else {\n setTimeout(() => {\n this.toggle(!newValue);\n });\n }\n }\n\n @Watch('headingLevel')\n validateHeadingLevel(newValue = this.headingLevel) {\n checkOneOf(\n newValue,\n [ 1, 2, 3, 4, 5, 6 ],\n 'The post-collapsible element requires a heading level between 1 and 6.',\n );\n\n this.headingTag = `h${newValue}`;\n }\n\n componentWillLoad() {\n this.validateCollapsed();\n this.validateHeadingLevel();\n\n this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n if (!this.hasHeader) {\n console.warn('Be sure to bind the post-collapsible to its control using aria-controls and aria-expanded attributes. More information here: https://getbootstrap.com/docs/5.2/components/collapse/#accessibility');\n }\n\n this.collapsibleId = this.host.id || `post-collapsible-${nextId++}`;\n this.collapseClasses = this.getCollapseClasses();\n }\n\n componentDidLoad() {\n this.isLoaded = true;\n this.collapsibleElement = this.host.shadowRoot.querySelector(`#${this.collapsibleId}--collapse`);\n }\n\n /**\n * Triggers the collapse programmatically.\n */\n @Method()\n async toggle(open: boolean = !this.isOpen): Promise<boolean> {\n if (open !== this.isOpen) {\n this.isOpen = !this.isOpen;\n\n this.startTransition();\n\n await onTransitionEnd(this.collapsibleElement).then(() => {\n this.collapseHeight = null;\n this.collapseClasses = this.getCollapseClasses();\n });\n\n return this.isOpen;\n }\n }\n\n startTransition() {\n const expandedHeight = getElementHeight(this.collapsibleElement, 'show');\n\n this.collapseHeight = `${this.isOpen ? 0 : expandedHeight}px`;\n this.collapseClasses = 'collapsing';\n\n setTimeout(() => {\n this.collapseHeight = `${this.isOpen ? expandedHeight : 0}px`;\n }, 50);\n }\n\n private getCollapseClasses() {\n return this.isOpen ? 'collapse show' : 'collapse';\n }\n\n render() {\n if (!this.hasHeader) {\n return (\n <div\n id={`${this.collapsibleId}--collapse`}\n class={this.collapseClasses}\n style={{ height: this.collapseHeight }}\n >\n <slot/>\n </div>\n );\n }\n\n return (\n <div class=\"accordion-item\">\n <this.headingTag class=\"accordion-header\" id={`${this.collapsibleId}--header`}>\n <button\n class={`accordion-button ${this.isOpen ? '' : 'collapsed'}`}\n type=\"button\"\n aria-expanded={`${this.isOpen}`}\n aria-controls={`${this.collapsibleId}--collapse`}\n onClick={() => this.toggle()}\n >\n <slot name=\"header\"/>\n </button>\n </this.headingTag>\n <div\n id={`${this.collapsibleId}--collapse`}\n class={`accordion-collapse ${this.collapseClasses}`}\n style={{ height: this.collapseHeight }}\n aria-labelledby={`${this.collapsibleId}--header`}\n >\n <div class=\"accordion-body\">\n <slot/>\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
package/dist/collection/components/post-collapsible/post-collapsible.css CHANGED
@@ -41,7 +41,7 @@
41
41
  color: var(--post-contrast-color) !important;
42
42
  }
43
43
 
44
- .bg-yellow, .bg-light, .bg-gray, .bg-white, .bg-info, .bg-warning, .bg-olive-bright, :root {
44
+ .bg-yellow, .bg-light, .bg-gray, .bg-white, .bg-success, .bg-info, .bg-warning, .bg-petrol-bright, .bg-coral-bright, .bg-olive-bright, :root {
45
45
  --post-contrast-color: #000;
46
46
  --post-contrast-color-inverted: #fff;
47
47
  --post-gray-10: #e6e6e6;
@@ -104,7 +104,7 @@
104
104
  --post-aubergine-bright-rgb: 117, 102, 160;
105
105
  }
106
106
 
107
- .bg-dark, .bg-primary, .bg-black, .bg-success, .bg-danger, .bg-nightblue, .bg-nightblue-bright, .bg-petrol, .bg-petrol-bright, .bg-coral, .bg-coral-bright, .bg-olive, .bg-purple, .bg-purple-bright, .bg-aubergine, .bg-aubergine-bright {
107
+ .bg-dark, .bg-primary, .bg-black, .bg-danger, .bg-nightblue, .bg-nightblue-bright, .bg-petrol, .bg-coral, .bg-olive, .bg-purple, .bg-purple-bright, .bg-aubergine, .bg-aubergine-bright {
108
108
  --post-contrast-color: #fff;
109
109
  --post-contrast-color-inverted: #000;
110
110
  --post-dark: #faf9f8;
@@ -770,22 +770,6 @@ progress {
770
770
  }
771
771
  }
772
772
 
773
- .text-body .lead {
774
- font-size: 1.0625rem;
775
- line-height: 1.4;
776
- }
777
- @media (min-width: 600px) {
778
- .text-body .lead {
779
- font-size: 1.25rem;
780
- }
781
- }
782
- @media (min-width: 1024px) {
783
- .text-body .lead {
784
- font-size: 1.5rem;
785
- line-height: 1.1;
786
- }
787
- }
788
-
789
773
  .text-body h3,
790
774
  .text-body .h3,
791
775
  .text-body h4,
@@ -863,7 +847,7 @@ progress {
863
847
  .text-body .h3,
864
848
  .text-body h4,
865
849
  .text-body .h4,
866
- .text-body p, .text-body .lead {
850
+ .text-body p {
867
851
  margin-bottom: 0.8em;
868
852
  }
869
853
 
@@ -1118,6 +1102,23 @@ q:lang(en) {
1118
1102
  .text-body .h5 {
1119
1103
  font-weight: 700;
1120
1104
  }
1105
+ .text-body .lead {
1106
+ font-size: 1.0625rem;
1107
+ line-height: 1.4;
1108
+ margin-bottom: 0.8em;
1109
+ }
1110
+ @media (min-width: 600px) {
1111
+ .text-body .lead {
1112
+ font-size: 1.25rem;
1113
+ }
1114
+ }
1115
+ @media (min-width: 1024px) {
1116
+ .text-body .lead {
1117
+ font-size: 1.5rem;
1118
+ line-height: 1.1;
1119
+ }
1120
+ }
1121
+
1121
1122
  code {
1122
1123
  color: inherit;
1123
1124
  font-size: inherit;