@eeacms/volto-eea-design-system 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -4,12 +4,130 @@ 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.2.2](https://github.com/eea/volto-eea-design-system/compare/0.2.1...0.2.2)
+
+- fix(volto): various fixes for issues presented in ticket  #147629 [`#150`](https://github.com/eea/volto-eea-design-system/pull/150)
+- [R2] Card [updated for R3] [`#152`](https://github.com/eea/volto-eea-design-system/pull/152)
+- [R2] Ordered list [`#144`](https://github.com/eea/volto-eea-design-system/pull/144)
+- change(button): modified buttons to use default semantic ui button classification [`#149`](https://github.com/eea/volto-eea-design-system/pull/149)
+-  refactor(keyContent): update based on figma design [`#126`](https://github.com/eea/volto-eea-design-system/pull/126)
+-  feat(Toggle): create toggle story in forms [`#145`](https://github.com/eea/volto-eea-design-system/pull/145)
+-  refactor(loader): Cleanup the default loader [`#146`](https://github.com/eea/volto-eea-design-system/pull/146)
+- [R2] Timeline [`#147`](https://github.com/eea/volto-eea-design-system/pull/147)
+- Autobuild of docusaurus docs [`06e7103`](https://github.com/eea/volto-eea-design-system/commit/06e7103c0973bebc4112c3d8a1e52a4d1932518b)
+- Autobuild of docusaurus docs [`e182730`](https://github.com/eea/volto-eea-design-system/commit/e182730119c2eb206908cd0c158a2af7fed7655c)
+- Autobuild of docusaurus docs [`9e5172a`](https://github.com/eea/volto-eea-design-system/commit/9e5172ac2bb36766077aeb4f15f95f3c6ca6e98d)
+- refactor(card): import image for rounded card [`ca5a47e`](https://github.com/eea/volto-eea-design-system/commit/ca5a47ea2cd713336c7c8ecdebebbdacd681282f)
+- refactor(card): update rounded card image path [`8db3a85`](https://github.com/eea/volto-eea-design-system/commit/8db3a85a45e8e05a3fe86ab824e7550d437222c3)
+- fix(dropdown): being hidden because of third party css [`7d353df`](https://github.com/eea/volto-eea-design-system/commit/7d353dfd65e93d08a3c8584adeeebea50bf7efe8)
+- change(breadcrumb): brought back pastanaga overrides to breadcrumbs [`bca1c93`](https://github.com/eea/volto-eea-design-system/commit/bca1c939c1d49dab1d4b8e72c0999d78383fd643)
+- fix(form): added back overrides from Pastanaga theme [`a3f7ff8`](https://github.com/eea/volto-eea-design-system/commit/a3f7ff810cdeb55b009c2dadc6753d01bbd10d8c)
+- Autobuild of docusaurus docs [`2415149`](https://github.com/eea/volto-eea-design-system/commit/2415149325ee94345ef0711aeb4b34660e7250cb)
+- change(progress,label): color accessibility fixes  #151 [`09cf6e3`](https://github.com/eea/volto-eea-design-system/commit/09cf6e34ed5a57bfbfc8fe95787591387776df86)
+- refactor(card): remove story [`afc5f79`](https://github.com/eea/volto-eea-design-system/commit/afc5f7903a0049563355e3c9292fdd89fa532740)
+- refactor(card): use the rounded class for avatar grid [`8c000f3`](https://github.com/eea/volto-eea-design-system/commit/8c000f3c37103e0068b6d6554783da8188603442)
+- change(button): bumped z-index of sidenav expand button [`445ed8a`](https://github.com/eea/volto-eea-design-system/commit/445ed8a8ede4e458814f380bee0600dbb8ff42f6)
+- fix(modal): overflow hidden as clearfix of last child from modal [`b4923f5`](https://github.com/eea/volto-eea-design-system/commit/b4923f5165a0a7e8d2dd33ea4c35f9f951372909)
+- fix(addForm): add min height to add form and fixed block chooser overflow [`ca4415d`](https://github.com/eea/volto-eea-design-system/commit/ca4415d49b973378894ec9270501beafbefff776)
+- refactor(card): add card grid fluid story with no columns [`f38251c`](https://github.com/eea/volto-eea-design-system/commit/f38251ca3fa04a9b586468ead44bbfe8ae110fbb)
+- refactor(card): remove stories [`0deb0ca`](https://github.com/eea/volto-eea-design-system/commit/0deb0cab6d7fd73957b149325960c266c33cdc6f)
+- Autobuild of docusaurus docs [`41ad3f7`](https://github.com/eea/volto-eea-design-system/commit/41ad3f72174a3d8abc7f0257a70b58a9ef943fe8)
+- change(button): show only labeled variant for buttons with icons [`bf49944`](https://github.com/eea/volto-eea-design-system/commit/bf499446dc02e4be8d6452a3e0cba5797b8a005e)
+- refactor(card) Update rounded card class [`140b587`](https://github.com/eea/volto-eea-design-system/commit/140b58746673a864d7ea218c4f8a02dc70207af4)
+- refactor(card): Rename variables from avatar  to rounded [`be01316`](https://github.com/eea/volto-eea-design-system/commit/be0131631cf8e303f4077fe93b6685fd6b34bf46)
+- fixed js syntax error from previous commit [`37dc1f5`](https://github.com/eea/volto-eea-design-system/commit/37dc1f5c1506040c1f155afdea76c4ed739ddda2)
+- fix(button): labeled class needs to be placed after left or right keyword [`53d1204`](https://github.com/eea/volto-eea-design-system/commit/53d1204fe52665fe1023747da359d3100d45e58f)
+- change(button): simplified storybook naming and examples [`9a7df4f`](https://github.com/eea/volto-eea-design-system/commit/9a7df4f46c24a234dd8bb290336ac8e7d5c7422b)
+- change(button): text button now has an underline with a focus border like other buttons [`cdd9043`](https://github.com/eea/volto-eea-design-system/commit/cdd90436bf0c4f8acaca8bf27afef672fb0f3a89)
+- refactor(card):tertiary variation minor story update [`87b8dca`](https://github.com/eea/volto-eea-design-system/commit/87b8dca0b8ef6c6f0fbf1ea6bc71b7b8b6ee9205)
+- refactor(card):delete publication card variables & overrides files [`6be8a03`](https://github.com/eea/volto-eea-design-system/commit/6be8a037118762cf2280fbe44ba097a0cb7a79e0)
+- refactor(card): move avatarGrid & relatedContent to Card folder [`1959d52`](https://github.com/eea/volto-eea-design-system/commit/1959d521de222c95aa13d9b3db249d133f879ccd)
+- refactor(card):delete publication card folder & story [`68bf773`](https://github.com/eea/volto-eea-design-system/commit/68bf77306d710651bb2177d429f42b8efc127db2)
+- refactor(card):organize controls and minor bug fixes [`f3f6e35`](https://github.com/eea/volto-eea-design-system/commit/f3f6e35df077e348ea1e0c2e5c5bd73d4af5aef9)
+- refactor(card):use jsx extension [`413d328`](https://github.com/eea/volto-eea-design-system/commit/413d3284869a35f39f886df7862db6a52e8cc18e)
+- refactor(card):delete primary and secondary card stories [`1f95d22`](https://github.com/eea/volto-eea-design-system/commit/1f95d227a026ecc34b29cc3e4938c3d13906cfd8)
+- refactor(card): add card class control [`68c91a9`](https://github.com/eea/volto-eea-design-system/commit/68c91a9bf7e78874e12e868a0c466f12715a0698)
+- refactor(card): update card variation grids path [`756589c`](https://github.com/eea/volto-eea-design-system/commit/756589cff5d3607994d6cf092cb5dd0e36d51903)
+- refactor(card): minor fixes [`3a880d7`](https://github.com/eea/volto-eea-design-system/commit/3a880d7d14c89137b2a33342aed1a31c1b2b3939)
+- refactor(List):change styles to match with the tags lists are rendered [`2673890`](https://github.com/eea/volto-eea-design-system/commit/2673890449579a0421d8ac1c89ad4c5e850322d7)
+- refactor(List):render ordered list with ol,li tags [`87813c1`](https://github.com/eea/volto-eea-design-system/commit/87813c1a942ce498f89b51fe79a59b117afd28b0)
+- refactor(List):render description list with dl,dt,dd tags [`ec669a7`](https://github.com/eea/volto-eea-design-system/commit/ec669a74da08f7a82bb4a1a0a2d752b6ee5ba4bb)
+- refactor(List):render default list with dl & dt tags [`ece2280`](https://github.com/eea/volto-eea-design-system/commit/ece2280eb06481b3fd42e7a1ffec5c71c08e736f)
+- refactor(card): prettier fixes [`e10e3d6`](https://github.com/eea/volto-eea-design-system/commit/e10e3d610a313c4e1995676130e2677f0ebab070)
+- refactor(card): add styles for card variations [`7407bd3`](https://github.com/eea/volto-eea-design-system/commit/7407bd30e722f2d7b1a9d75a8c7cf155bf1c4996)
+- refactor(card): add card variations [`e16d05b`](https://github.com/eea/volto-eea-design-system/commit/e16d05b4afa678b9089987b42a8257323a78093f)
+- lint fixes [`a68866d`](https://github.com/eea/volto-eea-design-system/commit/a68866d4058f7412a2635371adebc370b6445281)
+- change(button): simplified button styling [`fe892d6`](https://github.com/eea/volto-eea-design-system/commit/fe892d6f2f59aecf3f9e8b04f18b55fb0d384021)
+- Autobuild of docusaurus docs [`d1c269f`](https://github.com/eea/volto-eea-design-system/commit/d1c269f2f0413a112ee30ef9ac1c4f412129c898)
+- Autobuild of docusaurus docs [`958dd41`](https://github.com/eea/volto-eea-design-system/commit/958dd4193fa29bc84ef5c47ddfb81124ed98966c)
+- Autobuild of docusaurus docs [`4f93966`](https://github.com/eea/volto-eea-design-system/commit/4f93966df8d4505f35065c9d82b918886a5ad787)
+- refactor(avatar): add variable for image border radius [`c23341c`](https://github.com/eea/volto-eea-design-system/commit/c23341c66d34a9dfa572be4df24f1faf4325d58e)
+- Autobuild of docusaurus docs [`72e6643`](https://github.com/eea/volto-eea-design-system/commit/72e66439261a4a11bd4c672e8e39fbb50738608f)
+- change(button): primary color is blue and secondary is green [`53e0a0c`](https://github.com/eea/volto-eea-design-system/commit/53e0a0c6d32a04c52d089914a224b010b04a8846)
+- refactor(progress): update colors for accessibility [`ea2f454`](https://github.com/eea/volto-eea-design-system/commit/ea2f454f73c859ac21c4fe6e415a2442a6c3d64c)
+- refactor(progress): add container to story [`dfb33bb`](https://github.com/eea/volto-eea-design-system/commit/dfb33bb8f3560d43e3e7300560bb557591c0a6ba)
+- refactor(label): add container to story [`565101f`](https://github.com/eea/volto-eea-design-system/commit/565101fff2c8860deedd599b7b0cff0660c663f6)
+- fix(label): update highlight label color [`d55bbb0`](https://github.com/eea/volto-eea-design-system/commit/d55bbb03a5d28b2f269c1a1ca447c67dcdc7a748)
+- refactor(list): remove horizontal control [`1f5e576`](https://github.com/eea/volto-eea-design-system/commit/1f5e576a37452ed368d6f9cf4d55960e737d48ad)
+- doco(list): update Ordered List showcase [`75e40bf`](https://github.com/eea/volto-eea-design-system/commit/75e40bf4487ea334c9ebc2dd6c2a392d82e662f3)
+- refactor(Timeline): change storybook timeline colors to fix accessibility issues [`79da8dc`](https://github.com/eea/volto-eea-design-system/commit/79da8dca48c709fd1df83b858296126f5e5c5753)
+- refactor(DescriptionList): add container to story [`d647c1a`](https://github.com/eea/volto-eea-design-system/commit/d647c1a17097eae9bdfaf8eb8068f6d1d0b13972)
+- refactor(DefaultList): add container to story [`f971193`](https://github.com/eea/volto-eea-design-system/commit/f971193369007a45fea7d517cdf0fc2314ebda69)
+- refactor(UnorderedList): update list as ul, list items as li and add container to strory [`2c096e1`](https://github.com/eea/volto-eea-design-system/commit/2c096e117125a7fb943a5d2e665c0077761b271c)
+- style(OrderedList): prettier fixes [`ed95e4d`](https://github.com/eea/volto-eea-design-system/commit/ed95e4dea2f33d46ca604e1b2c30d63b5596c03d)
+- fix(OrderedList): adjust margins to fourth sublists [`663d384`](https://github.com/eea/volto-eea-design-system/commit/663d384790920f164d51edb304c411275972fbb7)
+- refactor(OrderedList): rename TOC to Ordered List and add container to the story [`e00c4db`](https://github.com/eea/volto-eea-design-system/commit/e00c4db8e623651eb2ec9ad45de6e3d8c2693b2b)
+- Next relese: 0.2.2 [`b3fb40f`](https://github.com/eea/volto-eea-design-system/commit/b3fb40ff5e46d7519b6356fdaf7326780bd89d9e)
+- change(button): basic button is again without padding, border and background [`5a907c7`](https://github.com/eea/volto-eea-design-system/commit/5a907c721bda1d065153b108d6c9dc0ee20a886d)
+- fix(OrderedList) : add list only if sub list exists [`8acbc8d`](https://github.com/eea/volto-eea-design-system/commit/8acbc8d5a492b411b169b106ab64bb78563f891f)
+- refactor(OrderedList) : change table of contents story to ordered list [`cb6197c`](https://github.com/eea/volto-eea-design-system/commit/cb6197c872a97f1b990c675554b1da9b0a8f7959)
+- change(button): basic icon buttons no longer have box shadows [`c2f3ea3`](https://github.com/eea/volto-eea-design-system/commit/c2f3ea38ec3c62dce37612ac1e666a0b064309f7)
+- change(buttons): modified basic and circular variant behavior [`c06fed9`](https://github.com/eea/volto-eea-design-system/commit/c06fed9fa74216cf76971b7789dad231a5125ce8)
+- change(button): added back button.overrides from pastanaga theme [`3b55acb`](https://github.com/eea/volto-eea-design-system/commit/3b55acbf8b8df0e3daa475ab12e4db44693a4053)
+- change(segment): restore light grey background color for secondary segments [`8716b08`](https://github.com/eea/volto-eea-design-system/commit/8716b08a977cacf5dbdab8ab23c714bb03066b0c)
+- refactor(RelatedContent):delete publication card component [`2ed0ed4`](https://github.com/eea/volto-eea-design-system/commit/2ed0ed4a1497224b669386f6d0942a79d00555ea)
+- refactor(RelatedContent):change to use new card variant instead of publication card component [`7cf424a`](https://github.com/eea/volto-eea-design-system/commit/7cf424ae885d9b657a7635fc67a74a8af4c4e905)
+- fix(RelatedContent):fix merge conflict [`adc34bf`](https://github.com/eea/volto-eea-design-system/commit/adc34bfdac7d668aa27578eb2a4844c136e0360f)
+- refactor(PublicationCard):remake publication card to be a semantic card variation [`5a0c6ab`](https://github.com/eea/volto-eea-design-system/commit/5a0c6ab21c22a53aa6e34fafecfae15a3d435391)
+- chore(Avatar) : add container to stories [`41b748c`](https://github.com/eea/volto-eea-design-system/commit/41b748cd23002d597d9b6fbb7947a443ef40f9b2)
+- refactor(Avatar) : remake avatar as card variant [`ea77cdd`](https://github.com/eea/volto-eea-design-system/commit/ea77cdd1acafd2ea288f11074423705e5d6b7412)
+- refactor(progress): update value color for accessibility error [`6fc76f8`](https://github.com/eea/volto-eea-design-system/commit/6fc76f8ff3df4bf2b83863687e5ab6bd5e4cd1ef)
+- refactor(Avatar) : convert avatar component to card variation [`2004a94`](https://github.com/eea/volto-eea-design-system/commit/2004a941c18f8fe21f96f88d3288446fd5e283e8)
+- perf(eol): lf fix [`19235e5`](https://github.com/eea/volto-eea-design-system/commit/19235e585ac50c3669f654a93798b8998894f900)
+- perf(eol): lf fix [`7054b20`](https://github.com/eea/volto-eea-design-system/commit/7054b2067b0802c5bd04e185cba76e2577ccfdd1)
+- perf(eol): linux eol [`6e0bb30`](https://github.com/eea/volto-eea-design-system/commit/6e0bb30132904f92b9755356f6b5ccbf72075425)
+- refactor(publicationCard): update tag and name variables [`c109ad9`](https://github.com/eea/volto-eea-design-system/commit/c109ad98f257fea233f31d767c4a037a2758be2d)
+- refactor(relatedContent): adjust column paddings [`8a1520d`](https://github.com/eea/volto-eea-design-system/commit/8a1520d1b958b65e968bffdba22c3484916a475e)
+- fix(tab): restore mobile font sizes [`58f39be`](https://github.com/eea/volto-eea-design-system/commit/58f39be02a45ade92873b86597c33763379e0f44)
+- perf(eol): change to LF [`c71e42e`](https://github.com/eea/volto-eea-design-system/commit/c71e42e4a8cf49c4a3b943bfdc8a94c9a9cc4940)
+- fix(publicationCard): restore line endings [`582859e`](https://github.com/eea/volto-eea-design-system/commit/582859e0ab4fa969662d4cf3e60fe75b160f052a)
+- refactor(publicationCard): replace px with rems [`53bf8da`](https://github.com/eea/volto-eea-design-system/commit/53bf8da5e42343de7f7f940c266beb5e530dd63a)
+- refactor(avatarGrid): update less variables and layer structure [`db554a8`](https://github.com/eea/volto-eea-design-system/commit/db554a894ca10ba50ff425883000177854ea2455)
+- refactor(avatar): update less variables and layer structure [`f965db1`](https://github.com/eea/volto-eea-design-system/commit/f965db1dd17d90e7165f66d39fdda9016c2eae91)
+- fix(avatar) : fix naming convention for arg [`84fc5fa`](https://github.com/eea/volto-eea-design-system/commit/84fc5fa8faa7887f45cd52e58aa6fa6f8b951d26)
+- refactor(Timeline):change timeline icons [`b2fe0bf`](https://github.com/eea/volto-eea-design-system/commit/b2fe0bf9a7a4583f1f10765a9f8c3c989412d472)
+- refactor(storybook): clear up code [`3ada154`](https://github.com/eea/volto-eea-design-system/commit/3ada154b5ab562dc7605604de8002a9d3461e594)
+- refactor(Related Content):show button when there are more hidden cards [`57ff1c8`](https://github.com/eea/volto-eea-design-system/commit/57ff1c8d485d16c34002da22bd765069e6eb3df0)
+- refactor(less variables): change card description line number per device [`6946fda`](https://github.com/eea/volto-eea-design-system/commit/6946fdae2a1ede28a0e5971736817b3ae19bf290)
+- refactor(PublicationCard):remove link wrapper [`5911a0d`](https://github.com/eea/volto-eea-design-system/commit/5911a0db1967c58311a6776864f92bc0692052fa)
+- refactor(storybook): add story with related content inside of a tab [`dca008a`](https://github.com/eea/volto-eea-design-system/commit/dca008a35b27e4a75c13ef965ab8764df0d3b357)
+- refactor(storybook): add publication cards stories with longer description [`37adefa`](https://github.com/eea/volto-eea-design-system/commit/37adefa500c8a85a5b0b86e5b17c687828ea21fc)
+- fix(publication card): run prettier [`81a5bfc`](https://github.com/eea/volto-eea-design-system/commit/81a5bfc123ce69c44562a5585e41a630fe0bbf5a)
+- refactor(less variables): publication card style changes [`c5a84e9`](https://github.com/eea/volto-eea-design-system/commit/c5a84e99ebea6345e45fac3b7ffc077ec42dfb45)
+- refactor(storybook): add publication card story with different description sizes [`23af97b`](https://github.com/eea/volto-eea-design-system/commit/23af97bc708ac70d70b92efe9a782548c65aabc5)
+- refactor(less variables): change publication card height per viewport [`d7a5256`](https://github.com/eea/volto-eea-design-system/commit/d7a525615672f387a2c8a0457bcde5c08aec45dd)
+- refactor(less variables): add less to related content [`e1a5543`](https://github.com/eea/volto-eea-design-system/commit/e1a55438a9fc9dd141a9515c5363d834732a0c4d)
+- refactor(Related Content): change in grid and add see all button [`955450e`](https://github.com/eea/volto-eea-design-system/commit/955450e974c89aa2297eaa28d278e5098fea7705)
+- refactor(Related Content): change in related content grid [`bf856ce`](https://github.com/eea/volto-eea-design-system/commit/bf856ce66f9a74cb440cf8a7c93f62cd0d3965e9)
+
 #### [0.2.1](https://github.com/eea/volto-eea-design-system/compare/0.2.0...0.2.1)
 
+> 8 April 2022
+
+- Release 0.2.1 [`#143`](https://github.com/eea/volto-eea-design-system/pull/143)
 - refactor(loader): Revert changes to semantic ui / volto defaults [`#142`](https://github.com/eea/volto-eea-design-system/pull/142)
 - 1.10 release #140 [`#141`](https://github.com/eea/volto-eea-design-system/pull/141)
 - Autobuild of docusaurus docs [`d632472`](https://github.com/eea/volto-eea-design-system/commit/d63247239c8150075363871616652a99148509b0)
-- Release 0.2.1 [`9f89d9d`](https://github.com/eea/volto-eea-design-system/commit/9f89d9d60ef259c5b5a7300ccde1e524eb4fa4d7)
 - Autobuild of docusaurus docs [`af3f50d`](https://github.com/eea/volto-eea-design-system/commit/af3f50d17ad8266329c1bccd18d638f2617d722d)
 - cleanup(loader): Remove useless HTML [`d1d180c`](https://github.com/eea/volto-eea-design-system/commit/d1d180c714ea225c1ad269360413a5e5e4b39f22)
 - fix(version): Switch to 2.0.0.alpha.1 [`83b8b8e`](https://github.com/eea/volto-eea-design-system/commit/83b8b8ebba4f1eb31514b16476ac23a5d2b03ea9)

package/package.json

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

package/src/semantic.less

@@ -229,10 +229,6 @@
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/inpageNavigation';
 }
 
-& {
-  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/avatar';
-}
-
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/divider';
 }
@@ -258,5 +254,5 @@
 }
 
 & {
-  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/publicationCard';
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/relatedContent';
 }

package/src/ui/Button/Button.stories.jsx

@@ -30,6 +30,19 @@ export default {
   },
 };
 
+//Default Button
+export const Default = (args) => {
+  return <Button disabled={args.disabled}>{args.label}</Button>;
+};
+Default.args = {
+  label: 'Default Button',
+  disabled: false,
+};
+Default.parameters = {
+  controls: { exclude: ['animated', 'variant'] },
+  hideNoControlsWarning: true,
+};
+
 //Primary button
 export const Primary = (args) => {
   return (
@@ -65,54 +78,68 @@ Secondary.parameters = {
 };
 
 //secondary Button Inverted
-export const SecondaryInverted = (args) => {
+export const Inverted = (args) => {
   return (
     <Segment inverted compact>
+      <Button primary inverted disabled={args.disabled}>
+        {args.button1}
+      </Button>
       <Button secondary inverted disabled={args.disabled}>
-        {args.label}
+        {args.button2}
+      </Button>
+      <Button inverted disabled={args.disabled}>
+        {args.button3}
       </Button>
     </Segment>
   );
 };
-SecondaryInverted.args = {
-  label: 'Secondary Button',
+Inverted.args = {
+  button1: 'Primary Inverted',
+  button2: 'Secondary Inverted',
+  button3: 'Default Inverted',
   disabled: false,
 };
-SecondaryInverted.parameters = {
-  controls: { exclude: ['animated', 'variant'] },
+Inverted.parameters = {
+  controls: { exclude: ['animated', 'variant', 'label'] },
   hideNoControlsWarning: true,
 };
 
 //Call to action button
-export const CallToAction = (args) => {
+export const Labeled = (args) => {
   return (
-    <Button
-      icon
-      labelPosition="right"
-      className="action"
-      disabled={args.disabled}
-    >
-      {args.label}
-      <Icon name={args.icon} />
-    </Button>
+    <div className="eea">
+      <Button
+        className={args.variant + ' icon ' + args.icon_position + ' labeled'}
+        disabled={args.disabled}
+      >
+        {args.label}
+        <Icon name={args.icon + args.icon_position} />
+      </Button>
+    </div>
   );
 };
-CallToAction.args = {
+Labeled.args = {
   label: 'CALL TO ACTION BUTTON',
   icon: 'chevron right',
   disabled: false,
 };
-CallToAction.parameters = {
-  controls: { exclude: ['animated', 'variant'] },
+Labeled.parameters = {
+  controls: { exclude: ['animated'] },
   hideNoControlsWarning: true,
 };
-CallToAction.argTypes = {
+Labeled.argTypes = {
+  variant: {
+    options: ['primary', 'secondary', 'default'],
+    control: { type: 'radio' },
+    defaultValue: 'secondary',
+  },
+
   label: {
-    name: 'button label',
-    type: { name: 'string', required: true },
+    name: 'label',
+    type: { name: 'string', required: false },
   },
   icon: {
-    name: 'button icon',
+    name: 'icon',
     type: { name: 'string', required: false },
     defaultValue: 'chevron  right',
     options: [
@@ -136,6 +163,12 @@ CallToAction.argTypes = {
       defaultValue: { summary: 'chevron right' },
     },
   },
+
+  icon_position: {
+    options: [' left', ' right'],
+    control: { type: 'radio' },
+    defaultValue: ' left',
+  },
 };
 
 //Text Button - can also play with text class
@@ -154,16 +187,3 @@ Text.parameters = {
   controls: { exclude: ['animated', 'variant'] },
   hideNoControlsWarning: true,
 };
-
-//Cancel Button
-export const Cancel = (args) => {
-  return <Button disabled={args.disabled}>{args.label}</Button>;
-};
-Cancel.args = {
-  label: 'Cancel Button',
-  disabled: false,
-};
-Cancel.parameters = {
-  controls: { exclude: ['animated', 'variant'] },
-  hideNoControlsWarning: true,
-};

package/src/ui/{AvatarGrid → Card/AvatarGrid}/AvatarGrid.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Avatar from '../Avatar/Avatar';
-import { Grid } from 'semantic-ui-react';
+import { Grid, Card, Image } from 'semantic-ui-react';
 
 AvatarGrid.propTypes = {
   title: PropTypes.string,
@@ -20,25 +19,26 @@ AvatarGrid.Content = ({ children }) => {
 };
 
 AvatarGrid.Title = ({ children, ...rest }) => (
-  <p className={`grid-title  ${rest.showTitle ? '' : 'hidden'}`}>{children}</p>
+  <h3 className={`grid-title  ${rest.showTitle ? '' : 'hidden'}`}>
+    {children}
+  </h3>
 );
 AvatarGrid.Group = ({ children, ...rest }) => {
   let avatars = rest.avatars;
-  if (rest.avatars.length > 3) {
-    avatars = avatars.slice(0, 3);
-  }
+
   return (
     <div className="avatar group">
       <Grid>
-        {avatars.map((avatar) => (
-          <Grid.Column mobile={12} tablet={4} computer={4}>
+        {avatars.map((avatar, index) => (
+          <Grid.Column key={index} mobile={12} tablet={4} computer={4}>
             <div className="avatar-wrapper">
-              <Avatar {...rest} image_url={avatar.image_url} avatarSize="big">
-                <Avatar.Content>
-                  <Avatar.Title>{avatar.title}</Avatar.Title>
-                  <Avatar.Metadata>{avatar.metadata}</Avatar.Metadata>
-                </Avatar.Content>
-              </Avatar>
+              <Card className={`eea rounded big`} fluid={avatar.fluid}>
+                <Image src={avatar.src} wrapped ui={false} alt="card image" />
+                <Card.Content>
+                  <Card.Header>{avatar.title}</Card.Header>
+                  <Card.Description>{avatar.description}</Card.Description>
+                </Card.Content>
+              </Card>
             </div>
           </Grid.Column>
         ))}

package/src/ui/{AvatarGrid → Card/AvatarGrid}/AvatarGrid.stories.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 // eslint-disable-next-line import/no-unresolved
-import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/avatar.png';
 import AvatarGrid from './AvatarGrid';
+import { Container } from 'semantic-ui-react';
+import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/avatar.png';
 
 export default {
-  title: 'Components/Avatar Grid',
+  title: 'Components/Card/Rounded Card',
   component: AvatarGrid,
   argTypes: {
     showTitle: {
@@ -32,35 +33,37 @@ export default {
 };
 
 const GridTemplate = (args) => (
-  <AvatarGrid>
-    <AvatarGrid.Content>
-      <AvatarGrid.Title showTitle={args.showTitle}>
-        {args.title}
-      </AvatarGrid.Title>
-      <AvatarGrid.Group avatars={args.avatars}></AvatarGrid.Group>
-    </AvatarGrid.Content>
-  </AvatarGrid>
+  <Container>
+    <AvatarGrid>
+      <AvatarGrid.Content>
+        <AvatarGrid.Title showTitle={args.showTitle}>
+          {args.title}
+        </AvatarGrid.Title>
+        <AvatarGrid.Group avatars={args.avatars}></AvatarGrid.Group>
+      </AvatarGrid.Content>
+    </AvatarGrid>
+  </Container>
 );
 
-export const Default = GridTemplate.bind({});
-Default.args = {
+export const RoundedGrid = GridTemplate.bind({});
+RoundedGrid.args = {
   title: 'Amet - Lorem ipsum dolor sit amet',
   showTitle: true,
   avatars: [
     {
-      image_url: imgUrl,
-      title: 'Lorem ipsum',
-      metadata: 'Urna auctor pharetra aenean sed gravida quam',
+      src: imgUrl,
+      title: 'Lorem Ipsum',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
     },
     {
-      image_url: imgUrl,
-      title: 'Lorem ipsum',
-      metadata: 'Duis vel eu placerat proin diam id enim suspendisse erat',
+      src: imgUrl,
+      title: 'Lorem Ipsum',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
     },
     {
-      image_url: imgUrl,
-      title: 'Lorem ipsum',
-      metadata: 'Egetisi gravida pellentesque volutpat diamon',
+      src: imgUrl,
+      title: 'Lorem Ipsum',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
     },
   ],
 };