@eeacms/volto-eea-design-system 1.0.6 → 1.11.0

package/CHANGELOG.md

@@ -4,10 +4,128 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.11.0](https://github.com/eea/volto-eea-design-system/compare/1.0.7...1.11.0) - 11 May 2023
+
+#### :boom: Breaking Change
+
+- breaking(table): cell text align is again inherited instead of center [David Ichim - [`46602c5`](https://github.com/eea/volto-eea-design-system/commit/46602c59bfebd0eae8ede2dcc345efdc635e35f6)]
+
+#### :rocket: New Features
+
+- feat(docusaurus):  Add Video block to docusaurus #343 from eea/feature-video-block [ichim-david - [`f692fd4`](https://github.com/eea/volto-eea-design-system/commit/f692fd42a8c0171db3e86a95c504b7a6f8b89b30)]
+- feat(cards): added image position and title and description max lines also to storybook #335 from eea/rounded-card-control [ichim-david - [`9cba23b`](https://github.com/eea/volto-eea-design-system/commit/9cba23bef8d74cdd5cf3505b9a9f3d51b68eedcf)]
+- feat(accordion): Add control to change the heading tag of the title within storybook #337 from eea/accordion-refactor [ichim-david - [`3bf19bd`](https://github.com/eea/volto-eea-design-system/commit/3bf19bdc4053d9e5b8c69226d55b358632d82c5e)]
+- feat(cards): add teaser card image alignment styles refs #250422 #338 from eea/teaser-image-alignment [ichim-david - [`1e5677c`](https://github.com/eea/volto-eea-design-system/commit/1e5677c8d40aeb5013097219d45954b869974e90)]
+- feat(storybook):  Add Video block to storybook based on existing Volto EEA add-on #331 from eea/feature-video-block [ichim-david - [`1b539c8`](https://github.com/eea/volto-eea-design-system/commit/1b539c8ccfab459fa7682cca7f75dd6aaaabca24)]
+- feat(teaser): add object-fit and object-position classnames [nileshgulia1 - [`68c9567`](https://github.com/eea/volto-eea-design-system/commit/68c9567179e4e67136a9fd53758d1f6fb43f005c)]
+- feat(video) initial component work in progress [Antonis Tarantilis - [`1c99c91`](https://github.com/eea/volto-eea-design-system/commit/1c99c914161827528bc3a6bf9f8c13bef4ba5817)]
+- feat(video): add video block story [Antonis Tarantilis - [`e1addf5`](https://github.com/eea/volto-eea-design-system/commit/e1addf5df1219af4d6663310342ffb8587404e12)]
+
+#### :bug: Bug Fixes
+
+- fix(listing): link size for image block by setting display to block [David Ichim - [`5afa665`](https://github.com/eea/volto-eea-design-system/commit/5afa6651ce35aaef0b09da71f13dd90b90ac5052)]
+- fix(footer): Check contact url if is internal #250343 #342 from eea/footer_url_internal_check [ichim-david - [`d753c21`](https://github.com/eea/volto-eea-design-system/commit/d753c2150ec211ec5f4838afc6dd53f89c8a3b7b)]
+- fix: fill links in Storybook #250343 [andreiggr - [`e09995b`](https://github.com/eea/volto-eea-design-system/commit/e09995b1488176017d4e9c04ee89b84a8145d0c4)]
+- fix(card): overrides file missing { and cleaned duplicated css code [David Ichim - [`0979032`](https://github.com/eea/volto-eea-design-system/commit/0979032827318d3af186e05d23bf781094d8e82f)]
+- fix(cards): title from next line becoming visible with large titles [David Ichim - [`c196f1a`](https://github.com/eea/volto-eea-design-system/commit/c196f1a35ee06a0bec1d7b2e33d02f0744fe57fd)]
+- fix(cards): use css variables [nileshgulia1 - [`71abd31`](https://github.com/eea/volto-eea-design-system/commit/71abd31ece6c24d85d32698fea448a9493475452)]
+- fix(video): fix lint track error [Antonis Tarantilis - [`6249f9e`](https://github.com/eea/volto-eea-design-system/commit/6249f9e93b21c15883974ccbfa980749e342e4ab)]
+- fix(video): fix tracks after the file loader module update [Antonis Tarantilis - [`a3a3614`](https://github.com/eea/volto-eea-design-system/commit/a3a3614e19ce25e65d8f51e70c47d6c634a15a0e)]
+
+#### :nail_care: Enhancements
+
+- change(cards, utilities): modified name of object fit and position classes to have hyphens [David Ichim - [`5fb39ab`](https://github.com/eea/volto-eea-design-system/commit/5fb39ab2601d36b92cf896a7de66025ba56928a6)]
+- change(search): added possibility to configure button url in search popup  #345 from eea/searchpopup_update [ichim-david - [`112e97e`](https://github.com/eea/volto-eea-design-system/commit/112e97e2139cd5bed5be23cd1bcc80065ae2ce09)]
+- refactor(card): restore designs & add max lines controls [Antonis Tarantilis - [`e7d6e39`](https://github.com/eea/volto-eea-design-system/commit/e7d6e395dfc4110a361d27cd25af4a950a283aa4)]
+- refactor(card): delete rounded card code and stories [Antonis Tarantilis - [`5177697`](https://github.com/eea/volto-eea-design-system/commit/5177697eac60b9876160b5f2741f0389e4bf8196)]
+- refactor(card): add image controls [Antonis Tarantilis - [`5c1c0b8`](https://github.com/eea/volto-eea-design-system/commit/5c1c0b8081fdc5f944fcf495e17379a9526e25d0)]
+- change(cards): set object fit and position on any ui images [David Ichim - [`1185305`](https://github.com/eea/volto-eea-design-system/commit/118530573145055ddb11e717ce2ba80270586c66)]
+- refactor(accordion): update structure [Antonis Tarantilis - [`fc9847f`](https://github.com/eea/volto-eea-design-system/commit/fc9847fdc11576a73770caee0f141992652bb001)]
+- refactor(card): add rounded control for cards [Antonis Tarantilis - [`df2e6a0`](https://github.com/eea/volto-eea-design-system/commit/df2e6a0bea91ee87a522a0c0eb3ea16d2eb61f0a)]
+
+#### :house: Documentation changes
+
+- docs(video): docusaurus page for video component [Dora Anastasiou - [`6e5b51e`](https://github.com/eea/volto-eea-design-system/commit/6e5b51e8fed58c4abc37b6d4a86a89256c9422a2)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.11.0 [alin - [`acc76ea`](https://github.com/eea/volto-eea-design-system/commit/acc76ea7b81e31a8d83179cb0af48482a8f84709)]
+- bump package version [David Ichim - [`3dfa3f0`](https://github.com/eea/volto-eea-design-system/commit/3dfa3f088a4c012ac1bb36f3ef08fac9079f3f81)]
+- added possibility to configure button url [Zoltan Szabo - [`91cd277`](https://github.com/eea/volto-eea-design-system/commit/91cd27764f646429f168c09361b370632e900c80)]
+- Update Footer.stories.js [ichim-david - [`4001536`](https://github.com/eea/volto-eea-design-system/commit/400153652a87b141c5f081fa443127f40d8b2d61)]
+- no need for title in link [andreiggr - [`b01c361`](https://github.com/eea/volto-eea-design-system/commit/b01c361c7e346d485214d69f33a7fc22180f5b5c)]
+- Check contact url if is internal [andreiggr - [`5996d4e`](https://github.com/eea/volto-eea-design-system/commit/5996d4efc26aa00f2644f658252d6b817f06c177)]
+- (feat): Make menu aware of pathname #151573 #336 from eea/ionut-menu [ichim-david - [`d4a2a96`](https://github.com/eea/volto-eea-design-system/commit/d4a2a96807bf9ea11ffaf08f2abeaa629c3dc876)]
+- remove default acitve index [Dobricean Ioan Dorian - [`57235c6`](https://github.com/eea/volto-eea-design-system/commit/57235c6ad03730c23fe97f01c20a0a955cdcb732)]
+- add default active index back [Dobricean Ioan Dorian - [`5020467`](https://github.com/eea/volto-eea-design-system/commit/5020467ed33612804626cf51dd5f2140d914757c)]
+- remove console [Dobricean Ioan Dorian - [`7320e3a`](https://github.com/eea/volto-eea-design-system/commit/7320e3a3e2c1c8190480570edec3a57180c4eb4f)]
+- ismultilingual [Dobricean Ioan Dorian - [`367c07c`](https://github.com/eea/volto-eea-design-system/commit/367c07c500cb8db3fb5941513ecba5eb357bc6af)]
+- activeIndex [Dobricean Ioan Dorian - [`ba9d4b3`](https://github.com/eea/volto-eea-design-system/commit/ba9d4b3b1bf0ace3adc2b4dd55c09c509293138f)]
+- Back to dev [Alin Voinea - [`98d0031`](https://github.com/eea/volto-eea-design-system/commit/98d00316740230cc3b4b95e031e0c1987effde76)]
+- removed babel override, loader change should be done in storybook config [David Ichim - [`d63233e`](https://github.com/eea/volto-eea-design-system/commit/d63233ef24eb47a1f4ab68b454895886a0728fc7)]
+### [1.0.7](https://github.com/eea/volto-eea-design-system/compare/1.0.6...1.0.7) - 10 April 2023
+
+#### :rocket: New Features
+
+- feat(storybook): components keyboard and screen reader optimization #324 from eea/design-system-accessibility [ichim-david - [`85faff7`](https://github.com/eea/volto-eea-design-system/commit/85faff73025442a012f079b6734ef868862cc44f)]
+
+#### :bug: Bug Fixes
+
+- fix(cards): focus outline for header needed for the overflow hidden solution with max title lines [David Ichim - [`849a7a8`](https://github.com/eea/volto-eea-design-system/commit/849a7a8e3cf801bf0a4d7e9189b603ea15219fcc)]
+- fix(header): external url in header now takes you to the correct url #330 from eea/header-external-url-fix [ichim-david - [`086c61d`](https://github.com/eea/volto-eea-design-system/commit/086c61d683a7ac67dea221aa39ffe4cef05a9a68)]
+- fix(item): flex variant on edit when inside blockchooser #333 from eea/fix-item-csss [ichim-david - [`65b9099`](https://github.com/eea/volto-eea-design-system/commit/65b9099779180feeb7d10384928bb0a3224b947d)]
+- fix(item): use child selector instead of descendent as it interferes with blockchooser refs #157040 [nileshgulia1 - [`ad4ca37`](https://github.com/eea/volto-eea-design-system/commit/ad4ca3725c595c8dbeaff69f730928313c1779ec)]
+- fix: github autoformat [andreiggr - [`be97749`](https://github.com/eea/volto-eea-design-system/commit/be9774981032759b3284a6fb93490a204a817c7a)]
+- fix: dont run isInternalURL twice [Andrei Grigore - [`a48984e`](https://github.com/eea/volto-eea-design-system/commit/a48984e0cb224944aed3846447c416511d080779)]
+- fix: check if client method change [andreiggr - [`7c53b83`](https://github.com/eea/volto-eea-design-system/commit/7c53b83a54e4e7d3c5329c46de03cdf7aabedf13)]
+- fix: external url in header [andreiggr - [`9e3aea6`](https://github.com/eea/volto-eea-design-system/commit/9e3aea649ca6f9446324d5d351cdfcde08332f84)]
+- fix(tag): fix in args [Antonis Tarantilis - [`18eaaf4`](https://github.com/eea/volto-eea-design-system/commit/18eaaf41fa80a3e175341a2ddd7376b8281fee7d)]
+
+#### :nail_care: Enhancements
+
+- change(card): simplified headerLineHeightOffset used as margin top for cards header [David Ichim - [`ca61105`](https://github.com/eea/volto-eea-design-system/commit/ca61105f2f39e6880ce545ba4d54f3568e7b87e2)]
+- change(storybook): removed links for Label and Comment that we implement without a link [David Ichim - [`ee0bfdf`](https://github.com/eea/volto-eea-design-system/commit/ee0bfdf3aee3e4b6b6eba6dabd7817a37ace48ae)]
+- change(logos): updated eionet logo used in the site footer #318 from eea/footer-logo-update [ichim-david - [`70671d0`](https://github.com/eea/volto-eea-design-system/commit/70671d03bbc228e3013e382cb51e6764a83b01a8)]
+- refactor(label): add href attribute to links [Antonis Tarantilis - [`05f664d`](https://github.com/eea/volto-eea-design-system/commit/05f664dde27f1e0580ab7f32a7934e4d8e85c918)]
+- change(breadcrumbs,mega-menu): better screen readers support, see links instead of groups #309 from eea/firefox-accessibility-tab-issues [ichim-david - [`d6b0b4a`](https://github.com/eea/volto-eea-design-system/commit/d6b0b4adba8f04799491025fb41ac97e875bcce0)]
+- change(mega-menu): added code to align countries left column subtitle with the right column [David Ichim - [`1aa33dd`](https://github.com/eea/volto-eea-design-system/commit/1aa33dd7ac7154a91515eef688f276d664d5d7f3)]
+- change(mega-menu): sub-title padding tweaks for better spacing normalization [David Ichim - [`e08668d`](https://github.com/eea/volto-eea-design-system/commit/e08668dd9fd948e57628e5582e7a4a7f08d96451)]
+- change(breadcrumbs): fixed sizing of breadcrumbs list items [David Ichim - [`1761e98`](https://github.com/eea/volto-eea-design-system/commit/1761e984a6ffebbcca0c7b88128a01235fc6b903)]
+- change(inpageNavigation): story improvements [Antonis Tarantilis - [`ade63c6`](https://github.com/eea/volto-eea-design-system/commit/ade63c6f0b08c62318d31c54568cca29d0f106bc)]
+- refactor(inpageNavigation): restructure as a button [Antonis Tarantilis - [`48e22ac`](https://github.com/eea/volto-eea-design-system/commit/48e22ac0ee521f87497822a0ec9d627829d849d5)]
+- change(breadcrumbs): label modification for better screen reader output [David Ichim - [`c967bef`](https://github.com/eea/volto-eea-design-system/commit/c967bef63ac6f622f5936235dd5590831a674d15)]
+- change(checkbox): toggle hover color correction [Antonis Tarantilis - [`4f4d0df`](https://github.com/eea/volto-eea-design-system/commit/4f4d0df7292fdccb89f83feface51639bd5d6559)]
+- refactor(checkbox): accessibility fix [Antonis Tarantilis - [`3b3047f`](https://github.com/eea/volto-eea-design-system/commit/3b3047f6a6bdd9e9ad858e6a7ca0c6f6b404e605)]
+- refactor(newTabLabeledIcon): accessibility fix [Antonis Tarantilis - [`211e40a`](https://github.com/eea/volto-eea-design-system/commit/211e40aa47d1f0de91b1d949770c452336b80248)]
+- refactor(languageLabeledIcon): accessibility fix [Antonis Tarantilis - [`61edd9e`](https://github.com/eea/volto-eea-design-system/commit/61edd9e1022a8954930db30c262290680974d880)]
+- refactor(downloadLabeledIcon): accessibility fix [Antonis Tarantilis - [`df3935d`](https://github.com/eea/volto-eea-design-system/commit/df3935dc5836298768316399ba36927325541fef)]
+- refactor(labeledIconGroup): group updates for all labeled icons [Antonis Tarantilis - [`a679d9d`](https://github.com/eea/volto-eea-design-system/commit/a679d9d05b804f516fdeed449eba1e74e227818c)]
+- change(ContextNavigation): accessibility updates, not restructuring of the volto component [Antonis Tarantilis - [`03fe83d`](https://github.com/eea/volto-eea-design-system/commit/03fe83dce70c6931c543b93c71e3cd8e16f99ec8)]
+- refactor(comment): accessibility fixes and text button update [Antonis Tarantilis - [`dad8cb6`](https://github.com/eea/volto-eea-design-system/commit/dad8cb67a0092b01b50197c94691ed8a5d00a128)]
+- change(card): add links to teaser titles [Antonis Tarantilis - [`cc64c74`](https://github.com/eea/volto-eea-design-system/commit/cc64c74a69539af287f424abdf96226635284303)]
+- refactor(card): fix header outline not showing issue [Antonis Tarantilis - [`48fc2e2`](https://github.com/eea/volto-eea-design-system/commit/48fc2e2328ff184402e15edbaf1ed2507e771a14)]
+- refactor(modal): restructure close icon as button [Antonis Tarantilis - [`f1b836e`](https://github.com/eea/volto-eea-design-system/commit/f1b836e3071c220235eb327ee7ef67edac4d467d)]
+- change(logo): update eionet svg [Antonis Tarantilis - [`3c87fc7`](https://github.com/eea/volto-eea-design-system/commit/3c87fc750a3dc376205a643eefced410a41b22c6)]
+- refactor(megaMenu): clean up function after test [Antonis Tarantilis - [`883eb73`](https://github.com/eea/volto-eea-design-system/commit/883eb73cbc3db6a1fadd0200118eafdce91b7aab)]
+- refactor(megaMenu): align menu items with demo site for better testing [Antonis Tarantilis - [`82a5c84`](https://github.com/eea/volto-eea-design-system/commit/82a5c84cfde81dd8243f3f9a2d1fcaa8ac4b1463)]
+- refactor(breadcrumbs): updates on structure and story for accessibility [Antonis Tarantilis - [`770c8c0`](https://github.com/eea/volto-eea-design-system/commit/770c8c0bce88c5d9301ab0293a8e4865849bfeb2)]
+- refactor(megaMenu): Restructure Topics and Countries lists [Antonis Tarantilis - [`d816e7a`](https://github.com/eea/volto-eea-design-system/commit/d816e7ab9cdf2f202ab994201c16241cfb26c33a)]
+- change(mega-menu): use lists for navigation, enhance voice over support for better accessibility [David Ichim - [`d13137f`](https://github.com/eea/volto-eea-design-system/commit/d13137f024d6357514b85f184d219eb81dd585f2)]
+- refactor(header): firefox accessibility errors fix [Antonis Tarantilis - [`c7d35b9`](https://github.com/eea/volto-eea-design-system/commit/c7d35b92b90940b466ea016dbbb3f1c6dfa0c3ab)]
+
+#### :house: Internal changes
+
+- style(megaMenu): remove comments and unused properties [Antonis Tarantilis - [`fa5f8f8`](https://github.com/eea/volto-eea-design-system/commit/fa5f8f878421d879026aacd86e5390112b8852a1)]
+
+#### :house: Documentation changes
+
+- docs(footer): logo update [Manthos Matzios - [`ad982d6`](https://github.com/eea/volto-eea-design-system/commit/ad982d63423442bc292cd7553ad3163b33b337bb)]
+
 ### [1.0.6](https://github.com/eea/volto-eea-design-system/compare/1.0.5...1.0.6) - 29 March 2023
 
 #### :rocket: New Features
 
+- feat: add viewport-(width/height) less functions and fixed banner image url #329 from eea/develop [ichim-david - [`e8e70bd`](https://github.com/eea/volto-eea-design-system/commit/e8e70bdc81f4f301a9dce370867a873e55563048)]
 - feat: add viewport-(width/height) less functions [Miu Razvan - [`68300a3`](https://github.com/eea/volto-eea-design-system/commit/68300a3c34e66954c7ef3a6e52baa37431fbfa9e)]
 
 #### :nail_care: Enhancements
@@ -102,7 +220,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fixed accordion selector typo [David Ichim - [`f4cabc8`](https://github.com/eea/volto-eea-design-system/commit/f4cabc8f2222cf587af9e04b0ea196799b84202f)]
 ### [1.0.1](https://github.com/eea/volto-eea-design-system/compare/1.0.0...1.0.1) - 13 March 2023
 
-### [1.0.0](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.6...1.0.0) - 13 March 2023
+## [1.0.0](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.6...1.0.0) - 13 March 2023
 
 #### :bug: Bug Fixes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.6",
+  "version": "1.11.0",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/semantic.less

@@ -249,10 +249,6 @@
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/tagList';
 }
 
-& {
-  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/avatarGrid';
-}
-
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/keyContent';
 }

package/src/ui/Accordion/Accordion.stories.js

@@ -15,85 +15,28 @@ export default {
       defaultValue: 'primary',
       options: ['default', 'primary', 'secondary', 'tertiary'],
       control: { type: 'select' },
-      description: 'call to action variation',
       table: {
         defaultValue: { summary: 'primary' },
         type: { summary: 'string' },
       },
     },
-    toggle1: {
-      description: 'Text of the accordion toggler',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: {
-          summary: '""',
-        },
-      },
-    },
-    toggle2: {
-      description: 'Text of the accordion toggler',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: {
-          summary: '""',
-        },
-      },
-    },
-    toggle3: {
-      description: 'Text of the accordion toggler',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: {
-          summary: '""',
-        },
-      },
-    },
-    content1: {
-      description: 'Text of the hidden content',
-      table: {
-        type: {
-          summary: 'array',
-        },
-        defaultValue: {
-          summary: '""',
-        },
-      },
-    },
-    content2: {
-      description: 'Text of the hidden content',
-      table: {
-        type: {
-          summary: 'array',
-        },
-        defaultValue: {
-          summary: '""',
-        },
-      },
-    },
-    content3: {
-      description: 'Text of the hidden content',
+    title_size: {
+      name: 'Title size',
+      defaultValue: 'primary',
+      options: ['no value', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      control: { type: 'select' },
       table: {
-        type: {
-          summary: 'array',
-        },
-        defaultValue: {
-          summary: '""',
-        },
+        defaultValue: { summary: 'primary' },
+        type: { summary: 'string' },
       },
     },
   },
 };
 
 function AccordionContainer({ ...args }) {
-  const [activeIndex, setActiveIndex] = useState();
+  const [activeIndex, setActiveIndex] = useState([0]);
 
-  const toggleOpenAccordion = (e, titleProps) => {
+  const handleClick = (e, titleProps) => {
     const { index } = titleProps;
     const newIndex = activeIndex === index ? -1 : index;
 
@@ -102,70 +45,56 @@ function AccordionContainer({ ...args }) {
 
   return (
     <Container>
-      <Accordion className={args.variant}>
-        <Accordion.Title
-          active={activeIndex === 0}
-          index={0}
-          onClick={toggleOpenAccordion}
-          as="button"
-        >
-          {args.toggle1}
-          <Icon className="ri-arrow-down-s-line" />
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 0}>
-          {args.content1.length > 0 &&
-            args.content1.map((item, index) => <p key={index}>{item}</p>)}
-          <a href="/#">Read more</a>
-        </Accordion.Content>
-
-        <Accordion.Title
-          active={activeIndex === 1}
-          index={1}
-          onClick={toggleOpenAccordion}
-          as="button"
-        >
-          {args.toggle2}
-          <Icon className="ri-arrow-down-s-line" />
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 1}>
-          {args.content2.length > 0 &&
-            args.content2.map((item, index) => <p key={index}>{item}</p>)}
-        </Accordion.Content>
-
-        <Accordion.Title
-          active={activeIndex === 2}
-          index={2}
-          onClick={toggleOpenAccordion}
-          as="button"
-        >
-          {args.toggle3}
-          <Icon className="ri-arrow-down-s-line" />
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 2}>
-          {args.content3.length > 0 &&
-            args.content3.map((item, index) => <p key={index}>{item}</p>)}
-        </Accordion.Content>
-      </Accordion>
+      <div className="accordion-block">
+        {args.panels.map((panel, index) => {
+          return (
+            <Accordion className={args.variant} key={index}>
+              <Accordion.Title
+                index={index}
+                tabIndex={0}
+                active={activeIndex === index}
+                onClick={handleClick}
+                as={args.title_size === 'no value' ? '' : args.title_size}
+                onKeyDown={(e) => {
+                  if (e.nativeEvent.keyCode === 13) {
+                    handleClick(e, { index });
+                  }
+                }}
+              >
+                <span>{panel.title}</span>
+                <Icon className="ri-arrow-down-s-line" />
+              </Accordion.Title>
+              <Accordion.Content active={activeIndex === index}>
+                {panel.content}
+              </Accordion.Content>
+            </Accordion>
+          );
+        })}
+      </div>
     </Container>
   );
 }
 
 const Template = (args) => <AccordionContainer {...args}></AccordionContainer>;
-
 export const Default = Template.bind({});
 Default.args = {
   variant: 'secondary',
-  toggle1: 'Water and marine environment',
-  toggle2: 'Resource efficiency and waste',
-  toggle3: 'Air pollution',
-  content1: [
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
-  ],
-  content2: [
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
-  ],
-  content3: [
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+  title_size: 'no value',
+  panels: [
+    {
+      title: 'Water and marine environment',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+    },
+    {
+      title: 'Resource efficiency and waste',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+    },
+    {
+      title: 'Air pollution',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+    },
   ],
 };

package/src/ui/Breadcrumbs/Breadcrumb.stories.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Breadcrumb, Container, Icon, Image } from 'semantic-ui-react';
-import homeSVG from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/home-icon.svg';
-import { Link } from 'react-router-dom';
+import { Breadcrumb } from 'semantic-ui-react';
+import { BreadcrumbsComponent } from './Breadcrumbs';
 
 export default {
   title: 'Components/Breadcrumb',
@@ -37,43 +36,16 @@ export default {
   },
 };
 
-//const Template = (args) => <Breadcrumb {...args}></Breadcrumb>;
-
 const Template = (args) => (
-  <Container>
-    <Breadcrumb size="tiny">
-      <Breadcrumb.Section key="home" href={args.root}>
-        <Image src={homeSVG} alt="home" />
-      </Breadcrumb.Section>
-      <Breadcrumb.Divider>
-        <Icon className="ri-arrow-right-s-line"></Icon>
-      </Breadcrumb.Divider>
-      {args.sections.map((section, index, sections) => [
-        index !== 0 && (
-          <Breadcrumb.Divider key={index}>
-            <Icon className="ri-arrow-right-s-line"></Icon>
-          </Breadcrumb.Divider>
-        ),
-        index < sections.length - 1 ? (
-          <Link key={section.href} to={section.href} className="section">
-            {section.content}{' '}
-          </Link>
-        ) : (
-          <Breadcrumb.Section key={section.key} active>
-            {section.content}{' '}
-          </Breadcrumb.Section>
-        ),
-      ])}
-    </Breadcrumb>
-  </Container>
+  <BreadcrumbsComponent root={args.root} sections={args.sections} />
 );
 
 export const Default = Template.bind({});
 Default.args = {
   root: 'https://www.eea.europa.eu/',
   sections: [
-    { key: 'Section 1', content: 'Section 1', href: '/#' },
-    { key: 'Section 2', content: 'Section 2', href: '/#' },
-    { key: 'Section 3', content: 'Section 3', href: '/#' },
+    { key: 'Section 1', title: 'Section 1', href: '/#' },
+    { key: 'Section 2', title: 'Section 2', href: '/#' },
+    { key: 'Section 3', title: 'Section 3', href: '/#' },
   ],
 };

package/src/ui/Breadcrumbs/Breadcrumbs.jsx

@@ -17,32 +17,32 @@ const Breadcrumbs = ({
   size = 'tiny',
 }) => {
   return sections.length > 0 ? (
-    <Segment
-      role="navigation"
-      aria-label={'breadcrumbs'}
-      className="breadcrumbs"
-      attached
-      vertical
-    >
+    <Segment className="breadcrumbs" attached vertical>
       <Container>
-        <Breadcrumb size={size}>
-          <Link to={root || '/'} className="section" title={'Home'}>
-            <Image src={homeIcon} alt="home" />
-          </Link>
-          {sections.map((item, index, items) => [
-            <Breadcrumb.Divider key={`divider-${item.href}`}>
-              <Icon className={icon}></Icon>
-            </Breadcrumb.Divider>,
-            index < items.length - 1 ? (
-              <Link key={item.key} to={item.href} className="section">
-                {item.title}
+        <Breadcrumb size={size} as="nav" aria-label={'Breadcrumbs'}>
+          <ol aria-label="Breadcrumbs navigation">
+            <li>
+              <Link to={root || '/'} className="section" title={'Home'}>
+                <Image src={homeIcon} alt="" />
               </Link>
-            ) : (
-              <Breadcrumb.Section key={item.key} active>
-                {item.title}
-              </Breadcrumb.Section>
-            ),
-          ])}
+            </li>
+            {sections.map((item, index, items) => [
+              <li key={index}>
+                <Breadcrumb.Divider key={`divider-${item.href}`}>
+                  <Icon className={icon}></Icon>
+                </Breadcrumb.Divider>
+                {index < items.length - 1 ? (
+                  <Link key={item.key} to={item.href} className="section">
+                    {item.title}
+                  </Link>
+                ) : (
+                  <Breadcrumb.Section key={item.key} active>
+                    {item.title}
+                  </Breadcrumb.Section>
+                )}
+              </li>,
+            ])}
+          </ol>
         </Breadcrumb>
       </Container>
     </Segment>