@eeacms/volto-eea-design-system 0.9.5 → 1.0.0-alpha.2

package/src/ui/Comment/Comment.stories.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Comment, Header } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Comment',
+  component: CommentEEA,
+  argTypes: {
+    title: {
+      description: 'comment section header',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    comments: {
+      description: 'comments data',
+      table: {
+        type: { summary: 'Object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    threaded: {
+      description: 'showing the relationship between comments',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    minimal: {
+      description: 'hide extra information',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+};
+
+function CommentEEA({ title, comments, threaded, minimal, size }) {
+  return (
+    <Comment.Group threaded={threaded} minimal={minimal} size={size}>
+      <Header dividing>{title}</Header>
+
+      {comments.map((comment, comIndex) => (
+        <Comment key={comIndex}>
+          <Comment.Avatar src={comment.src} alt="user avatar" />
+          <Comment.Content>
+            <Comment.Author as="a">{comment.author}</Comment.Author>
+            <Comment.Metadata>
+              <div>{comment.time}</div>
+            </Comment.Metadata>
+            <Comment.Text>{comment.text}</Comment.Text>
+            <Comment.Actions>
+              <Comment.Action>Reply</Comment.Action>
+            </Comment.Actions>
+          </Comment.Content>
+          <Comment.Group>
+            {comment.replies.map((reply, repIndex) => (
+              <Comment key={repIndex}>
+                <Comment.Avatar src={comment.src} alt="user avatar" />
+                <Comment.Content>
+                  <Comment.Author as="a">{reply.author}</Comment.Author>
+                  <Comment.Metadata>
+                    <div>{reply.time}</div>
+                  </Comment.Metadata>
+                  <Comment.Text>{reply.text}</Comment.Text>
+                  <Comment.Actions>
+                    <Comment.Action>Reply</Comment.Action>
+                  </Comment.Actions>
+                </Comment.Content>
+              </Comment>
+            ))}
+          </Comment.Group>
+        </Comment>
+      ))}
+    </Comment.Group>
+  );
+}
+
+const Template = (args) => <CommentEEA {...args}></CommentEEA>;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Comments Header',
+  threaded: false,
+  minimal: false,
+  comments: [
+    {
+      src: 'https://react.semantic-ui.com/images/avatar/large/matthew.png',
+      author: 'User 1',
+      time: 'Message timestamp',
+      text: 'Message Content',
+      replies: [
+        {
+          src: 'https://react.semantic-ui.com/images/avatar/large/matthew.png',
+          author: 'User 4',
+          time: 'Message timestamp',
+          text: 'Message Content',
+        },
+      ],
+    },
+    {
+      src: 'https://react.semantic-ui.com/images/avatar/large/matthew.png',
+      author: 'User 2',
+      time: 'Message timestamp',
+      text: 'Message Content',
+      replies: [],
+    },
+    {
+      src: 'https://react.semantic-ui.com/images/avatar/large/matthew.png',
+      author: 'User 3',
+      time: 'Message timestamp',
+      text: 'Message Content',
+      replies: [],
+    },
+  ],
+};

package/src/ui/Confirm/Confirm.stories.js

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { Button, Confirm } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Confirm',
+  component: Confirm,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['mini', 'tiny', 'small', 'large'],
+      description: 'confirmation modal size',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'small' },
+      },
+    },
+    confirmHeader: {
+      description: 'modal header',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    content: {
+      description: 'modal message',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    cancelButton: {
+      description: 'cancel button text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    confirmButton: {
+      description: 'confirmation button text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+function ConfirmContent({
+  confirmHeader,
+  cancelButton,
+  confirmButton,
+  content,
+  size,
+}) {
+  const [open, setOpen] = useState(false);
+
+  const openConfirm = () => {
+    setOpen(true);
+  };
+
+  const closeConfirm = () => {
+    setOpen(false);
+  };
+  return (
+    <div>
+      <Button primary onClick={openConfirm}>
+        Show Confirmation
+      </Button>
+      <Confirm
+        open={open}
+        header={confirmHeader}
+        onCancel={closeConfirm}
+        onConfirm={closeConfirm}
+        cancelButton={cancelButton}
+        confirmButton={confirmButton}
+        content={content}
+        size={size}
+      />
+    </div>
+  );
+}
+
+const Template = (args) => <ConfirmContent {...args}></ConfirmContent>;
+
+export const Default = Template.bind({});
+Default.args = {
+  size: 'small',
+  confirmHeader: 'This is the confirm header',
+  content: 'Are you sure?',
+  cancelButton: 'Cancel',
+  confirmButton: 'OK',
+};

package/src/ui/Container/Container.stories.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Layout/Container',
+  component: Container,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    textAlign: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'right', 'center', 'justified'],
+      description: 'align container text',
+      table: {
+        type: {
+          summary: 'text',
+        },
+        defaultValue: {
+          summary: 'left',
+        },
+      },
+    },
+    content: {
+      description: 'container content',
+      table: {
+        type: {
+          summary: 'object',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+  },
+};
+
+const content = (
+  <p>
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+    ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+    magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+    ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+    quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+    arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
+    dictum felis eu pede link mollis pretium. Integer tincidunt. Cras dapibus.
+    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo
+    ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
+    ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla
+    ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies
+    nisi vel augue. Curabitur ullamcorper ultricies nisi.
+  </p>
+);
+
+const Template = (args) => <Container {...args}></Container>;
+
+export const Default = Template.bind({});
+Default.args = {
+  content: content,
+};

package/src/ui/ContentBox/ContentBox.stories.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import ContentBox from './ContentBox';
+import { Container } from 'semantic-ui-react';
+// eslint-disable-next-line import/no-unresolved
+
+export default {
+  title: 'Components/ContentBox',
+  component: ContentBox,
+  argTypes: {
+    title: { description: 'Title' },
+  },
+};
+
+const DefaultTemplate = (args) => (
+  <Container>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+      ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+      magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+      ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+      quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+      arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+      Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
+      dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
+      Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+      Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
+      viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
+      Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
+    </p>
+    <ContentBox {...args}>
+      <h3>{args.title}</h3>
+      <p>{args.content}</p>
+    </ContentBox>
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+      ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+      magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+      ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+      quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+      arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+      Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
+      dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
+      Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+      Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
+      viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
+      Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
+    </p>
+  </Container>
+);
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  title: 'Lorem ipsum dolor sit amet',
+  content:
+    'Nullam orci magna congue facilisis fermentum tellus tincidunt. Elit, aliquet sit volutpat eu, nisi. Sed pretium mi et, ut. In consequat sit turpis tortor, pulvinar facilisis hendrerit risus vestibulum. Et at venenatis quis etiam purus. Quam mattis hendrerit enim nunc ullamcorper vestibulum, dictum purus aliquam. Felis ipsum habitasse non risus sapien facilisis augue auctor. Montes, vel aenean ultrices in in. Dolor a, id sapien, porttitor in quisque rutrum donec laoreet. Vestibulum sagittis, convallis posuere gravida odio. Ac et mattis scelerisque scelerisque neque scelerisque pellentesque nullam in. At nullam nec risus elementum.',
+  container: true,
+  variant: 'tertiary',
+};
+
+Default.argTypes = {
+  variant: {
+    options: ['default', 'primary', 'secondary', 'tertiary'],
+    description: 'Theme',
+    control: { type: 'select' },
+  },
+};

package/src/ui/Footer/Footer.stories.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import Footer from './Footer';
+import Bise from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/bise.svg';
+import Energy from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/energy.svg';
+import Insitu from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/insitu.svg';
+import ClimateHealth from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/climate-health.svg';
+import Freshwater from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/freshwater.svg';
+import Fise from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/fise.svg';
+import Cca from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/cca.svg';
+import Copernicus from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/copernicus.svg';
+import Industry from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/industry.svg';
+import Marine from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/marine.svg';
+import Eionet from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eionet.svg';
+import EEA from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/eea-white.svg';
+
+export default {
+  title: 'Layout/Footer',
+  component: Footer,
+  argTypes: {},
+};
+
+const Template = (args) => (
+  <Footer>
+    <Footer.SubFooter {...args} />
+    <Footer.Header>{args.header}</Footer.Header>
+    <Footer.Sites sites={args.sites} />
+    <Footer.Actions actions={args.actions} copyright={args.copyright} />
+  </Footer>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  header: 'Thematic information platforms',
+  actions: [
+    { link: '/#', title: 'Privacy' },
+    { link: '/#', title: 'Sitemap' },
+    { link: '/#', title: 'CMS Login' },
+  ],
+  copyright: [{ link: '/#', site: 'EEA' }],
+  sites: [
+    { link: '/#', src: Marine, alt: 'WISE marine' },
+    { link: '/#', src: Freshwater, alt: 'WISE freshwater' },
+    { link: '/#', src: Bise, alt: 'Biodiversity' },
+    { link: '/#', src: Fise, alt: 'Forest information system for europe' },
+    {
+      link: '/#',
+      src: ClimateHealth,
+      alt: 'Information platform for chemical monitoring',
+    },
+    { link: '/#', src: Cca, alt: 'Climate adapt' },
+    { link: '/#', src: Industry, alt: 'European industrial emissions portal' },
+    { link: '/#', src: Energy, alt: 'Climate and energy in the EU' },
+    { link: '/#', src: Copernicus, alt: 'Copernicus land monitoring service' },
+    { link: '/#', src: Insitu, alt: 'Copernicus in situ' },
+  ],
+  managedBy: [
+    {
+      link: 'https://www.eea.europa.eu/',
+      src: EEA,
+      alt: 'EEA Logo',
+      className: 'site logo',
+      columnSize: {
+        mobile: 5,
+        tablet: 4,
+        computer: 4,
+      },
+    },
+    {
+      link: 'https://www.eionet.europa.eu/',
+      src: Eionet,
+      alt: 'EIONET Logo',
+      className: 'eionet logo',
+      columnSize: {
+        mobile: 7,
+        tablet: 4,
+        computer: 4,
+      },
+    },
+  ],
+  social: [
+    { name: 'twitter', icon: 'ri-twitter-fill', link: '/#' },
+    { name: 'facebook', icon: 'ri-facebook-box-fill', link: '/#' },
+    { name: 'linkedin', icon: 'ri-linkedin-fill', link: '/#' },
+    { name: 'youtube', icon: 'ri-youtube-fill', link: '/#' },
+    { name: 'instagram', icon: 'ri-instagram-fill', link: '/#' },
+    { name: 'rss', icon: 'ri-rss-fill', link: '/#' },
+  ],
+  contacts: [
+    {
+      text: 'About us',
+      link: '/#',
+      children: [
+        { text: 'FAQs', link: '/#' },
+        { text: 'Careers', link: '/#' },
+      ],
+    },
+    { text: 'Contact us', link: '/#' },
+    { text: 'Sign up to our newsletter', link: '/#' },
+  ],
+};

package/src/ui/Form/Checkbox.stories.js

@@ -0,0 +1,211 @@
+import React from 'react';
+import { Checkbox, Form, Message, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Forms/Checkbox',
+  component: Checkbox,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    label: {
+      description: 'Label of the form group',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    helperText: {
+      description: 'Helper text of the form group',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    errorMessage: {
+      description:
+        'Message to be shown in case of an invalid input by the user',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    optionalText: {
+      description: 'Text to be shown when the form group is optional',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' (optional) ' },
+      },
+    },
+    requiredText: {
+      description: 'Text to be shown when the form group is required',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' * ' },
+      },
+    },
+    required: {
+      description: 'Sets the required attribute on the form group',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    invalid: {
+      description: 'Marks the form group as invalid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+};
+
+function CheckboxForm({
+  label,
+  helperText,
+  errorMessage,
+  optionalText,
+  requiredText,
+  invalid,
+  required,
+}) {
+  return (
+    <Container>
+      <Form>
+        <Form.Field>
+          {label}
+          {required ? (
+            <span style={{ color: 'red' }}>{requiredText}</span>
+          ) : (
+            <span>{optionalText}</span>
+          )}
+        </Form.Field>
+        <Form.Field>{helperText}</Form.Field>
+        {invalid ? (
+          <Message icon="exclamation circle" content={errorMessage} negative />
+        ) : null}
+        <Form.Field error={invalid}>
+          <Checkbox label="Option 1" defaultChecked id="field1"></Checkbox>
+          <label htmlFor="field1">Helper text for option 1</label>
+        </Form.Field>
+        <Form.Field error={invalid}>
+          <Checkbox label="Option 2" id="field2"></Checkbox>
+          <label htmlFor="field2">Helper text for option 2</label>
+        </Form.Field>
+        <Form.Field error={invalid}>
+          <Checkbox label="Option 3 (disabled)" disabled id="field3"></Checkbox>
+          <label htmlFor="field3">Helper text for option 3</label>
+        </Form.Field>
+      </Form>
+    </Container>
+  );
+}
+
+function SingleCheckboxForm({
+  label,
+  helperText,
+  errorMessage,
+  optionalText,
+  requiredText,
+  invalid,
+  required,
+}) {
+  return (
+    <Container>
+      <Form>
+        <Form.Field>
+          {label}
+          {required ? (
+            <span style={{ color: 'red' }}>{requiredText}</span>
+          ) : (
+            <span>{optionalText}</span>
+          )}
+        </Form.Field>
+        <Form.Field>{helperText}</Form.Field>
+
+        <Form.Field error={invalid}>
+          <Checkbox label="Option 1" defaultChecked id="field4"></Checkbox>
+          <label htmlFor="field4">Helper text for option 1</label>
+        </Form.Field>
+        {invalid ? (
+          <Message header="Error Message" content={errorMessage} negative />
+        ) : null}
+      </Form>
+    </Container>
+  );
+}
+
+const Template = (args) => <CheckboxForm {...args}></CheckboxForm>;
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Select your preferred options',
+  helperText: 'Helper text for the group',
+  errorMessage: 'Error message for the group',
+  optionalText: ' (optional)',
+  requiredText: '*',
+  invalid: false,
+  required: true,
+};
+
+export const invalid = Template.bind({});
+invalid.args = {
+  label: 'Select your preferred options',
+  helperText: 'Helper text for the group',
+  errorMessage: 'Error message for the group',
+  optionalText: ' (optional)',
+  requiredText: '*',
+  invalid: true,
+  required: true,
+};
+
+invalid.argTypes = {
+  invalid: {
+    table: {
+      defaultValue: { summary: true },
+    },
+  },
+};
+
+export const optional = Template.bind({});
+optional.args = {
+  label: 'Select your preferred options',
+  helperText: 'Helper text for the group',
+  errorMessage: 'Error message for the group',
+  optionalText: ' (optional)',
+  requiredText: '*',
+  invalid: false,
+  required: false,
+};
+
+optional.argTypes = {
+  required: {
+    table: {
+      defaultValue: { summary: false },
+    },
+  },
+};
+
+export const single = (args) => (
+  <SingleCheckboxForm {...args}></SingleCheckboxForm>
+);
+single.args = {
+  label: 'Select your preferred options',
+  helperText: 'Helper text for the group',
+  errorMessage: 'Error message for the group',
+  optionalText: ' (optional)',
+  requiredText: '*',
+  invalid: false,
+  required: false,
+};
+
+single.argTypes = {
+  required: {
+    table: {
+      defaultValue: { summary: false },
+    },
+  },
+};