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

package/CHANGELOG.md

@@ -4,6 +4,32 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.15.0](https://github.com/eea/volto-eea-design-system/compare/1.14.0...1.15.0) - 26 July 2023
+
+#### :rocket: New Features
+
+- feat(carousel): added story example on how to customize the dots to contain accessibility labels [David Ichim - [`fe5eb46`](https://github.com/eea/volto-eea-design-system/commit/fe5eb46dc94abfeaaa2c79022e507b452b4bb36a)]
+
+#### :bug: Bug Fixes
+
+- fix(storybook): controls that broke after the Hero stories [David Ichim - [`f8e995d`](https://github.com/eea/volto-eea-design-system/commit/f8e995d30e971163677a198846b1314222dbe408)]
+- fix: hover and focused border for block child - refs #255840 [Claudia Ifrim - [`fdd7783`](https://github.com/eea/volto-eea-design-system/commit/fdd7783b0658711674d251cce498900d9add52af)]
+- fix(storybook): popup story react import [David Ichim - [`18888f9`](https://github.com/eea/volto-eea-design-system/commit/18888f95888f1e3c89d9d1814462e1f27e85ea87)]
+- fix(accessibility): of carousel arrows, dots and role of carousel as a carousel region [David Ichim - [`00257fc`](https://github.com/eea/volto-eea-design-system/commit/00257fcfd0cd3b9959f2f3c68f0b2725c2d96f09)]
+
+#### :nail_care: Enhancements
+
+- change(carousel): set aria current to current dot button to indicate which slide we are on [David Ichim - [`e711ec8`](https://github.com/eea/volto-eea-design-system/commit/e711ec806be8b45b122a56b84717a0c45057cbbe)]
+- refactor: Use EEA countup instead of react-countup - refs #254634 [dobri1408 - [`146d8c2`](https://github.com/eea/volto-eea-design-system/commit/146d8c2d9d7d55530b39261bfabf7cebd9c8ac0b)]
+- change(search): added search icon as button for proper accessibility support [ACCESSIBILITY 2.1.1.1]  #360 from eea/refactor-search-input-icon [ichim-david - [`8f932ff`](https://github.com/eea/volto-eea-design-system/commit/8f932ffba42a96f7d6665c593ff3ad22c3b362fc)]
+- change(search): style icon class instead of i.icon [David Ichim - [`f96a590`](https://github.com/eea/volto-eea-design-system/commit/f96a590beb15ca6b577a169773b740b171b5e3c0)]
+- change(header): use a real button for search submit [David Ichim - [`37e491b`](https://github.com/eea/volto-eea-design-system/commit/37e491ba4af37f16a40bf6377d220d984be17656)]
+- change(header): move handling of key press that checks for enter key to a generic function [David Ichim - [`8df5c8a`](https://github.com/eea/volto-eea-design-system/commit/8df5c8a03f0fb0ad462605df283e622f5b6daf3f)]
+- refactor(SearchBox): add key down handler for search icon [Antonis Tarantilis - [`4f46ba5`](https://github.com/eea/volto-eea-design-system/commit/4f46ba5d3c2457a24e705bf7f34e1cfde2e2f79d)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.15.0 [Alin Voinea - [`30152fc`](https://github.com/eea/volto-eea-design-system/commit/30152fcdfffa4ec2262ebf78c1c8a885e222e73c)]
 ### [1.14.0](https://github.com/eea/volto-eea-design-system/compare/1.13.2...1.14.0) - 24 July 2023
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -20,9 +20,9 @@
     "@eeacms/volto-corsproxy"
   ],
   "dependencies": {
+    "@eeacms/countup": "*",
     "@eeacms/volto-corsproxy": "*",
     "@fontsource/roboto": "4.5.8",
-    "react-countup": "^6.3.0",
     "react-lazy-load-image-component": "1.5.6",
     "react-slick": "^0.28.1",
     "remixicon": "2.5.0",

package/src/helpers/eventHandlers.js

@@ -0,0 +1,6 @@
+export default function handleEnterKeyPress(event, callback) {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    callback(event);
+  }
+}

package/src/helpers/index.js

@@ -1,3 +1,4 @@
 export useClickOutside from './useClickOutside';
 export usePrevious from './usePrevious';
 export useFirstVisited from './useFirstVisited';
+export handleEnterKeyPress from './eventHandlers';

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

@@ -394,50 +394,70 @@ FluidGrid.args = {
   fluid: true,
   cards: [...cardModels],
 };
+const PrevArrow = (props) => {
+  const { onClick } = props;
 
-const Arrows = (props) => {
-  const { slider = {} } = props;
+  return (
+    <Button
+      aria-label="Previous slide"
+      className="slider-arrow prev-arrow tablet or lower hidden"
+      icon
+      onClick={onClick}
+    >
+      <Icon className="ri-arrow-left-s-line" />
+    </Button>
+  );
+};
+
+const NextArrow = (props) => {
+  const { onClick } = props;
 
   return (
-    <>
-      <Button
-        aria-label="Previous slide"
-        className="slider-arrow prev-arrow tablet or lower hidden"
-        icon
-        onClick={() => {
-          if (slider.current) {
-            slider.current.slickPrev();
-          }
-        }}
-      >
-        <Icon className="ri-arrow-left-s-line" />
-      </Button>
-      <Button
-        aria-label="Next slide"
-        className="slider-arrow next-arrow tablet or lower hidden"
-        icon
-        onClick={() => {
-          if (slider.current) {
-            slider.current.slickNext();
-          }
-        }}
-      >
-        <Icon className="ri-arrow-right-s-line" />
-      </Button>
-    </>
+    <Button
+      aria-label="Next slide"
+      className="slider-arrow next-arrow tablet or lower hidden"
+      icon
+      onClick={onClick}
+    >
+      <Icon className="ri-arrow-right-s-line" />
+    </Button>
   );
 };
 
 function CarouselCardsContent(args) {
   const slider = React.useRef(null);
+  const dots_parent = React.useRef(null);
+  const settings = {
+    ...args.settings,
+    customPaging: (i) => (
+      <button className={'slider-dots-button'} aria-current={i === 0}>
+        <span className="slick-dot-icon" aria-hidden="true" />
+        <span className="slick-sr-only">Go to slide {i + 1}</span>
+      </button>
+    ),
+    appendDots: (dots) => (
+      <ul ref={dots_parent} className={'slick-dots'}>
+        {dots}
+      </ul>
+    ),
+    afterChange: (currentSlide) => {
+      const dots = dots_parent.current;
+      if (dots) {
+        dots
+          .querySelectorAll('.slider-dots-button')
+          .forEach(function (el, idx) {
+            el.setAttribute('aria-current', idx === currentSlide);
+          });
+      }
+    },
+  };
   return (
-    <div className="cards-carousel">
-      <Slider {...args.settings} ref={slider}>
+    <div className="cards-carousel" role={'region'} aria-label={'carousel'}>
+      <Slider {...settings} ref={slider}>
         {args.cards.slice(0, args.numberOfCards).map((card, index) => (
           <CardTemplate {...args} card={card} key={index} />
         ))}
       </Slider>
-      <Arrows slider={slider} />
     </div>
   );
 }
@@ -464,7 +484,9 @@ CarouselCards.args = {
     infinite: true,
     slidesToShow: 4,
     slidesToScroll: 1,
-    arrows: false,
+    arrows: true,
+    nextArrow: <NextArrow />,
+    prevArrow: <PrevArrow />,
     responsive: [
       {
         breakpoint: tabletBreakpoint,

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/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/views/card.overrides

@@ -377,6 +377,9 @@
 }
 
 .cards-carousel .slick-dots li button:before {
+  content: none;
+}
+.cards-carousel .slick-dots li .slick-dot-icon:before {
   background-color: @carouselDotsBackgroundColor;
   color: transparent;
   border: @carouselDotsBorder;
@@ -384,9 +387,16 @@
   opacity: @carouselDotsOpacity;
   width: @mobileCarouselDotsWidth;
   height: @mobileCarouselDotsHeight;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: '•';
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.cards-carousel .slick-dots li.slick-active button:before {
+.cards-carousel .slick-dots li.slick-active .slick-dot-icon:before {
   background-color: @carouselDotsActiveBackgroundColor;
   color: transparent;
 }