@eeacms/volto-eea-design-system 0.2.4 → 0.4.0

package/CHANGELOG.md

@@ -4,8 +4,123 @@ 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.0](https://github.com/eea/volto-eea-design-system/compare/0.3.1...0.4.0)
+
+- [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)
+- change(login): restored width of login container to 376px [`0564293`](https://github.com/eea/volto-eea-design-system/commit/0564293346b2402c3c86009b61066da4200662b8)
+
+#### [0.3.0](https://github.com/eea/volto-eea-design-system/compare/0.2.4...0.3.0)
+
+> 17 May 2022
+
+- Release [`#165`](https://github.com/eea/volto-eea-design-system/pull/165)
+- [R2] Quote [`#158`](https://github.com/eea/volto-eea-design-system/pull/158)
+- [R2] Refactor table [`#159`](https://github.com/eea/volto-eea-design-system/pull/159)
+- Release 0.3.0 [`8724b28`](https://github.com/eea/volto-eea-design-system/commit/8724b2809027b2e359dcd64e418a33cade4ad487)
+- Autobuild of docusaurus docs [`368a09d`](https://github.com/eea/volto-eea-design-system/commit/368a09de4885a7ce01e238c37d48db6a13af64e4)
+- feat(callout): Align the Callout component with Volto slate component [`e9343ff`](https://github.com/eea/volto-eea-design-system/commit/e9343ff7008cd3d60700929e8861c7bdd06df4d3)
+- Autobuild of docusaurus docs [`cabb7a5`](https://github.com/eea/volto-eea-design-system/commit/cabb7a55c655e6fa5669a6ce904da46290e31f55)
+- Autobuild of docusaurus docs [`aaadafd`](https://github.com/eea/volto-eea-design-system/commit/aaadafd9844c79a2323718f3392173fe6d6da352)
+- Autobuild of docusaurus docs [`33eff2e`](https://github.com/eea/volto-eea-design-system/commit/33eff2e246328d2a0f2afb56656719a3dfaed531)
+- feature(tokens): added tokens folder for design tokens we can use in the system [`a542172`](https://github.com/eea/volto-eea-design-system/commit/a542172cfd84dde0286b4332e66a617a1f3d13bf)
+- Autobuild of docusaurus docs [`081ad83`](https://github.com/eea/volto-eea-design-system/commit/081ad832ecedee400779b8023d2e5eab8e67639e)
+- fix(accordion): Fix accordion active title color [`57af165`](https://github.com/eea/volto-eea-design-system/commit/57af1650a0b830e01c79e21b130784190defbcc0)
+- refactor(quote): update action name to match the functionality [`caf2e35`](https://github.com/eea/volto-eea-design-system/commit/caf2e359cada8056f280d2cd137776d64f82a2af)
+- refactor(table): add borders to responsive table with celled attribute [`8a71a67`](https://github.com/eea/volto-eea-design-system/commit/8a71a670fb34a11fbe4cef7365b91c6be84b5b54)
+- change(table): make use of headerSortableWhiteSpace variable [`fd836fb`](https://github.com/eea/volto-eea-design-system/commit/fd836fbe82e92864a628bf4d9d3093674890f722)
+- fix(table): tweak responsive table for extra long headers [`7f9f9e2`](https://github.com/eea/volto-eea-design-system/commit/7f9f9e25f7c57d4bf7edd2546a7579b892867b5c)
+- change(table): use the @mobileLandscapeBreakpoint for max 480px media query [`90880ab`](https://github.com/eea/volto-eea-design-system/commit/90880ab324b6a66c7741819dd0d913504751454f)
+- refactor(Table):wrap table with semantic ui container [`24ac2bb`](https://github.com/eea/volto-eea-design-system/commit/24ac2bb4813df33547f684220e1e12af5ca6df7e)
+- refactor(Callout): wrap story with semantic ui container [`ead362d`](https://github.com/eea/volto-eea-design-system/commit/ead362d88f43fa1380e8be5481cbc38c055060f8)
+- refactor(Table):add responsive mobile table story and styles [`aed69e6`](https://github.com/eea/volto-eea-design-system/commit/aed69e698e5b89e33a4c331570755934267492af)
+- refactor(testimonial): readjust rounded card [`b419334`](https://github.com/eea/volto-eea-design-system/commit/b41933417a44dabcf829a3346d91c142dd6472d3)
+- fix(quote): fix color and padding issue [`310d6b3`](https://github.com/eea/volto-eea-design-system/commit/310d6b37bdf5df3da2d2103eab8f4fa5020c95ab)
+- feat(Callout):create Callout component with Blockquote style [`3d486b1`](https://github.com/eea/volto-eea-design-system/commit/3d486b1c2c7f74ee8bc4b3a5e1bf3993ac98f6dd)
+- refactor(Quote):rename Quote.Metadata to Quote.SourceInfo [`dfae8b1`](https://github.com/eea/volto-eea-design-system/commit/dfae8b1c147659d24dfd1a13fb4c3098e5865a12)
+- refactor(Quote):move Testimonial component under Quote folder [`e2467c2`](https://github.com/eea/volto-eea-design-system/commit/e2467c2089577d67ef5689a2507cb860a837f6a0)
+- refactor(Quote):rename pullquote to Quote in Testimonial [`f54da19`](https://github.com/eea/volto-eea-design-system/commit/f54da192ab3b0823b0d6c77254f8954ab94506c8)
+- refactor(Quote): rename Author to Source [`6d400f6`](https://github.com/eea/volto-eea-design-system/commit/6d400f6a0ec0062f58782b4e170f4a1a9a31c56c)
+- refactor(Quote):rename Pullquote component to Quote [`9384a0c`](https://github.com/eea/volto-eea-design-system/commit/9384a0c129b8e4eed637e51a9669c41d8ade69d4)
+- refactor(Testimonial): prettier changes [`904594b`](https://github.com/eea/volto-eea-design-system/commit/904594b9814c3d8900656f0e4c8d3a99481efe94)
+- refactor(Testimonial): change card class name [`e995c32`](https://github.com/eea/volto-eea-design-system/commit/e995c32bc70780e4315c4dc02d6b6fa9a0c5b29d)
+- refactor(Testimonial):minor storybook bug fix [`7b6d128`](https://github.com/eea/volto-eea-design-system/commit/7b6d128c6be3b2481d4765cebca82af6cafbea05)
+- perf(lint): fix [`f2ef3ab`](https://github.com/eea/volto-eea-design-system/commit/f2ef3abb9daa8fee3dd103adc14246c412951427)
+- refactor(testimonial): adjust to volto design | fix avatar image size [`546070e`](https://github.com/eea/volto-eea-design-system/commit/546070e494ad187c50913b5742dab49ce5475a84)
+- fix(testimonial): remove info arguement [`9593d95`](https://github.com/eea/volto-eea-design-system/commit/9593d95f6352fb5aea48c3611b27b4bc6a9ae7e4)
+- fix(testimonial): fix storybook arg names [`b9df52f`](https://github.com/eea/volto-eea-design-system/commit/b9df52f7151ef759fd672d365b2d74f6db535ad0)
+
 #### [0.2.4](https://github.com/eea/volto-eea-design-system/compare/0.2.3...0.2.4)
 
+> 13 May 2022
+
+- Add storybook/docusaurus on PRs Refs #148775 [`#157`](https://github.com/eea/volto-eea-design-system/pull/157)
 - Autobuild of docusaurus docs [`18c8b77`](https://github.com/eea/volto-eea-design-system/commit/18c8b77b6d0677f304a83965ed4d6849f75bc179)
 - change(header): wrap header globalnav links useful for editing section [`10d4f56`](https://github.com/eea/volto-eea-design-system/commit/10d4f56624510eb63155ab330dcf0475b0728ed4)
 - Autobuild of docusaurus docs [`5f4c47c`](https://github.com/eea/volto-eea-design-system/commit/5f4c47c93bf102fb198efc97e9f2cc60c162d0e3)
@@ -25,7 +140,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - change(breakpoints): added also contentBreakpoint for backward compatibility [`b6c9212`](https://github.com/eea/volto-eea-design-system/commit/b6c9212378a37639e6154d8d8e837169bcbac8b5)
 - Autobuild of docusaurus docs [`7928530`](https://github.com/eea/volto-eea-design-system/commit/792853064185f960f3f0a83a70b626b8bfc93d39)
 - change(breakpoints): restore Semantic UI breakpoints, adding extra needed values [`e7f5b1e`](https://github.com/eea/volto-eea-design-system/commit/e7f5b1e4fac6453458078bb02cdc66c328843b59)
-- Add storybook/docusaurus on PRs Refs #148775 [`0bab90a`](https://github.com/eea/volto-eea-design-system/commit/0bab90ad27d0ba27bd48399f1cab131a8bd88d58)
 
 #### [0.2.3](https://github.com/eea/volto-eea-design-system/compare/0.2.2...0.2.3)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.2.4",
+  "version": "0.4.0",
   "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';
 }
 
 & {
@@ -202,11 +206,11 @@
 
 // EEA Design custom components
 & {
-  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/blockquote';
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/callout';
 }
 
 & {
-  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/pullquote';
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/quote';
 }
 
 & {

package/src/ui/Callout/Callout.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function Callout({ children, as, bold, ...rest }) {
+  const As = as || 'div';
+  return (
+    <As className="eea callout" {...rest}>
+      {bold ? <strong>{children}</strong> : children}
+    </As>
+  );
+}
+
+export default Callout;

package/src/ui/Callout/Callout.stories.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+import Callout from './Callout';
+
+const CITATION =
+  'An interconnected grid will help deliver the ultimate goal of the Energy Union, to make sure affordable, secure and sustainable energy, and also growth across the EU.';
+
+export default {
+  title: 'Components/Callout',
+  component: Callout,
+  argTypes: {
+    content: {
+      name: 'content',
+      description: 'Callout content',
+      type: { name: 'string', required: true },
+    },
+    as: {
+      name: 'as',
+      description: 'HTML tag to be used. Default: blockquote',
+      type: { name: 'string', required: false },
+    },
+    bold: {
+      name: 'bold',
+      description: 'Bolder text',
+      type: { summary: 'boolean' },
+    },
+  },
+};
+
+export const Default = (args) => (
+  <Container>
+    <Callout as={args.as} bold={args.bold}>
+      {args.content}
+    </Callout>
+  </Container>
+);
+
+Default.args = {
+  content: CITATION,
+  as: 'div',
+  bold: false,
+};

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/{Pullquote/Pullquote.jsx → Quote/Quote.jsx}

@@ -2,21 +2,21 @@ import React from 'react';
 import { Icon } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 
-Pullquote.propTypes = {
+Quote.propTypes = {
   quote: PropTypes.string,
   source: PropTypes.string,
   quotePosition: PropTypes.oneOf(['left', 'right', 'none', 'inherit']),
 };
 
-function Pullquote({ children, ...rest }) {
+function Quote({ children, ...rest }) {
   return (
-    <blockquote className={`eea pullquote ${rest.quotePosition}`}>
+    <blockquote className={`eea quote ${rest.quotePosition}`}>
       <div className="content">{children}</div>
     </blockquote>
   );
 }
 
-Pullquote.Quote = ({ children, as: As, ...rest }) => (
+Quote.Quote = ({ children, as: As, ...rest }) => (
   <div className="quotes wrapper">
     <Icon className="ri-double-quotes-l"></Icon>
     {As ? (
@@ -30,15 +30,15 @@ Pullquote.Quote = ({ children, as: As, ...rest }) => (
   </div>
 );
 
-Pullquote.Author = ({ children, ...rest }) => (
-  <p className="author" {...rest}>
+Quote.Source = ({ children, ...rest }) => (
+  <p className="source" {...rest}>
     {children}
   </p>
 );
 
-Pullquote.Metadata = ({ children, ...rest }) => (
-  <p className="meta" {...rest}>
+Quote.Extra = ({ children, ...rest }) => (
+  <p className="info" {...rest}>
     {children}
   </p>
 );
-export default Pullquote;
+export default Quote;

package/src/ui/Quote/Quote.stories.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import Quote from './Quote';
+import { Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Quote',
+  component: Quote,
+  argTypes: {
+    quote: {
+      description: 'Quote content',
+      type: { name: 'string' },
+      table: {
+        defaultValue: { summary: '""' },
+      },
+    },
+    source: {
+      description: 'source of quote',
+      type: { name: 'string' },
+      table: {
+        defaultValue: { summary: '""' },
+      },
+    },
+    extra: {
+      description: 'Extra info',
+      type: { name: 'string' },
+      table: {
+        defaultValue: { summary: '""' },
+      },
+    },
+    quotePosition: {
+      control: {
+        type: 'inline-radio',
+        options: ['left', 'right', 'none', 'inherit'],
+      },
+      description: 'direction that quote floats to',
+      type: { name: 'string' },
+      table: {
+        defaultValue: { summary: '""' },
+      },
+    },
+  },
+};
+
+const content =
+  'Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Venenatis tellus in metus vulputate eu. Sagittis id consectetur purus ut. Ultricies mi eget mauris pharetra et ultrices. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget.';
+
+export const Default = (args) => (
+  <Container>
+    <p>{content}</p>
+    <Quote quotePosition={args.quotePosition}>
+      <Quote.Quote>{args.quote}</Quote.Quote>
+      <Quote.Source>{args.source}</Quote.Source>
+      <Quote.Extra>{args.extra}</Quote.Extra>
+    </Quote>
+    <p>{content}</p>
+    <p>{content}</p>
+    <p>{content}</p>
+    <p>{content}</p>
+    <p>{content}</p>
+  </Container>
+);
+
+Default.args = {
+  quote:
+    'Nulla viverra magna curabitur leo nisl scelerisque. Velit fusce sed sem ut. Molestie fermentum congue nunc cras posuere orci. Duis eu ultrices nisi, est a pellentesque eget tellus mauris. Amet, tortor quis pellentesque suspendisse convallis lacinia. Aliquam.',
+  source: 'Arthur Abbott',
+  extra: 'EEA Analyst',
+  quotePosition: 'left',
+};
+
+export const Reversed = (args) => (
+  <Container>
+    <p>{content}</p>
+    <Quote quotePosition={args.quotePosition}>
+      <Quote.Source>{args.source}</Quote.Source>
+      <Quote.Extra>{args.extra}</Quote.Extra>
+      <Quote.Quote>{args.quote}</Quote.Quote>
+    </Quote>
+    <p>{content}</p>
+    <p>{content}</p>
+    <p>{content}</p>
+    <p>{content}</p>
+    <p>{content}</p>
+  </Container>
+);
+
+Reversed.args = {
+  quote:
+    'Nulla viverra magna curabitur leo nisl scelerisque. Velit fusce sed sem ut. Molestie fermentum congue nunc cras posuere orci. Duis eu ultrices nisi, est a pellentesque eget tellus mauris. Amet, tortor quis pellentesque suspendisse convallis lacinia. Aliquam.',
+  source: 'Arthur Abbott',
+  extra: 'EEA Analyst',
+  quotePosition: 'left',
+};

package/src/ui/{Testimonial → Quote/Testimonial}/Testimonial.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Divider from '../Divider/Divider';
+import Divider from '../../Divider/Divider';
 
-import Pullquote from '../Pullquote/Pullquote';
+import Quote from '../Quote';
 import { Grid, Card, Image } from 'semantic-ui-react';
 
 Testimonial.propTypes = {
   title: PropTypes.string,
-  info: PropTypes.string,
 };
 
 function Testimonial({ children, ...rest }) {
@@ -22,9 +21,9 @@ function Testimonial({ children, ...rest }) {
 
 Testimonial.Avatar = ({ children, ...rest }) => {
   return (
-    <Grid.Column mobile={12} tablet={2} computer={2}>
+    <Grid.Column mobile={12} tablet={3} computer={2}>
       <div className="avatar-wrapper">
-        <Card className={`eea avatar small`} fluid={rest.fluid}>
+        <Card className={`eea rounded small`} fluid={rest.fluid}>
           <Image src={rest.src} wrapped ui={false} alt="card image" />
           <Card.Content>
             <Card.Header>{rest.title}</Card.Header>
@@ -38,17 +37,17 @@ Testimonial.Avatar = ({ children, ...rest }) => {
 
 Testimonial.Content = ({ children }) => {
   return (
-    <Grid.Column mobile={12} tablet={10} computer={10}>
+    <Grid.Column mobile={12} tablet={9} computer={10}>
       <div className="content">{children}</div>
     </Grid.Column>
   );
 };
 
-Testimonial.Title = ({ children }) => <p className="title">{children}</p>;
-Testimonial.Pullquote = ({ children, ...rest }) => (
-  <Pullquote quotePosition="none">
-    <Pullquote.Quote>{children}</Pullquote.Quote>
-  </Pullquote>
+Testimonial.Title = ({ children }) => <h3 className="title">{children}</h3>;
+Testimonial.Quote = ({ children, ...rest }) => (
+  <Quote quotePosition="none">
+    <Quote.Quote>{children}</Quote.Quote>
+  </Quote>
 );
 
 export default Testimonial;