@eeacms/volto-eea-design-system 1.0.6 → 1.11.0

package/src/ui/Card/AvatarGrid/AvatarGrid.jsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Grid, Card, Image } from 'semantic-ui-react';
-
-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.Group = ({ children, ...rest }) => {
-  let avatars = rest.avatars;
-
-  return (
-    <div className="avatar group">
-      <Grid>
-        {avatars.map((avatar, index) => (
-          <Grid.Column key={index} mobile={12} tablet={4} computer={4}>
-            <div className="avatar-wrapper">
-              <Card
-                className={`eea rounded ${
-                  rest.variant === 'default' ? '' : rest.variant
-                } ${rest.inverted ? 'inverted' : ''}`}
-                fluid={rest.fluid}
-              >
-                {rest.hasLink ? (
-                  <Image
-                    as="a"
-                    href={rest.href}
-                    src={avatar.src}
-                    wrapped
-                    ui={false}
-                    alt="card image"
-                  />
-                ) : (
-                  <Image src={avatar.src} wrapped ui={false} alt="card image" />
-                )}
-                <Card.Content>
-                  {rest.hasLink ? (
-                    <Card.Header>
-                      <a href={rest.href}>{avatar.title}</a>
-                    </Card.Header>
-                  ) : (
-                    <Card.Header>{avatar.title}</Card.Header>
-                  )}
-                  <Card.Description>{avatar.description}</Card.Description>
-                </Card.Content>
-              </Card>
-            </div>
-          </Grid.Column>
-        ))}
-      </Grid>
-    </div>
-  );
-};
-export default AvatarGrid;

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

@@ -1,89 +0,0 @@
-import React from 'react';
-// eslint-disable-next-line import/no-unresolved
-import AvatarGrid from './AvatarGrid';
-import { Container } from 'semantic-ui-react';
-import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/avatar.png';
-
-export default {
-  title: 'Components/Card/Rounded Card',
-  component: AvatarGrid,
-  argTypes: {
-    variant: {
-      options: ['default', 'primary', 'secondary', 'tertiary'],
-      control: { type: 'select' },
-      description: 'card variation class',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: { summary: 'default' },
-      },
-    },
-    inverted: {
-      description: 'Inverted card',
-      table: {
-        defaultValue: { summary: 'false' },
-        type: { summary: 'boolean' },
-      },
-    },
-    fluid: {
-      description: 'take up the width of its container',
-      table: {
-        type: {
-          summary: 'boolean',
-        },
-        defaultValue: { summary: false },
-      },
-    },
-    hasLink: {
-      description: 'Clickable card',
-      table: {
-        defaultValue: { summary: 'true' },
-        type: { summary: 'boolean' },
-      },
-    },
-    avatars: {
-      description: 'avatar data',
-      table: {
-        type: { summary: 'Object' },
-        defaultValue: { summary: ' "" ' },
-      },
-    },
-  },
-};
-
-const GridTemplate = (args) => (
-  <Container>
-    <AvatarGrid>
-      <AvatarGrid.Content>
-        <AvatarGrid.Group avatars={args.avatars} {...args}></AvatarGrid.Group>
-      </AvatarGrid.Content>
-    </AvatarGrid>
-  </Container>
-);
-
-export const RoundedGrid = GridTemplate.bind({});
-RoundedGrid.args = {
-  variant: 'default',
-  inverted: false,
-  fluid: false,
-  hasLink: true,
-  href: '/#',
-  avatars: [
-    {
-      src: imgUrl,
-      title: 'Lorem Ipsum',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    },
-    {
-      src: imgUrl,
-      title: 'Lorem Ipsum',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    },
-    {
-      src: imgUrl,
-      title: 'Lorem Ipsum',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    },
-  ],
-};

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

@@ -1,122 +0,0 @@
-import React from 'react';
-import { Card, Image, Container } from 'semantic-ui-react';
-import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/avatar.png';
-
-export default {
-  title: 'Components/Card/Rounded Card',
-  component: Card,
-  parameters: {
-    actions: {
-      handles: ['click'],
-    },
-  },
-  argTypes: {
-    variant: {
-      options: ['default', 'primary', 'secondary', 'tertiary'],
-      control: { type: 'select' },
-      description: 'card variation class',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: { summary: 'null' },
-      },
-    },
-    inverted: {
-      description: 'Inverted card',
-      table: {
-        defaultValue: { summary: 'false' },
-        type: { summary: 'boolean' },
-      },
-    },
-    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 },
-      },
-    },
-    src: {
-      description: 'rounded card image url',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: { summary: ' "" ' },
-      },
-    },
-    hasLink: {
-      description: 'Clickable card',
-      table: {
-        defaultValue: { summary: 'true' },
-        type: { summary: 'boolean' },
-      },
-    },
-  },
-};
-
-const AvatarTemplate = (args) => (
-  <Container>
-    <Card
-      className={`rounded ${args.variant === 'default' ? '' : args.variant} ${
-        args.inverted ? 'inverted' : ''
-      }`}
-      fluid={args.fluid}
-    >
-      {args.hasLink ? (
-        <Image
-          as="a"
-          href={args.href}
-          src={args.src}
-          wrapped
-          ui={false}
-          alt="card image"
-        />
-      ) : (
-        <Image src={args.src} wrapped ui={false} alt="card image" />
-      )}
-      <Card.Content>
-        {args.hasLink ? (
-          <Card.Header>
-            <a href={args.href}>{args.title}</a>
-          </Card.Header>
-        ) : (
-          <Card.Header>{args.title}</Card.Header>
-        )}
-        <Card.Description>{args.description}</Card.Description>
-      </Card.Content>
-    </Card>
-  </Container>
-);
-
-export const Default = AvatarTemplate.bind({});
-Default.args = {
-  variant: 'default',
-  inverted: false,
-  src: imgUrl,
-  title: 'Lorem Ipsum',
-  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-  fluid: false,
-  hasLink: true,
-  href: '/#',
-};

package/theme/themes/eea/extras/avatar.variables

@@ -1,28 +0,0 @@
-/*******************************
-            Avatar
-*******************************/
-
-/* Global */
-@avatarWidth                    : 100%;
-@avatarWrapperWidth             : 100%;
-@avatarWrapperGap               : @largeGap;
-@avatarContentWrapperWidth      : 100%;
-@avatarImageBorderRadius        : 50%;
-@avatarContentTitleMarginBottom : 0;
-@avatarImageWrapperWidth        : 100%;
-@avatarImageBackgroundSize      : cover;
-@avatarContentTitleFontWeight   : @bold;
-@avatarContentTitleFontSize     : 1.25rem;
-
-/* Big */
-@avatarBigImageHeight           : 173px;
-@avatarBigImageWidth            : 173px;
-@avatarBigMetadataFontSize      : 1.25rem;
-@avatarBigMetadataFontWeight    : @normal;
-
-/* Small */
-@avatarSmallImageHeight         : 135px;
-@avatarSmallImageWidth          : 135px;
-@avatarSmallTitleColor          : @secondaryColor;
-@avatarSmallMetadataFontSize    : 1rem;
-@avatarSmallMetadataFontWeight  : 300;

package/theme/themes/eea/extras/avatarGrid.less

@@ -1,43 +0,0 @@
-@type: 'extra';
-@element: 'avatarGrid';
-
-@import (multiple) '../../theme.config';
-
-/*-------------------
-      AVATAR GRID
---------------------*/
-
-.eea.avatar-grid {
-  width: @avatarGridWidth;
-
-  .wrapper {
-    width: @avatarGridWrapperWidth;
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      width: @avatarGridContentWidth;
-    }
-  }
-}
-
-.eea.avatar-grid {
-  .grid-title {
-    text-align: @avatarGridContentTitleTextAlign;
-    width: @avatarGridContentTitleWidth;
-    margin: @avatarGroupMargin;
-  }
-
-  .grid-title.hidden {
-    display: none;
-  }
-}
-
-.eea.avatar-grid .avatar.group {
-  display: flex;
-  justify-content: center;
-  width: @avatarGroupWidth;
-  margin: @avatarGroupMargin;
-}
-
-.loadUIOverrides();

package/theme/themes/eea/extras/avatarGrid.variables

@@ -1,16 +0,0 @@
-/*******************************
-            Avatar Grid
-*******************************/
-
-@avatarGridWidth                    : 100%;
-@avatarGridWrapperWidth             : 100%;
-@avatarGridContentWidth             : 100%;
-
-/* Grid Title */
-@avatarGridContentTitleTextAlign    : center;
-@avatarGridContentTitleWidth        : 100%;
-@avatarGridContentTitleFontWeight   : @bold;
-
-/* Avatar Group */
-@avatarGroupWidth                   : 100%;
-@avatarGroupMargin                  : @largeGap 0;