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

package/src/ui/Heading/Heading.stories.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Header, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Heading',
+  component: Header,
+  argTypes: {
+    variation: {
+      name: 'Heading variation',
+      defaultValue: 'tertiary',
+      options: ['primary', 'secondary', 'tertiary', 'black'],
+      control: { type: 'select' },
+      description: 'Text color variation',
+      table: {
+        defaultValue: { summary: 'tertiary' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <Container className={'color-fg-' + args.variation}>
+    <h1>Heading 1</h1>
+    <h1>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis arcu
+      egestas ultrices mollis.
+    </h1>
+    <hr></hr>
+    <h2>Heading 2</h2>
+    <h2>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis arcu
+      egestas ultrices mollis.
+    </h2>
+    <hr></hr>
+    <h3>Heading 3</h3>
+    <h3>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis arcu
+      egestas ultrices mollis.
+    </h3>
+    <hr></hr>
+    <h4>Heading 4</h4>
+    <h4>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis arcu
+      egestas ultrices mollis.
+    </h4>
+    <hr></hr>
+    <h5>Heading 5</h5>
+    <h5>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis arcu
+      egestas ultrices mollis.
+    </h5>
+    <hr></hr>
+    <h6>Heading 6</h6>
+    <h6>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis arcu
+      egestas ultrices mollis.
+    </h6>
+  </Container>
+);
+
+export const Default = Template.bind({});

package/src/ui/Item/Item.stories.js

@@ -0,0 +1,242 @@
+import React from 'react';
+import { Item, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Item',
+  component: Item,
+  argTypes: {},
+};
+
+function SingleItem({ header, image, description, meta, extra }) {
+  return (
+    <Item>
+      <Item.Image src={image} alt="item image" />
+      <Item.Content>
+        <Item.Header>{header}</Item.Header>
+        <Item.Meta>{meta}</Item.Meta>
+        <Item.Description>{description}</Item.Description>
+        <Item.Extra>{extra}</Item.Extra>
+      </Item.Content>
+    </Item>
+  );
+}
+
+function SingleItemDefault({ header, image, description, meta, dateMeta }) {
+  return (
+    <Item className="default">
+      <Item.Image src={image} alt="item image" />
+      <Item.Content>
+        <Item.Extra>
+          <Item.Meta>{meta}</Item.Meta>
+          <Item.Meta className="date">{dateMeta}</Item.Meta>
+        </Item.Extra>
+        <Item.Header>{header}</Item.Header>
+        <Item.Description>{description}</Item.Description>
+      </Item.Content>
+    </Item>
+  );
+}
+
+function ItemGroup({ items, divided, relaxed, unstackable, link }) {
+  return (
+    <Item.Group
+      divided={divided}
+      relaxed={relaxed}
+      unstackable={unstackable}
+      link={link}
+    >
+      {items.map((item) => (
+        <SingleItem key={item.childKey} {...item}></SingleItem>
+      ))}
+    </Item.Group>
+  );
+}
+
+export const Default = (args) => (
+  <Container>
+    <Item.Group>
+      <SingleItemDefault {...args}></SingleItemDefault>
+    </Item.Group>
+  </Container>
+);
+Default.args = {
+  header:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Enim quis nam dictumst amet gravida in sit.',
+  image:
+    'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+  description:
+    'Accumsan viverra odio dictum egestas ac neque ut elit. Sapien parturient ullamcorper habitasse ipsum. At nunc ridiculus eget sapinen enim dol....',
+  meta: 'EEA signals',
+  dateMeta: '18.02.22',
+};
+
+Default.argTypes = {
+  header: {
+    description: 'item heading',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  image: {
+    description: 'Path or Url of the image',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  description: {
+    description: 'item content description',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  meta: {
+    description: 'item content metadata',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  dateMeta: {
+    description: 'item extra date content',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+};
+
+export const DefaultItem = (args) => (
+  <Container>
+    <Item.Group>
+      <SingleItem {...args}></SingleItem>
+    </Item.Group>
+  </Container>
+);
+DefaultItem.args = {
+  header: 'Header',
+  image:
+    'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+  description: 'Description',
+  meta: 'Metadata',
+  extra: 'Extra',
+};
+
+DefaultItem.argTypes = {
+  header: {
+    description: 'item heading',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  image: {
+    description: 'Path or Url of the image',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  description: {
+    description: 'item content description',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  meta: {
+    description: 'item content metadata',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  extra: {
+    description: 'item extra content',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+};
+
+DefaultItem.storyName = 'Featured Item';
+
+const Template = (args) => (
+  <Container>
+    <ItemGroup {...args}></ItemGroup>
+  </Container>
+);
+
+export const DefaultGroup = Template.bind({});
+DefaultGroup.args = {
+  items: [
+    {
+      childKey: 0,
+      header: 'Header',
+      image:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      description: 'Description',
+      meta: 'Metadata',
+      extra: 'Extra',
+    },
+    {
+      childKey: 1,
+      header: 'Header',
+      image:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      description: 'Description',
+      meta: 'Metadata',
+      extra: 'Extra',
+    },
+  ],
+  divided: false,
+  relaxed: false,
+  unstackable: false,
+  link: false,
+};
+
+DefaultGroup.argTypes = {
+  items: {
+    description: 'array of group items',
+    table: {
+      type: { summary: 'Object' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  divided: {
+    description:
+      'items can be divided to better distinguish between grouped content',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  relaxed: {
+    description:
+      'a group of items can relax its padding to provide more negative space',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  unstackable: {
+    description: 'prevent items from stacking on mobile',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  link: {
+    description:
+      'item can be formatted so that the entire contents link to another page',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+};
+
+DefaultGroup.storyName = 'Item Group';

package/src/ui/Item/ItemGroupWithIcons.stories.js

@@ -0,0 +1,195 @@
+import React from 'react';
+import { Item, Container, Grid } from 'semantic-ui-react';
+
+import GlobeEco from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Svg/globe-eco.svg';
+import Sustainable from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Svg/sustainable.svg';
+import DataAnalytics from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Svg/data-analytics.svg';
+import Network from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Svg/network.svg';
+import Knowledge from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Svg/knowledge.svg';
+
+export default {
+  title: 'Components/Item/Item group with icons',
+  component: Item,
+  argTypes: {
+    stackable: {
+      description: 'Image above content',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+};
+
+function SingleItem({
+  image,
+  imageSize,
+  description,
+  verticalAlign,
+  stackable,
+}) {
+  return (
+    <Item className={stackable ? 'stackable' : ''}>
+      <Item.Image className={`ui ${imageSize}`} src={image} alt="item image" />
+      <Item.Content verticalAlign={verticalAlign}>{description}</Item.Content>
+    </Item>
+  );
+}
+
+// Single item
+export const DefaultItem = (args) => (
+  <Container>
+    <Item.Group unstackable className="row">
+      <SingleItem {...args}></SingleItem>
+    </Item.Group>
+  </Container>
+);
+DefaultItem.args = {
+  imageSize: 'tile',
+  verticalAlign: 'middle',
+  stackable: false,
+  image: GlobeEco,
+  description:
+    'Support Europe’s transition to a sustainable future with evidence-based knowledge and data.',
+};
+DefaultItem.argTypes = {
+  imageSize: {
+    control: { type: 'select' },
+    options: ['mini', 'tile', 'tiny', 'small'],
+    description: 'Content can specify its vertical alignment',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  verticalAlign: {
+    control: { type: 'select' },
+    options: ['top', 'middle', 'bottom'],
+    description: 'An image can vary in size',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  image: {
+    description: 'Path or Url of the image',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  description: {
+    description: 'Item content description',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+};
+
+function ItemGroup({
+  imageSize,
+  verticalAlign,
+  ColumnLeft,
+  ColumnRight,
+  stackable,
+}) {
+  return (
+    <Container>
+      <Grid>
+        <Grid.Row>
+          <Grid.Column mobile={12} tablet={6} computer={6}>
+            <Item.Group unstackable className="row">
+              {ColumnLeft.map((item) => (
+                <SingleItem
+                  key={item.childKey}
+                  {...item}
+                  imageSize={imageSize}
+                  verticalAlign={verticalAlign}
+                  stackable={stackable}
+                ></SingleItem>
+              ))}
+            </Item.Group>
+          </Grid.Column>
+          <Grid.Column mobile={12} tablet={6} computer={6}>
+            <Item.Group unstackable className="row">
+              {ColumnRight.map((item) => (
+                <SingleItem
+                  key={item.childKey}
+                  {...item}
+                  imageSize={imageSize}
+                  verticalAlign={verticalAlign}
+                  stackable={stackable}
+                ></SingleItem>
+              ))}
+            </Item.Group>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </Container>
+  );
+}
+
+const Template = (args) => <ItemGroup {...args}></ItemGroup>;
+
+// Group of items
+export const DefaultGroup = Template.bind({});
+DefaultGroup.args = {
+  imageSize: 'tile',
+  verticalAlign: 'middle',
+  stackable: false,
+  ColumnLeft: [
+    {
+      childKey: 0,
+      image: GlobeEco,
+      description:
+        'Support Europe’s transition to a sustainable future with evidence-based knowledge and data.',
+    },
+    {
+      childKey: 1,
+      image: Sustainable,
+      description:
+        'Supply input on solutions to the sustainability challenges of today – and tomorrow.  ',
+    },
+    {
+      childKey: 2,
+      image: DataAnalytics,
+      description:
+        'Leverage the data and technology to support the EU’s decision-making processes concerning the environment and climate',
+    },
+  ],
+  ColumnRight: [
+    {
+      childKey: 0,
+      image: Network,
+      description:
+        'Build stronger networks and partnerships with state and regional governments and organisations.',
+    },
+    {
+      childKey: 1,
+      image: Knowledge,
+      description:
+        'Strengthen the EU’s knowledge capacity and help secure the resources needed to create a sustainable Europe.',
+    },
+  ],
+};
+DefaultGroup.argTypes = {
+  imageSize: {
+    control: { type: 'select' },
+    options: ['mini', 'tile', 'tiny', 'small'],
+    description: 'Content can specify its vertical alignment',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  verticalAlign: {
+    control: { type: 'select' },
+    options: ['top', 'middle', 'bottom'],
+    description: 'An image can vary in size',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+};

package/src/ui/Label/Label.stories.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Label, Container, Image, Segment } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Label',
+  component: Label,
+  argTypes: {
+    pointing: {
+      control: { type: 'inline-radio' },
+      options: [false, true, 'below', 'left', 'right'],
+      description: 'a label can point to content next to it',
+      table: {
+        type: {
+          summary: 'boolean | string',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    content: {
+      description: 'primary content',
+      table: {
+        type: {
+          summary: 'custom',
+        },
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+    importance: {
+      control: { type: 'inline-radio' },
+      defaultValue: null,
+      options: [null, 'low', 'medium', 'high', 'highlight'],
+      description: 'label class name for style',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <Container>
+    <Label {...args} className={args.importance ? args.importance : ''}></Label>
+  </Container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  content: 'Label',
+  pointing: false,
+  importance: null,
+};
+
+export const Ribbon = (args) => (
+  <Container>
+    <Segment raised>
+      <Label
+        as="a"
+        ribbon
+        className={args.importance ? args.importance : ''}
+        {...args}
+      ></Label>
+      <Image
+        src="https://react.semantic-ui.com/images/wireframe/paragraph.png"
+        alt="paragraph"
+      ></Image>
+    </Segment>
+  </Container>
+);
+
+Ribbon.args = {
+  content: 'Ribbon Label',
+  importance: null,
+};
+
+Ribbon.parameters = {
+  controls: { exclude: ['pointing'] },
+  hideNoControlsWarning: true,
+};
+
+export const Corner = (args) => (
+  <Container>
+    <Image
+      src="https://react.semantic-ui.com/images/wireframe/image.png"
+      label={{
+        as: 'a',
+        corner: 'right',
+        icon: 'save',
+        className: `${args.importance ? args.importance : ''}`,
+      }}
+      size="medium"
+      alt="image"
+    ></Image>
+  </Container>
+);
+
+Corner.args = {
+  importance: null,
+};
+
+Corner.parameters = {
+  controls: { exclude: ['pointing', 'content'] },
+  hideNoControlsWarning: true,
+};
+
+export const Basic = (args) => (
+  <Container>
+    <Label
+      {...args}
+      className={args.importance ? args.importance : ''}
+      basic
+      as="a"
+    ></Label>
+  </Container>
+);
+
+Basic.args = {
+  content: 'Basic Label',
+  pointing: false,
+  importance: null,
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { List, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/List',
+  component: List,
+  argTypes: {},
+};
+
+const Template = (args) => (
+  <Container>
+    <List
+      floated={args.floated}
+      animated={args.animated}
+      divided={args.divided}
+      as="dl"
+    >
+      {args.items.map((item, index) => (
+        <List.Item className="item" key={index} as="dt">
+          {item}
+        </List.Item>
+      ))}
+    </List>
+  </Container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  floated: 'left',
+  animated: false,
+  divided: false,
+  items: ['List Item 1', 'List Item 2', 'List Item 3', 'List Item 4'],
+};