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

package/src/ui/Progress/Progress.stories.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Default, ProgressWithValue, CustomColor } from './Progress.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('CustomColor component', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(<CustomColor {...CustomColor.args} />);
+    expect(getByText(`${CustomColor.args.value}%`)).toBeInTheDocument();
+    expect(getByText(`${CustomColor.args.children}`)).toBeInTheDocument();
+  });
+});
+
+describe('ProgressWithValue component', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(
+      <ProgressWithValue {...ProgressWithValue.args} />,
+    );
+    expect(getByText(`${ProgressWithValue.args.value}%`)).toBeInTheDocument();
+    expect(getByText(`${ProgressWithValue.args.children}`)).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+    expect(getByText(`${Default.args.percent}%`)).toBeInTheDocument();
+    expect(getByText(`${Default.args.children}`)).toBeInTheDocument();
+  });
+});

package/src/ui/Quote/Testimonial/Testimonial.stories.test.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Inline } from './Testimonial.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Inline component', () => {
+  it('renders corectly', () => {
+    const { container, getByText } = render(<Inline {...Inline.args} />);
+
+    expect(
+      container.querySelector(`div[quote="${Inline.args.quote}"]`),
+    ).toBeInTheDocument();
+    expect(getByText(Inline.args.avatartitle)).toBeInTheDocument();
+    expect(getByText(Inline.args.avatarinfo)).toBeInTheDocument();
+    expect(getByText(Inline.args.title)).toBeInTheDocument();
+    expect(getByText(Inline.args.quote)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  Default,
+  Group,
+  Custom,
+  Animation,
+  AnimationGroup,
+} from './Statistic.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('AnimationGroup component', () => {
+  it('renders a button with label', () => {
+    const { getByText } = render(<AnimationGroup {...AnimationGroup.args} />);
+
+    expect(
+      getByText(AnimationGroup.args.elements[0].label),
+    ).toBeInTheDocument();
+    expect(
+      getByText(AnimationGroup.args.elements[1].label),
+    ).toBeInTheDocument();
+    expect(
+      getByText(AnimationGroup.args.elements[2].label),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Animation component', () => {
+  it('renders a button with label', () => {
+    const { getByText } = render(<Animation {...Animation.args} />);
+
+    expect(getByText('Count up label')).toBeInTheDocument();
+    expect(getByText('Start')).toBeInTheDocument();
+    expect(getByText('Reset')).toBeInTheDocument();
+    expect(getByText('Pause/Resume')).toBeInTheDocument();
+  });
+});
+
+describe('Custom component', () => {
+  it('renders a button with label', () => {
+    const { getByText, getAllByText } = render(<Custom {...Custom.args} />);
+
+    Custom.args.elements.forEach((element) => {
+      expect(getByText(element.value)).toBeInTheDocument();
+      expect(getByText(element.label)).toBeInTheDocument();
+    });
+    expect(getAllByText('Text from slate')).toHaveLength(3);
+  });
+});
+
+describe('Group component', () => {
+  it('renders a button with label', () => {
+    const { getByText } = render(<Group {...Group.args} />);
+
+    Group.args.elements.forEach((element) => {
+      expect(getByText(element.value)).toBeInTheDocument();
+      expect(getByText(element.label)).toBeInTheDocument();
+    });
+  });
+});
+
+describe('Default component', () => {
+  it('renders a button with label', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+
+    expect(getByText(Default.args.label)).toBeInTheDocument();
+    expect(getByText(Default.args.value)).toBeInTheDocument();
+  });
+});

package/src/ui/Table/Table.stories.js

@@ -270,9 +270,17 @@ function SortableTableContent({
               key={item.key}
               textAlign="center"
               sorted={column === item.key ? direction : null}
+              tabIndex={0}
               onClick={() =>
                 dispatch({ type: 'CHANGE_SORT', column: item.key })
               }
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  event.target.click();
+                }
+              }}
+              aria-label={direction ? direction + ` sorted ` : ''}
             >
               {item.name}
             </Table.HeaderCell>

package/src/ui/Table/Table.stories.test.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Default, Sortable, Responsive } from './Table.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Responsive component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<Responsive {...Responsive.args} />);
+
+    Responsive.args.headers.forEach((element) => {
+      expect(getByText(element.name)).toBeInTheDocument();
+    });
+
+    Responsive.args.tableData.forEach((element) => {
+      expect(getByText(element.col1)).toBeInTheDocument();
+      expect(getByText(element.col2)).toBeInTheDocument();
+      expect(getByText(element.col3)).toBeInTheDocument();
+    });
+  });
+});
+
+describe('Sortable component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<Sortable {...Sortable.args} />);
+
+    Sortable.args.headers.forEach((element) => {
+      expect(getByText(element.name)).toBeInTheDocument();
+    });
+
+    Sortable.args.tableData.forEach((element) => {
+      expect(getByText(element.col1)).toBeInTheDocument();
+      expect(getByText(element.col2)).toBeInTheDocument();
+      expect(getByText(element.col3)).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByText(Sortable.args.headers[0].name));
+  });
+});
+
+describe('Default component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+
+    Default.args.headers.forEach((element) => {
+      expect(getByText(element.name)).toBeInTheDocument();
+    });
+
+    Default.args.tableData.forEach((element) => {
+      expect(getByText(element.col1)).toBeInTheDocument();
+      expect(getByText(element.col2)).toBeInTheDocument();
+      expect(getByText(element.col3)).toBeInTheDocument();
+    });
+  });
+});

package/src/ui/Timeline/Timeline.stories.test.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  Default,
+  DefaultReversed,
+  Multiple,
+  MultipleReversed,
+} from './Timeline.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('MultipleReversed component', () => {
+  it('renders corectly', () => {
+    const { getAllByText } = render(
+      <MultipleReversed {...MultipleReversed.args} />,
+    );
+
+    expect(getAllByText(MultipleReversed.args.items[0].time)).toHaveLength(3);
+  });
+});
+
+describe('Multiple component', () => {
+  it('renders corectly', () => {
+    const { getAllByText } = render(<Multiple {...Multiple.args} />);
+
+    expect(getAllByText(Multiple.args.items[0].time)).toHaveLength(3);
+  });
+});
+
+describe('DefaultReversed component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<DefaultReversed {...DefaultReversed.args} />);
+
+    expect(getByText(DefaultReversed.args.time)).toBeInTheDocument();
+  });
+});
+
+describe('Default component', () => {
+  it('renders corectly', () => {
+    const { getByText } = render(<Default {...Default.args} />);
+
+    expect(getByText(Default.args.time)).toBeInTheDocument();
+  });
+});

package/src/ui/index.js

@@ -1,41 +1,21 @@
-export Banner from './Banner/Banner';
-
-export Callout from './Callout/Callout';
-
-export Breadcrumbs from './Breadcrumbs/Breadcrumbs';
-
-export Tag from './Tag/Tag';
-
-export TagList from './TagList/TagList';
-
-export Footer from './Footer/Footer';
-
-export Header from './Header/Header';
-
-export InpageNavigation from './InpageNavigation/InpageNavigation';
-
-export Logo from './Logo/Logo';
-
-export Quote from './Quote/Quote';
-
-export Timeline from './Timeline/Timeline';
-
-export Testimonial from './Quote/Testimonial/Testimonial';
-
-export KeyContent from './KeyContent/KeyContent';
-
-export DownloadLabeledIcon from './DownloadLabeledIcon/DownloadLabeledIcon';
-
-export NewTabLabeledIcon from './NewTabLabeledIcon/NewTabLabeledIcon';
-
-export LabeledIconGroup from './LabeledIconGroup/LabeledIconGroup';
-
-export LanguageLabeledIcon from './LanguageLabeledIcon/LanguageLabeledIcon';
-
-export RelatedContent from './Card/RelatedContent/RelatedContent';
-
-export Hero from './Hero/Hero';
-
-export Copyright from './Copyright/Copyright';
-
-export Video from './Video/Video';
+export { default as Banner } from './Banner/Banner';
+export { default as Callout } from './Callout/Callout';
+export { default as Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
+export { default as Tag } from './Tag/Tag';
+export { default as TagList } from './TagList/TagList';
+export { default as Footer } from './Footer/Footer';
+export { default as Header } from './Header/Header';
+export { default as InpageNavigation } from './InpageNavigation/InpageNavigation';
+export { default as Logo } from './Logo/Logo';
+export { default as Quote } from './Quote/Quote';
+export { default as Timeline } from './Timeline/Timeline';
+export { default as Testimonial } from './Quote/Testimonial/Testimonial';
+export { default as KeyContent } from './KeyContent/KeyContent';
+export { default as DownloadLabeledIcon } from './DownloadLabeledIcon/DownloadLabeledIcon';
+export { default as NewTabLabeledIcon } from './NewTabLabeledIcon/NewTabLabeledIcon';
+export { default as LabeledIconGroup } from './LabeledIconGroup/LabeledIconGroup';
+export { default as LanguageLabeledIcon } from './LanguageLabeledIcon/LanguageLabeledIcon';
+export { default as RelatedContent } from './Card/RelatedContent/RelatedContent';
+export { default as Hero } from './Hero/Hero';
+export { default as Copyright } from './Copyright/Copyright';
+export { default as Video } from './Video/Video';

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

@@ -59,9 +59,9 @@
         align-items: @mobileActionsAlignItems;
         justify-content: flex-end;
 
-        > .action {
+        .action {
           .ui.basic.inverted.button {
-            /* used basic inverted button for minimun overrides on box-shadow and active state background */
+            /* used basic inverted button for minimum overrides on box-shadow and active state background */
             box-shadow: @bannerActionButtonBoxShadow !important;
 
             &:active {
@@ -166,7 +166,7 @@
           flex-direction: @tabletActionsFlexDirection;
           align-items: @tabletActionsAlignItems;
 
-          > .action {
+          .action {
             min-width: @tabletActionsActionMinWidth;
 
             .ui.basic.inverted.button i.icon {

package/src/i18n.js

@@ -1,180 +0,0 @@
-/* eslint no-console: 0 */
-/**
- * i18n script.
- * @module scripts/i18n
- */
-
-const { find, keys, map, concat, reduce } = require('lodash');
-const glob = require('glob').sync;
-const fs = require('fs');
-const Pofile = require('pofile');
-const babel = require('@babel/core');
-
-/**
- * Extract messages into separate JSON files
- * @function extractMessages
- * @return {undefined}
- */
-function extractMessages() {
-  map(glob('src/**/*.js?(x)'), (filename) => {
-    babel.transformFileSync(filename, {}, (err) => {
-      if (err) {
-        console.log(err);
-      }
-    });
-  });
-}
-
-/**
- * Get messages from separate JSON files
- * @function getMessages
- * @return {Object} Object with messages
- */
-function getMessages() {
-  return reduce(
-    concat(
-      {},
-      ...map(
-        // We ignore the existing customized shadowed components ones, since most
-        // probably we won't be overriding them
-        // If so, we should do it in the config object or somewhere else
-        glob('build/messages/src/**/*.json', {
-          ignore: 'build/messages/src/customizations/**',
-        }),
-        (filename) =>
-          map(JSON.parse(fs.readFileSync(filename, 'utf8')), (message) => ({
-            ...message,
-            filename: filename.match(/build\/messages\/src\/(.*).json$/)[1],
-          })),
-      ),
-    ),
-    (current, value) => {
-      let result = current;
-      if (current.id) {
-        result = {
-          [current.id]: {
-            defaultMessage: current.defaultMessage,
-            filenames: [current.filename],
-          },
-        };
-      }
-
-      if (result[value.id]) {
-        result[value.id].filenames.push(value.filename);
-      } else {
-        result[value.id] = {
-          defaultMessage: value.defaultMessage,
-          filenames: [value.filename],
-        };
-      }
-      return result;
-    },
-  );
-}
-
-/**
- * Convert messages to pot format
- * @function messagesToPot
- * @param {Object} messages Messages
- * @return {string} Formatted pot string
- */
-function messagesToPot(messages) {
-  return map(keys(messages).sort(), (key) =>
-    [
-      ...map(messages[key].filenames, (filename) => `#: ${filename}`),
-      `# defaultMessage: ${messages[key].defaultMessage}`,
-      `msgid "${key}"`,
-      'msgstr ""',
-    ].join('\n'),
-  ).join('\n\n');
-}
-
-/**
- * Pot header
- * @function potHeader
- * @return {string} Formatted pot header
- */
-function potHeader() {
-  return `msgid ""
-msgstr ""
-"Project-Id-Version: Plone\\n"
-"POT-Creation-Date: ${new Date().toISOString()}\\n"
-"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\\n"
-"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\\n"
-"MIME-Version: 1.0\\n"
-"Content-Type: text/plain; charset=utf-8\\n"
-"Content-Transfer-Encoding: 8bit\\n"
-"Plural-Forms: nplurals=1; plural=0;\\n"
-"Language-Code: en\\n"
-"Language-Name: English\\n"
-"Preferred-Encodings: utf-8\\n"
-"Domain: volto\\n"
-
-`;
-}
-
-/**
- * Format header
- * @function formatHeader
- * @param {Array} comments Array of comments
- * @param {Object} headers Object of header items
- * @return {string} Formatted header
- */
-function formatHeader(comments, headers) {
-  return [
-    ...map(comments, (comment) => `# ${comment}`),
-    'msgid ""',
-    'msgstr ""',
-    ...map(keys(headers), (key) => `"${key}: ${headers[key]}\\n"`),
-    '',
-  ].join('\n');
-}
-
-/**
- * Sync po by the pot file
- * @function syncPoByPot
- * @return {undefined}
- */
-function syncPoByPot() {
-  const pot = Pofile.parse(fs.readFileSync('locales/volto.pot', 'utf8'));
-
-  map(glob('locales/**/*.po'), (filename) => {
-    const po = Pofile.parse(fs.readFileSync(filename, 'utf8'));
-
-    fs.writeFileSync(
-      filename,
-      `${formatHeader(po.comments, po.headers)}
-${map(pot.items, (item) => {
-  const poItem = find(po.items, { msgid: item.msgid });
-  return [
-    `${map(item.references, (ref) => `#: ${ref}`).join('\n')}`,
-    `msgid "${item.msgid}"`,
-    `msgstr "${poItem ? poItem.msgstr : ''}"`,
-  ].join('\n');
-}).join('\n\n')}\n`,
-    );
-  });
-}
-
-// Main tasks
-console.log('Extracting messages from source files...');
-extractMessages();
-console.log('Synchronizing messages to pot file...');
-// We only write the pot file if it's really different
-const newPot = `${potHeader()}${messagesToPot(getMessages())}\n`.replace(
-  /"POT-Creation-Date:(.*)\\n"/,
-  '',
-);
-const oldPot = fs
-  .readFileSync('locales/volto.pot', 'utf8')
-  .replace(/"POT-Creation-Date:(.*)\\n"/, '');
-
-if (newPot !== oldPot) {
-  fs.writeFileSync(
-    'locales/volto.pot',
-    `${potHeader()}${messagesToPot(getMessages())}\n`,
-  );
-}
-console.log('Synchronizing messages to po files...');
-syncPoByPot();
-console.log('done!');