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

package/theme/themes/eea/globals/site.variables

@@ -56,11 +56,11 @@
 @primaryColor         : @darkCerulean;
 @secondaryColor       : @pineGreen;
 
-@lightPrimaryColor    : @darkCyan;
-@lightSecondaryColor  : @mediumPersianBlue;
+@lightPrimaryColor    : @mediumPersianBlue;
+@lightSecondaryColor  : @darkCyan;
 
-@darkPrimaryColor     : @bottleGreen;
-@darkSecondaryColor   : @darkMidnightBlue;
+@darkPrimaryColor     : @darkMidnightBlue;
+@darkSecondaryColor   : @bottleGreen;
 
 /*--------------
   Page Heading
@@ -284,10 +284,15 @@
 --------------------*/
 
 @mobileBreakpoint            : 320px;
-@tabletBreakpoint            : 480px;
-@computerBreakpoint          : 835px;
-@largeMonitorBreakpoint      : 1025px;
-@widescreenMonitorBreakpoint : 1200px;
+@mobileLandscapeBreakpoint   : 480px;  // introduced for the design system
+@tabletBreakpoint            : 768px;
+@contentBreakpoint           : 835px; // introduced for the design system
+@computerBreakpoint          : 992px;
+@smallMonitorBreakpoint      : 1024px; // introduced for the design system
+@largeMonitorBreakpoint      : 1200px;
+@laptopMonitorBreakpoint     : 1280px; // introduced for the design system
+@siteBreakpoint              : 1400px; // introduced for the design system
+@widescreenMonitorBreakpoint : 1920px;
 
 /* Paddings for breakpoints */
 @mobilePadding  : 1.875rem;
@@ -428,9 +433,9 @@
 @progressBarFrom0to30    : @midBlue;
 @progressBarFrom30to40   : @mediumPersianBlue;
 @progressBarFrom40to60   : @mediumPersianBlue;
-@progressBarFrom60to70   : @darkCyan;
-@progressBarFrom70to90   : @darkCyan;
-@progressBarFrom90to100  : @pineGreen;
+@progressBarFrom60to70   : @pineGreen;
+@progressBarFrom70to90   : @pineGreen;
+@progressBarFrom90to100  : @bottleGreen;
 
 /*-------------------
      Alpha Colors
@@ -664,7 +669,6 @@
 @largestTabletScreen : (@computerBreakpoint - @1px);
 @largestSmallMonitor : (@largeMonitorBreakpoint - @1px);
 @largestLargeMonitor : (@widescreenMonitorBreakpoint - @1px);
-@mobileWidth: 1279px;
 
 
 /*-------------------

package/theme/themes/eea/modules/modal.overrides

@@ -1,3 +1,7 @@
 /*******************************
          Theme Overrides
 *******************************/
+
+.ui.modal > :last-child {
+  overflow: hidden; // clear floats from modal
+}

package/theme/themes/eea/modules/progress.variables

@@ -40,7 +40,7 @@
 @progressLeft: auto;
 @progressBottom: auto;
 @progressOffset: -0.5em;
-@progressColor: @invertedLightTextColor;
+@progressColor: @white;
 @progressTextShadow: none;
 @progressFontWeight: @bold;
 @progressTextAlign: left;

package/theme/themes/eea/modules/tab.overrides

@@ -11,3 +11,27 @@
     color: @tabActiveItemHoverColor;
   }
 }
+
+// Contain images inside vertical tab content
+.stretched.wide.column > .tab img {
+  max-width: @verticalTabPaneImageMaxWidth;
+}
+
+.ui.pointing.secondary.menu::-webkit-scrollbar {
+  height: @mobileTabScrollbarHeight;
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .ui.pointing.secondary.menu::-webkit-scrollbar {
+    height: @tabletTabScrollbarHeight;
+  }
+}
+
+@media only screen and (max-width: @largestMobileScreen) {
+  .ui.pointing.secondary.vertical.menu {
+    .item {
+      padding: @mobileItemPadding;
+      font-size: @mobileItemFontSize;
+    }
+  }
+}

package/theme/themes/eea/modules/tab.variables

@@ -4,6 +4,9 @@
 
 @tabActiveItemHoverColor: @secondaryColor;
 
+@mobileItemFontSize: 1rem;
+@mobileItemPadding: 1rem 0.25rem;
+
 @headerSize: @h4;
 @headerSizeResponsive: @fontSize;
 @contentSize: @fontSize;
@@ -14,4 +17,11 @@
 @loadingContentOffset: -10000px;
 
 @loaderDistanceFromTop: 100px;
-@loaderSize: 2.5em;
+@loaderSize: 2.5em;
+
+/* Scrollbar */
+@mobileTabScrollbarHeight: 0;
+@tabletTabScrollbarHeight: 0.3rem;
+
+/* Images */
+@verticalTabPaneImageMaxWidth: 100%;

package/theme/themes/eea/views/card.overrides

@@ -2,31 +2,6 @@
          Theme Overrides
 *******************************/
 
-/* Inverted Card */
-.ui.card.inverted {
-  background: @invertedBackground;
-
-  > .content > .header {
-    color: @invertedHeaderColor;
-  }
-
-  > .content > .description {
-    color: @invertedDescriptionColor;
-  }
-
-  > .extra.content a:not(.ui) {
-    color: @invertedExtraLinkColor;
-
-    &:hover {
-      color: @invertedExtraLinkHoverColor;
-    }
-  }
-
-  > .content > .meta {
-    color: @invertedMetaColor;
-  }
-}
-
 /* Avoid long links from spilling outside of card body area */
 .ui.cards > .card > .extra,
 .ui.card > .extra {
@@ -71,3 +46,245 @@
 .ui.right.card {
   margin-left: auto;
 }
+
+/*******************************
+            Primary
+*******************************/
+
+.ui.card.primary {
+  background: @primaryBackground;
+}
+
+.ui.card.primary > .content > .header {
+  color: @primaryHeaderColor;
+}
+
+.ui.card.primary > .content > .description {
+  color: @primaryDescriptionColor;
+}
+
+.ui.card.primary > .extra.content a:not(.ui) {
+  color: @primaryExtraLinkColor;
+
+  &:hover {
+    color: @primaryExtraLinkHoverColor;
+  }
+}
+
+.ui.card.primary > .content > .meta {
+  color: @primaryMetaColor;
+}
+
+/*******************************
+            Secondary
+*******************************/
+
+.ui.card.secondary {
+  background: @secondaryBackground;
+}
+
+.ui.card.secondary > .content > .header {
+  color: @secondaryHeaderColor;
+}
+
+.ui.card.secondary > .content > .description {
+  color: @secondaryDescriptionColor;
+}
+
+.ui.card.secondary > .extra.content a:not(.ui) {
+  color: @secondaryExtraLinkColor;
+
+  &:hover {
+    color: @secondaryExtraLinkHoverColor;
+  }
+}
+
+.ui.card.secondary > .content > .meta {
+  color: @secondaryMetaColor;
+}
+
+/*******************************
+            Tertiary
+*******************************/
+
+.ui.card.tertiary {
+  background: @tertiaryBackground;
+}
+
+.ui.card.tertiary > .content > .header {
+  color: @tertiaryHeaderColor;
+}
+
+.ui.card.tertiary > .content > .description {
+  color: @tertiaryDescriptionColor;
+}
+
+.ui.card.tertiary > .extra.content a:not(.ui) {
+  color: @tertiaryExtraLinkColor;
+
+  &:hover {
+    color: @tertiaryExtraLinkHoverColor;
+  }
+}
+
+.ui.card.tertiary > .content > .meta {
+  color: @tertiaryMetaColor;
+}
+
+/*******************************
+          Rounded Card
+*******************************/
+
+.ui.cards > .ui.card.rounded > .image,
+.ui.card.rounded > .image {
+  height: auto;
+}
+
+.ui.card.rounded {
+  width: @roundedWidth;
+  border: none;
+
+  .content {
+    justify-content: center;
+    border-top: none;
+
+    .image {
+      display: flex;
+      justify-content: center;
+      background-color: @white;
+    }
+
+    .header {
+      margin-bottom: @roundedContentTitleMarginBottom;
+      font-size: @roundedContentTitleFontSize;
+      font-weight: @roundedContentTitleFontWeight;
+      text-align: center;
+    }
+
+    .description {
+      text-align: center;
+    }
+  }
+}
+
+.ui.card.rounded.big {
+  .image {
+    display: flex;
+    justify-content: center;
+    background-color: @white;
+
+    img {
+      width: @roundedBigImageWidth;
+      height: @roundedBigImageHeight;
+      border-radius: 50%;
+    }
+  }
+
+  .description {
+    font-size: @roundedBigMetadataFontSize;
+    font-weight: @roundedBigMetadataFontWeight;
+  }
+}
+
+.ui.rounded.small {
+  .image {
+    display: flex;
+    justify-content: center;
+    background-color: @white;
+
+    img {
+      display: flex;
+      width: @roundedSmallImageWidth;
+      height: @roundedSmallImageHeight;
+      border-radius: @roundedImageBorderRadius;
+    }
+  }
+
+  .header {
+    color: @roundedSmallTitleColor;
+  }
+
+  .description {
+    font-size: @roundedSmallMetadataFontSize;
+    font-weight: @roundedSmallMetadataFontWeight;
+  }
+}
+
+/*******************************
+        Publication Card
+*******************************/
+
+.ui.card.publication {
+  width: @mobilePublicationCardWidth;
+  border: none;
+
+  .image {
+    height: @mobilePublicationcardImageHeight;
+    flex-grow: 1;
+  }
+
+  .content {
+    height: @mobileCardContentHeight;
+    max-height: @cardContentMaxHeight;
+    padding: @cardContentPadding;
+    background-color: @publicationCardDescriptionColor;
+
+    .meta {
+      color: @publicationCardtextColor;
+      font-size: @cardMetaFontSize;
+      font-weight: @cardMetaTagFontWeight;
+    }
+
+    .description {
+      display: -webkit-box;
+      overflow: hidden;
+      margin-top: 0;
+      -webkit-box-orient: vertical;
+      color: @publicationCardtextColor;
+      font-size: @cardDescriptionTextFontSize;
+      font-weight: @cardDescriptionTextFontWeight;
+      -webkit-line-clamp: @cardDescriptionTextLineClampMobile;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .ui.card.publication {
+    width: @tabletPublicationCardWidth;
+
+    .image {
+      height: @tabletPublicationcardImageHeight;
+    }
+
+    .content {
+      height: @tabletCardContentHeight;
+      max-height: @tabletCardContentMaxHeight;
+
+      .description {
+        -webkit-line-clamp: @cardDescriptionTextLineClampTablet;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .ui.card.publication {
+    width: @computerPublicationCardWidth;
+
+    .image {
+      height: @computerPublicationcardImageHeight;
+    }
+  }
+}
+
+.fluid-card-row {
+  display: grid;
+  justify-content: space-between;
+  gap: 1.25rem;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+
+  .ui.card {
+    margin: 0;
+  }
+}

package/theme/themes/eea/views/card.variables

@@ -9,14 +9,6 @@
 @cardBorder: 1px solid @midGray;
 @background: @white;
 
-/* Inverted */
-@invertedBackground: @darkCerulean;
-@invertedHeaderColor: @white;
-@invertedDescriptionColor: @white;
-@invertedExtraLinkColor: @white;
-@invertedExtraLinkHoverColor: @white;
-@invertedMetaColor: @white;
-
 /* Shadow */
 @shadowDistance: 1px;
 @shadowBoxShadow: 0px @shadowDistance 3px 0px @solidBorderColor;
@@ -235,3 +227,95 @@
 
 /* Colored */
 @coloredShadowDistance: 2px;
+
+
+/*******************************
+            Primary
+*******************************/
+@primaryBackground: @primaryColor;
+@primaryHeaderColor: @white;
+@primaryDescriptionColor: @white;
+@primaryExtraLinkColor: @white;
+@primaryExtraLinkHoverColor: @white;
+@primaryMetaColor: @white;
+
+/*******************************
+            Secondary
+*******************************/
+@secondaryBackground: @secondaryColor;
+@secondaryHeaderColor: @white;
+@secondaryDescriptionColor: @white;
+@secondaryExtraLinkColor: @white;
+@secondaryExtraLinkHoverColor: @white;
+@secondaryMetaColor: @white;
+
+/*******************************
+            Tertiary
+*******************************/
+@tertiaryBackground: #3D5265;
+@tertiaryHeaderColor: @white;
+@tertiaryDescriptionColor: @white;
+@tertiaryExtraLinkColor: @white;
+@tertiaryExtraLinkHoverColor: @white;
+@tertiaryMetaColor: @white;
+
+/*******************************
+          Rounded Card
+*******************************/
+/* Global */
+@roundedWidth                    : 100%;
+@roundedWrapperWidth             : 100%;
+@roundedWrapperGap               : @largeGap;
+@roundedContentWrapperWidth      : 100%;
+@roundedImageBorderRadius        : @circularRadius;
+@roundedContentTitleMarginBottom : 0;
+@roundedImageWrapperWidth        : 100%;
+@roundedImageBackgroundSize      : cover;
+@roundedContentTitleFontWeight   : @bold;
+@roundedContentTitleFontSize     : 1.25rem;
+
+/* Big */
+@roundedBigImageHeight           : 173px;
+@roundedBigImageWidth            : 173px;
+@roundedBigMetadataFontSize      : 1.25rem;
+@roundedBigMetadataFontWeight    : @normal;
+
+/* Small */
+@roundedSmallImageHeight         : 150px;
+@roundedSmallImageWidth          : 150px;
+@roundedSmallTitleColor          : @secondaryColor;
+@roundedSmallMetadataFontSize    : 1rem;
+@roundedSmallMetadataFontWeight  : 300;
+
+/*******************************
+        Publication Card
+*******************************/
+@mobilePublicationCardWidth: 300px;
+@tabletPublicationCardWidth: 660px;
+@computerPublicationCardWidth: 530px;
+
+/* Image */
+@mobilePublicationcardImageHeight: 150px;
+@tabletPublicationcardImageHeight: 250px;
+@computerPublicationcardImageHeight: 160px;
+
+/* Colors */
+@publicationCardDescriptionColor: #3D5265;
+@publicationCardtextColor: @white;
+
+/*  Content */
+@cardContentPadding: 20px;
+@cardContentMaxHeight: 135px;
+@mobileCardContentHeight: 135px;
+@tabletCardContentMaxHeight: 110px;
+@tabletCardContentHeight: 110px;
+
+/* Description */
+@cardDescriptionTextLineClampMobile: 3;
+@cardDescriptionTextLineClampTablet: 2;
+@cardDescriptionTextFontSize: 16px;
+@cardDescriptionTextFontWeight: 700;
+
+/* Meta */
+@cardMetaFontSize: 12px;
+@cardMetaTagFontWeight: 400;

package/src/ui/Avatar/Avatar.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-Avatar.propTypes = {
-  title: PropTypes.string,
-  info: PropTypes.string,
-};
-
-function Avatar({ image_url, children, ...rest }) {
-  return (
-    <div className={`eea avatar  ${rest.avatarSize}`} {...rest}>
-      <div className="wrapper">
-        <div className="image-wrapper">
-          <div
-            className="image"
-            style={{ backgroundImage: `url(${image_url})` }}
-          ></div>
-        </div>
-        <div className="content-wrapper">{children}</div>
-      </div>
-    </div>
-  );
-}
-
-Avatar.Content = ({ children }) => {
-  return <div className="content">{children}</div>;
-};
-
-Avatar.Title = ({ children }) => <p className="title">{children}</p>;
-Avatar.Metadata = ({ children }) => <p className="metadata">{children}</p>;
-
-export default Avatar;

package/src/ui/Avatar/Avatar.stories.jsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import Avatar from './Avatar';
-// eslint-disable-next-line import/no-unresolved
-import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/avatar.png';
-
-export default {
-  title: 'Components/Avatar',
-  component: Avatar,
-  argTypes: {
-    title: {
-      description: 'avatar title',
-      table: {
-        defaultValue: { summary: '""' },
-        type: { summary: 'string' },
-      },
-    },
-    info: {
-      description: 'avatar secondary info',
-      table: {
-        defaultValue: { summary: '""' },
-        type: { summary: 'string' },
-      },
-    },
-    image: {
-      description: 'avatar image',
-      table: {
-        defaultValue: { summary: '""' },
-      },
-    },
-  },
-};
-
-const DefaultTemplate = (args) => (
-  <Avatar avatarSize="big" {...args} image_url={imgUrl}>
-    <Avatar.Content>
-      <Avatar.Title>{args.title}</Avatar.Title>
-      <Avatar.Metadata>{args.info}</Avatar.Metadata>
-    </Avatar.Content>
-  </Avatar>
-);
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-  title: 'Lorem ipsum',
-  info: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-};
-
-const SmallTemplate = (args) => (
-  <Avatar avatarSize="small" {...args} image_url={imgUrl}>
-    <Avatar.Content>
-      <Avatar.Title>{args.title}</Avatar.Title>
-      <Avatar.Metadata>{args.info}</Avatar.Metadata>
-    </Avatar.Content>
-  </Avatar>
-);
-
-export const Small = SmallTemplate.bind({});
-Small.args = {
-  title: 'Lorem ipsum',
-  info: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-};

package/src/ui/PublicationCard/PublicationCard.jsx

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

@@ -1,69 +0,0 @@
-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' },
-    },
-  },
-};