@eeacms/volto-eea-design-system 0.2.1

package/src/semantic.less

@@ -0,0 +1,262 @@
+/*
+
+███████╗███████╗███╗   ███╗ █████╗ ███╗   ██╗████████╗██╗ ██████╗    ██╗   ██╗██╗
+██╔════╝██╔════╝████╗ ████║██╔══██╗████╗  ██║╚══██╔══╝██║██╔════╝    ██║   ██║██║
+███████╗█████╗  ██╔████╔██║███████║██╔██╗ ██║   ██║   ██║██║         ██║   ██║██║
+╚════██║██╔══╝  ██║╚██╔╝██║██╔══██║██║╚██╗██║   ██║   ██║██║         ██║   ██║██║
+███████║███████╗██║ ╚═╝ ██║██║  ██║██║ ╚████║   ██║   ██║╚██████╗    ╚██████╔╝██║
+╚══════╝╚══════╝╚═╝     ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝   ╚═╝ ╚═════╝     ╚═════╝ ╚═╝
+
+  Import this file into your LESS project to use Semantic UI without build tools
+*/
+
+/* Remix Icons */
+& {
+  @import (less) 'remixicon/fonts/remixicon.css';
+}
+
+/* Global */
+& {
+  @import '~semantic-ui-less/definitions/globals/reset';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/globals/site';
+}
+
+/* Elements */
+& {
+  @import '~semantic-ui-less/definitions/elements/button';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/elements/container';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/elements/divider';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/elements/header';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/definitions/elements/icon';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/elements/image';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/elements/input';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/elements/label';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/elements/list';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/elements/loader';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/elements/placeholder';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/elements/rail';
+}
+
+//& {
+//  @import '~semantic-ui-less/definitions/elements/reveal';
+//}
+
+& {
+  @import '~semantic-ui-less/definitions/elements/segment';
+}
+
+//& {
+//  @import '~semantic-ui-less/definitions/elements/step';
+//}
+
+/* Collections */
+& {
+  @import '~semantic-ui-less/definitions/collections/breadcrumb';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/collections/form';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/collections/grid';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/collections/menu';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/collections/message';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/collections/table';
+}
+
+/* Views */
+//& {
+//  @import '~semantic-ui-less/definitions/views/ad';
+//}
+
+& {
+  @import '~semantic-ui-less/definitions/views/card';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/views/comment';
+}
+
+//& {
+//  @import '~semantic-ui-less/definitions/views/feed';
+//}
+
+& {
+  @import '~semantic-ui-less/definitions/views/item';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/views/statistic';
+}
+
+/* Modules */
+& {
+  @import '~semantic-ui-less/definitions/modules/accordion';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/modules/checkbox';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/modules/dimmer';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/modules/dropdown';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/modules/embed';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/modules/modal';
+}
+
+//& {
+//  @import '~semantic-ui-less/definitions/modules/nag';
+//}
+
+& {
+  @import '~semantic-ui-less/definitions/modules/popup';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/modules/progress';
+}
+
+//& {
+//  @import '~semantic-ui-less/definitions/modules/rating';
+//}
+
+& {
+  @import '~semantic-ui-less/definitions/modules/search';
+}
+
+//& {
+//  @import '~semantic-ui-less/definitions/modules/shape';
+//}
+
+& {
+  @import '~semantic-ui-less/definitions/modules/sidebar';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/modules/sticky';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/modules/tab';
+}
+
+& {
+  @import '~semantic-ui-less/definitions/modules/transition';
+}
+
+// EEA Design custom components
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/blockquote';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/pullquote';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/banner';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/timeline';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/footer';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/header';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/inpageNavigation';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/avatar';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/divider';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/testimonial';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/tag';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/tagList';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/avatarGrid';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/keyContent';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/publicationCard';
+}

package/src/ui/Avatar/Avatar.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+Avatar.propTypes = {
+  title: PropTypes.string,
+  info: PropTypes.string,
+};
+
+function Avatar({ image_url, children, ...rest }) {
+  return (
+    <div className={`eea avatar  ${rest.avatarSize}`} {...rest}>
+      <div className="wrapper">
+        <div className="image-wrapper">
+          <div
+            className="image"
+            style={{ backgroundImage: `url(${image_url})` }}
+          ></div>
+        </div>
+        <div className="content-wrapper">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+Avatar.Content = ({ children }) => {
+  return <div className="content">{children}</div>;
+};
+
+Avatar.Title = ({ children }) => <p className="title">{children}</p>;
+Avatar.Metadata = ({ children }) => <p className="metadata">{children}</p>;
+
+export default Avatar;

package/src/ui/Avatar/Avatar.stories.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import Avatar from './Avatar';
+// eslint-disable-next-line import/no-unresolved
+import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/avatar.png';
+
+export default {
+  title: 'Components/Avatar',
+  component: Avatar,
+  argTypes: {
+    title: {
+      description: 'avatar title',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    info: {
+      description: 'avatar secondary info',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    image: {
+      description: 'avatar image',
+      table: {
+        defaultValue: { summary: '""' },
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => (
+  <Avatar avatarSize="big" {...args} image_url={imgUrl}>
+    <Avatar.Content>
+      <Avatar.Title>{args.title}</Avatar.Title>
+      <Avatar.Metadata>{args.info}</Avatar.Metadata>
+    </Avatar.Content>
+  </Avatar>
+);
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  title: 'Lorem ipsum',
+  info: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+};
+
+const SmallTemplate = (args) => (
+  <Avatar avatarSize="small" {...args} image_url={imgUrl}>
+    <Avatar.Content>
+      <Avatar.Title>{args.title}</Avatar.Title>
+      <Avatar.Metadata>{args.info}</Avatar.Metadata>
+    </Avatar.Content>
+  </Avatar>
+);
+
+export const Small = SmallTemplate.bind({});
+Small.args = {
+  title: 'Lorem ipsum',
+  info: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+};

package/src/ui/AvatarGrid/AvatarGrid.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '../Avatar/Avatar';
+import { Grid } from 'semantic-ui-react';
+
+AvatarGrid.propTypes = {
+  title: PropTypes.string,
+};
+
+function AvatarGrid({ children, ...rest }) {
+  return (
+    <div className="eea avatar-grid" {...rest}>
+      <div className="wrapper">{children}</div>
+    </div>
+  );
+}
+
+AvatarGrid.Content = ({ children }) => {
+  return <div className="content">{children}</div>;
+};
+
+AvatarGrid.Title = ({ children, ...rest }) => (
+  <p className={`grid-title  ${rest.showTitle ? '' : 'hidden'}`}>{children}</p>
+);
+AvatarGrid.Group = ({ children, ...rest }) => {
+  let avatars = rest.avatars;
+  if (rest.avatars.length > 3) {
+    avatars = avatars.slice(0, 3);
+  }
+  return (
+    <div className="avatar group">
+      <Grid>
+        {avatars.map((avatar) => (
+          <Grid.Column mobile={12} tablet={4} computer={4}>
+            <div className="avatar-wrapper">
+              <Avatar {...rest} image_url={avatar.image_url} avatarSize="big">
+                <Avatar.Content>
+                  <Avatar.Title>{avatar.title}</Avatar.Title>
+                  <Avatar.Metadata>{avatar.metadata}</Avatar.Metadata>
+                </Avatar.Content>
+              </Avatar>
+            </div>
+          </Grid.Column>
+        ))}
+      </Grid>
+    </div>
+  );
+};
+export default AvatarGrid;

package/src/ui/AvatarGrid/AvatarGrid.stories.jsx

@@ -0,0 +1,66 @@
+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 AvatarGrid from './AvatarGrid';
+
+export default {
+  title: 'Components/Avatar Grid',
+  component: AvatarGrid,
+  argTypes: {
+    showTitle: {
+      description: 'show / hide title',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    title: {
+      description: 'avatar grid title',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    avatars: {
+      description: 'avatar data',
+      table: {
+        type: { summary: 'Object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+const GridTemplate = (args) => (
+  <AvatarGrid>
+    <AvatarGrid.Content>
+      <AvatarGrid.Title showTitle={args.showTitle}>
+        {args.title}
+      </AvatarGrid.Title>
+      <AvatarGrid.Group avatars={args.avatars}></AvatarGrid.Group>
+    </AvatarGrid.Content>
+  </AvatarGrid>
+);
+
+export const Default = GridTemplate.bind({});
+Default.args = {
+  title: 'Amet - Lorem ipsum dolor sit amet',
+  showTitle: true,
+  avatars: [
+    {
+      image_url: imgUrl,
+      title: 'Lorem ipsum',
+      metadata: 'Urna auctor pharetra aenean sed gravida quam',
+    },
+    {
+      image_url: imgUrl,
+      title: 'Lorem ipsum',
+      metadata: 'Duis vel eu placerat proin diam id enim suspendisse erat',
+    },
+    {
+      image_url: imgUrl,
+      title: 'Lorem ipsum',
+      metadata: 'Egetisi gravida pellentesque volutpat diamon',
+    },
+  ],
+};

package/src/ui/Banner/Banner.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Container, Icon, Button, Grid } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+
+Banner.propTypes = {
+  title: PropTypes.string,
+  image: PropTypes.bool,
+};
+
+function Banner({ image_url, image, children }) {
+  return (
+    <div className="eea banner">
+      <div
+        className={image ? 'image' : ''}
+        style={image ? { backgroundImage: `url(${image_url})` } : {}}
+      >
+        <div className="gradient">
+          <Container>{children}</Container>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Banner.Action = function ({ id, title, icon, onClick, className, color }) {
+  return (
+    <div className="action">
+      <Button className={className} basic inverted onClick={onClick}>
+        <Icon className={icon} color={color}></Icon>
+        <span className="mobile hidden">{title}</span>
+      </Button>
+    </div>
+  );
+};
+
+Banner.Content = ({ children, actions }) => {
+  return (
+    <div className="content">
+      <Grid>
+        <Grid.Column mobile={10} tablet={9} computer={9}>
+          {children}
+        </Grid.Column>
+        <Grid.Column mobile={2} tablet={3} computer={3} className="actions">
+          {actions}
+        </Grid.Column>
+      </Grid>
+    </div>
+  );
+};
+
+Banner.Title = ({ children }) => <p className="title">{children}</p>;
+Banner.Metadata = ({ children }) => <p className="metadata">{children}</p>;
+
+Banner.MetadataField = ({ hidden, type = 'text', label, value, title }) => {
+  if (hidden || !value) return '';
+  return <span className={`field ${type}`}>{value}</span>;
+};
+
+export default Banner;

package/src/ui/Banner/Banner.stories.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import Banner from './Banner';
+// eslint-disable-next-line import/no-unresolved
+import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/banner.png';
+import { Popup } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Page Header',
+  component: Banner,
+  argTypes: {
+    title: {
+      description: 'banner title',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    metadata: {
+      description: 'banner metadata',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'object' },
+      },
+    },
+    image: {
+      description: 'set or unset banner image',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'boolean' },
+      },
+    },
+    hideShareButton: {
+      description: 'hide/show share button',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'boolean' },
+      },
+    },
+    hideDownloadButton: {
+      description: 'hide/show download button',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'boolean' },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <Banner {...args} image_url={args.image ? imgUrl : null}>
+    <Banner.Content
+      actions={
+        <>
+          {' '}
+          {!args.hideShareButton && (
+            <Popup
+              className="share-popup"
+              trigger={
+                <Banner.Action
+                  icon="ri-share-fill"
+                  title="Share"
+                  className="share"
+                />
+              }
+              content={() => (
+                <>
+                  <p>Share to:</p>
+                  <div className="actions">
+                    <Banner.Action icon="ri-facebook-fill" />
+                    <Banner.Action icon="ri-twitter-fill" />
+                    <Banner.Action icon="ri-linkedin-fill" />
+                    <Banner.Action icon="blogger b" />
+                    <Banner.Action icon="ri-reddit-line" />
+                    <Banner.Action icon="stumbleupon circle" />
+                  </div>
+                </>
+              )}
+              position="top center"
+              basic
+            />
+          )}
+          {!args.hideDownloadButton && (
+            <Banner.Action
+              icon="ri-download-2-line"
+              title="Download"
+              className="download"
+            />
+          )}
+        </>
+      }
+    >
+      <Banner.Title>{args.title}</Banner.Title>
+      {args.metadata && (
+        <Banner.Metadata>
+          <>
+            {args.metadata.map((meta, index) => (
+              <Banner.MetadataField
+                {...meta}
+                key={index}
+              ></Banner.MetadataField>
+            ))}
+          </>
+        </Banner.Metadata>
+      )}
+    </Banner.Content>
+  </Banner>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  metadata: [
+    { hidden: false, value: 'Briefing', type: 'type' },
+    { hidden: false, value: 'Published Date', type: 'date' },
+    { hidden: false, value: 'Modified Date', type: 'date' },
+    { hidden: false, value: '5 min read', type: '' },
+  ],
+  image: true,
+  hideShareButton: false,
+  hideDownloadButton: false,
+};

package/src/ui/Blockquote/Blockquote.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+function Blockquote({ children, className, ...rest }) {
+  return (
+    <div className="eea blockquote" {...rest}>
+      <blockquote className="quote">{children}</blockquote>
+    </div>
+  );
+}
+
+Blockquote.Content = ({ children, as: As, ...rest }) =>
+  As ? <As {...rest}>{children}</As> : children;
+
+Blockquote.Meta = ({ children }) => <div className="meta">{children}</div>;
+
+export default Blockquote;