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

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,93 @@ 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)
+- 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)
+- change(banner): added icon class to share icons [`48e866e`](https://github.com/eea/volto-eea-design-system/commit/48e866e4251dd517c0477cd5a42cec1a98e2f16d)
+- Autobuild of docusaurus docs [`a51745e`](https://github.com/eea/volto-eea-design-system/commit/a51745e8ec045c583f9b0bfdb93b3a0eaec67110)
+- refactor(tab): update vertical tab columns and content [`b473fab`](https://github.com/eea/volto-eea-design-system/commit/b473fabee196a3ec420e29160448d2be3d1685cc)
+- docs(button): import call to action stories [`e4eed44`](https://github.com/eea/volto-eea-design-system/commit/e4eed44e3519ae3dba7d16e252271a964fcb7a4b)
+- refactor(button): update inverted button colors [`c822021`](https://github.com/eea/volto-eea-design-system/commit/c822021ab37939632416ce74c0cc88a64b98a3c1)
+- refactor(button): add container to stories [`6c02c19`](https://github.com/eea/volto-eea-design-system/commit/6c02c1953e102f2d90ab23023d6b4dfc738ced2e)
+- refactor(call to action):render call to action with Button as="a" [`e7dfabf`](https://github.com/eea/volto-eea-design-system/commit/e7dfabfc2f006505b0f1c802dc6fb48611518bcb)
+- feat(CallToAction):add feat call to action [`ab53642`](https://github.com/eea/volto-eea-design-system/commit/ab53642f27c996f929ff871d0794add39bab6c23)
+- refactor(Button): move button to forms folder [`94996fc`](https://github.com/eea/volto-eea-design-system/commit/94996fcdf1ea7e55c63dd44e10edf1b44b9bdef5)
+- refactor(Tab):scrollbar change in mobile & vertical tab fix [`0e34cbf`](https://github.com/eea/volto-eea-design-system/commit/0e34cbf459e67b6910217f30a44a1e81f33df622)
+- refactor(Tab):minor change in secondary pointing menu variables [`280b6c4`](https://github.com/eea/volto-eea-design-system/commit/280b6c41a2107bccb38500f54eb5663ef62c7ae3)
+
 #### [0.2.2](https://github.com/eea/volto-eea-design-system/compare/0.2.1...0.2.2)
 
+> 22 April 2022
+
+- Release [`#153`](https://github.com/eea/volto-eea-design-system/pull/153)
 - fix(volto): various fixes for issues presented in ticket  #147629 [`#150`](https://github.com/eea/volto-eea-design-system/pull/150)
 - [R2] Card [updated for R3] [`#152`](https://github.com/eea/volto-eea-design-system/pull/152)
 - [R2] Ordered list [`#144`](https://github.com/eea/volto-eea-design-system/pull/144)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.2.2",
+  "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/Banner/Banner.jsx

@@ -25,7 +25,7 @@ function Banner({ image_url, image, children }) {
 Banner.Action = function ({ id, title, icon, onClick, className, color }) {
   return (
     <div className="action">
-      <Button className={className} basic inverted onClick={onClick}>
+      <Button className={className} basic icon inverted onClick={onClick}>
         <Icon className={icon} color={color}></Icon>
         <span className="mobile hidden">{title}</span>
       </Button>

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/CallToAction/CallToAction.stories.jsx

@@ -0,0 +1,239 @@
+import React from 'react';
+import { Button, Icon, Container, Segment } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Call To Action',
+  component: Button,
+  argTypes: {
+    label: {
+      description: 'link label',
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    href: {
+      description: "link's destination url",
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+        type: { summary: 'string' },
+      },
+    },
+    disabled: {
+      description: 'link disabled',
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
+  },
+};
+
+//Default Call To Action
+export const Default = (args) => {
+  return (
+    <Container>
+      <Button as="a" disabled={args.disabled} href={args.href} target="_blank">
+        {args.label}
+      </Button>
+    </Container>
+  );
+};
+Default.args = {
+  label: 'Default Call To Action',
+  href: '/#',
+  disabled: false,
+};
+
+//Primary Call To Action
+export const Primary = (args) => {
+  return (
+    <Container>
+      <Button
+        primary
+        as="a"
+        disabled={args.disabled}
+        href={args.href}
+        target="_blank"
+      >
+        {args.label}
+      </Button>
+    </Container>
+  );
+};
+Primary.args = {
+  label: 'Primary Call To Action',
+  href: '/#',
+  disabled: false,
+};
+
+//Secondary Call To Action
+export const Secondary = (args) => {
+  return (
+    <Container>
+      <Button
+        secondary
+        as="a"
+        disabled={args.disabled}
+        href={args.href}
+        target="_blank"
+      >
+        {args.label}
+      </Button>
+    </Container>
+  );
+};
+Secondary.args = {
+  label: 'Secondary Call To Action',
+  href: '/#',
+  disabled: false,
+};
+
+//Inverted Call To Action
+export const Inverted = (args) => {
+  return (
+    <Container>
+      <Segment compact>
+        <Button
+          primary
+          inverted
+          as="a"
+          disabled={args.disabled}
+          href={args.href1}
+          target="_blank"
+        >
+          {args.button1}
+        </Button>
+      </Segment>
+      <Segment compact>
+        <Button
+          secondary
+          inverted
+          as="a"
+          disabled={args.disabled}
+          href={args.href2}
+          target="_blank"
+        >
+          {args.button2}
+        </Button>
+      </Segment>
+      <Segment inverted compact>
+        <Button
+          inverted
+          as="a"
+          disabled={args.disabled}
+          href={args.href3}
+          target="_blank"
+        >
+          {args.button3}
+        </Button>
+      </Segment>
+    </Container>
+  );
+};
+Inverted.args = {
+  button1: 'Primary Call To Action',
+  button2: 'Secondary Call To Action',
+  button3: 'Default Call To Action',
+  href1: '/#',
+  href2: '/#',
+  href3: '/#',
+  disabled: false,
+};
+Inverted.parameters = {
+  controls: { exclude: ['label', 'href'] },
+  hideNoControlsWarning: true,
+};
+
+//Labeled Call To Action
+export const Labeled = (args) => {
+  return (
+    <Container>
+      <Button
+        className={args.variant + ' icon ' + args.icon_position + ' labeled'}
+        as="a"
+        disabled={args.disabled}
+        href={args.href}
+        target="_blank"
+      >
+        {args.label}
+        <Icon name={args.icon} />
+      </Button>
+    </Container>
+  );
+};
+Labeled.args = {
+  label: 'Labeled Call To Action',
+  icon: 'chevron right',
+  href: '/#',
+  disabled: false,
+};
+Labeled.argTypes = {
+  variant: {
+    options: ['primary', 'secondary', 'default'],
+    description: 'call to action class',
+    control: { type: 'radio' },
+    defaultValue: 'secondary',
+    table: {
+      defaultValue: { summary: 'secondary' },
+      type: { summary: 'string' },
+    },
+  },
+  icon: {
+    name: 'icon',
+    defaultValue: 'chevron right',
+    options: [
+      'chevron right',
+      'arrow right',
+      'sign-in',
+      'sign-out',
+      'play',
+      'stop',
+      'pause',
+      'download',
+      'upload',
+      'print',
+      'copy',
+      'edit',
+      'ellipsis',
+    ],
+    control: { type: 'select' },
+    description: 'call to action icon',
+    table: {
+      defaultValue: { summary: 'chevron right' },
+      type: { summary: 'string' },
+    },
+  },
+  icon_position: {
+    options: ['left', 'right'],
+    control: { type: 'radio' },
+    defaultValue: 'left',
+    description: 'icon left or right position',
+    table: {
+      defaultValue: { summary: 'left' },
+      type: { summary: 'string' },
+    },
+  },
+};
+
+//Text Button - can also play with text class
+export const Link = (args) => {
+  return (
+    <Container>
+      <a href={args.href}>{args.label}</a>
+    </Container>
+  );
+};
+Link.args = {
+  label: 'Link label',
+  href: '/#',
+};
+Link.parameters = {
+  hideNoControlsWarning: true,
+};

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/{Button → Form/Button}/Button.stories.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Button, Icon, Segment } from 'semantic-ui-react';
+import { Button, Icon, Container, Segment } from 'semantic-ui-react';
 
 export default {
-  title: 'Components/Button',
+  title: 'Components/Forms/Button',
   component: Button,
   parameters: {
     actions: {
@@ -32,7 +32,11 @@ export default {
 
 //Default Button
 export const Default = (args) => {
-  return <Button disabled={args.disabled}>{args.label}</Button>;
+  return (
+    <Container>
+      <Button disabled={args.disabled}>{args.label}</Button>
+    </Container>
+  );
 };
 Default.args = {
   label: 'Default Button',
@@ -46,9 +50,11 @@ Default.parameters = {
 //Primary button
 export const Primary = (args) => {
   return (
-    <Button primary disabled={args.disabled}>
-      {args.label}
-    </Button>
+    <Container>
+      <Button primary disabled={args.disabled}>
+        {args.label}
+      </Button>
+    </Container>
   );
 };
 Primary.args = {
@@ -63,9 +69,11 @@ Primary.parameters = {
 //secondary Button
 export const Secondary = (args) => {
   return (
-    <Button secondary disabled={args.disabled}>
-      {args.label}
-    </Button>
+    <Container>
+      <Button secondary disabled={args.disabled}>
+        {args.label}
+      </Button>
+    </Container>
   );
 };
 Secondary.args = {
@@ -80,17 +88,23 @@ Secondary.parameters = {
 //secondary Button Inverted
 export const Inverted = (args) => {
   return (
-    <Segment inverted compact>
-      <Button primary inverted disabled={args.disabled}>
-        {args.button1}
-      </Button>
-      <Button secondary inverted disabled={args.disabled}>
-        {args.button2}
-      </Button>
-      <Button inverted disabled={args.disabled}>
-        {args.button3}
-      </Button>
-    </Segment>
+    <Container>
+      <Segment compact>
+        <Button primary inverted disabled={args.disabled}>
+          {args.button1}
+        </Button>
+      </Segment>
+      <Segment compact>
+        <Button secondary inverted disabled={args.disabled}>
+          {args.button2}
+        </Button>
+      </Segment>
+      <Segment inverted compact>
+        <Button inverted disabled={args.disabled}>
+          {args.button3}
+        </Button>
+      </Segment>
+    </Container>
   );
 };
 Inverted.args = {
@@ -107,15 +121,15 @@ Inverted.parameters = {
 //Call to action button
 export const Labeled = (args) => {
   return (
-    <div className="eea">
+    <Container>
       <Button
         className={args.variant + ' icon ' + args.icon_position + ' labeled'}
         disabled={args.disabled}
       >
         {args.label}
-        <Icon name={args.icon + args.icon_position} />
+        <Icon name={args.icon} />
       </Button>
-    </div>
+    </Container>
   );
 };
 Labeled.args = {
@@ -171,12 +185,14 @@ Labeled.argTypes = {
   },
 };
 
-//Text Button - can also play with text class
+//Text Button
 export const Text = (args) => {
   return (
-    <Button as="p" disabled={args.disabled}>
-      {args.label}
-    </Button>
+    <Container>
+      <Button as="p" disabled={args.disabled}>
+        {args.label}
+      </Button>
+    </Container>
   );
 };
 Text.args = {

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;