@eeacms/volto-eea-design-system 0.2.1

package/src/ui/Logo/Logo.jsx

@@ -0,0 +1,31 @@
+/**
+ * Logo component.
+ * @module components/theme/Logo/Logo
+ */
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Image } from 'semantic-ui-react';
+
+/**
+ * Logo component class.
+ * @function Logo
+ * @param {Object} intl Intl object
+ * @returns {string} Markup of the component.
+ */
+const Logo = ({ src, id, url, alt, title }) => {
+  return (
+    <Link to={url} title={title}>
+      <Image
+        src={src}
+        alt={alt}
+        title={title}
+        //height={64}
+        className="eea-logo"
+        id={id}
+      />
+    </Link>
+  );
+};
+
+export default Logo;

package/src/ui/Popup/Popup.stories.jsx

@@ -0,0 +1,97 @@
+import { React } from 'react';
+import { Button, Segment, Popup, Image, Icon } from 'semantic-ui-react';
+import EUflag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/europe-flag.svg';
+
+export default {
+  title: 'Components/Popup',
+  component: Popup,
+  argTypes: {
+    content: {
+      description: 'popup text',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+    position: {
+      options: [
+        'top left',
+        'top center',
+        'top right',
+        'left center',
+        'right center',
+        'bottom left',
+        'bottom center',
+        'bottom right',
+      ],
+      control: { type: 'select' },
+      description: 'Popup position around its trigger.',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'top center',
+        },
+      },
+    },
+    size: {
+      options: ['mini', 'tiny', 'small', 'large', 'huge'],
+      control: { type: 'select' },
+      description: 'Popup size.',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'small',
+        },
+      },
+    },
+  },
+};
+
+export const ButtonPopup = (args) => (
+  <Segment placeholder>
+    <Popup
+      {...args}
+      trigger={
+        <Button icon labelPosition="right" className="action">
+          Info Popup
+          <Icon name="info" />
+        </Button>
+      }
+    />
+  </Segment>
+);
+ButtonPopup.args = {
+  content: 'Popup text for button',
+  position: 'top center',
+  size: 'small',
+};
+
+export const ImagePopup = (args) => (
+  <Segment placeholder className="flex align center">
+    <Popup
+      {...args}
+      trigger={
+        <Image
+          src={EUflag}
+          alt="EU Flag"
+          title="EU Flag"
+          width={150}
+          className="eu-flag"
+        />
+      }
+    />
+  </Segment>
+);
+ImagePopup.args = {
+  content: 'Popup text for image',
+  position: 'top center',
+  size: 'small',
+};

package/src/ui/PublicationCard/PublicationCard.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+function PublicationCard({ children, ...rest }) {
+  return (
+    <div className="eea publication card">
+      <a href={rest.href}>{children}</a>
+    </div>
+  );
+}
+
+PublicationCard.Header = ({ children, ...rest }) => (
+  <div
+    className="header"
+    style={rest.image ? { backgroundImage: `url(${rest.image_url})` } : {}}
+  >
+    {children}
+  </div>
+);
+
+PublicationCard.Info = ({ children, ...rest }) => (
+  <div className="description">
+    <div className="tag">#{rest.tag}</div>
+    <p className="text">{rest.description}</p>
+  </div>
+);
+
+export default PublicationCard;

package/src/ui/PublicationCard/PublicationCard.stories.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import PublicationCard from './PublicationCard';
+
+const imageUrl =
+  'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini';
+
+export default {
+  title: 'Components/PublicationCard',
+  component: PublicationCard,
+  argTypes: {
+    tag: {
+      description: 'publication tags',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+    description: {
+      description: 'publication description',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+    href: {
+      description: 'publication link url',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <PublicationCard {...args}>
+    <PublicationCard.Header
+      image_url={args.image ? imageUrl : null}
+      image={args.image}
+    />
+    <PublicationCard.Info description={args.description} tag={args.tag} />
+  </PublicationCard>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  tag: 'Publication',
+  description:
+    'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+  href: '/#',
+};
+
+export const PublicationCardWithImage = Template.bind({});
+PublicationCardWithImage.args = {
+  tag: 'Publication',
+  description:
+    'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+  image: true,
+  href: '/#',
+};
+PublicationCardWithImage.argTypes = {
+  image: {
+    description: 'set or unset publication backgroung image',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: 'false' },
+    },
+  },
+};

package/src/ui/Pullquote/Pullquote.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Icon } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+
+Pullquote.propTypes = {
+  quote: PropTypes.string,
+  source: PropTypes.string,
+  quotePosition: PropTypes.oneOf(['left', 'right', 'none', 'inherit']),
+};
+
+function Pullquote({ children, ...rest }) {
+  return (
+    <blockquote className={`eea pullquote ${rest.quotePosition}`}>
+      <div className="content">{children}</div>
+    </blockquote>
+  );
+}
+
+Pullquote.Quote = ({ children, as: As, ...rest }) => (
+  <div className="quotes wrapper">
+    <Icon className="ri-double-quotes-l"></Icon>
+    {As ? (
+      <As className="quote" {...rest}>
+        {children}
+      </As>
+    ) : (
+      <p className="quote">{children}</p>
+    )}
+    <Icon className="ri-double-quotes-r"></Icon>
+  </div>
+);
+
+Pullquote.Author = ({ children, ...rest }) => (
+  <p className="author" {...rest}>
+    {children}
+  </p>
+);
+
+Pullquote.Metadata = ({ children, ...rest }) => (
+  <p className="meta" {...rest}>
+    {children}
+  </p>
+);
+export default Pullquote;

package/src/ui/Pullquote/Pullquote.stories.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import Pullquote from './Pullquote';
+import { Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Pullquote',
+  component: Pullquote,
+  argTypes: {
+    quote: {
+      description: 'Pullquote content',
+      type: { name: 'string' },
+      table: {
+        defaultValue: { summary: '""' },
+      },
+    },
+    source: {
+      description: 'source of quote',
+      type: { name: 'string' },
+      table: {
+        defaultValue: { summary: '""' },
+      },
+    },
+    metadata: {
+      description: 'quote metadata',
+      type: { name: 'string' },
+      table: {
+        defaultValue: { summary: '""' },
+      },
+    },
+    content: {
+      description: 'content that quote floats around',
+      type: { name: 'string' },
+      table: {
+        defaultValue: { summary: '""' },
+      },
+    },
+    quotePosition: {
+      control: {
+        type: 'inline-radio',
+        options: ['left', 'right', 'none', 'inherit'],
+      },
+      description: 'direction that quote floats to',
+      type: { name: 'string' },
+      table: {
+        defaultValue: { summary: '""' },
+      },
+    },
+  },
+};
+
+export const Default = (args) => (
+  <Container>
+    <p>{args.content}</p>
+    <Pullquote quotePosition={args.quotePosition}>
+      <Pullquote.Quote>{args.quote}</Pullquote.Quote>
+      <Pullquote.Author>{args.source}</Pullquote.Author>
+      <Pullquote.Metadata>{args.metadata}</Pullquote.Metadata>
+    </Pullquote>
+    <p>{args.content}</p>
+    <p>{args.content}</p>
+    <p>{args.content}</p>
+    <p>{args.content}</p>
+    <p>{args.content}</p>
+  </Container>
+);
+
+Default.args = {
+  quote:
+    'Nulla viverra magna curabitur leo nisl scelerisque. Velit fusce sed sem ut. Molestie fermentum congue nunc cras posuere orci. Duis eu ultrices nisi, est a pellentesque eget tellus mauris. Amet, tortor quis pellentesque suspendisse convallis lacinia. Aliquam.',
+  source: 'Arthur Abbott',
+  metadata: 'EEA Analyst',
+  content:
+    'Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Venenatis tellus in metus vulputate eu. Sagittis id consectetur purus ut. Ultricies mi eget mauris pharetra et ultrices. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget.',
+  quotePosition: 'left',
+};
+
+export const Reversed = (args) => (
+  <Container>
+    <p>{args.content}</p>
+    <Pullquote quotePosition={args.quotePosition}>
+      <Pullquote.Author>{args.source}</Pullquote.Author>
+      <Pullquote.Metadata>{args.metadata}</Pullquote.Metadata>
+      <Pullquote.Quote>{args.quote}</Pullquote.Quote>
+    </Pullquote>
+    <p>{args.content}</p>
+    <p>{args.content}</p>
+    <p>{args.content}</p>
+    <p>{args.content}</p>
+    <p>{args.content}</p>
+  </Container>
+);
+
+Reversed.args = {
+  quote:
+    'Nulla viverra magna curabitur leo nisl scelerisque. Velit fusce sed sem ut. Molestie fermentum congue nunc cras posuere orci. Duis eu ultrices nisi, est a pellentesque eget tellus mauris. Amet, tortor quis pellentesque suspendisse convallis lacinia. Aliquam.',
+  source: 'Arthur Abbott',
+  metadata: 'EEA Analyst',
+  content:
+    'Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Venenatis tellus in metus vulputate eu. Sagittis id consectetur purus ut. Ultricies mi eget mauris pharetra et ultrices. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget.',
+  quotePosition: 'left',
+};

package/src/ui/RelatedContent/RelatedContent.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Grid, Container } from 'semantic-ui-react';
+import PublicationCard from '../PublicationCard/PublicationCard';
+
+function RelatedContent({ publicationCards }) {
+  let cards = publicationCards;
+  if (publicationCards.length > 4) {
+    cards = cards.slice(0, 4);
+  }
+  const rows = cards.reduce(function (rows, key, index) {
+    return (
+      (index % 2 === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) &&
+      rows
+    );
+  }, []);
+
+  return (
+    <div className="related-content-wrapper">
+      <Container>
+        {/* desktop grid */}
+        <Grid columns={2} className="tablet or lower hidden">
+          {cards.length > 2
+            ? rows.map((row, rowIndex) => (
+                <Grid.Column key={rowIndex} stretched>
+                  {row.map((item, index) => (
+                    <PublicationCard {...item} key={index}>
+                      <PublicationCard.Header></PublicationCard.Header>
+                      <PublicationCard.Info
+                        description={item.description}
+                        tag={item.tag}
+                      ></PublicationCard.Info>
+                    </PublicationCard>
+                  ))}
+                </Grid.Column>
+              ))
+            : cards.map((item, index) => (
+                <Grid.Column key={index} stretched>
+                  <PublicationCard {...item}>
+                    <PublicationCard.Header></PublicationCard.Header>
+                    <PublicationCard.Info
+                      description={item.description}
+                      tag={item.tag}
+                    ></PublicationCard.Info>
+                  </PublicationCard>
+                </Grid.Column>
+              ))}
+        </Grid>
+
+        {/* mobile grid */}
+        <Grid className="mobile only" columns={1}>
+          {cards.map((item, index) => (
+            <Grid.Column key={index}>
+              <PublicationCard {...item}>
+                <PublicationCard.Header></PublicationCard.Header>
+                <PublicationCard.Info
+                  description={item.description}
+                  tag={item.tag}
+                ></PublicationCard.Info>
+              </PublicationCard>
+            </Grid.Column>
+          ))}
+        </Grid>
+
+        {/* tablet grid */}
+        <Grid className="tablet only">
+          {cards.map((item, index) => (
+            <Grid.Column
+              key={index}
+              tablet={
+                cards.length % 2 !== 0 && index === cards.length - 1
+                  ? '12'
+                  : '6'
+              }
+            >
+              <PublicationCard {...item}>
+                <PublicationCard.Header></PublicationCard.Header>
+                <PublicationCard.Info
+                  description={item.description}
+                  tag={item.tag}
+                ></PublicationCard.Info>
+              </PublicationCard>
+            </Grid.Column>
+          ))}
+        </Grid>
+      </Container>
+    </div>
+  );
+}
+
+export default RelatedContent;

package/src/ui/RelatedContent/RelatedContent.stories.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import RelatedContent from './RelatedContent';
+
+export default {
+  title: 'Components/Related Content',
+  component: RelatedContent,
+  argTypes: {
+    publicationCards: {
+      description: 'publication cards data',
+      table: {
+        type: {
+          summary: 'Object',
+        },
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <div>
+    <RelatedContent {...args}></RelatedContent>
+  </div>
+);
+
+export const DefaultEven = Template.bind({});
+DefaultEven.args = {
+  publicationCards: [
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
+  ],
+};
+
+export const DefaultOdd = Template.bind({});
+DefaultOdd.args = {
+  publicationCards: [
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
+  ],
+};

package/src/ui/Segment/Segment.stories.jsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import { Segment } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Segment',
+  component: Segment,
+  argTypes: {
+    children: {
+      description: 'primary content',
+      table: {
+        type: {
+          summary: 'node',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+    basic: {
+      description: 'no special formatting',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    circular: {
+      description: 'a segment can be circular',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    compact: {
+      description: 'take up only as much space as is necessary',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    disabled: {
+      description: 'show its content is disabled',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    loading: {
+      description: 'show its content is being loaded',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    raised: {
+      description: 'formatted to raise above the page',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    secondary: {
+      description: 'formatted to appear less noticeable',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    stacked: {
+      description: 'show it contains multiple pages',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    tertiary: {
+      description: 'appear even less noticeable',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    vertical: {
+      description: 'content aligned vertically',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <div className="eea">
+    <Segment className="eea-segment" {...args}>
+      {args.children[0]}
+    </Segment>
+    <Segment className="eea-segment" {...args}>
+      {args.children[1]}
+    </Segment>
+    <Segment className="eea-segment" {...args}>
+      {args.children[2]}
+    </Segment>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: [
+    'Te eum doming eirmod, nominati pertinacia argumentum ad his.',
+    'Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id.',
+    'Pellentesque habitant morbi tristique senectus.',
+  ],
+  basic: false,
+  circular: false,
+  compact: false,
+  disabled: false,
+  loading: false,
+  raised: false,
+  secondary: false,
+  stacked: false,
+  tertiary: false,
+  vertical: false,
+};