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

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

@@ -0,0 +1,106 @@
+@spacer: 4px;
+
+@space-025: @spacer * 0.25; //1px;
+@space-05:  @spacer * 0.5;  //2px;
+@space-1:   @spacer * 1;    //4px;
+@space-2:   @spacer * 2;    //8px;
+@space-3:   @spacer * 3;    //12px;
+@space-3-5: @spacer * 3.5;  //14px;
+@space-4:   @spacer * 4;    //16px;
+@space-5:   @spacer * 5;    //20px;
+@space-6:   @spacer * 6;    //24px;
+@space-7:   @spacer * 7;    //28px;
+@space-7-5: @spacer * 7.5;  //30px;
+@space-8:   @spacer * 8;    //32px;
+@space-9:   @spacer * 9;    //36px;
+@space-10:  @spacer * 10;   //40px;
+@space-11:  @spacer * 11;   //44px;
+@space-12:  @spacer * 12;   //48px;
+@space-13:  @spacer * 13;   //52px;
+@space-14:  @spacer * 14;   //56px;
+@space-15:  @spacer * 15;   //60px;
+@space-16:  @spacer * 16;   //64px;
+@space-17:  @spacer * 17;   //68px;
+@space-18:  @spacer * 18;   //72px;
+@space-19:  @spacer * 19;   //76px;
+@space-20:  @spacer * 20;   //80px;
+
+// space sizing, add missing values if needed
+@space-24: @spacer * 24; //96px;
+
+@space-28: @spacer * 28; //112px;
+
+@space-32: @spacer * 32; //128px;
+
+@space-35: @spacer * 35; //140px;
+
+@rem-space-025: @1px;
+@rem-space-050: @2px;
+@rem-space-1: @4px;
+@rem-space-2: @8px;
+@rem-space-3: @12px;
+@rem-space-3-5: @14px;
+@rem-space-4: @16px;
+@rem-space-5: @20px;
+@rem-space-6: @24px;
+@rem-space-7: @28px;
+@rem-space-7-50: @30px;
+@rem-space-8: @32px;
+@rem-space-9: @36px;
+@rem-space-10: @40px;
+@rem-space-11: @44px;
+@rem-space-12: @48px;
+@rem-space-13: @52px;
+@rem-space-14: @56px;
+@rem-space-15: @60px;
+@rem-space-16: @64px;
+@rem-space-17: @68px;
+@rem-space-18: @72px;
+@rem-space-19: @76px;
+@rem-space-20: @80px;
+
+@em-space-025: @relative1px;
+@em-space-050: @relative2px;
+@em-space-1: @relative4px;
+@em-space-2: @relative8px;
+@em-space-3: @relative12px;
+@em-space-3-50: @relative14px;
+@em-space-4: @relative16px;
+@em-space-5: @relative20px;
+@em-space-6: @relative24px;
+@em-space-7: @relative28px;
+@em-space-7-50: @relative30px;
+@em-space-8: @relative32px;
+@em-space-9: @relative36px;
+@em-space-10: @relative40px;
+@em-space-11: @relative44px;
+@em-space-12: @relative48px;
+@em-space-13: @relative52px;
+@em-space-14: @relative56px;
+@em-space-15: @relative60px;
+@em-space-16: @relative64px;
+@em-space-17: @relative68px;
+@em-space-18: @relative72px;
+@em-space-19: @relative76px;
+@em-space-20: @relative80px;
+
+// Size scale
+// Used for buttons, inputs, labels, avatars etc.
+@size: @space-4;
+
+@size-025: @size * 0.25;          // 4px
+@size-050: @size * 0.5;           // 8px
+@size-1:   @size;                 // 16px
+@size-2:   @size-1  +  @space-1;  // 20px
+@size-3:   @size-2  +  @space-1;  // 24px
+@size-4:   @size-3  +  @space-1;  // 28px
+@size-5:   @size-4  +  @space-1;  // 32px
+@size-6:   @size-5  +  @space-2;  // 40px
+@size-7:   @size-6  +  @space-2;  // 48px
+@size-8:   @size-7  +  @space-4;  // 64px
+@size-9:   @size-8  +  @space-4;  // 80px
+@size-10:  @size-9  +  @space-10; // 120px
+@size-11:  @size-10 +  @space-10; // 160px
+@size-12:  @size-11 +  @space-20; // 240px
+@size-13:  @size-12 +  @space-20; // 320px
+@size-14:  @size-13 +  @size-11;  // 480px

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

@@ -0,0 +1,7 @@
+@import 'borders';
+@import 'colors';
+@import 'fonts';
+@import 'shadows';
+@import 'shapes';
+@import 'sizes';
+@import 'z-index';

package/theme/themes/eea/tokens/z-index.less

@@ -0,0 +1,12 @@
+@z-index-000: -100;
+@z-index-00: -2;
+@z-index-0: -1;
+@z-index-1: 1;
+@z-index-2: 2;
+@z-index-3: 3;
+@z-index-4: 4;
+@z-index-5: 10;
+@z-index-6: 100;
+@z-index-7: 200;
+@z-index-8: 1000;
+@z-index-important: 9999;

package/theme/themes/eea/views/card.overrides

@@ -288,3 +288,111 @@
     margin: 0;
   }
 }
+
+/*******************************
+        Carousel
+*******************************/
+
+.cards-carousel {
+  position: relative;
+
+  .ui.button.icon.slider-arrow {
+    padding: @carouselButtonPadding;
+    display: none;
+
+    .active, &:focus, &:hover {
+      background: transparent;
+    }
+
+    .icon {
+      color: @carouselButtonIconColor;
+      font-size: @carouselButtonIconFontSize;
+    }
+  }
+
+  .slick-arrow {
+    display: block !important;
+  }
+
+  .slick-prev,
+  .slick-next {
+    display: none !important;
+  }
+
+  .slick-list {
+    margin: 0 -0.75em !important;
+  }
+  
+  .slick-track {
+    display: flex;
+  }
+
+  .slick-slide {
+    display: flex;
+    height: auto;
+    flex: 1;
+    flex-direction: column;
+    padding: 15px 0.75em !important;
+
+    > div {
+      height: 100%;
+    }
+
+  }
+
+  .slider-arrow {
+    position: absolute;
+    top: 50%;
+    bottom: auto;
+    display: block;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+    transform: translate(0, -50%);
+  }
+
+  .prev-arrow {
+    right: auto;
+    left: @carouselButtonDistance;
+  }
+
+  .next-arrow {
+    right: @carouselButtonDistance;
+    left: auto;
+  }
+
+  .slick-dots li button:before {
+    background-color: @carouselDotsBackgroundColor;
+    color: transparent;
+    border: @carouselDotsBorder;
+    border-radius: @carouselDotsBorderRadius;
+    opacity: @carouselDotsOpacity;
+    width: @mobileCarouselDotsWidth;
+    height: @mobileCarouselDotsHeight;
+  }
+
+  .slick-dots li.slick-active button:before {
+    background-color: @carouselDotsActiveBackgroundColor;
+    color: transparent;
+    
+  }
+
+  
+}
+
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .cards-carousel {
+
+    .ui.button.icon.slider-arrow {
+      display: block;
+    }
+
+    .slick-dots li button:before {
+      width: inherit;
+      height: inherit;
+    }
+  }
+}

package/theme/themes/eea/views/card.variables

@@ -157,7 +157,7 @@
 --------------------*/
 
 /* Link */
-@linkHoverBackground: @white;
+@linkHoverBackground: transparent;
 @linkHoverBorder: @border;
 @linkHoverZIndex: 5;
 @linkHoverRaiseDistance: 3px;
@@ -319,3 +319,31 @@
 /* Meta */
 @cardMetaFontSize: 12px;
 @cardMetaTagFontWeight: 400;
+
+/*******************************
+        Carousel Cards
+*******************************/
+
+/*  Title */
+@carouselTitleFontWeight: 700;
+@carouselTitleMargin: 0;
+@carouselTitleColor: @deepBlue;
+
+/* Button */
+@carouselButtonPadding: 0;
+@carouselButtonIconColor: @black;
+@carouselButtonIconFontSize: 3.125rem;
+@carouselButtonDistance: -3.5rem;
+
+
+/* Dots */
+@carouselDotsFontSize: 0.75rem;
+@carouselDotsBorderRadius: 50%;
+@carouselDotsOpacity: 1;
+@carouselDotsBorder: 1px solid @darkCerulean;
+@carouselDotsBackgroundColor: @white;
+@carouselDotsActiveBackgroundColor: @darkCerulean;
+@mobileCarouselDotsWidth: 0.875rem;
+@mobileCarouselDotsHeight: 0.875rem;
+
+

package/theme/themes/eea/views/item.overrides

@@ -6,3 +6,40 @@
 .ui.items:not(.unstackable) > .item > .image {
   margin: @imageMargin;
 }
+
+.item .tile.image {
+  width: @tileImageWidth;
+  height: @tileImageHeight;
+}
+
+.ui.items.row > .item {
+  margin: @mobileRowItemMargin;
+}
+
+// As semantic does for non unstacable items
+// so columns does not affect margin in mobiles
+.ui.items.row > .item:last-child {
+  margin-bottom: 0;
+}
+
+@media only screen and (max-width: @largestMobileScreen) {
+  .ui.items.row > .item {
+    flex-direction: row;
+  }
+  
+  .ui.items.row > .item > .image + .content {
+    padding: 0em 0em 0em @mobileContentImageDistance;
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .ui.items.row > .item {
+    margin: @tabletRowItemMargin;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .ui.items.row > .item {
+    margin: @desktopRowItemMargin;
+  }
+}

package/theme/themes/eea/views/item.variables

@@ -24,16 +24,16 @@
 /* Responsive */
 @itemSpacing: 1em;
 @imageWidth: 175px;
-@contentImageDistance: 1.5em;
+@contentImageDistance: 2rem;
 
 @tabletItemSpacing: 1em;
 @tabletImageWidth: 150px;
-@tabletContentImageDistance: 1em;
+@tabletContentImageDistance: 2rem;
 
 @mobileItemSpacing: 2em;
 @mobileImageWidth: auto;
 @mobileImageMaxHeight: 250px;
-@mobileContentImageDistance: 1.5em;
+@mobileContentImageDistance: 1.5rem;
 
 
 /*-------------------
@@ -52,6 +52,10 @@
 @imageBoxShadow: none;
 @imageBorder: none;
 
+/* Tile image size */
+@tileImageWidth: 50px;
+@tileImageHeight: auto;
+
 /* Content */
 @contentDisplay: block;
 @contentVerticalAlign: top;
@@ -155,3 +159,8 @@
 /* Unstackable */
 @unstackableMobileImageWidth: 125px;
 
+/* Row */
+@mobileRowItemMargin  : 1rem 0;
+@tabletRowItemMargin  : 1.5rem 0;
+@desktopRowItemMargin : 2rem 0;
+

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/src/ui/Pullquote/Pullquote.stories.jsx

@@ -1,101 +0,0 @@
-import React from 'react';
-import Pullquote from './Pullquote';
-import { Container } from 'semantic-ui-react';
-
-export default {
-  title: 'Components/Pullquote',
-  component: Pullquote,
-  argTypes: {
-    quote: {
-      description: 'Pullquote content',
-      type: { name: 'string' },
-      table: {
-        defaultValue: { summary: '""' },
-      },
-    },
-    source: {
-      description: 'source of quote',
-      type: { name: 'string' },
-      table: {
-        defaultValue: { summary: '""' },
-      },
-    },
-    metadata: {
-      description: 'quote metadata',
-      type: { name: 'string' },
-      table: {
-        defaultValue: { summary: '""' },
-      },
-    },
-    content: {
-      description: 'content that quote floats around',
-      type: { name: 'string' },
-      table: {
-        defaultValue: { summary: '""' },
-      },
-    },
-    quotePosition: {
-      control: {
-        type: 'inline-radio',
-        options: ['left', 'right', 'none', 'inherit'],
-      },
-      description: 'direction that quote floats to',
-      type: { name: 'string' },
-      table: {
-        defaultValue: { summary: '""' },
-      },
-    },
-  },
-};
-
-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>
-    <p>{args.content}</p>
-    <p>{args.content}</p>
-    <p>{args.content}</p>
-    <p>{args.content}</p>
-    <p>{args.content}</p>
-  </Container>
-);
-
-Default.args = {
-  quote:
-    'Nulla viverra magna curabitur leo nisl scelerisque. Velit fusce sed sem ut. Molestie fermentum congue nunc cras posuere orci. Duis eu ultrices nisi, est a pellentesque eget tellus mauris. Amet, tortor quis pellentesque suspendisse convallis lacinia. Aliquam.',
-  source: 'Arthur Abbott',
-  metadata: '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',
-};
-
-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>
-    <p>{args.content}</p>
-    <p>{args.content}</p>
-    <p>{args.content}</p>
-    <p>{args.content}</p>
-    <p>{args.content}</p>
-  </Container>
-);
-
-Reversed.args = {
-  quote:
-    'Nulla viverra magna curabitur leo nisl scelerisque. Velit fusce sed sem ut. Molestie fermentum congue nunc cras posuere orci. Duis eu ultrices nisi, est a pellentesque eget tellus mauris. Amet, tortor quis pellentesque suspendisse convallis lacinia. Aliquam.',
-  source: 'Arthur Abbott',
-  metadata: '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/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;