@eeacms/volto-eea-design-system 0.2.1

package/src/ui/Tag/Tag.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Icon } from 'semantic-ui-react';
+
+function Tag({ children, ...rest }) {
+  return (
+    <a {...rest} className="tag">
+      <Icon className={`icon`} name="hashtag" />
+      <span className="name">{children}</span>
+    </a>
+  );
+}
+
+export default Tag;

package/src/ui/Tag/Tag.stories.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Tag from './Tag';
+
+export default {
+  title: 'Components/Tag',
+  component: Tag,
+  argTypes: {
+    title: {
+      name: 'title',
+      description: 'Tag main text',
+      type: { name: 'string', required: true },
+    },
+  },
+};
+
+export const Default = (args) => <Tag href={args.href}>{args.title}</Tag>;
+
+Default.args = {
+  title: 'subcategory 1',
+  link: '/#',
+};

package/src/ui/TagList/TagList.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+function TagList({ children, ...rest }) {
+  return (
+    <div {...rest} className={`tags ${rest.className || ''}`}>
+      {children}
+    </div>
+  );
+}
+
+TagList.Title = ({ children, ...rest }) => (
+  <span className="tags-title" {...rest}>
+    {children}
+  </span>
+);
+
+TagList.Content = ({ children, ...rest }) => (
+  <div className="tags-content" {...rest}>
+    {children}
+  </div>
+);
+
+export default TagList;

package/src/ui/TagList/TagList.stories.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import TagList from './TagList';
+import Tag from '../Tag/Tag';
+
+export default {
+  title: 'Components/TagList',
+  component: TagList,
+  argTypes: {
+    title: {
+      name: 'title',
+      description: 'Tag main text',
+      type: { name: 'string', required: true },
+    },
+    direction: {
+      control: { type: 'select' },
+      options: ['right', 'left'],
+      description: 'tag container direction',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'right',
+        },
+      },
+    },
+    tags: {
+      description: 'category tag',
+      table: {
+        type: {
+          summary: 'Object',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+  },
+};
+
+export const Default = (args) => (
+  <TagList className={args.direction}>
+    <TagList.Title>{args.title}</TagList.Title>
+    <TagList.Content>
+      {args.tags.map((tag, index) => [
+        <Tag className={tag.class} href={tag.href} key={index}>
+          {tag.category}
+        </Tag>,
+      ])}
+    </TagList.Content>
+  </TagList>
+);
+
+Default.args = {
+  title: 'Tags:',
+  direction: 'right',
+  tags: [
+    { category: 'land use 1', href: '#' },
+    { category: 'land use 2', href: '#' },
+    { category: 'land use 3', href: '#' },
+    { category: 'land use 4', href: '#' },
+  ],
+};

package/src/ui/Testimonial/Testimonial.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Divider from '../Divider/Divider';
+import Avatar from '../Avatar/Avatar';
+import Pullquote from '../Pullquote/Pullquote';
+import { Grid } from 'semantic-ui-react';
+
+Testimonial.propTypes = {
+  title: PropTypes.string,
+  info: PropTypes.string,
+};
+
+function Testimonial({ children, ...rest }) {
+  return (
+    <div className="eea testimonial" {...rest}>
+      <Divider />
+      <Grid>{children}</Grid>
+      <Divider />
+    </div>
+  );
+}
+
+Testimonial.Avatar = ({ children, ...rest }) => {
+  return (
+    <Grid.Column mobile={12} tablet={2} computer={2}>
+      <div className="avatar-wrapper">
+        <Avatar {...rest} image_url={rest.image_url} avatarSize="small">
+          <Avatar.Content>
+            <Avatar.Title>{rest.title}</Avatar.Title>
+            <Avatar.Metadata>{rest.metadata}</Avatar.Metadata>
+          </Avatar.Content>
+        </Avatar>
+      </div>
+    </Grid.Column>
+  );
+};
+
+Testimonial.Content = ({ children }) => {
+  return (
+    <Grid.Column mobile={12} tablet={10} computer={10}>
+      <div className="content">{children}</div>
+    </Grid.Column>
+  );
+};
+
+Testimonial.Title = ({ children }) => <p className="title">{children}</p>;
+Testimonial.Pullquote = ({ children, ...rest }) => (
+  <Pullquote quotePosition="none">
+    <Pullquote.Quote>{children}</Pullquote.Quote>
+  </Pullquote>
+);
+
+export default Testimonial;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+// eslint-disable-next-line import/no-unresolved
+import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/avatar.png';
+import Testimonial from './Testimonial';
+
+export default {
+  title: 'Components/Testimonial',
+  component: Testimonial,
+  argTypes: {
+    title: {
+      description: 'testimonial title',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    image: {
+      description: 'testimonial image',
+      table: {
+        defaultValue: { summary: '""' },
+      },
+    },
+    quote: {
+      description: 'quote text',
+      type: { summary: 'string' },
+    },
+  },
+};
+
+const InlineTemplate = (args) => (
+  <Testimonial {...args}>
+    <Testimonial.Avatar
+      image_url={imgUrl}
+      title={args.avatarTitle}
+      metadata={args.avatarInfo}
+    ></Testimonial.Avatar>
+    <Testimonial.Content>
+      <Testimonial.Title>{args.title}</Testimonial.Title>
+      <Testimonial.Pullquote>{args.quote}</Testimonial.Pullquote>
+    </Testimonial.Content>
+  </Testimonial>
+);
+
+export const Inline = InlineTemplate.bind({});
+Inline.args = {
+  avatarTitle: 'Jane Doe',
+  avatarInfo: 'EEA Analyst',
+  title: 'Amet - Lorem ipsum dolor sit amet',
+  quote:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+};

package/src/ui/Timeline/Timeline.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import cx from 'classnames';
+import { Grid, Card, Label, Icon } from 'semantic-ui-react';
+function Timeline({ children, reversed }) {
+  return (
+    <div className="eea timeline">
+      <Grid className={cx({ 'any reversed': reversed })}>
+        <Grid.Row>{children}</Grid.Row>
+      </Grid>
+    </div>
+  );
+}
+
+Timeline.Content = (args) => (
+  <Grid.Column width={10}>
+    <Card fluid raised color={args.color}>
+      <Card.Content>
+        <Label
+          pointing={args.pointing}
+          attached="top"
+          style={{ marginLeft: '0' }}
+          color={args.color}
+        >
+          {args.time}
+        </Label>
+        <Card.Header>{args.title}</Card.Header>
+        <Card.Description>{args.description}</Card.Description>
+        {/* <Label.Group>
+          {tags.map((tag, i) => (
+            <Label key={i.toString()}>{tag}</Label>
+          ))}
+        </Label.Group> */}
+      </Card.Content>
+    </Card>
+  </Grid.Column>
+);
+
+Timeline.Icon = (args) => (
+  <Grid.Column width={2} className="line">
+    <Icon name={args.icon} color={args.color} inverted circular />
+  </Grid.Column>
+);
+
+export default Timeline;

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

@@ -0,0 +1,322 @@
+import React from 'react';
+import Timeline from './Timeline';
+
+export default {
+  title: 'Components/Timeline',
+  component: Timeline,
+  argTypes: {},
+};
+
+function TimelineEEA({ items }) {
+  return (
+    <>
+      {items.map((item, index) => (
+        <Timeline key={index}>
+          <Timeline.Content
+            pointing="right"
+            time={item.time}
+            title={item.title}
+            description={item.description}
+            color={item.color}
+          ></Timeline.Content>
+          <Timeline.Icon icon={item.icon} color={item.color}></Timeline.Icon>
+        </Timeline>
+      ))}
+    </>
+  );
+}
+
+function TimelineEEAReversed({ items }) {
+  return (
+    <>
+      {items.map((item, index) => (
+        <Timeline key={index}>
+          <Timeline.Icon icon={item.icon} color={item.color}></Timeline.Icon>
+          <Timeline.Content
+            pointing="left"
+            time={item.time}
+            title={item.title}
+            description={item.description}
+            color={item.color}
+          ></Timeline.Content>
+        </Timeline>
+      ))}
+    </>
+  );
+}
+
+const Template = (args) => (
+  <Timeline>
+    <Timeline.Content
+      pointing="right"
+      time={args.time}
+      title={args.title}
+      description={args.description}
+      color={args.color}
+    ></Timeline.Content>
+    <Timeline.Icon icon={args.icon} color={args.color}></Timeline.Icon>
+  </Timeline>
+);
+
+const TemplateReversed = (args) => (
+  <Timeline>
+    <Timeline.Icon icon={args.icon} color={args.color}></Timeline.Icon>
+    <Timeline.Content
+      pointing="left"
+      time={args.time}
+      title={args.title}
+      description={args.description}
+      color={args.color}
+    ></Timeline.Content>
+  </Timeline>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  icon: 'user',
+  time: 'Date and time',
+  title: 'Title',
+  description: 'description',
+  color: 'blue',
+  tags: [],
+};
+
+Default.argTypes = {
+  icon: {
+    description: 'timeline item icon',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  time: {
+    description: 'timeline item time',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  title: {
+    description: 'timeline item heading',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  description: {
+    description: 'timeline item main content',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  color: {
+    description: 'timeline item color',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  tags: {
+    description: 'timeline item content tags',
+    table: {
+      type: {
+        summary: 'array',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+};
+
+export const DefaultReversed = TemplateReversed.bind({});
+DefaultReversed.args = {
+  icon: 'user',
+  time: 'Date and time',
+  title: 'Title',
+  description: 'description',
+  color: 'blue',
+  tags: [],
+};
+
+DefaultReversed.argTypes = {
+  icon: {
+    description: 'timeline item icon',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  time: {
+    description: 'timeline item time',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  title: {
+    description: 'timeline item heading',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  description: {
+    description: 'timeline item main content',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  color: {
+    description: 'timeline item color',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  tags: {
+    description: 'timeline item content tags',
+    table: {
+      type: {
+        summary: 'array',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+};
+
+export const Multiple = (args) => <TimelineEEA {...args}></TimelineEEA>;
+
+Multiple.args = {
+  items: [
+    {
+      icon: 'time',
+      time: 'Date and time',
+      title: 'Title 1',
+      description: 'description 1',
+      color: 'blue',
+      tags: [],
+    },
+    {
+      icon: 'check circle',
+      time: 'Date and time',
+      title: 'Title 2',
+      description: 'description 2',
+      color: 'green',
+      tags: [],
+    },
+    {
+      icon: 'minus circle',
+      time: 'Date and time',
+      title: 'Title 3',
+      description: 'description 3',
+      color: 'teal',
+      tags: [],
+    },
+  ],
+};
+
+Multiple.argTypes = {
+  items: {
+    description: 'array of different timeline item objects',
+    table: {
+      type: {
+        summary: 'array',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+};
+
+export const MultipleReversed = (args) => (
+  <TimelineEEAReversed {...args}></TimelineEEAReversed>
+);
+
+MultipleReversed.args = {
+  items: [
+    {
+      icon: 'time',
+      time: 'Date and time',
+      title: 'Title 1',
+      description: 'description 1',
+      color: 'blue',
+      tags: [],
+    },
+    {
+      icon: 'check circle',
+      time: 'Date and time',
+      title: 'Title 2',
+      description: 'description 2',
+      color: 'green',
+      tags: [],
+    },
+    {
+      icon: 'minus circle',
+      time: 'Date and time',
+      title: 'Title 3',
+      description: 'description 3',
+      color: 'teal',
+      tags: [],
+    },
+  ],
+};
+
+MultipleReversed.argTypes = {
+  items: {
+    description: 'array of different timeline item objects',
+    table: {
+      type: {
+        summary: 'array',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+};

package/src/ui/index.js

@@ -0,0 +1,31 @@
+export Banner from './Banner/Banner';
+
+export Blockquote from './Blockquote/Blockquote';
+
+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 Pullquote from './Pullquote/Pullquote';
+
+export Timeline from './Timeline/Timeline';
+
+export Avatar from './Avatar/Avatar';
+
+export Testimonial from './Testimonial/Testimonial';
+
+export AvatarGrid from './AvatarGrid/AvatarGrid';
+
+export KeyContent from './KeyContent/KeyContent';
+
+export PublicationCard from './PublicationCard/PublicationCard';

package/templates/eea.hbs

@@ -0,0 +1,50 @@
+---
+title: What's new
+---
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+{{#unless options.hideCredit}}
+  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+{{/unless}}
+
+{{#each releases}}
+  {{#if href}}
+    ##{{#unless major}}#{{/unless}} [{{title}}]({{href}}) - {{date}}
+  {{else}}
+    ### {{title}} - {{date}}
+  {{/if}}
+
+  {{! List commits with `Breaking change: ` somewhere in the message }}
+  {{#commit-list commits heading='#### :boom: Breaking Change' subject='(^Breaking change[:(]|^breaking[:(])'}}
+    - {{subject}} [`{{shorthash}}`]({{href}})
+  {{/commit-list}}
+
+  {{! List commits that add new features, but not those already listed above }}
+  {{#commit-list commits heading='#### :rocket: New Features' subject='^feat[:(]'}}
+    - {{subject}} [`{{shorthash}}`]({{href}})
+  {{/commit-list}}
+
+  {{! List commits that add new features, but not those already listed above }}
+  {{#commit-list commits heading='#### :bug: Bug Fixes' subject='^fix[:(]'}}
+    - {{subject}} [`{{shorthash}}`]({{href}})
+  {{/commit-list}}
+
+  {{#commit-list commits heading='#### :nail_care: Enhancements' subject='(^enhancement[:(]|^change[:(]|^refactor[:(])' }}
+    - {{subject}} [`{{shorthash}}`]({{href}})
+  {{/commit-list}}
+
+  {{#commit-list commits heading='#### :house: Internal changes' subject='^chore[:(]|^style[:(]'}}
+    - {{subject}} [`{{shorthash}}`]({{href}})
+  {{/commit-list}}
+
+  {{#commit-list commits heading='#### :house: Documentation changes' subject='^docs[:(]' }}
+    - {{subject}} [`{{shorthash}}`]({{href}})
+  {{/commit-list}}
+
+
+  {{#commit-list commits heading='#### :hammer_and_wrench: Others' exclude='^Breaking change:|^breaking:|^feat[:(]|^fix[:(]|^enhancement[:(]|^change[:(]|^chore[:(]|^docs[:(]|^Autobuild|^Automated|^\[JENKINS\]|^\[YARN\]|^refactor[:(]|^style[:(]' }}
+    - {{subject}} [`{{shorthash}}`]({{href}})
+  {{/commit-list}}
+
+{{/each}}