@eeacms/volto-eea-design-system 0.6.5 → 0.7.2

package/CHANGELOG.md

@@ -4,8 +4,72 @@ 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).
 
+#### [0.7.2](https://github.com/eea/volto-eea-design-system/compare/0.7.1...0.7.2)
+
+- Search input focus [`#215`](https://github.com/eea/volto-eea-design-system/pull/215)
+- Make cypress tests work with both slate and draft selectors [`4d8e5b1`](https://github.com/eea/volto-eea-design-system/commit/4d8e5b1d7719637a46eac8232891fc5ed1f51b6f)
+- Autobuild of docusaurus docs [`580af5b`](https://github.com/eea/volto-eea-design-system/commit/580af5b9d1791804239db8bd40f740d7fafc8a2a)
+- fix(contentBox): z-index of content hidden by bg when using content-box-inner [`c5a7dac`](https://github.com/eea/volto-eea-design-system/commit/c5a7dac923d648d8fe9c9a9cbb8001969d32aea2)
+- Autobuild of docusaurus docs [`2438b3e`](https://github.com/eea/volto-eea-design-system/commit/2438b3ef8035ffa2ad50c0d36bfac281fe7e5d68)
+- Set focus on search input field in the popup on click [`d12c051`](https://github.com/eea/volto-eea-design-system/commit/d12c05106d9b95df1885ffa12cb284a0e50e0dfd)
+
+#### [0.7.1](https://github.com/eea/volto-eea-design-system/compare/0.7.0...0.7.1)
+
+> 1 August 2022
+
+- Release [`#214`](https://github.com/eea/volto-eea-design-system/pull/214)
+- Replace useLayoutEffect with useEffect, less notifications [`#213`](https://github.com/eea/volto-eea-design-system/pull/213)
+- Autobuild of docusaurus docs [`d763e15`](https://github.com/eea/volto-eea-design-system/commit/d763e15196988c7224fd79be9cbab1034caa0920)
+
+#### [0.7.0](https://github.com/eea/volto-eea-design-system/compare/0.6.5...0.7.0)
+
+> 1 August 2022
+
+- Release [`#212`](https://github.com/eea/volto-eea-design-system/pull/212)
+- Autobuild of docusaurus docs [`dd56a87`](https://github.com/eea/volto-eea-design-system/commit/dd56a87ca49282b8660b2fc1edc73f31441cceb2)
+- change(mega menu): use non variable to fix build of volto-kitkat-frontend [`3ecd652`](https://github.com/eea/volto-eea-design-system/commit/3ecd652405ba616c9defc86fd793f8c066c0af1e)
+- Autobuild of docusaurus docs [`a67aeb8`](https://github.com/eea/volto-eea-design-system/commit/a67aeb89dd7590605af9fd1fc4d99812061e166b)
+- change(header): prefix mega-menu active class for adding border [`32898cb`](https://github.com/eea/volto-eea-design-system/commit/32898cb19c20ee7696c51b99cd9df25a333ae6e9)
+- bump release version to 0.7.0 [`fa82cbd`](https://github.com/eea/volto-eea-design-system/commit/fa82cbd7d50765c322bc5c7c58abb5675e0aadad)
+- Theme fixes, mega menu selected element both in desktop and mobile #211 [`b482729`](https://github.com/eea/volto-eea-design-system/commit/b4827292a9badb02f178b7431cc63e11070784ea)
+- change(tests): try to modify tests to use slate instead of draft [`a2e2485`](https://github.com/eea/volto-eea-design-system/commit/a2e248593433a7a8bf612008c12a3a20a0049d86)
+- change(tests): use data-slate-editor instead of contents that was found in draft js instead of slate [`1e0413c`](https://github.com/eea/volto-eea-design-system/commit/1e0413cf117c098b188e00249c323f2f718b9299)
+- fix(container): add padding also for block editors when we are on the add page not just edit [`b857aad`](https://github.com/eea/volto-eea-design-system/commit/b857aad7855c30c5059b0f0f7c0f720826a71aa7)
+- fix eslint warnings [`3b30282`](https://github.com/eea/volto-eea-design-system/commit/3b30282ea4df59f2d05644cae5c1d703b4dc48b3)
+- feature(megamenu): open default accordions on mobile navigation based on pathname [`cc299c1`](https://github.com/eea/volto-eea-design-system/commit/cc299c1047f96aa5f85cdc4bb8bb9b3b4fb9ca5e)
+- fix(megamenu): key warning errors [`4ecd279`](https://github.com/eea/volto-eea-design-system/commit/4ecd27921546204dfa4aa23d25188876e52cda7a)
+- change(megamenu): set active class on storybook list items [`112bff1`](https://github.com/eea/volto-eea-design-system/commit/112bff195cd07e789b352ae239a148a168b4d877)
+- change(megamenu): add border for active element of menu [`5e7dfa5`](https://github.com/eea/volto-eea-design-system/commit/5e7dfa539dc0d126dfb057ac2d293c94b31561bb)
+- change(megamenu): use renderMenuItem in order to render menu items [`9ed5cbd`](https://github.com/eea/volto-eea-design-system/commit/9ed5cbdf120ee2c92e5f14c09e5289a5abe3f8b0)
+- change(megamenu): WIP bringing back rendering of item with callback and path modification [`6e43d43`](https://github.com/eea/volto-eea-design-system/commit/6e43d4340ea82afde950e5fee44a76119060fc28)
+- Autobuild of docusaurus docs [`4772d30`](https://github.com/eea/volto-eea-design-system/commit/4772d30900d7689d8d3e64fab989f5d7e845074a)
+- change(footer): replaced eionet logo with an svg variant and tweaked size of eionet to match size of eea logo [`32ce462`](https://github.com/eea/volto-eea-design-system/commit/32ce4623ad454edec864ad6c8b45cbf99465bede)
+- Autobuild of docusaurus docs [`4b6cc9b`](https://github.com/eea/volto-eea-design-system/commit/4b6cc9b997f3ce4821843f7c36d163aa571e6e43)
+- fix(header): bump opacity of gradient class to get rid of green hue of header text [`2011b40`](https://github.com/eea/volto-eea-design-system/commit/2011b40d384ae5b54a0525e6d9afc88c02f6ca90)
+- Autobuild of docusaurus docs [`1453ad3`](https://github.com/eea/volto-eea-design-system/commit/1453ad3dec7ba4b020215cd34e3105e8442cb363)
+- feat(accordion,buttons):  primary, secondary and tertiary variations #209 [`c34617f`](https://github.com/eea/volto-eea-design-system/commit/c34617f7a7d7b6b7568c3127f4ae0f52bd57cf8a)
+- change(stories): hide variant control from button link story [`43f8c41`](https://github.com/eea/volto-eea-design-system/commit/43f8c412f6762edbed9c60e613736d5b60677cd1)
+- change(stories): hide variant control from button link story [`aea7126`](https://github.com/eea/volto-eea-design-system/commit/aea712668331f5681028d961b42a05655f1113d3)
+- Autobuild of docusaurus docs [`b517dc8`](https://github.com/eea/volto-eea-design-system/commit/b517dc88b193f9c99580a9950f0bfe51cca13843)
+- feature(mega-menu): added menu slide down animation #208 [`4360d0e`](https://github.com/eea/volto-eea-design-system/commit/4360d0ef570fbfcc9989170219f7826e5ed780cf)
+- change(accordion): style default accordion using the grey from semantic ui [`e24907d`](https://github.com/eea/volto-eea-design-system/commit/e24907df397457bd9704905aa29ea5d7e1d396cd)
+- Autobuild of docusaurus docs [`03e8086`](https://github.com/eea/volto-eea-design-system/commit/03e8086444f33224a21563ff01a51541232c8a0f)
+- change(package): condition modification of navDepth settings [`dd21dad`](https://github.com/eea/volto-eea-design-system/commit/dd21dadf34f87f08223be3b98c06e7a2f0714326)
+- Autobuild of docusaurus docs [`8efc75b`](https://github.com/eea/volto-eea-design-system/commit/8efc75b7446283129d3ee68dbab1f7dbd2e4c5ba)
+- feature(theme): added context navigation component story and default style [`5a6955f`](https://github.com/eea/volto-eea-design-system/commit/5a6955fe935cf6a07f6593164014ed4c9e77d88f)
+- refactor(callToAction): update tertiary state colors [`159668a`](https://github.com/eea/volto-eea-design-system/commit/159668ac526a98032392bcbd2c115dc448193152)
+- refactor(accordion): add variations and create a default export [`4a9c68f`](https://github.com/eea/volto-eea-design-system/commit/4a9c68ffe933c9d700e46db3e0cbbd9e3820c7c7)
+- refactor(accordion): add color variations [`3504c15`](https://github.com/eea/volto-eea-design-system/commit/3504c15cc861803dc263fb2ad3b6a478043ced33)
+- refactor(callToAction): add tertiary variant and restructure exports [`ac6695a`](https://github.com/eea/volto-eea-design-system/commit/ac6695ab3066c41739ec4852f0ec3c3bb6cea346)
+- refactor(colors): add tertiary shades for element states [`1e24a7e`](https://github.com/eea/volto-eea-design-system/commit/1e24a7e13b50f1ee7bd9bd44f3b2eb8e4460c691)
+- fix(header): remove console log [`3a20023`](https://github.com/eea/volto-eea-design-system/commit/3a200233609bbcea39d8e519dc292a132a98aaa3)
+- refactor(megaMenu): add slide down transition and update targetRefs on close [`9667157`](https://github.com/eea/volto-eea-design-system/commit/96671574f5f7dd992269c42e509598f62bba516d)
+
 #### [0.6.5](https://github.com/eea/volto-eea-design-system/compare/0.6.1...0.6.5)
 
+> 6 July 2022
+
+- change(design-systems): header section fixes [`#207`](https://github.com/eea/volto-eea-design-system/pull/207)
 - change(package): bump package version to 0.6.5 denoting bug fixes release [`0585aeb`](https://github.com/eea/volto-eea-design-system/commit/0585aebaeb9e3483ba230110d99a1a875590ad66)
 - Autobuild of docusaurus docs [`590c55f`](https://github.com/eea/volto-eea-design-system/commit/590c55f1099d926959c2cca929ca8fab32fe41b4)
 - fix(menu): removed minHeight that enlarged the global menu [`133be1e`](https://github.com/eea/volto-eea-design-system/commit/133be1e43d9b7778fd94388629400c5f2b707ff4)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.6.5",
+  "version": "0.7.2",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/helpers/useClickOutside.js

@@ -19,7 +19,7 @@ export default function useClickOutside({ targetRefs = [], callback }) {
     [callback, targetRefs],
   );
 
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside, false);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside, false);

package/src/index.js

@@ -1,5 +1,8 @@
 const applyConfig = (config) => {
-  config.settings.navDepth = 3;
+  config.settings = {
+    ...(config.settings || {}),
+    navDepth: 3,
+  };
   return config;
 };
 

package/src/semantic.less

@@ -229,6 +229,10 @@
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/header';
 }
 
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/contextNavigation';
+}
+
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/inpageNavigation';
 }

package/src/ui/CallToAction/CallToAction.stories.jsx

@@ -5,6 +5,17 @@ export default {
   title: 'Components/Call To Action',
   component: Button,
   argTypes: {
+    variant: {
+      name: 'Variation',
+      defaultValue: 'primary',
+      options: ['default', 'primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'call to action variation',
+      table: {
+        defaultValue: { summary: 'primary' },
+        type: { summary: 'string' },
+      },
+    },
     label: {
       description: 'link label',
       table: {
@@ -37,49 +48,11 @@ export default {
 
 //Default Call To Action
 export const Default = (args) => {
-  return (
-    <Container>
-      <Button as="a" disabled={args.disabled} href={args.href} target="_blank">
-        {args.label}
-      </Button>
-    </Container>
-  );
-};
-Default.args = {
-  label: 'Default Call To Action',
-  href: '/#',
-  disabled: false,
-};
-
-//Primary Call To Action
-export const Primary = (args) => {
-  return (
-    <Container>
-      <Button
-        primary
-        as="a"
-        disabled={args.disabled}
-        href={args.href}
-        target="_blank"
-      >
-        {args.label}
-      </Button>
-    </Container>
-  );
-};
-Primary.args = {
-  label: 'Primary Call To Action',
-  href: '/#',
-  disabled: false,
-};
-
-//Secondary Call To Action
-export const Secondary = (args) => {
   return (
     <Container>
       <Button
-        secondary
         as="a"
+        className={args.variant === 'default' ? '' : args.variant}
         disabled={args.disabled}
         href={args.href}
         target="_blank"
@@ -89,8 +62,9 @@ export const Secondary = (args) => {
     </Container>
   );
 };
-Secondary.args = {
-  label: 'Secondary Call To Action',
+Default.args = {
+  variant: 'primary',
+  label: 'Call To Action',
   href: '/#',
   disabled: false,
 };
@@ -99,64 +73,39 @@ Secondary.args = {
 export const Inverted = (args) => {
   return (
     <Container>
-      <Segment compact>
+      <Segment compact className={args.variant === 'default' ? 'inverted' : ''}>
         <Button
-          primary
           inverted
           as="a"
           disabled={args.disabled}
-          href={args.href1}
+          href={args.href}
           target="_blank"
+          className={args.variant === 'default' ? '' : args.variant}
         >
-          {args.button1}
-        </Button>
-      </Segment>
-      <Segment compact>
-        <Button
-          secondary
-          inverted
-          as="a"
-          disabled={args.disabled}
-          href={args.href2}
-          target="_blank"
-        >
-          {args.button2}
-        </Button>
-      </Segment>
-      <Segment inverted compact>
-        <Button
-          inverted
-          as="a"
-          disabled={args.disabled}
-          href={args.href3}
-          target="_blank"
-        >
-          {args.button3}
+          {args.label}
         </Button>
       </Segment>
     </Container>
   );
 };
 Inverted.args = {
-  button1: 'Primary Call To Action',
-  button2: 'Secondary Call To Action',
-  button3: 'Default Call To Action',
-  href1: '/#',
-  href2: '/#',
-  href3: '/#',
+  variant: 'primary',
+  label: 'Inverted Call To Action',
+  href: '/#',
   disabled: false,
 };
-Inverted.parameters = {
-  controls: { exclude: ['label', 'href'] },
-  hideNoControlsWarning: true,
-};
 
 //Labeled Call To Action
 export const Labeled = (args) => {
   return (
     <Container>
       <Button
-        className={args.variant + ' icon ' + args.icon_position + ' labeled'}
+        className={
+          (args.variant === 'default' ? '' : args.variant) +
+          ' icon ' +
+          args.icon_position +
+          ' labeled'
+        }
         as="a"
         disabled={args.disabled}
         href={args.href}
@@ -169,22 +118,14 @@ export const Labeled = (args) => {
   );
 };
 Labeled.args = {
+  variant: 'primary',
   label: 'Labeled Call To Action',
   icon: 'chevron right',
+  icon_position: 'right',
   href: '/#',
   disabled: false,
 };
 Labeled.argTypes = {
-  variant: {
-    options: ['primary', 'secondary', 'default'],
-    description: 'call to action class',
-    control: { type: 'radio' },
-    defaultValue: 'secondary',
-    table: {
-      defaultValue: { summary: 'secondary' },
-      type: { summary: 'string' },
-    },
-  },
   icon: {
     name: 'icon',
     defaultValue: 'chevron right',
@@ -213,10 +154,10 @@ Labeled.argTypes = {
   icon_position: {
     options: ['left', 'right'],
     control: { type: 'radio' },
-    defaultValue: 'left',
+    defaultValue: 'right',
     description: 'icon left or right position',
     table: {
-      defaultValue: { summary: 'left' },
+      defaultValue: { summary: 'right' },
       type: { summary: 'string' },
     },
   },
@@ -235,5 +176,6 @@ Link.args = {
   href: '/#',
 };
 Link.parameters = {
+  controls: { exclude: ['Variation', 'disabled'] },
   hideNoControlsWarning: true,
 };

package/src/ui/ContextNavigation/ContextNavigation.stories.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+const Template = (args) => (
+  <nav className="context-navigation">
+    <div className="context-navigation-header">Navigation</div>
+    <div role="list" className="ui list">
+      <div role="listitem" className="item level-1">
+        <div className="content">
+          <a title="" className="contenttype-folder" href="/api/folder1">
+            Folder1
+          </a>
+        </div>
+      </div>
+      <div role="listitem" className="item level-1">
+        <div className="content">
+          <a
+            title=""
+            className="contenttype-folder in_path"
+            href="/api/folder2/folder21"
+          >
+            Folder21
+          </a>
+          <div className="list">
+            <div role="listitem" className="item level-2">
+              <div className="content">
+                <a
+                  title=""
+                  className="contenttype-document"
+                  href="/api/folder2/folder21/doc211"
+                >
+                  Doc211
+                </a>
+              </div>
+            </div>
+            <div role="listitem" className="active item level-2">
+              <div className="content">
+                <a
+                  title=""
+                  className="contenttype-document"
+                  href="/api/folder2/folder21/doc211-copy"
+                >
+                  Doc212
+                  <div className="content active-indicator">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 36 36"
+                      className="icon"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M21.293 9.293L22.707 10.707 15.414 18 22.707 25.293 21.293 26.707 12.586 18z"
+                      ></path>
+                    </svg>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+);
+
+export default {
+  title: 'Components/Navigation portlet',
+  component: Template,
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  root: 'https://www.eea.europa.eu/',
+};

package/src/ui/Header/Header.jsx

@@ -54,6 +54,8 @@ const TopDropdownMenu = ({
       text={mobileText || text}
       icon={icon || 'chevron down'}
       aria-label="dropdown"
+      closeOnChange={false}
+      closeOnBlur={false}
     >
       <Dropdown.Menu role="group">{children}</Dropdown.Menu>
     </Dropdown>
@@ -99,6 +101,7 @@ const Main = ({
   const [menuIsActive, setMenuIsActive] = React.useState(false);
   const [searchIsActive, setSearchIsActive] = React.useState(false);
   const [burger, setBurger] = React.useState('');
+  const searchInputRef = React.useRef(null);
 
   React.useEffect(() => {
     setMenuIsActive(false);
@@ -110,6 +113,12 @@ const Main = ({
     }
   }, [pathname]);
 
+  React.useEffect(() => {
+    if (searchIsActive) {
+      searchInputRef.current && searchInputRef.current.focus();
+    }
+  }, [searchIsActive]);
+
   const searchOnClick = (e, x) => {
     if (menuIsActive === true) {
       setBurger('');
@@ -164,6 +173,7 @@ const Main = ({
   const node = React.useRef();
   const searchButtonRef = React.useRef();
   const mobileMenuBurgerRef = React.useRef();
+  const desktopMenuRef = React.useRef();
 
   // disable sticky setting until feature is more stable
   // const isScrollingUp = useScrollingUp();
@@ -185,7 +195,10 @@ const Main = ({
           <Grid.Column mobile={4} tablet={4} computer={8}>
             <div className={inverted ? 'main-menu inverted' : 'main-menu'}>
               {menuItems && (
-                <Menu className="eea-main-menu tablet or lower hidden" text>
+                <div
+                  className="ui text eea-main-menu tablet or lower hidden menu"
+                  ref={desktopMenuRef}
+                >
                   {menuItems.map((item) => (
                     <Menu.Item
                       name={item['@id'] || item.url}
@@ -200,7 +213,7 @@ const Main = ({
                       })}
                     </Menu.Item>
                   ))}
-                </Menu>
+                </div>
               )}
               <div
                 className="search-action"
@@ -231,18 +244,19 @@ const Main = ({
       {searchIsActive && (
         <HeaderSearchPopUp
           onClose={searchOnClick}
+          searchInputRef={searchInputRef}
           triggerRefs={[searchButtonRef]}
         />
       )}
-      {menuIsActive && (
-        <HeaderMenuPopUp
-          renderMenuItem={renderMenuItem}
-          activeItem={activeItem}
-          menuItems={menuItems}
-          onClose={menuOnClickOutside}
-          triggerRefs={[mobileMenuBurgerRef]}
-        />
-      )}
+      <HeaderMenuPopUp
+        renderMenuItem={renderMenuItem}
+        activeItem={activeItem}
+        menuItems={menuItems}
+        pathName={pathname}
+        onClose={menuOnClickOutside}
+        triggerRefs={[mobileMenuBurgerRef, desktopMenuRef]}
+        visible={menuIsActive}
+      />
     </div>
   );
 };