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

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;