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

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

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

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

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

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

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

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

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

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

@@ -2,6 +2,8 @@
          Site Settings
 *******************************/
 
+@import '@eeacms/volto-eea-design-system/../theme/themes/eea/tokens/tokens';
+
 /*-------------------
        Fonts
 --------------------*/
@@ -284,10 +286,15 @@
 --------------------*/
 
 @mobileBreakpoint            : 320px;
-@tabletBreakpoint            : 480px;
-@computerBreakpoint          : 835px;
-@largeMonitorBreakpoint      : 1025px;
-@widescreenMonitorBreakpoint : 1200px;
+@mobileLandscapeBreakpoint   : 480px;  // introduced for the design system
+@tabletBreakpoint            : 768px;
+@contentBreakpoint           : 835px; // introduced for the design system
+@computerBreakpoint          : 992px;
+@smallMonitorBreakpoint      : 1024px; // introduced for the design system
+@largeMonitorBreakpoint      : 1200px;
+@laptopMonitorBreakpoint     : 1280px; // introduced for the design system
+@siteBreakpoint              : 1400px; // introduced for the design system
+@widescreenMonitorBreakpoint : 1920px;
 
 /* Paddings for breakpoints */
 @mobilePadding  : 1.875rem;
@@ -664,7 +671,6 @@
 @largestTabletScreen : (@computerBreakpoint - @1px);
 @largestSmallMonitor : (@largeMonitorBreakpoint - @1px);
 @largestLargeMonitor : (@widescreenMonitorBreakpoint - @1px);
-@mobileWidth: 1279px;
 
 
 /*-------------------

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

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

package/theme/themes/eea/modules/tab.overrides

@@ -4,7 +4,7 @@
 
 .ui.pointing.secondary.menu {
   a.item {
-    font-size: @mobileHeaderSize;
+    font-size: @headerSize;
   }
 
   a.item:hover {
@@ -12,10 +12,26 @@
   }
 }
 
+// Contain images inside vertical tab content
+.stretched.wide.column > .tab img {
+  max-width: @verticalTabPaneImageMaxWidth;
+}
+
+.ui.pointing.secondary.menu::-webkit-scrollbar {
+  height: @mobileTabScrollbarHeight;
+}
+
 @media only screen and (min-width: @tabletBreakpoint) {
-  .ui.pointing.secondary.menu {
-    a.item {
-      font-size: @tabletHeaderSize;
+  .ui.pointing.secondary.menu::-webkit-scrollbar {
+    height: @tabletTabScrollbarHeight;
+  }
+}
+
+@media only screen and (max-width: @largestMobileScreen) {
+  .ui.pointing.secondary.vertical.menu {
+    .item {
+      padding: @mobileItemPadding;
+      font-size: @mobileItemFontSize;
     }
   }
 }

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

@@ -4,8 +4,10 @@
 
 @tabActiveItemHoverColor: @secondaryColor;
 
-@mobileHeaderSize: 1.125rem;
-@tabletHeaderSize: @h4;
+@mobileItemFontSize: 1rem;
+@mobileItemPadding: 1rem 0.25rem;
+
+@headerSize: @h4;
 @headerSizeResponsive: @fontSize;
 @contentSize: @fontSize;
 
@@ -15,4 +17,11 @@
 @loadingContentOffset: -10000px;
 
 @loaderDistanceFromTop: 100px;
-@loaderSize: 2.5em;
+@loaderSize: 2.5em;
+
+/* Scrollbar */
+@mobileTabScrollbarHeight: 0;
+@tabletTabScrollbarHeight: 0.3rem;
+
+/* Images */
+@verticalTabPaneImageMaxWidth: 100%;

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

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

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

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

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

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

package/src/ui/Blockquote/Blockquote.jsx

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

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import Blockquote from './Blockquote';
-
-const CITATION =
-  'An interconnected grid will help deliver the ultimate goal of the Energy Union, to make sure affordable, secure and sustainable energy, and also growth across the EU.';
-const AUTHOR = 'President Juncker';
-
-export default {
-  title: 'Components/Blockquote',
-  component: Blockquote,
-  argTypes: {
-    content: {
-      name: 'citation',
-      description: 'Blockquote content',
-      type: { name: 'string', required: true },
-    },
-    meta: {
-      name: 'meta',
-      description: 'Author of the content',
-      type: { name: 'string', required: true },
-    },
-  },
-};
-
-export const Default = (args) => (
-  <Blockquote>
-    <Blockquote.Content>{args.content}</Blockquote.Content>
-    <Blockquote.Meta>{args.meta}</Blockquote.Meta>
-  </Blockquote>
-);
-
-Default.args = {
-  content: CITATION,
-  meta: AUTHOR,
-};
-
-export const Reversed = (args) => (
-  <Blockquote>
-    <Blockquote.Meta>{args.meta}</Blockquote.Meta>
-    <Blockquote.Content>{args.content}</Blockquote.Content>
-  </Blockquote>
-);
-
-Reversed.args = {
-  content:
-    'The Ministry of Environment & Energy is responsible for environmental policy, the preparation of plans and programmes, and overseeing their implementation. The Ministry is also in charge of the transposition of EU environmental Directives into national law.',
-  meta: '22 December 1989',
-};

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

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

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

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

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

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