Skip to content

Commit

Permalink
Merge pull request #48 from ec-europa/FRONT-4228-Broken-accordion
Browse files Browse the repository at this point in the history
  • Loading branch information
@planctus
planctus authored Jan 26, 2024
2 parents 537325c + 2bb169f commit 108e9e2
Show file tree
Hide file tree
Showing 7 changed files with 67 additions and 34 deletions.
6 changes: 4 additions & 2 deletions src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@ export namespace Components {
"expanded": boolean;
"itemId": string;
"label": string;
"labelCollapsed": string;
"labelExpanded": string;
"styleClass": string;
"theme": string;
"titleId": string;
}
interface EclBanner {
"bannerTitle": string;
Expand Down Expand Up @@ -1442,9 +1443,10 @@ declare namespace LocalJSX {
"expanded"?: boolean;
"itemId"?: string;
"label"?: string;
"labelCollapsed"?: string;
"labelExpanded"?: string;
"styleClass"?: string;
"theme"?: string;
"titleId"?: string;
}
interface EclBanner {
"bannerTitle"?: string;
Expand Down
20 changes: 14 additions & 6 deletions src/components/ecl-accordion/ecl-accordion-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ export class EclAccordionItem {
@Prop() styleClass: string;
@Prop() label: string;
@Prop() itemId: string;
@Prop() titleId: string;
@Prop({reflect:true}) expanded: boolean;
@Prop() theme: string = 'ec';
@Prop() labelExpanded = '';
@Prop() labelCollapsed = '';

getClass(): string {
return [
Expand All @@ -26,24 +27,31 @@ export class EclAccordionItem {
}

render() {
const titleId = `${this.itemId}-title`;
const contentId = `${this.itemId}-content`;
return (
<div
class={this.getClass()}
id={this.itemId || null}
aria-labelledby={this.titleId || null}
aria-labelledby={titleId}
>
<h3
class={`ecl-accordion__title sc-ecl-accordion-${this.theme}`}
id={this.titleId || null}
id={titleId}
>
<button
type="button"
data-ecl-accordion-toggle
aria-controls={`${this.el.id}-content`}
aria-controls={contentId}
class={`ecl-accordion__toggle sc-ecl-accordion-${this.theme}`}
aria-expanded={this.expanded ? 'true' : 'false'}
data-ecl-label-collapsed={this.labelCollapsed}
data-ecl-label-expanded={this.labelExpanded}
>
<span class={`ecl-accordion__toggle-flex sc-ecl-accordion-${this.theme}`}>
<span class={`ecl-accordion__toggle-indicator sc-ecl-accordion-${this.theme}`}>
<span class={`ecl-accordion__toggle-label sc-ecl-accordion-${this.theme}`}>
{this.expanded ? this.labelExpanded : this.labelCollapsed}
</span>
<ecl-icon
icon={this.expanded ? "minus" : 'plus'}
theme={this.theme}
Expand All @@ -61,7 +69,7 @@ export class EclAccordionItem {
<div
class={`ecl-accordion__content sc-ecl-accordion-${this.theme}`}
role="region"
id={`${this.el.id}-content`}
id={contentId}
hidden={this.expanded !== true}
>
<slot></slot>
Expand Down
9 changes: 6 additions & 3 deletions src/components/ecl-accordion/ecl-accordion.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ const Template = (args) =>
>
<ecl-accordion-item
item-id="ecl-accordion-item-id-1"
title-id="accordion-example-title-1"
label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy"
theme="${args.theme}"
label-expanded="Close"
label-collapsed="Open"
>
The College of Commissioners held today the first weekly meeting of 2019 which was devoted to discussing the
challenges of this new year. Commissioners used the opportunity to take stock and discuss the year ahead,
Expand All @@ -21,18 +22,20 @@ const Template = (args) =>
<ecl-accordion-item
item-id="ecl-accordion-item-id-2"
label="Energy union and climate"
title-id="accordion-example-title-2"
expanded
theme="${args.theme}"
label-expanded="Close"
label-collapsed="Open"
>
A balanced and progressive trade policy to harness globalisation
</ecl-accordion-item>
<ecl-accordion-item
item-id="ecl-accordion-item-id-3"
title-id="accordion-example-title-3"
label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy"
theme="${args.theme}"
label-expanded="Close"
label-collapsed="Open"
>
In the modern global economy trade is essential for growth, <ecl-link path="https://ec.europa.eu/">jobs</ecl-link> and competiveness, and the EU is committed to
maintaining an open and rules-based trading system. With the rising threat of protectionism and weakened
Expand Down
17 changes: 9 additions & 8 deletions src/components/ecl-accordion/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ------------ | ------------- | ----------- | --------- | ----------- |
| `expanded` | `expanded` | | `boolean` | `undefined` |
| `itemId` | `item-id` | | `string` | `undefined` |
| `label` | `label` | | `string` | `undefined` |
| `styleClass` | `style-class` | | `string` | `undefined` |
| `theme` | `theme` | | `string` | `'ec'` |
| `titleId` | `title-id` | | `string` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ---------------- | ----------------- | ----------- | --------- | ----------- |
| `expanded` | `expanded` | | `boolean` | `undefined` |
| `itemId` | `item-id` | | `string` | `undefined` |
| `label` | `label` | | `string` | `undefined` |
| `labelCollapsed` | `label-collapsed` | | `string` | `''` |
| `labelExpanded` | `label-expanded` | | `string` | `''` |
| `styleClass` | `style-class` | | `string` | `undefined` |
| `theme` | `theme` | | `string` | `'ec'` |


## Dependencies
Expand Down
4 changes: 4 additions & 0 deletions src/components/ecl-accordion/src/styles/ecl-accordion-item.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
:host {
display: block;
}

.ecl-accordion__item {
margin-top: 0.5rem;
}
33 changes: 21 additions & 12 deletions src/components/ecl-accordion/test/__snapshots__/ecl-accordion.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,16 @@ exports[`ecl-accordion renders 1`] = `
<ecl-accordion theme="ec">
<!---->
<div class="ecl-accordion">
<ecl-accordion-item icon-path="/icons.svg" id="ecl-accordion-item-id-1" label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy">
<ecl-accordion-item icon-path="/icons.svg" item-id="ecl-accordion-item-id-1" label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy" label-collapsed="Open" label-expanded="Close">
<!---->
<div class="ecl-accordion__item sc-ecl-accordion-ec">
<h3 class="ecl-accordion__title sc-ecl-accordion-ec">
<button aria-controls="ecl-accordion-item-id-1-content" aria-expanded="false" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle>
<div aria-labelledby="ecl-accordion-item-id-1-title" class="ecl-accordion__item sc-ecl-accordion-ec">
<h3 class="ecl-accordion__title sc-ecl-accordion-ec" id="ecl-accordion-item-id-1-title">
<button aria-controls="ecl-accordion-item-id-1-content" aria-expanded="false" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle data-ecl-label-collapsed="Open" data-ecl-label-expanded="Close" type="button">
<span class="ecl-accordion__toggle-flex sc-ecl-accordion-ec">
<span class="ecl-accordion__toggle-indicator sc-ecl-accordion-ec">
<span class="ecl-accordion__toggle-label sc-ecl-accordion-ec">
Open
</span>
<ecl-icon data-ecl-accordion-icon icon="plus" size="m" style-class="ecl-accordion__toggle-icon sc-ecl-accordion-ec" theme="ec"></ecl-icon>
</span>
<span class="ecl-accordion__toggle-title sc-ecl-accordion-ec">
Expand All @@ -24,13 +27,16 @@ exports[`ecl-accordion renders 1`] = `
</div>
</div>
</ecl-accordion-item>
<ecl-accordion-item expanded="" icon-path="/icons.svg" id="ecl-accordion-item-id-2" label="Energy union and climate">
<ecl-accordion-item expanded="" icon-path="/icons.svg" item-id="ecl-accordion-item-id-2" label="Energy union and climate" label-collapsed="Open" label-expanded="Close">
<!---->
<div class="ecl-accordion__item sc-ecl-accordion-ec">
<h3 class="ecl-accordion__title sc-ecl-accordion-ec">
<button aria-controls="ecl-accordion-item-id-2-content" aria-expanded="true" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle>
<div aria-labelledby="ecl-accordion-item-id-2-title" class="ecl-accordion__item sc-ecl-accordion-ec">
<h3 class="ecl-accordion__title sc-ecl-accordion-ec" id="ecl-accordion-item-id-2-title">
<button aria-controls="ecl-accordion-item-id-2-content" aria-expanded="true" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle data-ecl-label-collapsed="Open" data-ecl-label-expanded="Close" type="button">
<span class="ecl-accordion__toggle-flex sc-ecl-accordion-ec">
<span class="ecl-accordion__toggle-indicator sc-ecl-accordion-ec">
<span class="ecl-accordion__toggle-label sc-ecl-accordion-ec">
Close
</span>
<ecl-icon data-ecl-accordion-icon icon="minus" size="m" style-class="ecl-accordion__toggle-icon sc-ecl-accordion-ec" theme="ec"></ecl-icon>
</span>
<span class="ecl-accordion__toggle-title sc-ecl-accordion-ec">
Expand All @@ -44,13 +50,16 @@ exports[`ecl-accordion renders 1`] = `
</div>
</div>
</ecl-accordion-item>
<ecl-accordion-item id="ecl-accordion-item-id-3" label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy">
<ecl-accordion-item item-id="ecl-accordion-item-id-3" label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy" label-collapsed="Open" label-expanded="Close">
<!---->
<div class="ecl-accordion__item sc-ecl-accordion-ec">
<h3 class="ecl-accordion__title sc-ecl-accordion-ec">
<button aria-controls="ecl-accordion-item-id-3-content" aria-expanded="false" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle>
<div aria-labelledby="ecl-accordion-item-id-3-title" class="ecl-accordion__item sc-ecl-accordion-ec">
<h3 class="ecl-accordion__title sc-ecl-accordion-ec" id="ecl-accordion-item-id-3-title">
<button aria-controls="ecl-accordion-item-id-3-content" aria-expanded="false" class="ecl-accordion__toggle sc-ecl-accordion-ec" data-ecl-accordion-toggle data-ecl-label-collapsed="Open" data-ecl-label-expanded="Close" type="button">
<span class="ecl-accordion__toggle-flex sc-ecl-accordion-ec">
<span class="ecl-accordion__toggle-indicator sc-ecl-accordion-ec">
<span class="ecl-accordion__toggle-label sc-ecl-accordion-ec">
Open
</span>
<ecl-icon data-ecl-accordion-icon icon="plus" size="m" style-class="ecl-accordion__toggle-icon sc-ecl-accordion-ec" theme="ec"></ecl-icon>
</span>
<span class="ecl-accordion__toggle-title sc-ecl-accordion-ec">
Expand Down
12 changes: 9 additions & 3 deletions src/components/ecl-accordion/test/ecl-accordion.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,29 @@ describe('ecl-accordion', () => {
components: [EclAccordion, EclAccordionItem],
html: `<ecl-accordion theme="ec">
<ecl-accordion-item
id="ecl-accordion-item-id-1"
item-id="ecl-accordion-item-id-1"
label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy"
icon-path="/icons.svg"
label-expanded="Close"
label-collapsed="Open"
>
Accordion item label
</ecl-accordion-item>
<ecl-accordion-item
id="ecl-accordion-item-id-2"
item-id="ecl-accordion-item-id-2"
label="Energy union and climate"
icon-path="/icons.svg"
expanded
label-expanded="Close"
label-collapsed="Open"
>
Accordion item label
</ecl-accordion-item>
<ecl-accordion-item
id="ecl-accordion-item-id-3"
item-id="ecl-accordion-item-id-3"
label="Delivery of last pending proposals, a common Destiny of unity, the hour of European Democracy"
label-expanded="Close"
label-collapsed="Open"
>
Accordion item label
</ecl-accordion-item>
Expand Down

1 comment on commit 108e9e2

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://ecl-webcomponents.netlify.app as production
🚀 Deployed on https://65b37aee8693b4a3b4a95d1f--ecl-webcomponents.netlify.app

Please sign in to comment.