This repository has been archived by the owner on May 2, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add expandable component (#46)
# PR description I've tried to make the composition of the button structure easy to follow inside the template, by following a path of which variable is defined and later use how. Although it's tempting to expose the `collapsed` property to the public, in order to allow for `knobs`, I haven't, following the story of the React component. All buttons have been updated to include `data-ecl-label` attribute, probably something not [migrated](https://github.com/ec-europa/europa-component-library/blob/v2-dev/src/systems/ec/implementations/react/packages/button/src/Button.jsx#L38) yet because of a lack of use case. Which happens in this pull request, as the vanilla JS implementation requires the presence of this attribute. The `@ecl/ec-utility-typography` dependency is added here, but not in the React, because React can render children in a more flexible way, here we need it because of `ecl-u-type-paragraph-m`. ## QA Checklist In order to ensure a safe and quick review, please check that your PR follow those guidelines: - [x] I have put the vanilla component as `devDependencies` - [x] I have put the specs package as `devDependencies` - [x] I have added the components directly used in the twig file (with `include` or `embed`) as `dependencies` - [x] My component is listed in `@ecl-twig/ec-components`'s `dependencies` - [x] My variables naming follow the guidelines (snake case for twig) - [x] I have provided tests - [x] I have provided documentation (for the "notes" tab) - [x] If my local `yarn.lock` contains changes, I have committed it - [x] I have given my PR the proper label (`pr: review needed` to indicate that I'm done and now waiting for a review ,`pr: wip` to indicate that I'm actively working on it ...)
- Loading branch information
1 parent
0b167d2
commit dc17683
Showing
19 changed files
with
424 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| __snapshots__ | ||
| *.story.js | ||
| *.test.js | ||
| **/*.md |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| # ECL Twig - EC Expandable component | ||
|
|
||
| npm package: `@ecl-twig/ec-component-expandable` | ||
|
|
||
| ```shell | ||
| npm install --save @ecl-twig/ec-component-expandable | ||
| ``` |
104 changes: 104 additions & 0 deletions
104
src/ec/packages/ec-component-expandable/__snapshots__/expandable.test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`EC - Expandable renders correctly 1`] = ` | ||
| <div | ||
| class="ecl-expandable" | ||
| data-ecl-expandable="true" | ||
| > | ||
| <button | ||
| aria-controls="expandable-example-content" | ||
| class="ecl-button ecl-button--secondary ecl-expandable__toggle" | ||
| data-ecl-expandable-toggle="true" | ||
| data-ecl-label-collapsed="Collapsed button" | ||
| data-ecl-label-expanded="Expanded button" | ||
| type="button" | ||
| > | ||
| <span | ||
| class="ecl-button__container" | ||
| > | ||
| <span | ||
| class="ecl-button__label" | ||
| data-ecl-label="" | ||
| > | ||
| Collapsed button | ||
| </span> | ||
| <svg | ||
| aria-controls="expandable-example-content" | ||
| aria-hidden="true" | ||
| class="ecl-icon ecl-icon--fluid ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after" | ||
| data-ecl-expandable-toggle="true" | ||
| data-ecl-label-collapsed="Collapsed button" | ||
| data-ecl-label-expanded="Expanded button" | ||
| focusable="false" | ||
| > | ||
| <use | ||
| xlink:href="example#ui--corner-arrow" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </button> | ||
| <div | ||
| class="ecl-expandable__content" | ||
| hidden="" | ||
| id="expandable-example-content" | ||
| > | ||
| <p | ||
| class="ecl-u-type-paragraph-m" | ||
| > | ||
| The EU is building an energy union that ensures Europe’s energy supply is safe, viable and accessible to all. In doing so, it can boost the economy and attract investments that can create new jobs opportunities. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`EC - Expandable renders correctly when expanded 1`] = ` | ||
| <div | ||
| class="ecl-expandable" | ||
| data-ecl-expandable="true" | ||
| > | ||
| <button | ||
| aria-controls="expandable-example-content" | ||
| aria-expanded="true" | ||
| class="ecl-button ecl-button--secondary ecl-expandable__toggle" | ||
| data-ecl-expandable-toggle="true" | ||
| data-ecl-label-collapsed="Collapsed button" | ||
| data-ecl-label-expanded="Expanded button" | ||
| type="button" | ||
| > | ||
| <span | ||
| class="ecl-button__container" | ||
| > | ||
| <span | ||
| class="ecl-button__label" | ||
| data-ecl-label="" | ||
| > | ||
| Collapsed button | ||
| </span> | ||
| <svg | ||
| aria-controls="expandable-example-content" | ||
| aria-expanded="true" | ||
| aria-hidden="true" | ||
| class="ecl-icon ecl-icon--fluid ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after" | ||
| data-ecl-expandable-toggle="true" | ||
| data-ecl-label-collapsed="Collapsed button" | ||
| data-ecl-label-expanded="Expanded button" | ||
| focusable="false" | ||
| > | ||
| <use | ||
| xlink:href="example#ui--corner-arrow" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </button> | ||
| <div | ||
| class="ecl-expandable__content" | ||
| id="expandable-example-content" | ||
| > | ||
| <p | ||
| class="ecl-u-type-paragraph-m" | ||
| > | ||
| The EU is building an energy union that ensures Europe’s energy supply is safe, viable and accessible to all. In doing so, it can boost the economy and attract investments that can create new jobs opportunities. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| /* eslint-disable import/no-extraneous-dependencies, no-param-reassign */ | ||
| import specData from '@ecl/ec-specs-expandable/demo/data'; | ||
|
|
||
| const adapter = initialData => { | ||
| // Copy reference specification demo data. | ||
| const adaptedData = JSON.parse(JSON.stringify(initialData)); | ||
|
|
||
| adaptedData.label_expanded = adaptedData.labelExpanded; | ||
| adaptedData.label_collapsed = adaptedData.labelCollapsed; | ||
|
|
||
| const [type, name] = adaptedData.button.icon.shape.split('--'); | ||
|
|
||
| adaptedData.button.icon = { | ||
| type, | ||
| name, | ||
| ...adaptedData.button.icon, | ||
| }; | ||
|
|
||
| return adaptedData; | ||
| }; | ||
|
|
||
| export default adapter(specData); |
47 changes: 47 additions & 0 deletions
47
src/ec/packages/ec-component-expandable/docs/expandable.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| # ECL Twig - EC Expandable component | ||
|
|
||
| npm package: `@ecl-twig/ec-component-expandable` | ||
|
|
||
| ```shell | ||
| npm install --save @ecl-twig/ec-component-expandable | ||
| ``` | ||
|
|
||
| ### Parameters: | ||
|
|
||
| - "id" (string) (default: '') | ||
| - "label_expanded" (string) (default: '') | ||
| - "label_collapsed" (string) (default: '') | ||
| - "label_collapsed" (string) (default: '') | ||
| - "expanded" (boolean) (default: false) Rendered in collapsed state by default. Expanded state by default is also possible. | ||
| - "button" (predefined structure) : Button component structure | ||
| - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) | ||
| - "extra_attributes" (optional) (array) (default: []) Extra attributes | ||
| - "name" (string) Attribute name, eg. 'data-test' | ||
| - "value" (string) Attribute value, eg: 'data-test-1' | ||
|
|
||
| ### Blocks: | ||
|
|
||
| - "content" | ||
|
|
||
| ### Example: | ||
|
|
||
| <!-- prettier-ignore --> | ||
| ```twig | ||
| {% include 'path/to/expandable.html.twig' with { | ||
| id: 'expandable-example', | ||
| button: { | ||
| label: 'Collapsed button', | ||
| variant: 'secondary', | ||
| icon: { | ||
| type: 'ui', | ||
| name: 'corner-arrow', | ||
| transform: 'rotate-180', | ||
| size: 'fluid', | ||
| }, | ||
| }, | ||
| label_expanded: 'Expanded button', | ||
| label_collapsed: 'Collapsed button', | ||
| content: | ||
| 'The EU is building an energy union that ensures Europe’s energy supply is safe, viable and accessible to all. In doing so, it can boost the economy and attract investments that can create new jobs opportunities.', | ||
| } %} | ||
| ``` |
94 changes: 94 additions & 0 deletions
94
src/ec/packages/ec-component-expandable/expandable.html.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| {% spaceless %} | ||
|
|
||
| {# | ||
| Parameters: | ||
| - "id" (string) (default: '') | ||
| - "label_expanded" (string) (default: '') | ||
| - "label_collapsed" (string) (default: '') | ||
| - "label_collapsed" (string) (default: '') | ||
| - "expanded" (boolean) (default: false) | ||
| - "button" (predefined structure) : Button component structure | ||
| - "extra_classes" (string) (default: '') | ||
| - "extra_attributes" (array) (default: []): format: [ | ||
| { | ||
| "name" (string) (default: ''), | ||
| "value" (string) (default: '') | ||
| }, | ||
| ... | ||
| ] | ||
| Blocks: | ||
| - "content" | ||
| #} | ||
|
|
||
| {# Internal properties #} | ||
|
|
||
| {% set _id = id|default('') %} | ||
| {% set _css_class = 'ecl-expandable' %} | ||
| {% set _extra_attributes = "data-ecl-expandable='true'" %} | ||
|
|
||
| {% set _label_expanded = label_expanded|default('') %} | ||
| {% set _label_collapsed = label_collapsed|default('') %} | ||
| {% set _aria_controls = _id ~ '-content' %} | ||
| {% set _content = content|default('') %} | ||
|
|
||
| {% set _expanded = expanded|default(false) %} | ||
| {% set _content_hidden_attribute = '' %} | ||
|
|
||
| {# Internal logic - Process properties #} | ||
|
|
||
| {% if extra_classes is defined and extra_classes is not empty %} | ||
| {% set _css_class = _css_class ~ ' ' ~ extra_classes %} | ||
| {% endif %} | ||
|
|
||
| {% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %} | ||
| {% for attr in extra_attributes %} | ||
| {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %} | ||
| {% endfor %} | ||
| {% endif %} | ||
|
|
||
| {# Print the result #} | ||
|
|
||
| <div class="{{ _css_class }}"{{ _extra_attributes|raw }}> | ||
| {% set _button_attributes = [ | ||
| { name: 'aria-controls', value: _aria_controls }, | ||
| { name: 'data-ecl-expandable-toggle', value: 'true' }, | ||
| { name: 'data-ecl-label-expanded', value: _label_expanded }, | ||
| { name: 'data-ecl-label-collapsed', value: _label_collapsed }, | ||
| ] | ||
| %} | ||
|
|
||
| {% if _expanded %} | ||
| {% set _button_attributes = _button_attributes|merge([ | ||
| { name: 'aria-expanded', value: _expanded }, | ||
| ]) | ||
| %} | ||
|
|
||
| {% set _label = _label_expanded %} | ||
| {% set _content_hidden_attribute = '' %} | ||
|
|
||
| {% else %} | ||
| {% set _label = _label_collapsed %} | ||
| {% set _content_hidden_attribute = 'hidden' %} | ||
| {% endif %} | ||
|
|
||
| {% include '../ec-component-button/button.html.twig' with { | ||
| label: _label, | ||
| variant: 'secondary', | ||
| type: 'button', | ||
| icon_position: "after", | ||
| extra_classes: 'ecl-expandable__toggle', | ||
| extra_attributes: _button_attributes, | ||
| }|merge(button) %} | ||
| <div | ||
| id="{{ _id ~ '-content' }}" | ||
| class="ecl-expandable__content" | ||
| {{ _content_hidden_attribute }} | ||
| > | ||
| <p class="ecl-u-type-paragraph-m"> | ||
| {%- block content _content -%} | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| {% endspaceless %} |
Oops, something went wrong.