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

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

package/theme/themes/eea/elements/button.overrides

@@ -177,3 +177,82 @@ p.ui.button {
   font-size: @searchButtonFontSize;
   opacity: @searchButtonIconOpacity;
 }
+
+/************* Inverted Buttons *************/
+// Override the light colors with the defaults
+
+/* Primary - button.less - L:3128 */
+.ui.inverted.primary.buttons .button,
+.ui.inverted.primary.button {
+  box-shadow: 0px 0px 0px @invertedBorderSize @primaryColor inset !important;
+  color: @primaryColor;
+}
+
+.ui.inverted.primary.buttons .button:hover,
+.ui.inverted.primary.button:hover,
+.ui.inverted.primary.buttons .button:focus,
+.ui.inverted.primary.button:focus,
+.ui.inverted.primary.buttons .button.active,
+.ui.inverted.primary.button.active,
+.ui.inverted.primary.buttons .button:active,
+.ui.inverted.primary.button:active {
+  color: @invertedHoveredTextColor;
+}
+
+.ui.inverted.primary.buttons .button:hover,
+.ui.inverted.primary.button:hover {
+  background-color: @primaryColorHover;
+}
+
+.ui.inverted.primary.buttons .button:focus,
+.ui.inverted.primary.button:focus {
+  background-color: @primaryColorFocus;
+}
+
+.ui.inverted.primary.buttons .active.button,
+.ui.inverted.primary.active.button {
+  background-color: @primaryColorActive;
+}
+
+.ui.inverted.primary.buttons .button:active,
+.ui.inverted.primary.button:active {
+  background-color: @primaryColorDown;
+}
+
+/* Secondary - button.less - L:3128 */
+.ui.inverted.secondary.buttons .button,
+.ui.inverted.secondary.button {
+  box-shadow: 0px 0px 0px @invertedBorderSize @secondaryColor inset !important;
+  color: @secondaryColor;
+}
+
+.ui.inverted.secondary.buttons .button:hover,
+.ui.inverted.secondary.button:hover,
+.ui.inverted.secondary.buttons .button:focus,
+.ui.inverted.secondary.button:focus,
+.ui.inverted.secondary.buttons .button.active,
+.ui.inverted.secondary.button.active,
+.ui.inverted.secondary.buttons .button:active,
+.ui.inverted.secondary.button:active {
+  color: @invertedHoveredTextColor;
+}
+
+.ui.inverted.secondary.buttons .button:hover,
+.ui.inverted.secondary.button:hover {
+  background-color: @secondaryColorHover;
+}
+
+.ui.inverted.secondary.buttons .button:focus,
+.ui.inverted.secondary.button:focus {
+  background-color: @secondaryColorFocus;
+}
+
+.ui.inverted.secondary.buttons .active.button,
+.ui.inverted.secondary.active.button {
+  background-color: @secondaryColorActive;
+}
+
+.ui.inverted.secondary.buttons .button:active,
+.ui.inverted.secondary.button:active {
+  background-color: @secondaryColorDown;
+}

package/theme/themes/eea/elements/container.overrides

@@ -4,31 +4,16 @@
 
 /* All Sizes */
 .ui.container {
-  width: 100%;
-  padding-right: @mobilePadding;
-  padding-left: @mobilePadding;
   transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
     margin-left 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
     margin-right 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
 }
 
-// TODO fix issue of large container padding and then remove this fix
-#toolbar .pastanaga-menu .ui.container {
-  padding: @profileSectionPadding;
-}
 
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-  .ui.container {
-    padding-right: @tabletPadding;
-    padding-left: @tabletPadding;
-  }
-}
-
-@media only screen and (min-width: @computerBreakpoint) {
-  .ui.container {
-    padding-right: @computerPadding;
-    padding-left: @computerPadding;
-  }
+// add padding to containers on edit section so that we display add and delete buttons
+.section-edit .container {
+  padding: 0 3rem;
+  width: auto !important;
 }
 
 .contentWidth(@offset) {

package/theme/themes/eea/elements/container.variables

@@ -13,14 +13,16 @@
 
 /* Minimum Gutter is used to determine  the maximum container width for a given device */
 
-@maxWidth: 1400px;
+@maxWidth: 100%;
+@scrollbarWidth: 16px;
 
 /* Devices */
 @mobileMinimumGutter: 0em;
 @mobileWidth: auto;
-@mobileGutter: 1rem;
+@mobileGutter: 1.25rem;
 
-@tabletMinimumGutter: (@emSize  * 1);
+@tabletEmSize: 14px;
+@tabletMinimumGutter: (@tabletEmSize  * 1);
 @tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
 @tabletGutter: auto;
 
@@ -63,4 +65,3 @@
 @textSize: @large;
 
 /* Section */
-@profileSectionPadding: 0px;

package/theme/themes/eea/elements/segment.overrides

@@ -1,3 +1,80 @@
+/*******************************
+        Pastanaga Theme Overrides
+*******************************/
+
+.ui.basic.segment.content-area {
+  flex: 1 0 auto; /* IE11 fix, can't barely use  flex: 1; */
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.ui.primary.segment {
+  border-bottom: @4px solid @greyBorderColor;
+  font-size: @16px;
+  font-weight: @headerFontWeight;
+}
+
+.ui.secondary.segment {
+  font-size: @16px;
+}
+
+.ui.discreet.segment {
+  color: @lightGrey;
+  font-size: @14px;
+}
+
+.ui.form.segment {
+  padding: 0;
+
+  .ui.grid > .row {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+.ui.actions.segment {
+  border-top: @1px solid @lightGreyBorderColor;
+}
+
+.inverted.segment a.item {
+  color: @white;
+  text-decoration: underline;
+}
+
+.pusher > .ui.basic.segment {
+  padding-bottom: 0;
+}
+
+.ui.secondary.attached.segment {
+  text-transform: uppercase;
+}
+
+.ui.segment.dashed {
+  border: 3px dashed #ccc;
+  box-shadow: none;
+}
+
+.users-control-panel .ui.clearing.segment.actions {
+  display: inline-block;
+  width: 100%;
+  text-transform: uppercase;
+}
+
+.users-control-panel table div.item::after {
+  display: none;
+}
+
+.ui.segment.imageborder {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.ui.segment.listing-item {
+  display: flex;
+  align-items: center;
+}
+
 /*******************************
          Theme Overrides
 *******************************/

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/header.less

@@ -22,7 +22,6 @@
       align-items: center;
       justify-content: space-between;
       z-index: @topSectionZindex;
-      width: 100% !important; // Semantic has auto
     }
     .item {
       display: flex;
@@ -392,6 +391,7 @@ Header Actions - Burger and Search Icons
         }
 
         .ui.text.menu {
+          flex-wrap: wrap;
           display: flex;
           width: 88%;
           max-height: 20px;