@eeacms/volto-eea-design-system 1.14.0 → 1.16.0

package/src/ui/Statistic/Statistic.stories.js

@@ -1,10 +1,19 @@
 import React from 'react';
 import { Statistic, Container, Button } from 'semantic-ui-react';
-import CountUp, { useCountUp } from 'react-countup';
+import { CountUp, useCountUp } from '@eeacms/countup';
 
 export default {
   title: 'Components/Statistic',
   component: Statistic,
+  args: {
+    label: 'Statistic Label',
+    value: 'Value',
+    size: 'small',
+    horizontal: false,
+    linked: false,
+    inverted: false,
+    backgroundVariant: 'primary',
+  },
   argTypes: {
     size: {
       control: {
@@ -43,39 +52,65 @@ export default {
         type: { summary: 'string' },
       },
     },
+
+    label: {
+      description: 'label content of the Statistic',
+    },
+    value: {
+      description: 'value content of the statistic',
+    },
+    inverted: {
+      description: 'Is the theme inverted',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    linked: {
+      description: 'Add link to statistic',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
   },
 };
 
-const Template = (args) => (
-  <div
-    className={`full-width color-bg-${
-      args.inverted ? args.backgroundVariant : ''
-    }`}
-  >
-    <Container>
-      <Statistic.Group {...args}>
-        {args.elements &&
-          args.elements.map((element, index) => (
-            <Statistic
-              as="a"
-              href={element.href}
-              key={index}
-              {...element}
-            ></Statistic>
-          ))}
-        {!args.elements && (
-          <>
-            {args.linked ? (
-              <Statistic as="a" href="/#" {...args}></Statistic>
-            ) : (
-              <Statistic {...args}></Statistic>
-            )}{' '}
-          </>
-        )}
-      </Statistic.Group>
-    </Container>
-  </div>
-);
+const Template = (args) => {
+  const { backgroundVariant, elements, linked, ...sematicProps } = args;
+  return (
+    <div
+      className={`full-width color-bg-${
+        sematicProps.inverted ? backgroundVariant : ''
+      }`}
+    >
+      <Container>
+        <Statistic.Group {...sematicProps}>
+          {elements &&
+            elements.map((element, index) => (
+              <Statistic
+                as="a"
+                href={element.href}
+                key={index}
+                {...element}
+              ></Statistic>
+            ))}
+          {!elements && (
+            <>
+              {linked ? (
+                <Statistic as="a" href="/#" {...sematicProps}></Statistic>
+              ) : (
+                <Statistic {...sematicProps}></Statistic>
+              )}{' '}
+            </>
+          )}
+        </Statistic.Group>
+      </Container>
+    </div>
+  );
+};
 
 export const Default = Template.bind({});
 Default.args = {
@@ -192,7 +227,7 @@ const CustomTemplate = (args) => (
     <Container>
       <Statistic.Group {...args}>
         {args.elements &&
-          args.elements.map((element, index) => (
+          args.elements.map((element) => (
             <a href={element.href} className="ui small statistic">
               <div className={`value ${args.valueVariation}`}>
                 {element.value}
@@ -300,34 +335,62 @@ Custom.argTypes = {
 ////////////////////////////////// Animation Stories
 
 const AnimationTemplate = (args) => {
-  const { start, reset, pauseResume } = useCountUp({
-    ref: 'counter',
+  const [run, setRun] = React.useState(true);
+  const { reset, value } = useCountUp({
     start: args.start,
     end: args.end,
-    delay: args.delay,
     duration: args.duration,
-    decimals: args.decimals,
-    decimal: args.decimal,
-    prefix: args.prefix,
-    suffix: args.suffix,
+    decimalPlaces: args.decimals,
+    decimalSeparator: args.decimal,
+    formatter: (value) => {
+      let prefix = args.prefix || '';
+      let suffix = args.suffix || '';
+      let valueFixed = value.toFixed(args.decimals);
+
+      if (args.decimal === ',')
+        return (
+          prefix + new Intl.NumberFormat('ro-RO').format(valueFixed) + suffix
+        );
+      else return prefix + valueFixed + suffix;
+    },
+    isCounting: run,
+    useIntersection: false,
   });
 
   return (
     <Container>
       <Statistic.Group {...args}>
         <a href="/#" className="ui small statistic">
-          <div className="value secondary" id="counter"></div>
+          <div className="value secondary">{value}</div>
           <div className="label tertiary">Count up label</div>
         </a>
       </Statistic.Group>
       <br />
-      <Button secondary onClick={start}>
+      <Button
+        secondary
+        onClick={() => {
+          reset();
+          setRun(true);
+        }}
+      >
         Start
       </Button>
-      <Button primary onClick={reset}>
+      <Button
+        primary
+        onClick={() => {
+          reset();
+          setRun(false);
+        }}
+      >
         Reset
       </Button>
-      <Button primary inverted onClick={pauseResume}>
+      <Button
+        primary
+        inverted
+        onClick={() => {
+          setRun(!run);
+        }}
+      >
         Pause/Resume
       </Button>
     </Container>
@@ -335,10 +398,10 @@ const AnimationTemplate = (args) => {
 };
 
 export const Animation = AnimationTemplate.bind({});
+
 Animation.args = {
   start: 0,
   end: 5000,
-  delay: 0,
   duration: 5,
   decimals: 0,
   prefix: '',
@@ -347,9 +410,17 @@ Animation.args = {
   size: 'small',
   horizontal: false,
 };
+Animation.argTypes = {
+  decimal: {
+    name: 'decimal',
+    defaultValue: '.',
+    options: ['.', ','],
+    control: { type: 'select' },
+  },
+};
 Animation.parameters = { controls: { exclude: ['Background when inverted'] } };
 
-const CountupStatistics = (args) => (
+const CountUpStatistics = (args) => (
   <div
     className={`full-width color-bg-${
       args.inverted ? args.backgroundVariant : ''
@@ -358,10 +429,10 @@ const CountupStatistics = (args) => (
     <Container>
       <Statistic.Group id="counter" {...args}>
         {args.elements &&
-          args.elements.map((element, index) => (
+          args.elements.map((element) => (
             <a href={element.href} className="ui small statistic">
               <div className={`value ${args.valueVariation}`}>
-                <CountUp end={element.value} />
+                <CountUp end={element.value} isCounting={true} />
               </div>
               <div className={`label ${args.labelVariation}`}>
                 {element.label}
@@ -375,27 +446,27 @@ const CountupStatistics = (args) => (
     </Container>
   </div>
 );
-export const AnimationGroup = CountupStatistics.bind({});
+export const AnimationGroup = CountUpStatistics.bind({});
 AnimationGroup.args = {
   elements: [
     {
       ...Default.args,
       label: 'label 1',
-      value: '50',
+      value: 50,
       slate: 'Text from slate',
       href: '/#',
     },
     {
       ...Default.args,
       label: 'label 2',
-      value: '500',
+      value: 500,
       slate: 'Text from slate',
       href: '/#',
     },
     {
       ...Default.args,
       label: 'label 3',
-      value: '5000',
+      value: 5000,
       slate: 'Text from slate',
       href: '/#',
     },
@@ -409,56 +480,3 @@ AnimationGroup.args = {
   inverted: false,
   backgroundVariant: 'primary',
 };
-AnimationGroup.argTypes = {
-  widths: {
-    control: {
-      type: 'select',
-      options: ['one', 'two', 'three', 'four', 'five'],
-    },
-    description: 'statistic column size',
-    table: {
-      type: {
-        summary: 'string',
-      },
-      defaultValue: {
-        summary: ' "" ',
-      },
-    },
-  },
-  valueVariation: {
-    name: 'Value variation',
-    defaultValue: 'tertiary',
-    options: ['primary', 'secondary', 'tertiary'],
-    control: { type: 'select' },
-    description: 'Text color variation',
-    table: {
-      category: 'Color variations',
-      defaultValue: { summary: 'tertiary' },
-      type: { summary: 'string' },
-    },
-  },
-  labelVariation: {
-    name: 'Value variation',
-    defaultValue: 'tertiary',
-    options: ['primary', 'secondary', 'tertiary'],
-    control: { type: 'select' },
-    description: 'Text color variation',
-    table: {
-      category: 'Color variations',
-      defaultValue: { summary: 'tertiary' },
-      type: { summary: 'string' },
-    },
-  },
-  extraVariation: {
-    name: 'Extra info variation',
-    defaultValue: 'tertiary',
-    options: ['primary', 'secondary', 'tertiary'],
-    control: { type: 'select' },
-    description: 'Text color variation',
-    table: {
-      category: 'Color variations',
-      defaultValue: { summary: 'tertiary' },
-      type: { summary: 'string' },
-    },
-  },
-};

package/theme/plugins.js

@@ -1,5 +1,187 @@
+function toHSL(color) {
+  if (color.toHSL) {
+    return color.toHSL();
+  } else {
+    throw new Error('Argument cannot be evaluated to a color');
+  }
+}
+
 module.exports = {
   install(less, pluginManager, functions) {
+    const darken = less.functions.functionRegistry.get('darken');
+    const lighten = less.functions.functionRegistry.get('lighten');
+    const saturate = less.functions.functionRegistry.get('saturate');
+    const desaturate = less.functions.functionRegistry.get('desaturate');
+
+    functions.add('darken', function (
+      color,
+      amount = new less.tree.Dimension(0),
+      method,
+    ) {
+      try {
+        const hsl = toHSL(color);
+
+        if (hsl) {
+          return darken(color, amount, method);
+        }
+      } catch (err) {
+        if (['hsl', 'hsla'].includes(color.name)) {
+          if (amount?.value) {
+            color.args[2] = new less.tree.Call('calc', [
+              new less.tree.Operation(
+                '-',
+                [
+                  color.args[2],
+                  new less.tree.Dimension(
+                    amount.value,
+                    new less.tree.Unit(null, null, '%'),
+                  ),
+                ],
+                true,
+              ),
+            ]);
+          }
+
+          return color;
+        } else if (color.name === 'var') {
+          if (color.args[1]) {
+            color.args[1] = functions.get('darken')(
+              color.args[1],
+              amount,
+              method,
+            );
+          }
+          return color;
+        } else {
+          throw err;
+        }
+      }
+    });
+
+    functions.add('lighten', function (color, amount, method) {
+      try {
+        const hsl = toHSL(color);
+
+        if (hsl) {
+          return lighten(color, amount, method);
+        }
+      } catch (err) {
+        if (['hsl', 'hsla'].includes(color.name)) {
+          if (amount?.value) {
+            color.args[2] = new less.tree.Call('calc', [
+              new less.tree.Operation(
+                '+',
+                [
+                  color.args[2],
+                  new less.tree.Dimension(
+                    amount.value,
+                    new less.tree.Unit(null, null, '%'),
+                  ),
+                ],
+                true,
+              ),
+            ]);
+          }
+
+          return color;
+        } else if (color.name === 'var') {
+          if (color.args[1]) {
+            color.args[1] = functions.get('lighten')(
+              color.args[1],
+              amount,
+              method,
+            );
+          }
+          return color;
+        } else {
+          throw err;
+        }
+      }
+    });
+
+    functions.add('saturate', function (color, amount, method) {
+      try {
+        const hsl = toHSL(color);
+
+        if (hsl) {
+          return saturate(color, amount, method);
+        }
+      } catch (err) {
+        if (['hsl', 'hsla'].includes(color.name)) {
+          if (amount?.value) {
+            color.args[1] = new less.tree.Call('calc', [
+              new less.tree.Operation(
+                '+',
+                [
+                  color.args[1],
+                  new less.tree.Dimension(
+                    amount.value,
+                    new less.tree.Unit(null, null, '%'),
+                  ),
+                ],
+                true,
+              ),
+            ]);
+          }
+
+          return color;
+        } else if (!color.rgb || color.name === 'var') {
+          if (color.name === 'var' && color.args[1]) {
+            color.args[1] = functions.get('saturate')(
+              color.args[1],
+              amount,
+              method,
+            );
+            return color;
+          }
+          return null;
+        } else {
+          throw err;
+        }
+      }
+    });
+
+    functions.add('desaturate', function (color, amount, method) {
+      try {
+        const hsl = toHSL(color);
+
+        if (hsl) {
+          return desaturate(color, amount, method);
+        }
+      } catch (err) {
+        if (['hsl', 'hsla'].includes(color.name)) {
+          if (amount?.value) {
+            color.args[1] = new less.tree.Call('calc', [
+              new less.tree.Operation(
+                '-',
+                [
+                  color.args[1],
+                  new less.tree.Dimension(
+                    amount.value,
+                    new less.tree.Unit(null, null, '%'),
+                  ),
+                ],
+                true,
+              ),
+            ]);
+          }
+
+          return color;
+        } else if (color.name === 'var') {
+          if (color.args[1]) {
+            color.args[1] = functions.get('desaturate')(
+              color.args[1],
+              amount,
+              method,
+            );
+          }
+          return color;
+        } else {
+          throw err;
+        }
+      }
+    });
+
     functions.add('vw', function (percentage) {
       return new less.tree.Call('calc', [
         new less.tree.Operation(

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

@@ -81,13 +81,14 @@
 .accordion-title:not(.active) .ui.input input {
   color: @textColorCSSVar;
 }
+
 .ui.input input {
   border: @border;
 
   &:active,
   &:focus {
     border: @borderWidth solid @secondaryColor;
-    color: @textColor;
+    color: @textColorCSSVar;
   }
 }
 
@@ -121,7 +122,19 @@ textarea.fluid {
     font-weight: @bold;
   }
 
-  i.icon {
+  .icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    margin: 0;
+    background-color: transparent !important;
+    box-shadow: none !important;
+    line-height: 1;
+    text-align: center;
+  }
+
+  .icon:before {
     color: @white;
     font-size: 16px;
     opacity: 1;
@@ -129,18 +142,18 @@ textarea.fluid {
 }
 
 .ui.fluid.icon.input.search > input::-webkit-input-placeholder {
-  opacity: 0.9;
   color: rgb(255, 255, 255);
+  opacity: 0.9;
 }
 
 .ui.fluid.icon.input.search > input::-moz-placeholder {
-  opacity: 0.9;
   color: rgb(255, 255, 255);
+  opacity: 0.9;
 }
 
 .ui.fluid.icon.input.search > input::-ms-input-placeholder {
-  opacity: 0.9;
   color: rgb(255, 255, 255);
+  opacity: 0.9;
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
@@ -150,7 +163,7 @@ textarea.fluid {
       font-size: 18px;
     }
 
-    i.icon {
+    .icon:before {
       font-size: 18px;
     }
   }
@@ -164,7 +177,7 @@ textarea.fluid {
       font-size: 40px;
     }
 
-    i.icon {
+    .icon:before {
       font-size: 38px;
     }
   }

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

@@ -110,7 +110,6 @@
 /*Share Popup*/
 
 .ui.popup.share-popup {
-  position: initial; // without position initial popper cannot correctly place popup
   min-width: @sharePopupMinWidth;
   padding: @sharePopupPadding;
   filter: @sharePopupFilter;

package/theme/themes/eea/extras/custom.overrides

@@ -127,6 +127,11 @@
   color: inherit;
 }
 
+.quanta-block-editor-teaserGrid .teaserGrid .toolbar {
+  top: 0px;
+  margin: 5px;
+}
+
 // Tabs block border left/top
 .tabs-block {
   .border-left {

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

@@ -747,6 +747,7 @@
 
 #mega-menu .ui.list {
   margin: 0;
+  gap: @megaMenuListGap;
 }
 
 #mega-menu .item {
@@ -770,7 +771,7 @@
   }
 }
 
-#at-a-glance {
+.at-a-glance {
   .item {
     margin: @megaMenuGlanceListItemMargin;
     font-size: @megaMenuGlanceListItemFontSize;
@@ -782,30 +783,10 @@
   }
 }
 
-// add negative margin to the first column subtitle from nested grid
-// so that the subtitle lines up with the subtitle from the left column
-#mega-menu .nested-grid > .column:first-of-type .sub-title {
-  margin-top: @megaMenuSubTitleCountriesNestedGridMarginTop;
-}
-
-#topics-right-column {
+.topics-right-column {
   padding-left: @topicsRightColumnPaddingLeft;
 }
 
-.ui.grid > .column > .ui.grid {
-  margin-top: 0;
-}
-
-#mega-menu .ui.grid {
-  div.column:first-child {
-    padding-left: 0.625rem;
-  }
-
-  div.column:last-child {
-    padding-right: 0.625rem;
-  }
-}
-
 #mega-menu .active:not(.title-link):not(.button) > span {
   padding-left: @megaMenuListItemActivePadding;
   border-left: @megaMenuListItemActiveBorder;

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

@@ -182,9 +182,9 @@
 @megaMenuSubTitleFontWeight: @font-weight-7;
 @megaMenuSubTitlePadding: 0.5rem 0;
 @megaMenuSubTitleDisplay: block;
-@megaMenuSubTitleCountriesNestedGridMarginTop: -1rem;
 
 /* List Item */
+@megaMenuListGap: 0 2rem;
 @megaMenuListItemFontSize: @font-size-1;
 @megaMenuListItemFontWeight: @font-weight-4;
 @megaMenuListItemPadding: @rem-space-2 0;

package/theme/themes/eea/extras/main.overrides

@@ -38,3 +38,9 @@
 #main main {
   overflow: inherit;
 }
+
+// with z-index: -1 you don't get the hover and focused border for block child section
+// TODO: to be removed if https://github.com/plone/volto/pull/5029 merged
+.block .block:not(.inner)::before {
+  z-index: auto;
+}

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

@@ -34,7 +34,7 @@
 
 .tags-content {
   gap: @tagsContentGap;
-  display: flex;
+  display: flex !important;
   flex-wrap: wrap;
 }