@eeacms/volto-eea-design-system 1.13.2 → 1.15.0

package/src/ui/Card/IconCard/IconCard.stories.jsx

@@ -21,6 +21,15 @@ export default {
         defaultValue: { summary: 'null' },
       },
     },
+    titleMaxLines: {
+      name: 'Title max lines',
+      options: ['none', '1', '2', '3', '4', '5'],
+      control: { type: 'select' },
+      table: {
+        category: 'Content',
+        defaultValue: { summary: '2' },
+      },
+    },
     inverted: {
       description: 'Inverted card',
       table: {
@@ -43,7 +52,11 @@ const Template = (args) => (
     <Card
       className={`icon text-center ${
         args.variant === 'default' ? '' : args.variant
-      } ${args.inverted ? 'inverted' : ''}`}
+      } ${args.inverted ? 'inverted' : ''} ${
+        args.titleMaxLines === 'none'
+          ? 'title-max-0-lines'
+          : 'title-max-' + args.titleMaxLines + '-lines'
+      }`}
     >
       {args.hasLink ? (
         <a href={args.href} aria-label={args.title}>
@@ -70,6 +83,7 @@ const Template = (args) => (
 export const Default = Template.bind({});
 Default.args = {
   variant: 'default',
+  titleMaxLines: '2',
   inverted: false,
   title: 'Lorem Ipsum',
   icon: 'ri-leaf-line',
@@ -116,7 +130,11 @@ const GridTemplate = (args) => (
             <Card
               className={`icon text-center ${
                 args.variant === 'default' ? '' : args.variant
-              } ${args.inverted ? 'inverted' : ''}`}
+              } ${args.inverted ? 'inverted' : ''} ${
+                args.titleMaxLines === 'none'
+                  ? 'title-max-0-lines'
+                  : 'title-max-' + args.titleMaxLines + '-lines'
+              }`}
             >
               {args.hasLink ? (
                 <a href={args.href} aria-label={card.title}>
@@ -146,6 +164,7 @@ const GridTemplate = (args) => (
 export const GridIconCard = GridTemplate.bind({});
 GridIconCard.args = {
   variant: 'default',
+  titleMaxLines: '2',
   inverted: false,
   hasLink: true,
   href: '/#',
@@ -186,6 +205,7 @@ GridIconCard.argTypes = {
   cards: {
     description: 'array with cards data',
     table: {
+      category: 'Content',
       type: {
         summary: 'Object',
       },

package/src/ui/Header/Header.jsx

@@ -39,6 +39,14 @@ const TopItem = ({ children, className, id }) => (
   </div>
 );
 
+const onKeyDownHandler = (event) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    event.target.click();
+    //event.target.focus();
+  }
+};
+
 const TopDropdownMenu = ({
   children,
   className,
@@ -69,6 +77,8 @@ const TopDropdownMenu = ({
               closeOnChange={true}
               closeOnBlur={false}
               closeOnEscape={true}
+              openOnFocus={false}
+              onKeyDown={onKeyDownHandler}
             >
               <Dropdown.Menu role="option">{children}</Dropdown.Menu>
             </Dropdown>
@@ -85,6 +95,8 @@ const TopDropdownMenu = ({
             closeOnChange={true}
             closeOnBlur={false}
             closeOnEscape={true}
+            openOnFocus={false}
+            onKeyDown={onKeyDownHandler}
           >
             <Dropdown.Menu role="option">{children}</Dropdown.Menu>
           </Dropdown>

package/src/ui/Header/HeaderSearchPopUp.js

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { Container, Input, List } from 'semantic-ui-react';
 import { withRouter, Link } from 'react-router-dom';
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
+import { handleEnterKeyPress } from '@eeacms/volto-eea-design-system/helpers';
 
 const getRandomItems = (arr, max) => {
   return (
@@ -37,7 +38,6 @@ function HeaderSearchPopUp({
   } = activeView || {};
   const { suggestionsTitle, suggestions, maxToShow } = searchSuggestions || {};
 
-  const [text, setText] = React.useState('');
   const [visibleSuggestions, setVisibileSuggestions] = React.useState(
     getRandomItems(suggestions, maxToShow),
   );
@@ -48,12 +48,8 @@ function HeaderSearchPopUp({
 
   useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
 
-  const onChangeText = (event, { value }) => {
-    setText(value);
-    event.preventDefault();
-  };
-
   const onSubmit = (event) => {
+    const text = searchInputRef?.current?.inputRef?.current?.value;
     history.push(`${path}?q=${text}`);
 
     if (window?.searchContext?.resetSearch) {
@@ -79,12 +75,14 @@ function HeaderSearchPopUp({
           <form method="get" onSubmit={onSubmit}>
             <Input
               ref={searchInputRef}
-              className="search"
-              onChange={onChangeText}
-              icon={{
-                className: 'ri-search-line',
-                link: true,
+              className="icon search"
+              action={{
+                className: 'icon ri-search-line',
+                'aria-label': 'Submit search',
                 onClick: onSubmit,
+                onKeyDown: (event) => {
+                  handleEnterKeyPress(event, onSubmit);
+                },
               }}
               placeholder={placeholder}
               fluid

package/src/ui/Popup/Popup.stories.jsx

@@ -1,4 +1,4 @@
-import { React } from 'react';
+import React from 'react';
 import { Button, Segment, Image, Icon } from 'semantic-ui-react';
 
 import Popup from './Popup';

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/themes/eea/elements/input.overrides

@@ -81,6 +81,7 @@
 .accordion-title:not(.active) .ui.input input {
   color: @textColorCSSVar;
 }
+
 .ui.input input {
   border: @border;
 
@@ -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/elements/label.overrides

@@ -33,30 +33,34 @@
 
 /* Link */
 .ui.low.labels .label:hover,
-.ui.low.label:hover{
+.ui.low.label:hover {
   background-color: @lowImportanceHoverBackground;
   border-color: @lowImportanceHoverBackground;
 }
 
 .ui.medium.labels .label:hover,
-.ui.medium.label:hover{
+.ui.medium.label:hover {
   background-color: @mediumImportanceHoverBackground;
   border-color: @mediumImportanceHoverBackground;
 }
 
 .ui.high.labels .label:hover,
-.ui.high.label:hover{
+.ui.high.label:hover {
   background-color: @highImportanceHoverBackground;
   border-color: @highImportanceHoverBackground;
 }
 
 .ui.highlight.labels .label:hover,
-.ui.highlight.label:hover{
+.ui.highlight.label:hover {
   background-color: @highlightImportanceHoverBackground;
   border-color: @highlightImportanceHoverBackground;
 }
 
 /* Ribbon */
+.ui.ribbon.label {
+  z-index: @ribbonLabelZindex;
+}
+
 .ui.low.ribbon.label {
   border-color: @lowImportanceBackground;
 }
@@ -79,6 +83,7 @@
   color: @lowImportanceBasicTextColor;
   border-color: @lowImportanceBackground;
 }
+
 .ui.basic.low.labels a.label:hover,
 .ui.basic.low.label:hover {
   background-color: @white;
@@ -91,6 +96,7 @@
   color: @mediumImportanceBasicTextColor;
   border-color: @mediumImportanceBackground;
 }
+
 .ui.basic.medium.labels a.label:hover,
 .ui.basic.medium.label:hover {
   background-color: @white;
@@ -103,6 +109,7 @@
   color: @highImportanceBasicTextColor;
   border-color: @highImportanceBackground;
 }
+
 .ui.basic.high.labels a.label:hover,
 .ui.basic.high.label:hover {
   background-color: @white;
@@ -115,6 +122,7 @@
   color: @highlightImportanceBasicTextColor;
   border-color: @highlightImportanceBackground;
 }
+
 .ui.basic.highlight.labels a.label:hover,
 .ui.basic.highlight.label:hover {
   background-color: @white;

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

@@ -136,19 +136,21 @@
 @ribbonTriangleSize: 1.2em;
 @ribbonShadowColor: rgba(0, 0, 0, 0.15);
 
+@ribbonLabelZindex: 1;
+
 @ribbonMargin: 1rem;
 @ribbonOffset: calc(-@ribbonMargin - @ribbonTriangleSize);
 @ribbonDistance: calc(@ribbonMargin + @ribbonTriangleSize);
-@rightRibbonOffset:  calc(100% + @ribbonMargin + @ribbonTriangleSize);
+@rightRibbonOffset: calc(100% + @ribbonMargin + @ribbonTriangleSize);
 
 @ribbonImageTopDistance: 1rem;
 @ribbonImageMargin: 0.05rem; /* Rounding Offset on Triangle */
 @ribbonImageOffset: calc(-@ribbonImageMargin - @ribbonTriangleSize);
-@rightRibbonImageOffset:  calc(100% + @ribbonImageMargin + @ribbonTriangleSize);
+@rightRibbonImageOffset: calc(100% + @ribbonImageMargin + @ribbonTriangleSize);
 
 @ribbonTableMargin: @relativeMini; /* Rounding Offset on Triangle */
 @ribbonTableOffset: calc(-@ribbonTableMargin - @ribbonTriangleSize);
-@rightRibbonTableOffset:  calc(100% + @ribbonTableMargin + @ribbonTriangleSize);
+@rightRibbonTableOffset: calc(100% + @ribbonTableMargin + @ribbonTriangleSize);
 
 
 /* Colors */
@@ -159,10 +161,10 @@
 @highlightImportanceBackground: @secondaryColor;
 
 /* Hover Colors */
-@lowImportanceHoverBackground: darken(@deepBlue,5);
-@mediumImportanceHoverBackground: darken(#346F83,5);
-@highImportanceHoverBackground: darken(#005293,5);
-@highlightImportanceHoverBackground: darken(@secondaryColor,5);
+@lowImportanceHoverBackground: darken(@deepBlue, 5);
+@mediumImportanceHoverBackground: darken(#346F83, 5);
+@highImportanceHoverBackground: darken(#005293, 5);
+@highlightImportanceHoverBackground: darken(@secondaryColor, 5);
 
 @importanceHoverTextColor: @white;
 
@@ -271,11 +273,11 @@
 --------------------*/
 
 /* Sizing */
-@mini    : @9px;
-@tiny    : @10px;
-@small   : @11px;
-@medium  : @12px;
-@large   : @absoluteMedium;
-@big     : @absoluteBig;
-@huge    : @absoluteHuge;
-@massive : @absoluteMassive;
+@mini: @9px;
+@tiny: @10px;
+@small: @11px;
+@medium: @12px;
+@large: @absoluteMedium;
+@big: @absoluteBig;
+@huge: @absoluteHuge;
+@massive: @absoluteMassive;

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

@@ -16,6 +16,7 @@
   margin-right: -50vw;
   left: 50%;
   right: 50%;
+  z-index: @contentBoxBeforeZIndex;
 }
 
 .content-box {
@@ -28,7 +29,6 @@
     padding-top: @contentBoxContainerMarginTop;
     padding-bottom: @contentBoxContainerMarginBottom;
     position: relative;
-    z-index: @contentBoxContainerZIndex;
   }
 
   &.primary {