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

package/src/ui/RelatedContent/RelatedContent.jsx

@@ -1,90 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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/theme/themes/eea/extras/avatar.less

@@ -1,97 +0,0 @@
-@type: 'extra';
-@element: 'avatar';
-
-@import (multiple) '../../theme.config';
-
-/*-------------------
-      AVATAR
---------------------*/
-
-.eea.avatar.big {
-  width: @avatarWidthBig;
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: @avatarWrapperWidth;
-
-    .image-wrapper {
-      width: @avatarImageWrapperWidth;
-      display: flex;
-      justify-content: center;
-
-      .image {
-        height: @avatarImageHeightBig;
-        width: @avatarImageWidthBig;
-        border-radius: @avatarImageBorderRadius;
-        background-position: center;
-        background-size: contain;
-      }
-    }
-    .content-wrapper {
-      width: @avatarContentWrapperWidth;
-      .content {
-        margin-top: @avatarContentMarginTop;
-        .title {
-          font-weight: @avatarContentTitleFontWeight;
-          text-align: center;
-          font-size: @avatarContentTitleFontSize;
-          line-height: @avatarContentTitleLineHeight;
-          letter-spacing: @avatarContentTitleLetterSpacing;
-          margin-bottom: @avatarContentTitleMarginBottom;
-        }
-        .metadata {
-          text-align: center;
-          font-size: @avatarMetadataFontSize;
-          font-weight: @avatarMetadataFontWeight;
-          margin-top: @avatarMetadataMarginTop;
-        }
-      }
-    }
-  }
-}
-
-.eea.avatar.small {
-  width: @avatarWidthSmall;
-  .wrapper {
-    width: @avatarWrapperWidth;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .image-wrapper {
-      width: @avatarImageWrapperWidth;
-      display: flex;
-      justify-content: center;
-
-      .image {
-        height: @avatarImageHeightSmall;
-        width: @avatarImageWidthSmall;
-        border-radius: @avatarImageBorderRadius;
-        background-position: center;
-        background-size: contain;
-      }
-    }
-
-    .content-wrapper {
-      width: @avatarContentWrapperWidth;
-      .content {
-        margin-top: @avatarContentMarginTopSmall;
-        .title {
-          font-weight: @avatarContentTitleFontWeightSmall;
-          color: @darkCyan;
-          text-align: center;
-          font-size: @avatarContentTitleFontSizeSmall;
-          line-height: @avatarContentTitleLineHeightSmall;
-          letter-spacing: @avatarContentTitleLetterSpacing;
-          margin-bottom: @avatarContentTitleMarginBottom;
-        }
-        .metadata {
-          text-align: center;
-          font-size: @avatarMetadataFontSizeSmall;
-          font-weight: @avatarMetadataFontWeightSmall;
-        }
-      }
-    }
-  }
-}

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

@@ -1,34 +0,0 @@
-/*******************************
-            Avatar
-*******************************/
-
-/* Big */
-@avatarWidthBig                 : 100%;
-@avatarWrapperWidth             : 100%;
-@avatarImageWrapperWidth        : 100%;
-@avatarImageHeightBig           : 150px;
-@avatarImageWidthBig            : 150px;
-@avatarImageBorderRadius        : 50%;
-@avatarContentWrapperWidth      : 100%;
-@avatarContentMarginTop         : 17.84px;
-@avatarContentTitleFontWeight   : 700;
-@avatarContentTitleFontSize     : 36px;
-@avatarContentTitleLineHeight   : 54px;
-@avatarContentTitleLetterSpacing: -0.015em;
-@avatarContentTitleMarginBottom : 0px;
-@avatarMetadataFontSize         : 24px;
-@avatarMetadataFontWeight       : 400;
-@avatarMetadataMarginTop        : 8.84px;
-
-
-/* Small */
-@avatarWidthSmall                       : 100%;
-@avatarImageHeightSmall                 : 130px;
-@avatarImageWidthSmall                  : 130px;
-@avatarContentMarginTopSmall            : 20px;
-@avatarContentTitleFontWeightSmall      : 500;
-@avatarContentTitleFontSizeSmall        : 20px;
-@avatarContentTitleLineHeightSmall      : 30px;
-@avatarMetadataFontSizeSmall            : 16px;
-@avatarMetadataFontWeightSmall          : 300;
-@avatarMetadataMarginTop                : 8.84px;

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

@@ -1,62 +0,0 @@
-@type: 'extra';
-@element: 'publicationCard';
-
-@import (multiple) '../../theme.config';
-
-/*-------------------
-  Publication Card
---------------------*/
-
-.eea.publication.card {
-  color: @publicationCardtextColor;
-  //position: relative;
-  height: @publicationCardHeight;
-  background-color: @publicationCardBackgroundColor;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  a {
-    display: contents;
-    text-decoration: none;
-    color: @publicationCardtextColor;
-    cursor: pointer;
-  }
-
-  .header {
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    height: calc(100% - @cardDescriptionMaxHeight);
-  }
-
-  .description {
-    background-color: @publicationCardDescriptionColor;
-    height: @cardDescriptionHeight;
-    padding: @cardDescriptionPadding;
-    //position: absolute;
-    //bottom: 0;
-    width: @cardDescriptionWidth;
-    max-height: @cardDescriptionMaxHeight;
-
-    .tag {
-      font-size: @cardDescriptionTagFontSize;
-      font-weight: @cardDescriptionTagFontWeight;
-    }
-
-    .text {
-      font-size: @cardDescriptionTextFontSize;
-      font-weight: @cardDescriptionTextFontWeight;
-    }
-  }
-}
-
-@media only screen and (min-width: @computerBreakpoint) {
-  .eea.publication.card {
-    margin: @publicationCardMargin;
-
-    .description {
-      height: @computerCardDescriptionHeight;
-    }
-  }
-}

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

@@ -1,24 +0,0 @@
-/*-------------------
-  Publication Card
---------------------*/
-
-@publicationCardtextColor: @white;
-@publicationCardMargin: 10px 0;
-@publicationCardHeight: 268px;
-
-/* Colors */
-@publicationCardBackgroundColor: #BCBEC0;
-@publicationCardDescriptionColor: #3D5265;
-
-/* Description */
-@cardDescriptionHeight: auto;
-@cardDescriptionMaxHeight: 135px;
-@computerCardDescriptionHeight: auto;
-@cardDescriptionPadding: 20px;
-@cardDescriptionWidth: 100%;
-
-@cardDescriptionTagFontSize: 12px;
-@cardDescriptionTagFontWeight: 400;
-@cardDescriptionTextFontSize: 16px;
-@cardDescriptionTextFontWeight: 700;
-