+
${isCheckable ? getCheckableContent(args, updateArgs, context) : getDefaultContent(args)}
${isDismissible ? getDismissButton(updateArgs) : nothing}
From e3c9029cebd41451478870e25ff1c9e255a7624c Mon Sep 17 00:00:00 2001
From: "Debray Alize, IT16.12"
Date: Wed, 29 Nov 2023 14:24:46 +0100
Subject: [PATCH 04/11] fix(migration): update tsconfig.json
---
packages/migrations/tsconfig.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/migrations/tsconfig.json b/packages/migrations/tsconfig.json
index 75cf15fa8e..49a6f1cd38 100644
--- a/packages/migrations/tsconfig.json
+++ b/packages/migrations/tsconfig.json
@@ -17,7 +17,7 @@
"sourceMap": true,
"strictNullChecks": true,
"target": "es6",
- "types": ["jasmine", "node"]
+ "types": ["node"]
},
"include": ["src/**/*"],
"exclude": ["src/*/files/**/*"]
From 0ff64991da630267bab540f5529cff9180f8d64c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
<12294151+imagoiq@users.noreply.github.com>
Date: Wed, 29 Nov 2023 18:03:07 +0100
Subject: [PATCH 05/11] fix(styles): Datepicker year select overflow (#2319)
### UI
#### Before
#### After
---
.changeset/cuddly-otters-compete.md | 5 +++++
packages/styles/src/components/datepicker.scss | 4 +++-
2 files changed, 8 insertions(+), 1 deletion(-)
create mode 100644 .changeset/cuddly-otters-compete.md
diff --git a/.changeset/cuddly-otters-compete.md b/.changeset/cuddly-otters-compete.md
new file mode 100644
index 0000000000..303121c9e7
--- /dev/null
+++ b/.changeset/cuddly-otters-compete.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed overflow on datepicker select variant.
diff --git a/packages/styles/src/components/datepicker.scss b/packages/styles/src/components/datepicker.scss
index 7626bc6c2f..2273a05624 100644
--- a/packages/styles/src/components/datepicker.scss
+++ b/packages/styles/src/components/datepicker.scss
@@ -7,6 +7,8 @@
@use './../variables/commons';
@use './../mixins/icons' as icons-mx;
+@use './../themes/bootstrap/core' as b;
+
ngb-datepicker {
// Conversion for compatibility
--bs-light: var(--post-light);
@@ -24,7 +26,7 @@ ngb-datepicker-navigation-select.ngb-dp-navigation-select {
flex: 0 1 auto;
select {
- padding-right: 1rem;
+ padding-right: b.$form-select-padding-x * 2;
border: 0;
background-position: right;
From 83666734ff262274bf7487dfc4c03bd92d5cc846 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
<33580481+alizedebray@users.noreply.github.com>
Date: Thu, 30 Nov 2023 08:44:08 +0100
Subject: [PATCH 06/11] chore(styles): update accordion (#2310)
---
.changeset/breezy-knives-itch.md | 5 +
.changeset/few-baboons-count.md | 6 +
.idea/misc.xml | 2 +-
.../post-collapsible/post-collapsible.scss | 10 +-
.../post-collapsible/post-collapsible.tsx | 41 +++++--
.../src/components/post-collapsible/readme.md | 7 ++
.../accordion-demo-page.component.html | 15 +++
.../accordion-demo.component.html | 65 ++++++-----
.../accordion-demo.component.html | 105 +++++++++++-------
packages/styles/src/components/accordion.scss | 92 ++++++++-------
packages/styles/src/mixins/_focus.scss | 9 ++
packages/styles/src/mixins/_index.scss | 1 +
packages/styles/src/variables/_commons.scss | 3 +
.../src/variables/components/_accordion.scss | 23 ++--
14 files changed, 253 insertions(+), 131 deletions(-)
create mode 100644 .changeset/breezy-knives-itch.md
create mode 100644 .changeset/few-baboons-count.md
create mode 100644 packages/styles/src/mixins/_focus.scss
diff --git a/.changeset/breezy-knives-itch.md b/.changeset/breezy-knives-itch.md
new file mode 100644
index 0000000000..04633fcb11
--- /dev/null
+++ b/.changeset/breezy-knives-itch.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated the accordion styles.
diff --git a/.changeset/few-baboons-count.md b/.changeset/few-baboons-count.md
new file mode 100644
index 0000000000..eaebcbb7c6
--- /dev/null
+++ b/.changeset/few-baboons-count.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+- Deprecated Bootstrap accordions in favor of the post-accordion web component.
+- Updated ng-bootstrap component-based accordion example in favor of the directive-based implementation.
diff --git a/.idea/misc.xml b/.idea/misc.xml
index 6e86672130..ce8151ba79 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -2,4 +2,4 @@
-
\ No newline at end of file
+
diff --git a/packages/components/src/components/post-collapsible/post-collapsible.scss b/packages/components/src/components/post-collapsible/post-collapsible.scss
index 9e634b450c..83d99816a3 100644
--- a/packages/components/src/components/post-collapsible/post-collapsible.scss
+++ b/packages/components/src/components/post-collapsible/post-collapsible.scss
@@ -2,8 +2,16 @@
:host {
display: block;
+}
+
+.accordion-button {
+ cursor: pointer;
- .accordion-button > ::slotted(.text-truncate) {
+ > ::slotted(.text-truncate) {
display: block;
}
}
+
+post-collapsible + post-collapsible::part(accordion-item) {
+ border-block-start: 0!important;
+}
diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx
index 3cce479c2b..8aff5fc2ae 100644
--- a/packages/components/src/components/post-collapsible/post-collapsible.tsx
+++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx
@@ -1,4 +1,15 @@
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import {
+ Component,
+ Element,
+ Event,
+ EventEmitter,
+ h,
+ Host,
+ Method,
+ Prop,
+ State,
+ Watch,
+} from '@stencil/core';
import { version } from '../../../package.json';
import { collapse, expand } from '../../animations/collapse';
import { checkEmptyOrOneOf, checkEmptyOrType, isMotionReduced } from '../../utils';
@@ -27,7 +38,11 @@ export class PostCollapsible {
@Watch('collapsed')
validateCollapsed(newValue = this.collapsed) {
- checkEmptyOrType(newValue, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');
+ checkEmptyOrType(
+ newValue,
+ 'boolean',
+ 'The `collapsed` property of the `post-collapsible` must be a boolean.',
+ );
}
/**
@@ -37,7 +52,11 @@ export class PostCollapsible {
@Watch('headingLevel')
validateHeadingLevel(newValue = this.headingLevel) {
- checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.');
+ checkEmptyOrOneOf(
+ newValue,
+ HEADING_LEVELS,
+ 'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.',
+ );
}
/**
@@ -73,7 +92,7 @@ export class PostCollapsible {
this.isOpen = !this.isOpen;
if (this.isLoaded) this.collapseChange.emit();
- const animation = open ? expand(this.collapsible): collapse(this.collapsible);
+ const animation = open ? expand(this.collapsible) : collapse(this.collapsible);
if (!this.isLoaded || isMotionReduced()) animation.finish();
@@ -90,14 +109,14 @@ export class PostCollapsible {
aria-labelledby={this.hasHeader ? `${this.id}--header` : undefined}
class={`collapse${this.hasHeader ? ' accordion-collapse' : ''}`}
id={`${this.id}--collapse`}
- ref={el => this.collapsible = el}
+ ref={el => (this.collapsible = el)}
>
{this.hasHeader ? (
-
+
) : (
-
+
)}
+
{collapse}
- ) : collapse}
+ ) : (
+ collapse
+ )}
);
}
diff --git a/packages/components/src/components/post-collapsible/readme.md b/packages/components/src/components/post-collapsible/readme.md
index 247bced42e..85922e96bb 100644
--- a/packages/components/src/components/post-collapsible/readme.md
+++ b/packages/components/src/components/post-collapsible/readme.md
@@ -35,6 +35,13 @@ Type: `Promise
`
+## Shadow Parts
+
+| Part | Description |
+| ------------------ | ----------- |
+| `"accordion-item"` | |
+
+
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*
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 b751a310b6..ee6f0422db 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
@@ -3,6 +3,21 @@ Accordion
+
Bootstrap accordions are deprecated and will soon be removed.
+
+ For a similar behavior, check out our new
+
+ post-accordion component
+
+ .
+
+
Using JavaScript
diff --git a/packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.html b/packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.html
index a60f08a1d9..3c5f41b1b3 100644
--- a/packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.html
@@ -9,8 +9,8 @@
@@ -41,8 +44,8 @@