@eeacms/volto-eea-design-system 0.2.1

package/src/ui/Blockquote/Blockquote.stories.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import Blockquote from './Blockquote';
+
+const CITATION =
+  'An interconnected grid will help deliver the ultimate goal of the Energy Union, to make sure affordable, secure and sustainable energy, and also growth across the EU.';
+const AUTHOR = 'President Juncker';
+
+export default {
+  title: 'Components/Blockquote',
+  component: Blockquote,
+  argTypes: {
+    content: {
+      name: 'citation',
+      description: 'Blockquote content',
+      type: { name: 'string', required: true },
+    },
+    meta: {
+      name: 'meta',
+      description: 'Author of the content',
+      type: { name: 'string', required: true },
+    },
+  },
+};
+
+export const Default = (args) => (
+  <Blockquote>
+    <Blockquote.Content>{args.content}</Blockquote.Content>
+    <Blockquote.Meta>{args.meta}</Blockquote.Meta>
+  </Blockquote>
+);
+
+Default.args = {
+  content: CITATION,
+  meta: AUTHOR,
+};
+
+export const Reversed = (args) => (
+  <Blockquote>
+    <Blockquote.Meta>{args.meta}</Blockquote.Meta>
+    <Blockquote.Content>{args.content}</Blockquote.Content>
+  </Blockquote>
+);
+
+Reversed.args = {
+  content:
+    'The Ministry of Environment & Energy is responsible for environmental policy, the preparation of plans and programmes, and overseeing their implementation. The Ministry is also in charge of the transposition of EU environmental Directives into national law.',
+  meta: '22 December 1989',
+};

package/src/ui/Breadcrumbs/Breadcrumb.stories.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Breadcrumb, Container, Icon, Image } from 'semantic-ui-react';
+import homeSVG from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/home-icon.svg';
+import { Link } from 'react-router-dom';
+
+export default {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    root: {
+      description: 'home button url link',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+    sections: {
+      description: 'breadcrumb tabs',
+      table: {
+        type: {
+          summary: 'Object',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+  },
+};
+
+//const Template = (args) => <Breadcrumb {...args}></Breadcrumb>;
+
+const Template = (args) => (
+  <Container>
+    <Breadcrumb size="tiny">
+      <Breadcrumb.Section key="home" href={args.root}>
+        <Image src={homeSVG} alt="home" />
+      </Breadcrumb.Section>
+      {args.sections.map((section, index, sections) => [
+        index !== 0 && (
+          <Breadcrumb.Divider key={index}>
+            <Icon className="ri-arrow-right-s-line"></Icon>
+          </Breadcrumb.Divider>
+        ),
+        index < sections.length - 1 ? (
+          <Link key={section.href} to={section.href} className="section">
+            {section.content}{' '}
+          </Link>
+        ) : (
+          <Breadcrumb.Section key={section.key} active>
+            {section.content}{' '}
+          </Breadcrumb.Section>
+        ),
+      ])}
+    </Breadcrumb>
+  </Container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  root: 'https://www.eea.europa.eu/',
+  sections: [
+    { key: 'Section 1', content: 'Section 1', href: '/#' },
+    { key: 'Section 2', content: 'Section 2', href: '/#' },
+    { key: 'Section 3', content: 'Section 3', href: '/#' },
+  ],
+};

package/src/ui/Breadcrumbs/Breadcrumbs.jsx

@@ -0,0 +1,67 @@
+/**
+ * Breadcrumbs components.
+ * @module components/theme/Breadcrumbs/Breadcrumbs
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Breadcrumb, Container, Image, Icon, Segment } from 'semantic-ui-react';
+
+import homeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/home-icon.svg';
+
+const Breadcrumbs = ({
+  root,
+  sections = [],
+  icon = 'ri-arrow-right-s-line',
+  size = 'tiny',
+}) => {
+  return sections.length > 0 ? (
+    <Segment
+      role="navigation"
+      aria-label={'breadcrumbs'}
+      className="breadcrumbs"
+      attached
+    >
+      <Container>
+        <Breadcrumb size={size}>
+          <Link to={root || '/'} className="section" title={'Home'}>
+            <Image src={homeIcon} alt="home" />
+          </Link>
+          {sections.map((item, index, items) => [
+            <Breadcrumb.Divider key={`divider-${item.href}`}>
+              <Icon className={icon}></Icon>
+            </Breadcrumb.Divider>,
+            index < items.length - 1 ? (
+              <Link key={item.key} to={item.href} className="section">
+                {item.title}
+              </Link>
+            ) : (
+              <Breadcrumb.Section key={item.key} active>
+                {item.title}
+              </Breadcrumb.Section>
+            ),
+          ])}
+        </Breadcrumb>
+      </Container>
+    </Segment>
+  ) : (
+    ''
+  );
+};
+
+Breadcrumbs.propTypes = {
+  root: PropTypes.string,
+  sections: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      href: PropTypes.string,
+      key: PropTypes.string,
+    }),
+  ).isRequired,
+  size: PropTypes.string,
+};
+
+export const BreadcrumbsComponent = Breadcrumbs;
+
+export default Breadcrumbs;

package/src/ui/Breadcrumbs/Breadcrumbs.stories.jsx

@@ -0,0 +1,30 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import { BreadcrumbsComponent } from './Breadcrumbs';
+import Wrapper from '@plone/volto/storybook';
+
+export const Breadcrumb = injectIntl(({ children, ...args }) => {
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <BreadcrumbsComponent
+          pathname=""
+          items={[
+            {
+              '@id': 'https://volto.kitconcept.com/api/Members',
+              title: 'Users',
+            },
+          ]}
+          getBreadcrumbs={() => {}}
+          {...args}
+        />
+      </div>
+    </Wrapper>
+  );
+});
+
+// export default {
+//   title: 'Components/Breadcrumb/Breadcrumb 1',
+//   component: Breadcrumb,
+//   argTypes: {},
+// };

package/src/ui/Button/Button.stories.jsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { Button, Icon, Segment } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    label: { description: 'button label' },
+    disabled: {
+      description: 'button disabled',
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    animated: {
+      options: [false, true, 'fade', 'vertical'],
+      control: { type: 'inline-radio' },
+    },
+    variant: {
+      options: ['default', 'eeaPrimaryButton', 'eeaSecondaryButton'],
+      control: { type: 'inline-radio' },
+    },
+  },
+};
+
+//Primary button
+export const Primary = (args) => {
+  return (
+    <Button primary disabled={args.disabled}>
+      {args.label}
+    </Button>
+  );
+};
+Primary.args = {
+  label: 'Primary Button',
+  disabled: false,
+};
+Primary.parameters = {
+  controls: { exclude: ['animated', 'variant'] },
+  hideNoControlsWarning: true,
+};
+
+//secondary Button
+export const Secondary = (args) => {
+  return (
+    <Button secondary disabled={args.disabled}>
+      {args.label}
+    </Button>
+  );
+};
+Secondary.args = {
+  label: 'Secondary Button',
+  disabled: false,
+};
+Secondary.parameters = {
+  controls: { exclude: ['animated', 'variant'] },
+  hideNoControlsWarning: true,
+};
+
+//secondary Button Inverted
+export const SecondaryInverted = (args) => {
+  return (
+    <Segment inverted compact>
+      <Button secondary inverted disabled={args.disabled}>
+        {args.label}
+      </Button>
+    </Segment>
+  );
+};
+SecondaryInverted.args = {
+  label: 'Secondary Button',
+  disabled: false,
+};
+SecondaryInverted.parameters = {
+  controls: { exclude: ['animated', 'variant'] },
+  hideNoControlsWarning: true,
+};
+
+//Call to action button
+export const CallToAction = (args) => {
+  return (
+    <Button
+      icon
+      labelPosition="right"
+      className="action"
+      disabled={args.disabled}
+    >
+      {args.label}
+      <Icon name={args.icon} />
+    </Button>
+  );
+};
+CallToAction.args = {
+  label: 'CALL TO ACTION BUTTON',
+  icon: 'chevron right',
+  disabled: false,
+};
+CallToAction.parameters = {
+  controls: { exclude: ['animated', 'variant'] },
+  hideNoControlsWarning: true,
+};
+CallToAction.argTypes = {
+  label: {
+    name: 'button label',
+    type: { name: 'string', required: true },
+  },
+  icon: {
+    name: 'button icon',
+    type: { name: 'string', required: false },
+    defaultValue: 'chevron  right',
+    options: [
+      'chevron right',
+      'arrow right',
+      'sign-in',
+      'sign-out',
+      'play',
+      'stop',
+      'pause',
+      'download',
+      'upload',
+      'print',
+      'copy',
+      'edit',
+      'ellipsis',
+    ],
+    control: { type: 'select' },
+    description: 'button icon',
+    table: {
+      defaultValue: { summary: 'chevron right' },
+    },
+  },
+};
+
+//Text Button - can also play with text class
+export const Text = (args) => {
+  return (
+    <Button as="p" disabled={args.disabled}>
+      {args.label}
+    </Button>
+  );
+};
+Text.args = {
+  label: 'Text Button',
+  disabled: false,
+};
+Text.parameters = {
+  controls: { exclude: ['animated', 'variant'] },
+  hideNoControlsWarning: true,
+};
+
+//Cancel Button
+export const Cancel = (args) => {
+  return <Button disabled={args.disabled}>{args.label}</Button>;
+};
+Cancel.args = {
+  label: 'Cancel Button',
+  disabled: false,
+};
+Cancel.parameters = {
+  controls: { exclude: ['animated', 'variant'] },
+  hideNoControlsWarning: true,
+};

package/src/ui/Divider/Divider.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Divider({ ...rest }) {
+  return <div className="eea divider" {...rest}></div>;
+}
+
+export default Divider;

package/src/ui/Footer/Contact.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Icon } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+const Contact = ({ children, contacts, header, address }) =>
+  children?.length ? (
+    children
+  ) : (
+    <>
+      <p className="header">{header}</p>
+      {contacts?.map((contact, index) => (
+        <div className="contact" key={index}>
+          <Icon name={contact.icon} size="big"></Icon>
+          <Link to={contact.link}>{contact.text}</Link>
+        </div>
+      ))}
+      {address && <p className="address">{address}</p>}
+    </>
+  );
+
+Contact.propTypes = {
+  contacts: PropTypes.array,
+  header: PropTypes.string,
+  address: PropTypes.string,
+};
+
+export default Contact;

package/src/ui/Footer/Footer.jsx

@@ -0,0 +1,52 @@
+/**
+ * Footer component.
+ * @module components/theme/Footer/Footer
+ */
+
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+
+import FooterSites from '@eeacms/volto-eea-design-system/ui/Footer/FooterSites';
+import FooterActions from '@eeacms/volto-eea-design-system/ui/Footer/FooterActions';
+import FooterHeader from '@eeacms/volto-eea-design-system/ui/Footer/FooterHeader';
+import SubFooter from '@eeacms/volto-eea-design-system/ui/Footer/SubFooter';
+import Social from '@eeacms/volto-eea-design-system/ui/Footer/Social';
+import Contact from '@eeacms/volto-eea-design-system/ui/Footer/Contact';
+
+/**
+ * Component to display the footer.
+ * @function Footer
+ * @param {Object} intl Intl object
+ * @returns {string} Markup of the component
+ */
+
+const Footer = (props) => {
+  const { children } = props;
+  return (
+    <footer>
+      <div className="wrapper">
+        <Container>{children}</Container>
+      </div>
+    </footer>
+  );
+};
+
+Footer.Actions = FooterActions;
+Footer.Contact = Contact;
+Footer.Header = FooterHeader;
+Footer.Sites = FooterSites;
+Footer.Social = Social;
+Footer.SubFooter = SubFooter;
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Footer.propTypes = {
+  /**
+   * i18n object
+   */
+};
+
+export default Footer;

package/src/ui/Footer/FooterActions.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const FooterActions = (props) => {
+  if (props.children) {
+    return <div>{props.children}</div>;
+  }
+
+  return (
+    <div className="menu">
+      {props.actions &&
+        props.actions.map((action, index) => (
+          <Link to={action.link} key={index}>
+            {action.copy && <>&copy;</>}
+            {action.title}
+          </Link>
+        ))}
+    </div>
+  );
+};
+
+export default FooterActions;

package/src/ui/Footer/FooterHeader.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const FooterHeader = (props) => {
+  return (
+    <div className="theme-sites">
+      <p className="header">{props.children}</p>
+    </div>
+  );
+};
+export default FooterHeader;

package/src/ui/Footer/FooterSites.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Grid, Image } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+
+const Sites = (props) => {
+  if (props.children) {
+    return <div>{props.children}</div>;
+  }
+
+  //fallback to props
+  return (
+    <div className="theme-sites">
+      <div className="logos">
+        <Grid columns={5}>
+          {props.sites &&
+            props.sites.map((site, index) => (
+              <Grid.Column className="logo" key={index}>
+                <a href={site.link}>
+                  <Image src={site.src} alt={site.alt}></Image>
+                </a>
+              </Grid.Column>
+            ))}
+        </Grid>
+      </div>
+    </div>
+  );
+};
+
+Sites.propTypes = {
+  sites: PropTypes.array,
+};
+
+export default Sites;

package/src/ui/Footer/Social.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Icon } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+
+const Social = (props) => {
+  if (props.children) {
+    return <div>{props.children}</div>;
+  }
+
+  return (
+    <div className="social">
+      {props.social.map((item, index) => (
+        <a href={item.link} aria-label={`${item.name} link`} key={index}>
+          <Icon name={item.name}></Icon>
+        </a>
+      ))}
+    </div>
+  );
+};
+
+Social.propTypes = {
+  social: PropTypes.array,
+};
+
+export default Social;

package/src/ui/Footer/SubFooter.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const SubFooter = (props) => {
+  if (props.children) {
+    return <div>{props.children}</div>;
+  }
+};
+
+export default SubFooter;

package/src/ui/FormFieldWrapper/FormFieldWrapper.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Form, Grid, Label, Message } from 'semantic-ui-react';
+
+function FormFieldWrapper({
+  children,
+  required = false,
+  error = false,
+  label = '',
+  columns = 0,
+}) {
+  return (
+    <Form.Field
+      inline
+      error={error}
+      required={required}
+      className="eea field-wrapper"
+    >
+      <Grid>
+        <Grid.Row verticalAlign="top">
+          {columns === 1 && (
+            <Grid.Column computer="2" tablet="2" mobile="12">
+              {label.length > 0 && (
+                <Label>
+                  {label}
+                  <span className="requred-input">*</span>
+                </Label>
+              )}
+            </Grid.Column>
+          )}
+          <Grid.Column
+            computer={columns === 1 ? '10' : '12'}
+            tablet="10"
+            mobile="12"
+          >
+            {children}
+            {error && (
+              <Message
+                negative
+                content="This is a mandatory field"
+                size="mini"
+                icon="exclamation circle"
+              />
+            )}
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </Form.Field>
+  );
+}
+
+export default FormFieldWrapper;