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

package/.github/workflows/auto-comment.yml

@@ -0,0 +1,20 @@
+name: Auto Comment
+on: [pull_request]
+jobs:
+  run:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: wow-actions/auto-comment@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          pullRequestOpened: |
+            👋 @{{ author }}
+            
+            To generate the Storybook and Docusaurus websites, write comment with:
+            > @eea-jenkins build all
+            
+            To generate only Storybook write comment with:
+            > @eea-jenkins build storybook            
+            
+            To generate only Docusaurus write comment with:
+            > @eea-jenkins build docusaurus  

package/CHANGELOG.md

@@ -4,8 +4,83 @@ 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.1](https://github.com/eea/volto-eea-design-system/compare/0.3.0...0.3.1)
+
+- 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)
+- change(container): restore maxWidth to 100% now that the last value is 1120px [`8b55c58`](https://github.com/eea/volto-eea-design-system/commit/8b55c58d3bbc8967b20de19a828aedd2f1473ee5)
+- Autobuild of docusaurus docs [`71d6cd9`](https://github.com/eea/volto-eea-design-system/commit/71d6cd90f911960211d227bfc51a0f87fb868a8c)
+- change(breadcrumb): removed padding from breadcrumb added by container [`c5df567`](https://github.com/eea/volto-eea-design-system/commit/c5df5675a519085badc030416e5bb784a9f73321)
+- Autobuild of docusaurus docs [`473b5ff`](https://github.com/eea/volto-eea-design-system/commit/473b5ff05980780a1b8606f70f7a380bd0a077cc)
+- prettier changes [`134da52`](https://github.com/eea/volto-eea-design-system/commit/134da52549b9d5eac5a12b7ad3005073500ac2c4)
+- change(grid-story): added container as grid width is influenced by container width [`459f481`](https://github.com/eea/volto-eea-design-system/commit/459f4813ee3c5325a3db22d417ac5f23063bd4d2)
+- change(container): modified all outputted widths to align to grid [`9f29cef`](https://github.com/eea/volto-eea-design-system/commit/9f29cefa4bfee1fe50844c8450de39ef4b0915d4)
+- Autobuild of docusaurus docs [`52245bb`](https://github.com/eea/volto-eea-design-system/commit/52245bb5f2cec22cb964f61ef556a8985eaa3a49)
+- change(breadcrumb): added vertical variant to the breadcrumbs like we do in Volto [`f405f84`](https://github.com/eea/volto-eea-design-system/commit/f405f8437be6be221b055a41c5d391f4cc94385d)
+- Autobuild of docusaurus docs [`1ea4dd3`](https://github.com/eea/volto-eea-design-system/commit/1ea4dd3dc780f564a2ea9ff92ca00dc083380eed)
+- change(segment): brought back overrides from pastanaga into our theme [`14efd02`](https://github.com/eea/volto-eea-design-system/commit/14efd021f81898bb0f2d3f1a2e8677445420591a)
+- change(container): removed padding from containers restoring thus the defaults [`c2ed813`](https://github.com/eea/volto-eea-design-system/commit/c2ed813cf2f7ce284e33f2e94e02ff16678c2d05)
+- Autobuild of docusaurus docs [`8652ed7`](https://github.com/eea/volto-eea-design-system/commit/8652ed7cbebd9508c620279c9f994aef6c5d952d)
+- 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)
+
 #### [0.2.3](https://github.com/eea/volto-eea-design-system/compare/0.2.2...0.2.3)
 
+> 29 April 2022
+
+- Release [`#156`](https://github.com/eea/volto-eea-design-system/pull/156)
 - [R2] Button  [`#154`](https://github.com/eea/volto-eea-design-system/pull/154)
 - [R2] Tab [`#155`](https://github.com/eea/volto-eea-design-system/pull/155)
 - Autobuild of docusaurus docs [`4418144`](https://github.com/eea/volto-eea-design-system/commit/4418144c194c49cdeaf6928eabd781e01d0a391e)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "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/Breadcrumbs/Breadcrumb.stories.jsx

@@ -45,6 +45,9 @@ const Template = (args) => (
       <Breadcrumb.Section key="home" href={args.root}>
         <Image src={homeSVG} alt="home" />
       </Breadcrumb.Section>
+      <Breadcrumb.Divider>
+        <Icon className="ri-arrow-right-s-line"></Icon>
+      </Breadcrumb.Divider>
       {args.sections.map((section, index, sections) => [
         index !== 0 && (
           <Breadcrumb.Divider key={index}>

package/src/ui/Breadcrumbs/Breadcrumbs.jsx

@@ -22,6 +22,7 @@ const Breadcrumbs = ({
       aria-label={'breadcrumbs'}
       className="breadcrumbs"
       attached
+      vertical
     >
       <Container>
         <Breadcrumb size={size}>

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/breadcrumb.overrides

@@ -5,25 +5,10 @@
 .ui.breadcrumb {
   display: flex;
   align-items: center;
-  padding-right: 1rem;
-  padding-left: 1rem;
-
-  //a.section {
-  //  color: #0074a3;
-  //}
-  //
-  //.section.active {
-  //  color: #4e7372;
-  //}
 
   .home.icon {
     margin-right: 0;
   }
-
-  @media only screen and (min-width: @tabletBreakpoint) {
-    padding-right: 0;
-    padding-left: 0;
-  }
 }
 /*******************************
         Theme Overrides
@@ -49,4 +34,3 @@
     font-size: @breadcrumbIconFontSize;
   }
 }
-

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

@@ -41,9 +41,9 @@
 .ui.form .ui.input input[type='url'],
 .ui.form textarea {
   height: 60px;
+  padding: @inputVerticalPadding 0;
   border-width: 0 0 @1px 0;
   border-radius: 0;
-  padding: @inputVerticalPadding 0;
 
   &:focus {
     border-radius: 0;

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;
+