@eeacms/volto-eea-design-system 0.3.1 → 0.4.2

package/CHANGELOG.md

@@ -4,8 +4,137 @@ 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).
 
+#### [0.4.2](https://github.com/eea/volto-eea-design-system/compare/0.4.1...0.4.2)
+
+- Autobuild of docusaurus docs [`bc17743`](https://github.com/eea/volto-eea-design-system/commit/bc177436897f80d6ae37fe4856099733831b2c8a)
+- change(docusaurus): color guideline updates and spacing tokens documentation  #148 [`c1154ba`](https://github.com/eea/volto-eea-design-system/commit/c1154ba172c3b3b40b565c2bcb590f1a5e6b25a4)
+- change(docusaurus): moved color swatches around in the color guide [`8a395fc`](https://github.com/eea/volto-eea-design-system/commit/8a395fce52a32cf92449a24d3d4cce5abf25a284)
+- change(docusaurus): added category yml for all sections [`1740572`](https://github.com/eea/volto-eea-design-system/commit/17405728e3f44828da50890b9fc0f4e8a07f8bf2)
+- change(docusaurus): rename gap to space and added em spaces [`f5b042d`](https://github.com/eea/volto-eea-design-system/commit/f5b042d311518ec3fb32c7f259c39ff62d4547f8)
+- change(docusaurus): modified story links to avoid broken usage tabs [`78dc8d8`](https://github.com/eea/volto-eea-design-system/commit/78dc8d8f4e7cade3ab0e911e6dc002eefc1e7986)
+- change(docusaurus): removed description from components and introduced category listing [`f220bf0`](https://github.com/eea/volto-eea-design-system/commit/f220bf0785f5aaede8c25c4164120b09de67b018)
+- change(docusaurus): moved md_components files into webdev/md_components [`73c1c08`](https://github.com/eea/volto-eea-design-system/commit/73c1c08a270d504fa6f2ba2579bcb3e6e25fb112)
+- change(docusaurus): renamed several file id's so that they match the incremental naming sequence [`11299c9`](https://github.com/eea/volto-eea-design-system/commit/11299c9a4c41ca901926f852227dbca0bc1aee17)
+- change(docusaurus): moved extra docs to webdev section [`1ce0797`](https://github.com/eea/volto-eea-design-system/commit/1ce0797b91418272e4e405467cd1468292620005)
+- merge changes from develop into docusaurus token documentation [`a940138`](https://github.com/eea/volto-eea-design-system/commit/a9401384ddf5fcfbf29e50d34f3d7851be85f19a)
+- perf(docs): restructuring order [`8f4134d`](https://github.com/eea/volto-eea-design-system/commit/8f4134d81d1cc59b8ba0d8669415b5eb31c0513d)
+- docs(Docusaurus): timeline, testimonial, quote and tags [`aaa54ec`](https://github.com/eea/volto-eea-design-system/commit/aaa54ecbe182872ffc7fff275d5065ebe790d348)
+- docs(spacing): add relative gap tokens [`92abc8f`](https://github.com/eea/volto-eea-design-system/commit/92abc8fff2c7006e2c64684048e7783216a230bb)
+- docs(Docusaurus): labeled icons [`f6a0f61`](https://github.com/eea/volto-eea-design-system/commit/f6a0f61ede3a36c7d66d9b3091b93b0b5ff9a445)
+- docs(spacing): aligned images [`e946fe5`](https://github.com/eea/volto-eea-design-system/commit/e946fe59457b861a31939e99adf4b380777e01e0)
+- docs(spacing): new image [`fcd3294`](https://github.com/eea/volto-eea-design-system/commit/fcd3294d53db76580b8bffc9678a09fd65b33113)
+- docs(spacing): add missing gaps [`442db46`](https://github.com/eea/volto-eea-design-system/commit/442db468830150c8e4ad5f91775fc5b3c47dd655)
+- docs(colors): updated colors [`a28c99e`](https://github.com/eea/volto-eea-design-system/commit/a28c99e60867c1eaa1b7b68d4154ccaa8c9ef958)
+- docs(spacing): add spacing gap tokens [`2d53727`](https://github.com/eea/volto-eea-design-system/commit/2d53727f8e817588421efea464e849c9f9e16dce)
+- docs(typography): add font size and line height tokens [`2ff65e4`](https://github.com/eea/volto-eea-design-system/commit/2ff65e47cfe56eb3efe976300b764ba13f8685ce)
+- docs(docusaurus): minor fix [`6e66513`](https://github.com/eea/volto-eea-design-system/commit/6e66513f08cff598881ce1051b482ddadf8e0593)
+- docs(tags/content): new page about tags and content [`60be402`](https://github.com/eea/volto-eea-design-system/commit/60be40268a77606c53fc45641bc22166b50b75e7)
+
+#### [0.4.1](https://github.com/eea/volto-eea-design-system/compare/0.4.0...0.4.1)
+
+> 2 June 2022
+
+- Release [`#178`](https://github.com/eea/volto-eea-design-system/pull/178)
+- [R3] Labeled icons [`#137`](https://github.com/eea/volto-eea-design-system/pull/137)
+- Autobuild of docusaurus docs [`724be48`](https://github.com/eea/volto-eea-design-system/commit/724be48bebb5421663969b694fca79181f007977)
+- refactor(LanguageLabeledIcons):minor storybook change [`78f5544`](https://github.com/eea/volto-eea-design-system/commit/78f55442a80cbc2f716ba81274ed08204e3c502a)
+- refactor(LanguageLabeledIcon): set language code to uppercase and minor storybook change [`ac28693`](https://github.com/eea/volto-eea-design-system/commit/ac286931282c0a69bc6d7803e96cbe302db8994f)
+- refactor(labeledIcon): adjust paddings [`9c1ecdd`](https://github.com/eea/volto-eea-design-system/commit/9c1ecddc52c81be1d952d0af67862a284eba9eec)
+- refactor(labeledIcon): add group wrapper in labeled icon stories [`4b7dd31`](https://github.com/eea/volto-eea-design-system/commit/4b7dd314230145b6239fd800d41f546ab5d9eebb)
+- fix(LabeledIconGroup):fix based on Langauge & Download Labeled icon components changes [`3015864`](https://github.com/eea/volto-eea-design-system/commit/3015864ce740f534aa204402f85a9f392e342513)
+- refactor(LanguageLabeledIcon):implement with pop up [`0f3dd8f`](https://github.com/eea/volto-eea-design-system/commit/0f3dd8f0388484f94351a0ab0798ab53e84c9229)
+- refactor(DownloadLabeledIcon):implement with pop up [`aa61f9b`](https://github.com/eea/volto-eea-design-system/commit/aa61f9b7d449c08c08bc4c004da6a0458598c828)
+- refactor(labeledIcons): update margins for group labeled icons [`5fa5ca9`](https://github.com/eea/volto-eea-design-system/commit/5fa5ca9103a5d8ad1510c90cc8c46d0c82abcc63)
+- refactor(labeledIcons): update colors on download links [`c042642`](https://github.com/eea/volto-eea-design-system/commit/c04264229c91bfdea927fd22f4ee1e8ddbcebd5c)
+- refactor(labeledIcons): adjust language labeled icon to figma [`5741e3d`](https://github.com/eea/volto-eea-design-system/commit/5741e3d2e95665ef12670335b12d29cfbf998fdc)
+- refactor(labeledIcons): adjust new tab labeled icon to figma and replace px with rems [`904615d`](https://github.com/eea/volto-eea-design-system/commit/904615d789ea711678f43ce9f9d02a450289031f)
+- refactor(labeledIcons): add variable for icon color [`9f9d3cb`](https://github.com/eea/volto-eea-design-system/commit/9f9d3cba5115c5c91aaaca49c1f834950400673a)
+- refactor(labeledIcons): adjust download icon to figma and replace px with rems [`4ae8530`](https://github.com/eea/volto-eea-design-system/commit/4ae85307a62526fed75ef0b1d37ad59076370b5a)
+- fix(LanguageLabeledIcon):bug fix & languages change [`1436e2b`](https://github.com/eea/volto-eea-design-system/commit/1436e2bc270f8f079f07b7909254bd2e6e087084)
+- fix(Labeled Icons):minor bug fix [`00f3022`](https://github.com/eea/volto-eea-design-system/commit/00f3022cdc2bfad634707f0d6d05768868f599be)
+- feat(languageLabeledIcon) : add new component [`110558e`](https://github.com/eea/volto-eea-design-system/commit/110558eeec37d5b5f616a95298a313ba230dd6f4)
+- chore(LabeledIconGroup) : lint changes [`ab36476`](https://github.com/eea/volto-eea-design-system/commit/ab364763bb2526adbbb7fc3c656a16b497568940)
+- fix(LabeledIconGroup) : fix links for tests [`daa1065`](https://github.com/eea/volto-eea-design-system/commit/daa10653ca37f3e83302e2ebcc566b5f5ec4c4d9)
+- chore(labeledIconGroup) : lint changes [`535cee4`](https://github.com/eea/volto-eea-design-system/commit/535cee4795dff75b35856cb4406a9bd33ee07ca4)
+- feat(LanguageLabeledIcon):add new component [`d00200c`](https://github.com/eea/volto-eea-design-system/commit/d00200c278e1dab02b449b460a325e0f2e7b8ccd)
+- feat(labeledIconGroup) : add new component [`787d648`](https://github.com/eea/volto-eea-design-system/commit/787d648342d78c4f9d28fde9d08e83089ef7b08f)
+- fix(LabeledIcon) : fix lint errors [`91b042f`](https://github.com/eea/volto-eea-design-system/commit/91b042f8c16bd3e99659c1c24a5f2a946c72b03f)
+- fix(newTabLabeledIcon) : add link item [`b1a9ada`](https://github.com/eea/volto-eea-design-system/commit/b1a9ada3dd7dae9e1841cfde5319a6ab37b15de2)
+- feat(newTabLabeledIcon) : add new component [`8f5cd31`](https://github.com/eea/volto-eea-design-system/commit/8f5cd31257a306a58c1d9cdbf7cb428701412369)
+- style(downloadLabeledIcon) : fix alignment [`4558017`](https://github.com/eea/volto-eea-design-system/commit/455801701d2958515885ba2c398312f0c56057b0)
+- style(downloadLabeledIcon) : fix styling [`6d8e3ac`](https://github.com/eea/volto-eea-design-system/commit/6d8e3acb3bac1a4174d4bb526d6188cb5e5f8faa)
+- feat(DownLoadLabeledIcon) : add new component [`6ea2fa1`](https://github.com/eea/volto-eea-design-system/commit/6ea2fa1ec17ce235401a8ac741afa8fede920d26)
+
+#### [0.4.0](https://github.com/eea/volto-eea-design-system/compare/0.3.1...0.4.0)
+
+> 1 June 2022
+
+- Release [`#177`](https://github.com/eea/volto-eea-design-system/pull/177)
+- [Homepage] Carousel [`#161`](https://github.com/eea/volto-eea-design-system/pull/161)
+- [R2] Label [`#160`](https://github.com/eea/volto-eea-design-system/pull/160)
+- docs(homepage): adding homepage with links for upcoming sections [`#166`](https://github.com/eea/volto-eea-design-system/pull/166)
+- Release 0.4.0 [`f4bc509`](https://github.com/eea/volto-eea-design-system/commit/f4bc50928ab877f3670b181dbe6e8cfff7fa2daa)
+- Autobuild of docusaurus docs [`df30dbb`](https://github.com/eea/volto-eea-design-system/commit/df30dbb2ed3de068445b9080851520357ef7636c)
+- refactor(docusaurus): restructured and improved sections navigation #174 [`b47b026`](https://github.com/eea/volto-eea-design-system/commit/b47b0266ffd6baeaf1a5aea1a7ab22c909976de1)
+- docs(docusaurus): copyedit, improved navigation [`998762a`](https://github.com/eea/volto-eea-design-system/commit/998762a5bd40d08f619c00743b66d82b43aed653)
+- Autobuild of docusaurus docs [`28f8122`](https://github.com/eea/volto-eea-design-system/commit/28f81220c2093df75b4c36384cb9c865d0e94b4a)
+- refactor(tokens): add 12 and 14px font size token  #176 [`3681147`](https://github.com/eea/volto-eea-design-system/commit/368114729536f03dd85c2d3565b984c3bdfe3a72)
+- refactor(tokens): add 14px font size token [`8d8695d`](https://github.com/eea/volto-eea-design-system/commit/8d8695dce62e7f29af01447308460e4fe3f72b21)
+- Autobuild of docusaurus docs [`a53b457`](https://github.com/eea/volto-eea-design-system/commit/a53b45781ceec27cf034f9104cfb7b7c1aec519a)
+- change(tokens): added size tokens to be used for width of elements [`cda5dea`](https://github.com/eea/volto-eea-design-system/commit/cda5dea1f6ad1ae980c89999d323d7b385894025)
+- docs(website): created new sections, improved website navigation [`243f0be`](https://github.com/eea/volto-eea-design-system/commit/243f0be4d7fa6e988da0ca0f586f5ea478573eef)
+- docs(website): restructuring, moved current DS docs to new folder [`8bb612f`](https://github.com/eea/volto-eea-design-system/commit/8bb612f1313dfc739d7912aa2e3252f468e1122f)
+- Autobuild of docusaurus docs [`beda042`](https://github.com/eea/volto-eea-design-system/commit/beda0422a088fbb664d1df6878dedb21891f19cc)
+- feature(homepage): added Item group with icons #167 [`2ec99f5`](https://github.com/eea/volto-eea-design-system/commit/2ec99f53aeb183b24073be4014a9c2ec30d5235c)
+- Autobuild of docusaurus docs [`29ad0ab`](https://github.com/eea/volto-eea-design-system/commit/29ad0abfee50e2fcd99b2b7990d2a67b94892f72)
+- change(tokens): added also rem space values [`aedbbdd`](https://github.com/eea/volto-eea-design-system/commit/aedbbddaf7f8be88ed2f8a2b8c21b60752896c53)
+- Autobuild of docusaurus docs [`d69345a`](https://github.com/eea/volto-eea-design-system/commit/d69345a59a24773e20ca1bf918d5bf4f7f944540)
+- change(tokens): rename gap to space and added em spaces [`719efc4`](https://github.com/eea/volto-eea-design-system/commit/719efc44070ef87f049a92e4da96bb111e9fc8ff)
+- Autobuild of docusaurus docs [`54e0dc6`](https://github.com/eea/volto-eea-design-system/commit/54e0dc611160dd51032d319d306cb146ca00ff0c)
+- feat(utilities): add file with basic utilities classes #173 [`855185f`](https://github.com/eea/volto-eea-design-system/commit/855185ff22c77efb75cc5c7850d181254b4c4927)
+- change(utilities): values need important rule [`96150d9`](https://github.com/eea/volto-eea-design-system/commit/96150d9a22cb6be6f338f1e9d052cbd65e3602fc)
+- feat(utilities): add file and basic utilities [`05c88b2`](https://github.com/eea/volto-eea-design-system/commit/05c88b294a49590e3fb355fb6e113f5020442915)
+- refactor(item): add classes for size, set default to tile and add controls for grouped items [`d5a0405`](https://github.com/eea/volto-eea-design-system/commit/d5a0405abba4e5f5d36f899dc9e47f43a96d5e49)
+- Autobuild of docusaurus docs [`7a06b17`](https://github.com/eea/volto-eea-design-system/commit/7a06b17662dd88994ff57de61c4625c25246c569)
+- change(tokens): name spacing tokens gaps and added missing values up to 80px as documented [`9fbd912`](https://github.com/eea/volto-eea-design-system/commit/9fbd912a6f027150149d82678f88885a939120b0)
+- Autobuild of docusaurus docs [`ec928f0`](https://github.com/eea/volto-eea-design-system/commit/ec928f0140004067b64928dd11bfb6c6a6c1079c)
+- change(tokens): updated sizes with 4-8-16px increments [`1f53d65`](https://github.com/eea/volto-eea-design-system/commit/1f53d655df2b24053a5d331c56dfd14bd3602dfd)
+- Autobuild of docusaurus docs [`b2869d1`](https://github.com/eea/volto-eea-design-system/commit/b2869d1658e827bb769a5b836f038e1cc8d8d737)
+- Autobuild of docusaurus docs [`ff2c701`](https://github.com/eea/volto-eea-design-system/commit/ff2c701af58ee173625939120842d3d7e81bb6dc)
+- refactor(quote): Rename sourceInfo to extra info [`76c2b40`](https://github.com/eea/volto-eea-design-system/commit/76c2b400de4814fe79f303bfd2a82842c848231c)
+- Autobuild of docusaurus docs [`4c8e263`](https://github.com/eea/volto-eea-design-system/commit/4c8e26348399aa07515f5ef8a8a85860b5557d18)
+- fix(table): Set responsive breakpoint to @tabletBreakpoint [`067e018`](https://github.com/eea/volto-eea-design-system/commit/067e01842030bfa5639e2a55cb8af5047bb2996f)
+- Autobuild of docusaurus docs [`8e4f3e7`](https://github.com/eea/volto-eea-design-system/commit/8e4f3e79f038d88b0990ca07948e540097baab50)
+- feature(tokens): added borders, z-index, shadows tokens #171 [`74c1788`](https://github.com/eea/volto-eea-design-system/commit/74c178837cedc7ee9fc55effde1096dc03245574)
+- Autobuild of docusaurus docs [`9f5ddf7`](https://github.com/eea/volto-eea-design-system/commit/9f5ddf7994e3cfcdf83a0c74847eaa2910bf88cb)
+- feature(tokens): added initial color design tokens #169 [`da3eae0`](https://github.com/eea/volto-eea-design-system/commit/da3eae05d07783aa5eadaed5d508ee3be8acc47d)
+- Autobuild of docusaurus docs [`ee2c916`](https://github.com/eea/volto-eea-design-system/commit/ee2c91616719d092b72dec8d8fd8ffb5c57819b9)
+- refactor(item): adjust margins to match figma designs [`6334581`](https://github.com/eea/volto-eea-design-system/commit/6334581b336a2f486e85199f371126beea47b92f)
+- fix(item): remove image width css from item.less [`7b21cb2`](https://github.com/eea/volto-eea-design-system/commit/7b21cb2d5ddf6a6f72646f47fd268a0bd7af757d)
+- refactor(item): import item.less in theme definitions [`c516374`](https://github.com/eea/volto-eea-design-system/commit/c51637480192dbece828616010174648ac865e2e)
+- change(tokens): updated z-index tokens with negative values [`404efe4`](https://github.com/eea/volto-eea-design-system/commit/404efe4244d67276b435e60a1d7a69aaa90e3d8a)
+- fix(tokens): hsla function for shadows [`b8e5d37`](https://github.com/eea/volto-eea-design-system/commit/b8e5d37a6e88321b1e2daf995b407c4ddd6e866e)
+- docs(homepage): copy editing [`ee37d6f`](https://github.com/eea/volto-eea-design-system/commit/ee37d6f1d282b973af744f4305c0eb94c0993113)
+- fix(tokens): remove css var from less file [`a9c4224`](https://github.com/eea/volto-eea-design-system/commit/a9c422476b412287713a6b475406615c3aed2aca)
+- refactor(tokens): remove conditional border radius [`f0fe5ad`](https://github.com/eea/volto-eea-design-system/commit/f0fe5ada7b74e9c87623dd2b2774283dd89b9a58)
+- refactor(tokens): add borders, shadows, shapes and z-index tokens [`7069106`](https://github.com/eea/volto-eea-design-system/commit/7069106c2b0ada9cdbad63249b4ada7fde72e05f)
+- refactor(tocens): add color design tokens [`13bb165`](https://github.com/eea/volto-eea-design-system/commit/13bb165e103a25aadb9da6414773dc0d35081d88)
+- Autobuild of docusaurus docs [`f5eeb6b`](https://github.com/eea/volto-eea-design-system/commit/f5eeb6b6746683d5bada81132d20b7cf2a618e6a)
+- refactor(item): WIP replacing unstackable with row [`e3a44de`](https://github.com/eea/volto-eea-design-system/commit/e3a44de4b2dd26667e80e0d131c55b08f3c527d9)
+- feat(ItemwithIcons): Initial Item group with icons, new item variation [`7f4ea47`](https://github.com/eea/volto-eea-design-system/commit/7f4ea476264856845a07cd24be6ec86ccd21ed8d)
+- docs(homepage): adding design system homepage with links for upcoming sections [`c9a9685`](https://github.com/eea/volto-eea-design-system/commit/c9a968508acff74d1182e68cf049046dafd564c5)
+- perf(carousel): added slick library [`ca9be51`](https://github.com/eea/volto-eea-design-system/commit/ca9be5125efa864bc30a0178274d744c5b2bc500)
+- refactor(carousel): remove title from story and color on card hover [`12a1d7c`](https://github.com/eea/volto-eea-design-system/commit/12a1d7c3bd5e7ba6edf4eb20a2d7a6f8f22955f9)
+- fix(carousel):add storybook controls descriptions [`269a603`](https://github.com/eea/volto-eea-design-system/commit/269a60383ed1e54fc57e26d4eed6b37d1da32236)
+- feat(Carousel): create carousel for cards [`2b0d737`](https://github.com/eea/volto-eea-design-system/commit/2b0d73798b4fcbf2897d7a8167d9b4d3b3374fb2)
+- refactor(Label):style changes based on label importance class [`ce4d5d1`](https://github.com/eea/volto-eea-design-system/commit/ce4d5d1a5bf1b1183242a253e37c509d61f82b8c)
+- refactor(Label):add corner,ribbon & basic label stories and styles [`e2bbbb9`](https://github.com/eea/volto-eea-design-system/commit/e2bbbb947113a59127f91b86917ef0edbf36ab16)
+
 #### [0.3.1](https://github.com/eea/volto-eea-design-system/compare/0.3.0...0.3.1)
 
+> 19 May 2022
+
+- Release [`#168`](https://github.com/eea/volto-eea-design-system/pull/168)
 - Autobuild of docusaurus docs [`25a2a6d`](https://github.com/eea/volto-eea-design-system/commit/25a2a6d78db7a3e2313925bb40a6d58355bbfeb7)
 - fix(input,segment): toggle inputs and padding fixes within Volto sidebar forms [`de030d6`](https://github.com/eea/volto-eea-design-system/commit/de030d617325a8f9d028a5c1615faa160fcdd763)
 - Autobuild of docusaurus docs [`1150d98`](https://github.com/eea/volto-eea-design-system/commit/1150d98ee28d16017013209e53228324d5c510e5)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.3.1",
+  "version": "0.4.2",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -21,7 +21,8 @@
   ],
   "dependencies": {
     "@eeacms/volto-corsproxy": "*",
-    "remixicon": "2.5.0"
+    "remixicon": "2.5.0",
+    "react-slick": "^0.28.1"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

package/src/semantic.less

@@ -127,8 +127,12 @@
 //  @import '~semantic-ui-less/definitions/views/feed';
 //}
 
+// & {
+//   @import '~semantic-ui-less/definitions/views/item';
+// }
+
 & {
-  @import '~semantic-ui-less/definitions/views/item';
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/definitions/views/item';
 }
 
 & {
@@ -256,3 +260,19 @@
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/relatedContent';
 }
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/downloadLabeledIcon';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/newTabLabeledIcon';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/labeledIconGroup';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/languageLabeledIcon';
+}

package/src/ui/Card/Card.stories.jsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import { Card, Image, Grid, Container } from 'semantic-ui-react';
+import { Card, Image, Grid, Container, Icon, Button } from 'semantic-ui-react';
+import Slider from 'react-slick';
+
+const tabletBreakpoint = 835;
+const mobileBreakpoint = 480;
 
 export default {
   title: 'Components/Card/Default',
@@ -21,6 +25,15 @@ export default {
         defaultValue: { summary: 'null' },
       },
     },
+    cards: {
+      description: 'cards data',
+      table: {
+        type: {
+          summary: 'object',
+        },
+        defaultValue: { summary: '' },
+      },
+    },
   },
 };
 
@@ -105,12 +118,16 @@ Default.argTypes = {
     },
   },
 };
+Default.parameters = {
+  controls: { exclude: ['cards'] },
+  hideNoControlsWarning: true,
+};
 
 const GridTemplate = (args) => (
   <Container>
     <Grid>
-      {args.cards.map((card) => (
-        <Grid.Column mobile={12} tablet={6} computer={4}>
+      {args.cards.map((card, index) => (
+        <Grid.Column mobile={12} tablet={6} computer={4} key={index}>
           <Card fluid={card.fluid} className={args.class}>
             {card.hasImage && (
               <Image src={card.imgUrl} wrapped ui={false} alt="card image" />
@@ -181,8 +198,8 @@ CardGrid.argTypes = {
 const FluidGridTemplate = (args) => (
   <Container>
     <div className="fluid-card-row">
-      {args.cards.map((card) => (
-        <Card fluid={card.fluid} className={args.class}>
+      {args.cards.map((card, index) => (
+        <Card fluid={card.fluid} className={args.class} key={index}>
           {card.hasImage && (
             <Image src={card.imgUrl} wrapped ui={false} alt="card image" />
           )}
@@ -247,3 +264,166 @@ CardGrid.argTypes = {
     },
   },
 };
+
+const Arrows = (props) => {
+  const { slider = {} } = props;
+
+  return (
+    <>
+      <Button
+        aria-label="Previous slide"
+        className="slider-arrow prev-arrow"
+        icon
+        onClick={() => {
+          if (slider.current) {
+            slider.current.slickPrev();
+          }
+        }}
+      >
+        <Icon className="ri-arrow-left-s-line" />
+      </Button>
+      <Button
+        aria-label="Next slide"
+        className="slider-arrow next-arrow"
+        icon
+        onClick={() => {
+          if (slider.current) {
+            slider.current.slickNext();
+          }
+        }}
+      >
+        <Icon className="ri-arrow-right-s-line" />
+      </Button>
+    </>
+  );
+};
+
+function CarouselCardsContent({ settings, cards, ...rest }) {
+  const slider = React.useRef(null);
+  return (
+    <div className="cards-carousel">
+      <Slider {...settings} ref={slider}>
+        {cards.map((card, index) => (
+          <Card fluid={card.fluid} key={index} className={rest.class}>
+            {card.hasImage && (
+              <Image src={card.imgUrl} wrapped ui={false} alt="card image" />
+            )}
+            <Card.Content>
+              <Card.Meta>{card.meta}</Card.Meta>
+              {/* <Card.Header>{card.title}</Card.Header> */}
+              <Card.Description>{card.description}</Card.Description>
+            </Card.Content>
+            {/* {card.links !== null &&
+              card.links.map((item, index) => (
+                <Card.Content extra key={index}>
+                  <a href="/#">{item.linkName}</a>
+                </Card.Content>
+              ))} */}
+          </Card>
+        ))}
+      </Slider>
+      <Arrows slider={slider} />
+    </div>
+  );
+}
+
+const CarouselCardsTemplate = (args) => (
+  <Container>
+    <CarouselCardsContent {...args}></CarouselCardsContent>
+  </Container>
+);
+
+export const CarouselCards = CarouselCardsTemplate.bind({});
+CarouselCards.args = {
+  title: 'Our news',
+  class: null,
+  settings: {
+    dots: true,
+    infinite: true,
+    slidesToShow: 4,
+    slidesToScroll: 1,
+    responsive: [
+      {
+        breakpoint: tabletBreakpoint,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 1,
+        },
+      },
+      {
+        breakpoint: mobileBreakpoint,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  },
+  cards: [
+    {
+      meta: 'March 20, 2022.',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non ',
+      hasImage: true,
+      fluid: true,
+      links: [{ linkName: 'Link 1' }],
+    },
+    {
+      title: 'Lorem Ipsum',
+      meta: 'March 20, 2022.',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non ',
+      hasImage: true,
+      fluid: true,
+      links: [{ linkName: 'Link 1' }],
+    },
+    {
+      title: 'Lorem Ipsum',
+      meta: 'March 20, 2022.',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non ',
+      hasImage: true,
+      fluid: true,
+      links: [{ linkName: 'Link 1' }],
+    },
+    {
+      title: 'Lorem Ipsum',
+      meta: 'March 20, 2022.',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non ',
+      hasImage: true,
+      fluid: true,
+      links: [{ linkName: 'Link 1' }],
+    },
+    {
+      title: 'Lorem Ipsum',
+      meta: 'March 20, 2022.',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non ',
+      hasImage: true,
+      fluid: true,
+      links: [{ linkName: 'Link 1' }],
+    },
+  ],
+};
+CarouselCards.argTypes = {
+  settings: {
+    description: 'carousel slider settings',
+    table: {
+      type: {
+        summary: 'object',
+      },
+      defaultValue: { summary: '' },
+    },
+  },
+};

package/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Icon, Popup } from 'semantic-ui-react';
+
+function DownloadLabeledIcon({ children, ...rest }) {
+  return (
+    <div className="eea download labeled icon">
+      <Popup
+        className="download-popup"
+        trigger={rest.trigger}
+        content={children}
+        basic
+        on="click"
+        position="bottom center"
+      />
+    </div>
+  );
+}
+
+const Label = ({ children, ...rest }) => {
+  return <div className="label">{children}</div>;
+};
+
+const IconItem = ({ children, ...rest }) => {
+  return (
+    <div className="icon wrapper">
+      <Icon className={rest.icon} />
+    </div>
+  );
+};
+
+const Dropdown = ({ children, ...rest }) => {
+  return (
+    <div className="dropdown">
+      <div className="link wrapper">
+        <ul>
+          {rest.links !== null &&
+            rest.links.map((item, index) => (
+              <li key={index}>
+                <a href={item.href}>
+                  {item.linkName} <Icon className={rest.downloadIcon} />
+                </a>
+              </li>
+            ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+DownloadLabeledIcon.Label = Label;
+DownloadLabeledIcon.Icon = IconItem;
+DownloadLabeledIcon.Dropdown = Dropdown;
+
+export default DownloadLabeledIcon;

package/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import DownloadLabeledIcon from './DownloadLabeledIcon';
+import LabeledIconGroup from '../LabeledIconGroup/LabeledIconGroup';
+
+export default {
+  title: 'Components/Labeled Icons/Download',
+  component: DownloadLabeledIcon,
+  argTypes: {
+    label: {
+      description: 'Download Label',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    icon: {
+      description: 'Download Icon',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    downloadIcon: {
+      description: 'Download option Icon',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    links: {
+      description: 'array of list content',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => (
+  <LabeledIconGroup>
+    <DownloadLabeledIcon
+      {...args}
+      trigger={
+        <div>
+          <DownloadLabeledIcon.Icon {...args}>
+            {args.icon}
+          </DownloadLabeledIcon.Icon>
+          <DownloadLabeledIcon.Label>{args.label}</DownloadLabeledIcon.Label>
+        </div>
+      }
+    >
+      <DownloadLabeledIcon.Dropdown {...args}></DownloadLabeledIcon.Dropdown>
+    </DownloadLabeledIcon>
+  </LabeledIconGroup>
+);
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  label: 'Download',
+  icon: 'ri-download-2-fill',
+  downloadIcon: 'ri-download-2-fill',
+  links: [
+    { linkName: 'PDF', href: '/#' },
+    { linkName: 'SVG', href: '/#' },
+    { linkName: 'PNG', href: '/#' },
+  ],
+};

package/src/ui/LabeledIconGroup/LabeledIconGroup.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import NewTabLabeledIcon from '../NewTabLabeledIcon/NewTabLabeledIcon';
+import DownloadLabeledIcon from '../DownloadLabeledIcon/DownloadLabeledIcon';
+import LanguageLabeledIcon from '../LanguageLabeledIcon/LanguageLabeledIcon';
+
+function LabeledIconGroup({ children, ...rest }) {
+  return (
+    <div className="eea labeled icon group" {...rest}>
+      {children}
+    </div>
+  );
+}
+
+LabeledIconGroup.Download = ({ children, ...rest }) => {
+  return (
+    <div className="group wrapper">
+      <DownloadLabeledIcon
+        {...rest}
+        trigger={
+          <div>
+            <DownloadLabeledIcon.Icon {...rest}>
+              {rest.icon}
+            </DownloadLabeledIcon.Icon>
+            <DownloadLabeledIcon.Label>{rest.label}</DownloadLabeledIcon.Label>
+          </div>
+        }
+      >
+        <DownloadLabeledIcon.Dropdown {...rest}></DownloadLabeledIcon.Dropdown>
+      </DownloadLabeledIcon>
+    </div>
+  );
+};
+
+LabeledIconGroup.NewTab = ({ children, ...rest }) => {
+  return (
+    <div className="group wrapper">
+      <NewTabLabeledIcon {...rest}>
+        <NewTabLabeledIcon.Icon {...rest}>{rest.icon}</NewTabLabeledIcon.Icon>
+        <NewTabLabeledIcon.Label>{rest.label}</NewTabLabeledIcon.Label>
+      </NewTabLabeledIcon>
+    </div>
+  );
+};
+
+LabeledIconGroup.Language = ({ children, ...rest }) => {
+  return (
+    <div className="group wrapper">
+      <LanguageLabeledIcon
+        {...rest}
+        trigger={
+          <div>
+            <LanguageLabeledIcon.Icon
+              icon={rest.icon}
+            ></LanguageLabeledIcon.Icon>
+            <LanguageLabeledIcon.Label>{rest.label}</LanguageLabeledIcon.Label>
+          </div>
+        }
+      >
+        <LanguageLabeledIcon.Dropdown
+          items={rest.items}
+        ></LanguageLabeledIcon.Dropdown>
+      </LanguageLabeledIcon>
+    </div>
+  );
+};
+
+export default LabeledIconGroup;