@eeacms/volto-eea-design-system 0.2.1 → 0.2.4

package/src/ui/Card/Card.stories.jsx

@@ -0,0 +1,249 @@
+import React from 'react';
+import { Card, Image, Grid, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Card/Default',
+  component: Card,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    class: {
+      options: [null, 'primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'card variation class',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: { summary: 'null' },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <Container>
+    <Card fluid={args.fluid} className={args.class}>
+      {args.hasImage && (
+        <Image src={args.imgUrl} wrapped ui={false} alt="card image" />
+      )}
+      <Card.Content>
+        <Card.Header>{args.title}</Card.Header>
+        <Card.Description>{args.description}</Card.Description>
+      </Card.Content>
+      {args.links !== null &&
+        args.links.map((item, index) => (
+          <Card.Content extra key={index}>
+            <a href="/#">{item.linkName}</a>
+          </Card.Content>
+        ))}
+    </Card>
+  </Container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  class: null,
+  imgUrl:
+    'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+  title: 'Lorem Ipsum',
+  description:
+    'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+  hasImage: true,
+  fluid: false,
+  links: [{ linkName: 'Link 1' }],
+};
+Default.argTypes = {
+  imgUrl:
+    'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+  hasImage: {
+    description: 'true if card contains image',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: { summary: true },
+    },
+  },
+  title: {
+    description: 'card header',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  description: {
+    description: 'card main content',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  fluid: {
+    description: 'take up the width of its container',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: { summary: false },
+    },
+  },
+  links: {
+    description: 'array with links to other content',
+    table: {
+      type: {
+        summary: 'Object',
+      },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+};
+
+const GridTemplate = (args) => (
+  <Container>
+    <Grid>
+      {args.cards.map((card) => (
+        <Grid.Column mobile={12} tablet={6} computer={4}>
+          <Card fluid={card.fluid} className={args.class}>
+            {card.hasImage && (
+              <Image src={card.imgUrl} wrapped ui={false} alt="card image" />
+            )}
+            <Card.Content>
+              <Card.Header>{card.title}</Card.Header>
+              <Card.Description>{card.description}</Card.Description>
+            </Card.Content>
+            {card.links !== null &&
+              card.links.map((item, index) => (
+                <Card.Content extra key={index}>
+                  <a href="/#">{item.linkName}</a>
+                </Card.Content>
+              ))}
+          </Card>
+        </Grid.Column>
+      ))}
+    </Grid>
+  </Container>
+);
+
+export const CardGrid = GridTemplate.bind({});
+CardGrid.args = {
+  class: null,
+  cards: [
+    {
+      title: 'Lorem Ipsum',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      hasImage: true,
+      fluid: true,
+      links: [{ linkName: 'Link 1' }],
+    },
+    {
+      title: 'Suspendisse iaculis feugiat',
+      imgUrl:
+        'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      hasImage: true,
+      fluid: true,
+      links: [{ linkName: 'Link 1' }],
+    },
+    {
+      title: 'Eget tellus blandit aenean mattis.',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      hasImage: false,
+      fluid: true,
+      links: [{ linkName: 'Link 1' }],
+    },
+  ],
+};
+CardGrid.argTypes = {
+  cards: {
+    description: 'array with cards data',
+    table: {
+      type: {
+        summary: 'Object',
+      },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+};
+
+const FluidGridTemplate = (args) => (
+  <Container>
+    <div className="fluid-card-row">
+      {args.cards.map((card) => (
+        <Card fluid={card.fluid} className={args.class}>
+          {card.hasImage && (
+            <Image src={card.imgUrl} wrapped ui={false} alt="card image" />
+          )}
+          <Card.Content>
+            <Card.Header>{card.title}</Card.Header>
+            <Card.Description>{card.description}</Card.Description>
+          </Card.Content>
+          {card.links !== null &&
+            card.links.map((item, index) => (
+              <Card.Content extra key={index}>
+                <a href="/#">{item.linkName}</a>
+              </Card.Content>
+            ))}
+        </Card>
+      ))}
+    </div>
+  </Container>
+);
+
+export const FluidGrid = FluidGridTemplate.bind({});
+FluidGrid.args = {
+  class: null,
+  cards: [
+    {
+      title: 'Lorem Ipsum',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      hasImage: true,
+      fluid: true,
+      links: [{ linkName: 'Link 1' }],
+    },
+    {
+      title: 'Suspendisse iaculis feugiat',
+      imgUrl:
+        'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      hasImage: true,
+      fluid: true,
+      links: [{ linkName: 'Link 1' }],
+    },
+    {
+      title: 'Eget tellus blandit aenean mattis.',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      hasImage: false,
+      fluid: true,
+      links: [{ linkName: 'Link 1' }],
+    },
+  ],
+};
+CardGrid.argTypes = {
+  cards: {
+    description: 'array with cards data',
+    table: {
+      type: {
+        summary: 'Object',
+      },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+};

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Card, Image, Container } from 'semantic-ui-react';
+
+const imageUrl =
+  'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini';
+
+export default {
+  title: 'Components/Card/Publication',
+  component: Card,
+  argTypes: {
+    tag: {
+      description: 'publication card tags',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+    description: {
+      description: 'publication card description',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <Container>
+    <Card className="publication tertiary">
+      <Image src={args.image} wrapped ui={false} alt="card image" />
+      <Card.Content>
+        <Card.Meta>{args.tag}</Card.Meta>
+        <Card.Description>{args.description}</Card.Description>
+      </Card.Content>
+    </Card>
+  </Container>
+);
+
+export const PublicationCard = Template.bind({});
+PublicationCard.args = {
+  tag: '#Publication',
+  description:
+    'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+  image: imageUrl,
+};

package/src/ui/Card/RelatedContent/RelatedContent.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Grid, Button, Card, Image } from 'semantic-ui-react';
+
+function RelatedContent({ children, ...rest }) {
+  return (
+    <div className="related-content-wrapper">
+      <Grid>{children}</Grid>
+    </div>
+  );
+}
+
+RelatedContent.Grid = ({ children, ...rest }) => {
+  let cards = rest.publicationCards;
+  if (rest.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 (
+    <>
+      {cards.length > 2
+        ? rows.map((row, rowIndex) => (
+            <Grid.Column
+              key={rowIndex}
+              stretched
+              computer={6}
+              tablet={12}
+              mobile={12}
+            >
+              {row.map((item, index) => (
+                <Card className="publication" key={index}>
+                  <Image src={item.image} wrapped ui={false} alt="card image" />
+                  <Card.Content>
+                    <Card.Meta>{item.tag}</Card.Meta>
+                    <Card.Description>{item.description}</Card.Description>
+                  </Card.Content>
+                </Card>
+              ))}
+            </Grid.Column>
+          ))
+        : cards.map((item, index) => (
+            <Grid.Column
+              key={index}
+              stretched
+              computer={6}
+              tablet={12}
+              mobile={12}
+            >
+              <Card className="publication">
+                <Image src={item.image} wrapped ui={false} alt="card image" />
+                <Card.Content>
+                  <Card.Meta>{item.tag}</Card.Meta>
+                  <Card.Description>{item.description}</Card.Description>
+                </Card.Content>
+              </Card>
+            </Grid.Column>
+          ))}
+
+      {rest.showButton && rest.publicationCards.length > 4 && (
+        <Grid.Row className={!rest.showButton ? 'hidden' : null}>
+          <Grid.Column>
+            <div className="button-wrapper">
+              <Button secondary>{rest.buttonText}</Button>
+            </div>
+          </Grid.Column>
+        </Grid.Row>
+      )}
+    </>
+  );
+};
+
+export default RelatedContent;

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

@@ -0,0 +1,313 @@
+import React from 'react';
+import RelatedContent from './RelatedContent';
+import { Container, Tab } from 'semantic-ui-react';
+
+const imageUrl =
+  'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini';
+
+export default {
+  title: 'Components/Card/Publication',
+  component: RelatedContent,
+  argTypes: {},
+};
+
+const Template = (args) => (
+  <Container>
+    <RelatedContent>
+      <RelatedContent.Grid
+        publicationCards={args.publicationCards}
+        showButton={args.showButton}
+        buttonText={args.buttonText}
+      ></RelatedContent.Grid>
+    </RelatedContent>
+  </Container>
+);
+
+export const DefaultEven = Template.bind({});
+DefaultEven.args = {
+  publicationCards: [
+    {
+      tag: '#Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      image: imageUrl,
+    },
+    {
+      tag: '#Publication',
+      description: 'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
+      image: imageUrl,
+    },
+    {
+      tag: '#Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
+      image: imageUrl,
+    },
+    {
+      tag: '#Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
+      image: imageUrl,
+    },
+    {
+      tag: '#Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      image: imageUrl,
+    },
+  ],
+  buttonText: 'See All',
+  showButton: true,
+};
+
+DefaultEven.argTypes = {
+  publicationCards: {
+    description: 'publication cards data',
+    table: {
+      type: {
+        summary: 'Object',
+      },
+      defaultValue: {
+        summary: '',
+      },
+    },
+  },
+  buttonText: {
+    description: 'related content button text',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: '',
+      },
+    },
+  },
+  showButton: {
+    description: 'show/hide related content button',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: 'false',
+      },
+    },
+  },
+};
+
+export const DefaultOdd = Template.bind({});
+DefaultOdd.args = {
+  publicationCards: [
+    {
+      tag: '#Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      image: imageUrl,
+    },
+    {
+      tag: '#Publication',
+      description: 'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
+      image: imageUrl,
+    },
+    {
+      tag: '#Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
+      image: imageUrl,
+    },
+  ],
+  buttonText: 'See All',
+  showButton: true,
+};
+
+DefaultOdd.argTypes = {
+  publicationCards: {
+    description: 'publication cards data',
+    table: {
+      type: {
+        summary: 'Object',
+      },
+      defaultValue: {
+        summary: '',
+      },
+    },
+  },
+  buttonText: {
+    description: 'related content button text',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: '',
+      },
+    },
+  },
+  showButton: {
+    description: 'show/hide related content button',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: 'false',
+      },
+    },
+  },
+};
+
+const TabTemplate = (args) => (
+  <RelatedContent>
+    <RelatedContent.Grid
+      publicationCards={args.publicationCards}
+      showButton={args.showButton}
+      buttonText={args.buttonText}
+    ></RelatedContent.Grid>
+  </RelatedContent>
+);
+
+function TabWithRelatedContent({ panes }) {
+  let panesToUse = [];
+  if (panes) {
+    panesToUse = panes.map((pane) => {
+      let args = {
+        publicationCards: pane.publicationCards,
+        buttonText: pane.buttonText,
+        showButton: pane.showButton,
+      };
+      return {
+        menuItem: pane.menuItem,
+        render: () => <Tab.Pane>{TabTemplate(args)}</Tab.Pane>,
+      };
+    });
+  }
+
+  return (
+    <Container>
+      <Tab
+        panes={panesToUse}
+        menu={{
+          secondary: true,
+          pointing: true,
+        }}
+      />
+    </Container>
+  );
+}
+
+export const RelatedContentInTab = (args) => (
+  <TabWithRelatedContent {...args}></TabWithRelatedContent>
+);
+RelatedContentInTab.args = {
+  panes: [
+    {
+      menuItem: 'Briefings',
+      publicationCards: [
+        {
+          tag: '#Publication',
+          description:
+            'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+          image: imageUrl,
+        },
+      ],
+      buttonText: 'See All',
+      showButton: true,
+    },
+    {
+      menuItem: 'News and articles',
+      publicationCards: [
+        {
+          tag: '#Publication',
+          description:
+            'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+          image: imageUrl,
+        },
+        {
+          tag: '#Publication',
+          description:
+            'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
+          image: imageUrl,
+        },
+      ],
+      buttonText: 'See All',
+      showButton: true,
+    },
+    {
+      menuItem: 'Publications',
+      publicationCards: [
+        {
+          tag: '#Publication',
+          description:
+            'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+          image: imageUrl,
+        },
+        {
+          tag: '#Publication',
+          description:
+            'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
+          image: imageUrl,
+        },
+        {
+          tag: '#Publication',
+          description:
+            'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
+          image: imageUrl,
+        },
+      ],
+      buttonText: 'See All',
+      showButton: true,
+    },
+    {
+      menuItem: 'See also',
+      publicationCards: [
+        {
+          tag: '#Publication',
+          description:
+            'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+          image: imageUrl,
+        },
+        {
+          tag: '#Publication',
+          description:
+            'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
+          image: imageUrl,
+        },
+        {
+          tag: '#Publication',
+          description:
+            'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
+          image: imageUrl,
+        },
+        {
+          tag: '#Publication',
+          description:
+            'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
+          image: imageUrl,
+        },
+        {
+          tag: '#Publication',
+          description:
+            'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+          image: imageUrl,
+        },
+      ],
+      buttonText: 'See All',
+      showButton: true,
+    },
+  ],
+};
+
+RelatedContentInTab.argTypes = {
+  panes: {
+    description: 'tab menu items and content data',
+    table: {
+      type: {
+        summary: 'Object',
+      },
+      defaultValue: {
+        summary: '',
+      },
+    },
+  },
+};