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

package/CHANGELOG.md

@@ -4,8 +4,48 @@ 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.3.0](https://github.com/eea/volto-eea-design-system/compare/0.2.4...0.3.0)
+
+- [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 +65,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.3.0",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/semantic.less

@@ -202,11 +202,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/{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.SourceInfo = ({ children, ...rest }) => (
+  <p className="info" {...rest}>
     {children}
   </p>
 );
-export default Pullquote;
+export default Quote;

package/src/ui/{Pullquote/Pullquote.stories.jsx → Quote/Quote.stories.jsx}

@@ -1,13 +1,13 @@
 import React from 'react';
-import Pullquote from './Pullquote';
+import Quote from './Quote';
 import { Container } from 'semantic-ui-react';
 
 export default {
-  title: 'Components/Pullquote',
-  component: Pullquote,
+  title: 'Components/Quote',
+  component: Quote,
   argTypes: {
     quote: {
-      description: 'Pullquote content',
+      description: 'Quote content',
       type: { name: 'string' },
       table: {
         defaultValue: { summary: '""' },
@@ -20,8 +20,8 @@ export default {
         defaultValue: { summary: '""' },
       },
     },
-    metadata: {
-      description: 'quote metadata',
+    sourceInfo: {
+      description: 'quote source info',
       type: { name: 'string' },
       table: {
         defaultValue: { summary: '""' },
@@ -51,11 +51,11 @@ export default {
 export const Default = (args) => (
   <Container>
     <p>{args.content}</p>
-    <Pullquote quotePosition={args.quotePosition}>
-      <Pullquote.Quote>{args.quote}</Pullquote.Quote>
-      <Pullquote.Author>{args.source}</Pullquote.Author>
-      <Pullquote.Metadata>{args.metadata}</Pullquote.Metadata>
-    </Pullquote>
+    <Quote quotePosition={args.quotePosition}>
+      <Quote.Quote>{args.quote}</Quote.Quote>
+      <Quote.Source>{args.source}</Quote.Source>
+      <Quote.SourceInfo>{args.sourceInfo}</Quote.SourceInfo>
+    </Quote>
     <p>{args.content}</p>
     <p>{args.content}</p>
     <p>{args.content}</p>
@@ -68,7 +68,7 @@ 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',
-  metadata: 'EEA Analyst',
+  sourceInfo: 'EEA Analyst',
   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.',
   quotePosition: 'left',
@@ -77,11 +77,11 @@ Default.args = {
 export const Reversed = (args) => (
   <Container>
     <p>{args.content}</p>
-    <Pullquote quotePosition={args.quotePosition}>
-      <Pullquote.Author>{args.source}</Pullquote.Author>
-      <Pullquote.Metadata>{args.metadata}</Pullquote.Metadata>
-      <Pullquote.Quote>{args.quote}</Pullquote.Quote>
-    </Pullquote>
+    <Quote quotePosition={args.quotePosition}>
+      <Quote.Source>{args.source}</Quote.Source>
+      <Quote.SourceInfo>{args.sourceInfo}</Quote.SourceInfo>
+      <Quote.Quote>{args.quote}</Quote.Quote>
+    </Quote>
     <p>{args.content}</p>
     <p>{args.content}</p>
     <p>{args.content}</p>
@@ -94,7 +94,7 @@ 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',
-  metadata: 'EEA Analyst',
+  sourceInfo: 'EEA Analyst',
   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.',
   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;

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

@@ -5,7 +5,7 @@ import Testimonial from './Testimonial';
 import { Container } from 'semantic-ui-react';
 
 export default {
-  title: 'Components/Testimonial',
+  title: 'Components/Quote/Testimonial',
   component: Testimonial,
   argTypes: {
     title: {
@@ -15,7 +15,15 @@ export default {
         type: { summary: 'string' },
       },
     },
-    image: {
+    avatartitle: {
+      description: 'avatar title',
+      type: { summary: 'string' },
+    },
+    avatarinfo: {
+      description: 'avatar metadata',
+      type: { summary: 'string' },
+    },
+    avatarimage: {
       description: 'testimonial image',
       table: {
         defaultValue: { summary: '""' },
@@ -32,13 +40,13 @@ const InlineTemplate = (args) => (
   <Container>
     <Testimonial {...args}>
       <Testimonial.Avatar
-        src={imgUrl}
-        title={args.avatarTitle}
-        description={args.avatarInfo}
+        src={args.avatarimage}
+        title={args.avatartitle}
+        description={args.avatarinfo}
       ></Testimonial.Avatar>
       <Testimonial.Content>
         <Testimonial.Title>{args.title}</Testimonial.Title>
-        <Testimonial.Pullquote>{args.quote}</Testimonial.Pullquote>
+        <Testimonial.Quote>{args.quote}</Testimonial.Quote>
       </Testimonial.Content>
     </Testimonial>
   </Container>
@@ -46,8 +54,9 @@ const InlineTemplate = (args) => (
 
 export const Inline = InlineTemplate.bind({});
 Inline.args = {
-  avatarTitle: 'Jane Doe',
-  avatarInfo: 'EEA Analyst',
+  avatartitle: 'Jane Doe',
+  avatarinfo: 'EEA Analyst',
+  avatarimage: imgUrl,
   title: 'Amet - Lorem ipsum dolor sit amet',
   quote:
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',

package/src/ui/index.js

@@ -1,6 +1,6 @@
 export Banner from './Banner/Banner';
 
-export Blockquote from './Blockquote/Blockquote';
+export Callout from './Callout/Callout';
 
 export Breadcrumbs from './Breadcrumbs/Breadcrumbs';
 
@@ -16,11 +16,11 @@ export InpageNavigation from './InpageNavigation/InpageNavigation';
 
 export Logo from './Logo/Logo';
 
-export Pullquote from './Pullquote/Pullquote';
+export Quote from './Quote/Quote';
 
 export Timeline from './Timeline/Timeline';
 
-export Testimonial from './Testimonial/Testimonial';
+export Testimonial from './Quote/Testimonial/Testimonial';
 
 export AvatarGrid from './Card/AvatarGrid/AvatarGrid';
 

package/theme/theme.config

@@ -78,7 +78,7 @@
 @custom      : 'eea';
 /* EEA Design system custom components */
 @blockquote  : 'eea';
-@pullquote   : 'eea';
+@quote   : 'eea';
 @banner      : 'eea';
 @timeline    : 'eea';
 @footer      : 'eea';

package/theme/themes/eea/collections/table.overrides

@@ -27,4 +27,52 @@
     text-transform: @headerTextTransform;
     vertical-align: @headerVerticalAlign;
   }
+
+}
+
+// fix hiding of table header on mobile resolutions, by default whitespace is no wrap from table.less
+.ui.sortable.table thead th {
+  white-space: @headerSortableWhiteSpace;
+}
+
+@media only screen and (max-width: @mobileLandscapeBreakpoint) {
+
+  .ui.table.responsive {
+
+    &:not(.unstackable) td:first-child {
+      font-weight: @responsiveMobileCellHeaderFontWeight;
+    }
+
+    thead {
+      border: none;
+      clip: @responsiveMobileCellHeaderClip;
+      height: @responsiveMobileHeaderHeight;
+      margin: @responsiveMobileHeaderMargin;
+      overflow: hidden;
+      padding: @responsiveMobileHeaderPadding;
+      position: absolute;
+      width: @responsiveMobileHeaderWidth;
+    }
+
+    td {
+      display: block;
+      text-align: @responsiveMobileCellTextAlign;
+      clear: both;
+  
+      &::before {
+        /*
+        * aria-label has no advantage, it won't be read inside a table
+        content: attr(aria-label);
+        */
+        content: attr(data-label);
+        float: @responsiveMobileCellDataLabelFloat;
+        font-weight: @responsiveMobileCellDataLabelFontWeigth;
+        text-align: @responsiveMobileCellDataLabelTextAlign;
+        max-width: @responsiveMobileCellDataLabelMaxSize;
+      }
+      
+    }
+
+  }
+
 }

package/theme/themes/eea/collections/table.variables

@@ -52,6 +52,7 @@
 @headerTextTransform: inherit;
 @headerBoxShadow: none;
 @headerFontSize: @h5;
+@headerSortableWhiteSpace: normal;
 
 /* Table Footer */
 @footerBoxShadow: none;
@@ -247,3 +248,18 @@
 @small: 0.9em;
 @medium: 1em;
 @large: 1.1em;
+
+/* Responsive Table */
+@responsiveMobileCellHeaderFontWeight: @normal;
+@responsiveMobileCellHeaderClip: rect(0 0 0 0);
+@responsiveMobileHeaderHeight: 1px;
+@responsiveMobileHeaderMargin: -1px;
+@responsiveMobileHeaderPadding: 0;
+@responsiveMobileHeaderWidth: 0;
+
+@responsiveMobileCellTextAlign: right;
+@responsiveMobileCellDataLabelFloat: left;
+@responsiveMobileCellDataLabelTextAlign: left;
+@responsiveMobileCellDataLabelMaxSize: 50%;
+@responsiveMobileCellDataLabelFontWeigth: @bold;
+

package/theme/themes/eea/extras/avatar.variables

@@ -0,0 +1,28 @@
+/*******************************
+            Avatar
+*******************************/
+
+/* Global */
+@avatarWidth                    : 100%;
+@avatarWrapperWidth             : 100%;
+@avatarWrapperGap               : @largeGap;
+@avatarContentWrapperWidth      : 100%;
+@avatarImageBorderRadius        : 50%;
+@avatarContentTitleMarginBottom : 0;
+@avatarImageWrapperWidth        : 100%;
+@avatarImageBackgroundSize      : cover;
+@avatarContentTitleFontWeight   : @bold;
+@avatarContentTitleFontSize     : 1.25rem;
+
+/* Big */
+@avatarBigImageHeight           : 173px;
+@avatarBigImageWidth            : 173px;
+@avatarBigMetadataFontSize      : 1.25rem;
+@avatarBigMetadataFontWeight    : @normal;
+
+/* Small */
+@avatarSmallImageHeight         : 135px;
+@avatarSmallImageWidth          : 135px;
+@avatarSmallTitleColor          : @secondaryColor;
+@avatarSmallMetadataFontSize    : 1rem;
+@avatarSmallMetadataFontWeight  : 300;

package/theme/themes/eea/extras/callout.less

@@ -0,0 +1,43 @@
+@type: 'extra';
+@element: 'callout';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Callout
+*******************************/
+
+p.callout,
+blockquote.callout,
+.eea.callout {
+  border: @calloutBorder;
+  box-shadow: @calloutBoxShadow;
+  border-radius: @calloutBorderRadius;
+  padding-top: @calloutPadding;
+  padding-bottom: @calloutPadding;
+  border-left: @mobileCalloutBorderLeft;
+  border-right: @calloutBorder;
+  border-top: @calloutBorder;
+  border-bottom: @calloutBorder;
+  color: @quoteColor;
+  font-size: @mobileQuoteFontSize;
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  p.callout,
+  blockquote.callout,
+  .eea.callout {
+    border-left: @tabletCalloutBorderLeft;
+    font-size: @tabletQuoteFontSize;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  p.callout,
+  blockquote.callout,
+  .eea.callout {
+    font-size: @computerQuoteFontSize;
+  }
+}
+
+.loadUIOverrides();

package/theme/themes/eea/extras/callout.variables

@@ -0,0 +1,19 @@
+/*******************************
+            Callout
+*******************************/
+/* Body */
+@mobileCalloutBorderLeft : @5px solid @secondaryColor;
+@tabletCalloutBorderLeft : @10px solid @secondaryColor;
+
+/* Text */
+@quoteColor            : @japaneseIndigo;
+@mobileQuoteFontSize   : 1rem;
+@tabletQuoteFontSize   : @h6;
+@computerQuoteFontSize : @h5;
+@quoteFontWeight       : 400;
+
+/* Layout */
+@calloutBorder        : none;
+@calloutBoxShadow     : none;
+@calloutBorderRadius  : 0;
+@calloutPadding       : 0;

package/theme/themes/eea/extras/{pullquote.less → quote.less}

@@ -1,15 +1,15 @@
 @type: 'extra';
-@element: 'pullquote';
+@element: 'quote';
 
 @import (multiple) '../../theme.config';
 
 /*******************************
-            Pullquote
+            Quote
 *******************************/
 
-.eea.pullquote {
-  padding: @pullquotePadding;
-  margin: @pullquoteMargin;
+.eea.quote {
+  padding: @quotePadding;
+  margin: @quoteMargin;
   word-break: @contentWordBreak;
   hyphens: @contentWordBreakHyphens;
 
@@ -36,23 +36,23 @@
     }
   }
 
-  .author {
-    color: @authorTextColor;
-    text-align: @authorTextAlign;
-    font-weight: @authorFontWeight;
-    font-size: @authorFontSize;
-    margin: @authorMargin;
+  .source {
+    color: @sourceTextColor;
+    text-align: @sourceTextAlign;
+    font-weight: @sourceFontWeight;
+    font-size: @sourceFontSize;
+    margin: @sourceMargin;
   }
 
-  .meta {
-    text-align: @metaTextAlign;
-    font-weight: @metaFontWeight;
-    font-size: @metaFontSize;
+  .info {
+    text-align: @sourceInfoTextAlign;
+    font-weight: @sourceInfoFontWeight;
+    font-size: @sourceInfoFontSize;
   }
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
-  .eea.pullquote {
+  .eea.quote {
     .quotes.wrapper {
       .quote {
         padding: @tabletQuotePadding;
@@ -63,14 +63,14 @@
       }
     }
   }
-  .eea.pullquote.left {
+  .eea.quote.left {
     width: @maxWidthOnFloat;
-    padding: @pullquoteFloatLeftPadding;
+    padding: @quoteFloatLeftPadding;
     float: left;
   }
-  .eea.pullquote.right {
+  .eea.quote.right {
     width: @maxWidthOnFloat;
-    padding: @pullquoteFloatRightPadding;
+    padding: @quoteFloatRightPadding;
     float: right;
   }
 }

package/theme/themes/eea/extras/quote.variables

@@ -0,0 +1,34 @@
+/*******************************
+            Quote
+*******************************/
+
+/* Body */
+@quotePadding           : @largeGap 0;
+@quoteFloatLeftPadding  : @largeGap @hugeGap @largeGap 0;
+@quoteFloatRightPadding : @largeGap 0 @largeGap @hugeGap;
+@quoteMargin            : 0;
+@maxWidthOnFloat            : 50%;
+@contentWordBreak           : break-word;
+@contentWordBreakHyphens    : manual;
+
+/* Quote paragraph */
+@mobileQuotePadding  : 0;
+@tabletQuotePadding  : 0.5rem 0 1rem;
+
+/* Source */
+@sourceTextColor     : @secondaryColor;
+@sourceTextAlign     : right;
+@sourceFontWeight    : @bold;
+@sourceFontSize      : 1.25rem;
+@sourceMargin        : 0;
+
+/* Source Info */
+@sourceInfoTextAlign       : right;
+@sourceInfoFontWeight      : @normal;
+@sourceInfoFontSize        : 1rem;
+
+/* Icon */
+@mobileQuoteIconSize : 2rem;
+@tabletQuoteIconSize : 3rem;
+@quoteIconColor      : @secondaryColor;
+@quoteDownIconFloat  : right;

package/theme/themes/eea/extras/testimonial.less

@@ -8,8 +8,15 @@
 --------------------*/
 
 .eea.testimonial {
+  display: flex;
+  flex-direction: column;
+  gap: @testimonialGap;
   width: @testimonialWidth;
 
+  .eea.pullquote {
+    padding: 1.25rem 0 0;
+  }
+
   .avatar-wrapper {
     display: flex;
     justify-content: center;
@@ -17,12 +24,45 @@
     height: @testimonialAvatarWrapperHeight;
   }
 
-  .content .title {
+  .ui.card.rounded {
+    flex-direction: row-reverse;
+    align-items: center;
+  }
+}
+
+.eea.testimonial .content h3.title {
+  margin: @testimonialContentTitleMarginVertical
+    @mobileTestimonialContentTitleMarginHorizontal;
+  font-weight: @testimonialContentTitleFontWeight;
+  color: @testimonialContentTitleColor;
+}
+
+.eea.testimonial .ui.grid div:first-child {
+  order: 1;
+}
+
+
+@media only screen and (min-width: @tabletBreakpoint) {
+
+  .eea.testimonial .ui.card.rounded {
+    flex-direction: column;
+  }
+  
+  .eea.testimonial .content h3.title {
     margin: @testimonialContentTitleMarginVertical
-      @testimonialContentTitleMarginHorizontal;
-    font-weight: @testimonialContentTitleFontWeight;
-    font-size: @testimonialContentTitleFontSize;
-    letter-spacing: @testimonialContentTitleLetterSpacing;
-    color: @testimonialContentTitleColor;
+      @tabletTestimonialContentTitleMarginHorizontal;
+  }
+
+  .eea.testimonial .ui.grid div:first-child {
+    order: 0;
   }
 }
+
+// Override image default size for mobile
+@media only screen and (max-width: @largestMobileScreen) {
+  .eea.testimonial .ui.card.rounded img {
+    width: @mobileCardImageWidth;
+    height: @mobileCardImageHeight;
+  }
+}
+

package/theme/themes/eea/extras/testimonial.variables

@@ -4,10 +4,18 @@
 
 
 @testimonialWidth                           : 100%;
+@testimonialGap                             : @largeGap;
 @testimonialAvatarWrapperHeight             : 100%;
-@testimonialContentTitleMarginVertical      : 0;
-@testimonialContentTitleMarginHorizontal    : 2rem;
-@testimonialContentTitleFontWeight          : 500;
-@testimonialContentTitleFontSize            : 36px;
-@testimonialContentTitleLetterSpacing       : -0.015em;
-@testimonialContentTitleColor               : @deepBlue;
+
+/* Pullquote */
+
+/* Title */
+@testimonialContentTitleMarginVertical         : 0;
+@mobileTestimonialContentTitleMarginHorizontal : 0;
+@tabletTestimonialContentTitleMarginHorizontal : 3.125rem;
+@testimonialContentTitleFontWeight             : 500;
+@testimonialContentTitleColor                  : @deepBlue;
+
+/* Image */
+@mobileCardImageWidth  : 100px;
+@mobileCardImageHeight : 100px;

package/theme/themes/eea/globals/site.variables

@@ -2,6 +2,8 @@
          Site Settings
 *******************************/
 
+@import '@eeacms/volto-eea-design-system/../theme/themes/eea/tokens/tokens';
+
 /*-------------------
        Fonts
 --------------------*/

package/theme/themes/eea/modules/accordion.variables

@@ -99,8 +99,8 @@
 
 /* Styled Title States */
 @styledTitleHoverBackground: transparent;
-@styledTitleHoverColor: @teal;
-@styledActiveTitleBackground: @teal;
+@styledTitleHoverColor: @activeTitleBackground;
+@styledActiveTitleBackground: @activeTitleBackground;
 @styledActiveTitleColor: @white;
 
 /* Styled Child Title States */

package/theme/themes/eea/tokens/fonts.less

@@ -0,0 +1,38 @@
+@font-weight-1: 100;
+@font-weight-2: 200;
+@font-weight-3: 300;
+@font-weight-4: 400;
+@font-weight-5: 500;
+@font-weight-6: 600;
+@font-weight-7: 700;
+@font-weight-8: 800;
+@font-weight-9: 900;
+@font-lineheight-00: .95;
+@font-lineheight-0: 1.1;
+@font-lineheight-1: 1.25;
+@font-lineheight-2: 1.375;
+@font-lineheight-3: 1.5;
+@font-lineheight-4: 1.75;
+@font-lineheight-5: 2;
+@font-letterspacing-0: -.05em;
+@font-letterspacing-1: .025em;
+@font-letterspacing-2: .050em;
+@font-letterspacing-3: .075em;
+@font-letterspacing-4: .150em;
+@font-letterspacing-5: .500em;
+@font-letterspacing-6: .750em;
+@font-letterspacing-7: 1em;
+@font-size-00: .5rem;
+@font-size-0: .75rem;
+@font-size-1: 1rem;
+@font-size-2: 1.1rem;
+@font-size-3: 1.25rem;
+@font-size-4: 1.5rem;
+@font-size-5: 2rem;
+@font-size-6: 2.5rem;
+@font-size-7: 3rem;
+@font-size-8: 3.5rem;
+@font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
+@font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
+@font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
+@font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);

package/theme/themes/eea/tokens/sizes.less

@@ -0,0 +1,17 @@
+@size-000: -.5rem;
+@size-00: -.25rem;
+@size-1: .25rem;
+@size-2: .5rem;
+@size-3: 1rem;
+@size-4: 1.25rem;
+@size-5: 1.5rem;
+@size-6: 1.75rem;
+@size-7: 2rem;
+@size-8: 3rem;
+@size-9: 4rem;
+@size-10: 5rem;
+@size-11: 7.5rem;
+@size-12: 10rem;
+@size-13: 15rem;
+@size-14: 20rem;
+@size-15: 30rem;

package/theme/themes/eea/tokens/tokens.less

@@ -0,0 +1,2 @@
+@import 'fonts';
+@import 'sizes';

package/src/ui/Blockquote/Blockquote.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-function Blockquote({ children, className, ...rest }) {
-  return (
-    <div className="eea blockquote" {...rest}>
-      <blockquote className="quote">{children}</blockquote>
-    </div>
-  );
-}
-
-Blockquote.Content = ({ children, as: As, ...rest }) =>
-  As ? <As {...rest}>{children}</As> : children;
-
-Blockquote.Meta = ({ children }) => <div className="meta">{children}</div>;
-
-export default Blockquote;

package/src/ui/Blockquote/Blockquote.stories.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import Blockquote from './Blockquote';
-
-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.';
-const AUTHOR = 'President Juncker';
-
-export default {
-  title: 'Components/Blockquote',
-  component: Blockquote,
-  argTypes: {
-    content: {
-      name: 'citation',
-      description: 'Blockquote content',
-      type: { name: 'string', required: true },
-    },
-    meta: {
-      name: 'meta',
-      description: 'Author of the content',
-      type: { name: 'string', required: true },
-    },
-  },
-};
-
-export const Default = (args) => (
-  <Blockquote>
-    <Blockquote.Content>{args.content}</Blockquote.Content>
-    <Blockquote.Meta>{args.meta}</Blockquote.Meta>
-  </Blockquote>
-);
-
-Default.args = {
-  content: CITATION,
-  meta: AUTHOR,
-};
-
-export const Reversed = (args) => (
-  <Blockquote>
-    <Blockquote.Meta>{args.meta}</Blockquote.Meta>
-    <Blockquote.Content>{args.content}</Blockquote.Content>
-  </Blockquote>
-);
-
-Reversed.args = {
-  content:
-    'The Ministry of Environment & Energy is responsible for environmental policy, the preparation of plans and programmes, and overseeing their implementation. The Ministry is also in charge of the transposition of EU environmental Directives into national law.',
-  meta: '22 December 1989',
-};

package/theme/themes/eea/extras/blockquote.less

@@ -1,92 +0,0 @@
-@type: 'extra';
-@element: 'blockquote';
-
-@import (multiple) '../../theme.config';
-
-/*******************************
-            Blockquote
-*******************************/
-
-blockquote.callout,
-p.callout {
-  border: @calloutBorder;
-  box-shadow: @calloutBoxShadow;
-  border-radius: @calloutBorderRadius;
-  padding-top: @calloutPadding;
-  padding-bottom: @calloutPadding;
-  border-left: @mobileBlockquoteBorderLeft;
-  color: @quoteColor;
-  font-size: @mobileQuoteFontSize;
-}
-
-.eea.blockquote {
-  border-left: @mobileBlockquoteBorderLeft;
-
-  .quote {
-    display: flex;
-    flex-direction: column;
-    margin: @mobileQuoteMargin;
-    gap: @quoteGap;
-    color: @quoteColor;
-    font-size: @mobileQuoteFontSize;
-    font-weight: @quoteFontWeight;
-
-    .meta {
-      margin: @metaMargin;
-      font-size: @mobileMetaFontSize;
-      font-weight: @metaWeight;
-      align-self: @metaAlignSelf;
-    }
-  }
-}
-
-.eea.slate.blockquote {
-  .quote {
-    display: block;
-    flex-direction: unset;
-    gap: unset;
-    font-weight: @slateQuoteFontWeight;
-
-    br {
-      content: '';
-      display: flex;
-      margin: @slateQuoteGap 0;
-    }
-  }
-}
-
-@media only screen and (min-width: @tabletBreakpoint) {
-  blockquote.callout,
-  p.callout {
-    border-left: @tabletBlockquoteBorderLeft;
-    font-size: @tabletQuoteFontSize;
-  }
-
-  .eea.blockquote {
-    border-left: @tabletBlockquoteBorderLeft;
-    .quote {
-      margin: @tabletQuoteMargin;
-      font-size: @tabletQuoteFontSize;
-      .meta {
-        font-size: @tabletMetaFontSize;
-      }
-    }
-  }
-}
-
-@media only screen and (min-width: @computerBreakpoint) {
-  blockquote.callout,
-  p.callout {
-    font-size: @computerQuoteFontSize;
-  }
-
-  .eea.blockquote .quote {
-    margin: @computerQuoteMargin;
-    font-size: @computerQuoteFontSize;
-    .meta {
-      font-size: @computerMetaFontSize;
-    }
-  }
-}
-
-.loadUIOverrides();

package/theme/themes/eea/extras/blockquote.variables

@@ -1,35 +0,0 @@
-/*******************************
-            Blockquote
-*******************************/
-/* Body */
-@mobileBlockquoteBorderLeft : @5px solid @secondaryColor;
-@tabletBlockquoteBorderLeft : @10px solid @secondaryColor;
-@childrenBorderLeft         : none;
-
-/* Quote */
-@quoteColor            : @secondaryColor;
-@mobileQuoteMargin     : 0.75rem 0.625rem;
-@tabletQuoteMargin     : 0.75rem 1rem;
-@computerQuoteMargin   : 0.75rem 1.25rem;
-@quoteGap              : 0.75rem;
-@slateQuoteGap         : 0.75rem / 2;
-@quoteColor            : @japaneseIndigo;
-@mobileQuoteFontSize   : 0.688rem;
-@tabletQuoteFontSize   : @h6;
-@computerQuoteFontSize : @h5;
-@quoteFontWeight       : 700;
-@slateQuoteFontWeight  : 400;
-
-/* Meta */
-@metaMargin           : 0;
-@metaWeight           : 400;
-@mobileMetaFontSize   : 0.688rem;
-@tabletMetaFontSize   : @h6;
-@computerMetaFontSize : @h5;
-@metaAlignSelf        : start;
-
-/* Callout */
-@calloutBorder        : none;
-@calloutBoxShadow     : none;
-@calloutBorderRadius  : 0;
-@calloutPadding       : 0;

package/theme/themes/eea/extras/pullquote.variables

@@ -1,34 +0,0 @@
-/*******************************
-            Pullquote
-*******************************/
-
-/* Body */
-@pullquotePadding           : @largeGap 0;
-@pullquoteFloatLeftPadding  : @largeGap @largeGap @largeGap 0;
-@pullquoteFloatRightPadding : @largeGap 0 @largeGap @largeGap;
-@pullquoteMargin            : 0;
-@maxWidthOnFloat            : 50%;
-@contentWordBreak           : break-word;
-@contentWordBreakHyphens    : manual;
-
-/* Quote paragraph */
-@mobileQuotePadding  : 0;
-@tabletQuotePadding  : 0.5rem 0 1rem;
-
-/* Author */
-@authorTextColor     : @darkCyan;
-@authorTextAlign     : right;
-@authorFontWeight    : @bold;
-@authorFontSize      : 1.25rem;
-@authorMargin        : 0;
-
-/* Metadata */
-@metaTextAlign       : right;
-@metaFontWeight      : @normal;
-@metaFontSize        : 1rem;
-
-/* Icon */
-@mobileQuoteIconSize : 2rem;
-@tabletQuoteIconSize : 3rem;
-@quoteIconColor      : @secondaryColor;
-@quoteDownIconFloat  : right;