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

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;