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

package/src/ui/List/DescriptionList.stories.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { List, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/List/Description list',
+  component: List,
+  argTypes: {
+    floated: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['left', 'right'],
+      description: 'floated left or right',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    animated: {
+      description:
+        'a list can animate to set the current item apart from the list',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    divided: {
+      description: 'a list can show divisions between conten',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    items: {
+      description: 'array of list content',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+function DescriptionList(items, floated, animated, divided) {
+  return (
+    <Container>
+      <List animated={animated} divided={divided} as="dl">
+        {items.map((item, index) => (
+          <React.Fragment key={index}>
+            <List.Header as="dt" className="item">
+              {item.header}
+            </List.Header>
+            <List.Description floated={floated} as="dd">
+              {item.content}
+            </List.Description>
+          </React.Fragment>
+        ))}
+      </List>
+    </Container>
+  );
+}
+
+export const Default = (args) => {
+  return DescriptionList(args.items, args.floated, args.animated, args.divided);
+};
+
+Default.args = {
+  floated: 'right',
+  animated: false,
+  divided: false,
+  items: [
+    { header: 'Header 1', content: 'Description content 1' },
+    { header: 'Header 2', content: 'Description content 2' },
+    { header: 'Header 3', content: 'Description content 3' },
+    { header: 'Header 4', content: 'Description content 4' },
+  ],
+};

package/src/ui/List/OrderedList.stories.js

@@ -0,0 +1,140 @@
+import React from 'react';
+import { List, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/List/Ordered List',
+  component: List,
+  argTypes: {
+    animated: {
+      description:
+        'a list can animate to set the current item apart from the list',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    divided: {
+      description: 'a list can show divisions between conten',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    items: {
+      description: 'array of list content',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+function OrderedList(items, animated, divided, horizontal) {
+  return (
+    <Container>
+      <List as="ol" ordered animated={animated} divided={divided}>
+        {items.map((item, index) => (
+          <List.Item as="li" key={index}>
+            <a href="/#">{item.content}</a>
+            {item.subList && (
+              <List.List role="list" as="ol" className="list">
+                {item.subList.map((sub, subIndex) => (
+                  <List.Item key={subIndex} as="li" role="listitem">
+                    <a href="/#">{sub.content}</a>
+                    {sub.subList && (
+                      <List.List role="list" as="ol" className="list">
+                        {sub.subList.map((sub1, subIndex) => (
+                          <List.Item key={subIndex} as="li" role="listitem">
+                            <a href="/#">{sub1.content}</a>
+                            {sub1.subList && (
+                              <List.List role="list" as="ol" className="list">
+                                {sub1.subList.map((sub2, subIndex) => (
+                                  <List.Item
+                                    key={subIndex}
+                                    as="li"
+                                    role="listitem"
+                                  >
+                                    <a href="/#">{sub2.content}</a>
+                                  </List.Item>
+                                ))}
+                              </List.List>
+                            )}
+                          </List.Item>
+                        ))}
+                      </List.List>
+                    )}
+                  </List.Item>
+                ))}
+              </List.List>
+            )}
+          </List.Item>
+        ))}
+      </List>
+    </Container>
+  );
+}
+
+export const Default = (args) => {
+  return OrderedList(args.items, args.animated, args.divided);
+};
+
+Default.args = {
+  items: [
+    {
+      header: 'header 1',
+      content: 'Content 1',
+      subList: [
+        {
+          header: 'Sub header 1',
+          content: 'Content second level',
+          subList: [
+            { header: 'Sub header 1', content: 'Content third level' },
+            { header: 'Sub header ', content: 'Content third level' },
+          ],
+        },
+        { header: 'Sub header ', content: 'Content second level' },
+      ],
+    },
+    {
+      header: 'header 2',
+      content: 'Content 2',
+      subList: [
+        {
+          header: 'Sub header 1',
+          content: 'Content second level',
+          subList: [
+            {
+              header: 'Sub header 1',
+              content: 'Content third level',
+              subList: [
+                { header: 'Sub header 1', content: 'Content fourth level' },
+                { header: 'Sub header ', content: 'Content fourth level' },
+              ],
+            },
+            { header: 'Sub header ', content: 'Content third level' },
+          ],
+        },
+        { header: 'Sub header ', content: 'Content second level' },
+      ],
+    },
+    {
+      header: 'header 3',
+      content: 'Content 3',
+      subList: [
+        { header: 'Sub header 1', content: 'Content second level' },
+        { header: 'Sub header ', content: 'Content second level' },
+      ],
+    },
+    {
+      header: 'header 4',
+      content: 'Content 4',
+      subList: [
+        { header: 'Sub header 1', content: 'Content second level' },
+        { header: 'Sub header ', content: 'Content second level' },
+      ],
+    },
+  ],
+  animated: false,
+  divided: false,
+};

package/src/ui/List/UnorderedList.stories.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { List, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/List/Unordered list',
+  component: List,
+  argTypes: {
+    animated: {
+      description:
+        'a list can animate to set the current item apart from the list',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    divided: {
+      description: 'a list can show divisions between content',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    items: {
+      description: 'array of list content',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+function UnorderedList(animated, divided, items) {
+  return (
+    <Container>
+      <List bulleted animated={animated} divided={divided} as="ul">
+        {items &&
+          items.map((item, index) => (
+            <List.Item as="li" key={index}>
+              {item.content}
+            </List.Item>
+          ))}
+      </List>
+    </Container>
+  );
+}
+
+export const Default = (args) => {
+  return UnorderedList(args.animated, args.divided, args.items);
+};
+
+Default.args = {
+  animated: false,
+  divided: false,
+  items: [
+    {
+      header: 'header 1',
+      content: 'Content 1',
+    },
+    {
+      header: 'header 2',
+      content: 'Content 2',
+    },
+    {
+      header: 'header 3',
+      content: 'Content 3',
+    },
+    {
+      header: 'header 4',
+      content: 'Content 4',
+    },
+  ],
+};

package/src/ui/Logo/Logo.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import LogoEEA from './Logo';
+import LogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea-logo.svg';
+import InvertedLogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/logo/EEA-Logo-White-2.svg';
+
+export default {
+  title: 'Components/Logo',
+  component: LogoEEA,
+  argTypes: {
+    inverted: {
+      description: 'Inverted logo',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'boolean' },
+      },
+    },
+  },
+};
+
+export const Logo = (args) => {
+  return <LogoEEA {...args} />;
+};
+
+Logo.args = {
+  title: 'Site',
+  alt: 'European Environment Agency',
+  url: 'https://eea.europa.eu',
+  src: LogoImage,
+  invertedSrc: InvertedLogoImage,
+  inverted: false,
+};

package/src/ui/Media/Image.stories.js

@@ -0,0 +1,237 @@
+import React from 'react';
+import { Image } from 'semantic-ui-react';
+import banner from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/banner.png';
+
+export default {
+  title: 'Components/Media Container/Image',
+  component: Image,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    size: {
+      control: { type: 'inline-radio' },
+      options: [
+        'mini',
+        'tiny',
+        'small',
+        'medium',
+        'large',
+        'big',
+        'huge',
+        'massive',
+      ],
+      description: 'an image can vary in size',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    spaced: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'right'],
+      description:
+        'an image can specify that it needs an additional spacing to separate it from nearby content',
+      table: {
+        type: { summary: 'bool|string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    floated: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'right'],
+      description: 'an image can sit to the left or right of other content',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    src: {
+      description: 'Path or Url of the image',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+export const Default = (args) => <Image {...args} alt="image" />;
+
+Default.args = {
+  src: banner,
+};
+
+export const Link = (args) => <Image {...args} alt="link image" />;
+
+Link.args = {
+  src: banner,
+  size: 'small',
+  as: 'a',
+  href: 'https://www.eea.europa.eu/logo.jpg',
+  hidden: false,
+  disabled: false,
+  avatar: false,
+  bordered: false,
+  fluid: false,
+  rounded: false,
+  circular: false,
+  centered: false,
+  spaced: false,
+  floated: 'left',
+};
+
+Link.argTypes = {
+  hidden: {
+    description: 'an image can be hidden',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  disabled: {
+    description: 'an image can show that it is disabled and cannot be selected',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  avatar: {
+    description: 'Path or Url of the image',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  bordered: {
+    description:
+      'an image may include a border to emphasize the edges of white or transparent content',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  fluid: {
+    description: 'an image can take up the width of its container',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  rounded: {
+    description: 'an image may appear rounded',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  circular: {
+    description: 'an image may appear circular',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  centered: {
+    description: 'an image can appear centered in a content block',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  as: {
+    description: 'an element type to render as (string or function)',
+    table: {
+      type: { summary: 'elementType' },
+      defaultValue: { summary: 'img' },
+    },
+  },
+  href: {
+    description: 'renders the Image as an <a> tag with this href',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+};
+
+Link.storyName = 'Link Image';
+
+export const Playground = (args) => <Image {...args} alt="playground image" />;
+
+Playground.args = {
+  src: banner,
+  size: 'small',
+  hidden: false,
+  disabled: false,
+  avatar: false,
+  bordered: false,
+  fluid: false,
+  rounded: false,
+  circular: false,
+  centered: false,
+  spaced: false,
+  floated: 'left',
+};
+
+Playground.argTypes = {
+  hidden: {
+    description: 'an image can be hidden',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  disabled: {
+    description: 'an image can show that it is disabled and cannot be selected',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  avatar: {
+    description: 'Path or Url of the image',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  bordered: {
+    description:
+      'an image may include a border to emphasize the edges of white or transparent content',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  fluid: {
+    description: 'an image can take up the width of its container',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  rounded: {
+    description: 'an image may appear rounded',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  circular: {
+    description: 'an image may appear circular',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  centered: {
+    description: 'an image can appear centered in a content block',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+};