@eeacms/volto-eea-design-system 1.0.0-alpha.14 → 1.0.0-alpha.15

package/CHANGELOG.md

@@ -4,10 +4,36 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.0-alpha.15](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.14...1.0.0-alpha.15) - 7 February 2023
+
+#### :rocket: New Features
+
+- feat(utilities): Complete list of text-align utilities - refs #160747 [Alin Voinea - [`224fab6`](https://github.com/eea/volto-eea-design-system/commit/224fab602184b8974f588c91a7412e3d03e4e2f7)]
+- feat(small): CSS for small HTML tag - refs #160747 [Alin Voinea - [`ad3c0ad`](https://github.com/eea/volto-eea-design-system/commit/ad3c0adec4efa7cead69153d399c6452131c94cc)]
+- feat(fw-light): Add font weight light utility - refs #160747 [Alin Voinea - [`c44cf57`](https://github.com/eea/volto-eea-design-system/commit/c44cf57db5845fbb9c07233aeedab79e1438f80f)]
+- feat(Card): add teaser card grid story [Antonis Tarantilis - [`53cac0b`](https://github.com/eea/volto-eea-design-system/commit/53cac0b0d1c40ad6ad8c9dc91c5d24bfb160f98e)]
+
+#### :bug: Bug Fixes
+
+- fix(card): teaser card dimensions on tablet size #290 from eea/teaser-card-grid [ichim-david - [`013fdf5`](https://github.com/eea/volto-eea-design-system/commit/013fdf5cad347aee14bdc51553dbd95d972a7c66)]
+
+#### :nail_care: Enhancements
+
+- refactor(style-menu): add text-color to paragraphs styles #291 from eea/stylemenu-theme-colors [ichim-david - [`2d78307`](https://github.com/eea/volto-eea-design-system/commit/2d783075b8089184e50b1763226af0d60ed11786)]
+- change(header): Small fix in search popup #292 from eea/search-popup [ichim-david - [`86c1305`](https://github.com/eea/volto-eea-design-system/commit/86c130539455b9a00b4b088b1871a98b9756df79)]
+- change(card): added extra content for teaser card story [David Ichim - [`30690ae`](https://github.com/eea/volto-eea-design-system/commit/30690ae6c499682853cb19db10b0cdc13c6f9508)]
+- change(header): Small fix in search popup [kreafox - [`3d622ea`](https://github.com/eea/volto-eea-design-system/commit/3d622ea99df5a1f1088f70998e38fd5bf43997cf)]
+- refactor(style-menu): add text-color to paragraphs styles [nileshgulia1 - [`3446bc2`](https://github.com/eea/volto-eea-design-system/commit/3446bc2704603bbfead7ff6c72d4e3a1ce81c7d4)]
+- change(color): darkCyan is now replaced everywhere by the new green [David Ichim - [`ef3791d`](https://github.com/eea/volto-eea-design-system/commit/ef3791de6e2ea23487791c717eefc575e21fd283)]
+
+#### :hammer_and_wrench: Others
+
+- Release alpha 15 [Alin Voinea - [`3b72b29`](https://github.com/eea/volto-eea-design-system/commit/3b72b29aaf9b3e1bfb7015808aafbd73a7167895)]
 ### [1.0.0-alpha.14](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.13.1...1.0.0-alpha.14) - 30 January 2023
 
 #### :nail_care: Enhancements
 
+- change(mobile menu): integrate a-z topic with menu rendering logic #287 from eea/develop [ichim-david - [`05d4c04`](https://github.com/eea/volto-eea-design-system/commit/05d4c04603e6572cd6f9b255faa03c4636d8efdb)]
 - change(mobile menu): integrate a-z topic with menu rendering logic [David Ichim - [`246d3d8`](https://github.com/eea/volto-eea-design-system/commit/246d3d839b773e2f6e1fff7fed5f9aa7a4968daa)]
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-alpha.14",
+  "version": "1.0.0-alpha.15",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -464,3 +464,92 @@ CarouselCards.argTypes = {
     },
   },
 };
+
+const TeaserCard = ({ variant, inverted, titleOnImage, card }) => (
+  <div className="column grid-block-teaser">
+    <div
+      className={`styled-teaser styled ${
+        variant === 'default' ? '' : variant
+      } ${inverted ? 'inverted' : ''}`}
+    >
+      <div
+        className={`ui card u-card max-3-lines title-max-3-lines ${
+          card.fluid ? 'fluid' : ''
+        } ${variant}`}
+      >
+        <a className="image" href={card.href}>
+          <img src={card.imgUrl} alt={card.title} className="ui image" />
+          {titleOnImage && (
+            <div className="gradient">
+              <div className="header">{card.title}</div>
+            </div>
+          )}
+        </a>
+
+        {!titleOnImage && (
+          <div className="content">
+            <div className="header">{card.title}</div>
+            <Card.Description>{card.description}</Card.Description>
+          </div>
+        )}
+      </div>
+    </div>
+  </div>
+);
+
+const TeaserTemplate = (args) => (
+  <Container>
+    <div className="block __grid teaserGrid centered three">
+      <div className="ui stackable stretched three column grid">
+        {args.cards.map((card, index) => (
+          <TeaserCard
+            variant={args.variant}
+            titleOnImage={args.titleOnImage}
+            inverted={args.inverted}
+            card={card}
+            key={index}
+          />
+        ))}
+      </div>
+    </div>
+  </Container>
+);
+
+export const TeaserCardGrid = TeaserTemplate.bind({});
+TeaserCardGrid.args = {
+  titleOnImage: false,
+  variant: 'default',
+  inverted: false,
+  cards: [
+    {
+      title: "State of Europe's environment",
+      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,
+      href: '/#',
+      fluid: true,
+    },
+    {
+      title: 'Climate',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      hasImage: true,
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+      fluid: true,
+    },
+    {
+      title: 'Economy and resources',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      hasImage: true,
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+      fluid: true,
+    },
+  ],
+};

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

@@ -367,6 +367,7 @@
     font-weight: @searchBoxFullSearchFontWeight;
 
     .ui.container {
+      display: flex;
       justify-content: @searchBoxFullSearchJustifyContent;
       gap: @searchBoxFullSearchGap;
 

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

@@ -139,7 +139,7 @@
 @subsiteDividerHeight                 : 110%;
 @subsiteDividerWidth                  : 1px;
 @subsiteDividerTopPosition            : 50%;
-@subsiteDividerColor                  : @darkCyan;
+@subsiteDividerColor                  : @secondaryColorCSSVar;
 @mobileSubsiteFontSize                : unit(@h6, em);
 @tabletSubsiteFontSize                : unit(@h4, em);
 @computerSubsiteFontSize              : unit(@h2, em);
@@ -233,10 +233,10 @@
 
 /* Custom shadows for dropdowns */
 @shadow-topbar-dropdown: 2px 0 2px -5px hsla(@shadow-color, calc(@shadow-strength + 6%));
-@shadow-4-no-top: 
+@shadow-4-no-top:
   0 0 0 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
   0 1px 1px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
   0 2px 2px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
   0 5px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 4%)),
   0 9px 9px -2px hsla(@shadow-color, calc(@shadow-strength + 5%)),
-  0 16px 16px -2px hsla(@shadow-color, calc(@shadow-strength + 6%));
+  0 16px 16px -2px hsla(@shadow-color, calc(@shadow-strength + 6%));

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

@@ -20,5 +20,5 @@
 @keyContentListBulletFontSize : 3rem;
 
 /* Colored Title */
-@keyContentColoredTitleColor : @darkCyan;
+@keyContentColoredTitleColor : @secondaryColor;
 @keyContentTitleMarginLeft : 2.8rem;

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

@@ -72,8 +72,11 @@ h2, h3, h4, h5, h6 {
 // text smaller than body has extra letterspacing as described in docusaurus
 .tiny,
 .caption,
-.discreet {
+.discreet,
+small {
   letter-spacing: @font-letterspacing-1;
+  font-size: @font-size-00;
+  line-height: @font-lineheight-3;
 }
 
 /* Heading size adjustment */
@@ -107,3 +110,25 @@ a {
   background: @lightLavender;
   color: @black;
 }
+
+/* Add colors for paragraphs styles options in StyeMenu */
+#style-menu.ui.dropdown .menu {
+  span:nth-of-type(1) {
+    color: @primaryColor;
+      span.text {
+        color: @primaryColor;
+      }
+  }
+  span:nth-of-type(2) {
+    color: @secondaryColor;
+      span.text {
+        color: @secondaryColor;
+      }
+  }
+  span:nth-of-type(3) {
+    color: @tertiaryColor;
+      span.text {
+        color: @tertiaryColor;
+      }
+  }
+}

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

@@ -63,7 +63,7 @@
 @tertiaryColorCSSVar  : var(--text-color-tertiary, @tertiaryColor);
 
 @lightPrimaryColor    : @mediumPersianBlue;
-@lightSecondaryColor  : @darkCyan;
+@lightSecondaryColor  : @green-4;
 @lightTertiaryColor   : @UCLABlue;
 
 @darkPrimaryColor     : @darkMidnightBlue;

package/theme/themes/eea/globals/utilities.less

@@ -35,10 +35,17 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 
 // Text
 .text-left,
-.has--text--left { text-align: left !important; }
+.has--text--left,
+.has--textAlign--left { text-align: left !important; }
 .text-center,
-.has--text--center { text-align: center !important;}
-.text-right { text-align: right !important; }
+.has--text--center,
+.has--textAlign--center { text-align: center !important;}
+.text-right,
+.has--text--right,
+.has--textAlign--right { text-align: right !important; }
+.text-justify,
+.has--text--justify,
+.has--textAlign--justify { text-align: justify !important; }
 .bold { font-weight: bold !important; }
 
 .has--text--left {
@@ -88,3 +95,7 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
   border-bottom: @border-size-1 solid !important;
   padding-bottom: @rem-space-2 !important;
 }
+
+.fw-light {
+  font-weight: @font-weight-3;
+}

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

@@ -282,7 +282,7 @@
   line-height: @imageTitleLineHeight;
 }
 
-@media only screen and (min-width: @tabletBreakpoint) {
+@media only screen and (min-width: @computerBreakpoint) {
   .card .gradient {
     padding-block: @imageTitlePaddingBlock;
   }
@@ -420,3 +420,26 @@
 .ui.card > a:not(.ui) > i.icon {
   color: @iconColor;
 }
+
+/*******************************
+          Teaser Card
+*******************************/
+// Teaser cards grid on tablet update padding and min-width
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+  .ui.grid > .column.grid-block-teaser,
+  .ui.grid > .row > .column.grid-block-teaser {
+    padding-left: @tabletTeaserCardPaddingInline;
+    padding-right: @tabletTeaserCardPaddingInline;
+  }
+  .grid-block-teaser .ui.card {
+    min-width: @tabletTeaserCardMinWidth;
+  }
+}
+
+// Added from listing-cards.less
+.grid-block-teaser .ui.card.u-card .header {
+  display: -webkit-box !important;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--title-max-lines, 3);
+}

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

@@ -354,5 +354,9 @@
 @slickTrackGap: 1.25rem;
 @slickTrackMargin: 1rem 0;
 
-
+/*******************************
+        Teaser Cards
+*******************************/
+@tabletTeaserCardPaddingInline: @rem-space-2;
+@tabletTeaserCardMinWidth: 100%;