@eeacms/volto-eea-design-system 1.0.0-alpha.3 → 1.0.0-alpha.4

package/.github/workflows/node.js.yml

@@ -6,11 +6,6 @@ name: Storybook & Docusaurus CI deployment
 on:
   push:
     branches: [ develop ]
-    paths:
-      - src/**
-      - theme/**
-      - website/**
-      - templates/**
 
 jobs:
   build:
@@ -46,7 +41,7 @@ jobs:
           git commit -m "Autobuild of docusaurus docs"
           git push
 
-    - uses: convictional/trigger-workflow-and-wait@v1.3.0
+    - uses: convictional/trigger-workflow-and-wait@v1.6.5
       with:
         github_token: ${{ secrets.PAT_TOKEN }}
         owner: 'eea'

package/CHANGELOG.md

@@ -4,6 +4,32 @@ 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.4](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.3...1.0.0-alpha.4) - 22 November 2022
+
+#### :bug: Bug Fixes
+
+- fix(cards-storybook): load slick carousel css for arrow and pagination styles [David Ichim - [`1159b1b`](https://github.com/eea/volto-eea-design-system/commit/1159b1beea0d7f7e026f1f1181fea91b7ac38ffa)]
+
+#### :nail_care: Enhancements
+
+- change(utilities): added has text classes to the text alignment utilities [David Ichim - [`e6974c6`](https://github.com/eea/volto-eea-design-system/commit/e6974c634551fe0d19a9c9da269f5c6fbaefab7a)]
+- change(build): upgrade action to trigger workflow and wait to latest version [David Ichim - [`c63ad3f`](https://github.com/eea/volto-eea-design-system/commit/c63ad3fdae7972bb2c722dea3d046861fa0ac086)]
+- refactor(card): theming implementation to allow has theming classes #265 from eea/card-refactoring [ichim-david - [`24edc99`](https://github.com/eea/volto-eea-design-system/commit/24edc99d85c0c619fc763a8774a96f7208f529a5)]
+- change(utilities): modified class name for text align using has naming [David Ichim - [`579a0cb`](https://github.com/eea/volto-eea-design-system/commit/579a0cbe0f704eb9305119fdd162f4f29c8086d5)]
+- change(theme): ensure that only direct children of container have a default top and bottom margin [David Ichim - [`7f8b8dc`](https://github.com/eea/volto-eea-design-system/commit/7f8b8dcc72827004d366e1c531311cf8734053fc)]
+- change(theme): add slick-carousel dependency [David Ichim - [`f2eec7d`](https://github.com/eea/volto-eea-design-system/commit/f2eec7d7233adf86b9c4f61670eb87d9754ff94c)]
+- change(card): expect has classes on the card directly [David Ichim - [`6a9e38b`](https://github.com/eea/volto-eea-design-system/commit/6a9e38bcae0656685a99b47800d556813663d2ee)]
+- change(cards): allow rounded, inverted and theme parameter to be set by has classes [David Ichim - [`4b4ad89`](https://github.com/eea/volto-eea-design-system/commit/4b4ad893fc5d39629b4e8d874327f31ea2e7d885)]
+- change(cards): refactor cards theming implementation [David Ichim - [`d4e4542`](https://github.com/eea/volto-eea-design-system/commit/d4e454238d540ef306f4c1a4f8e9a94c7aa10189)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.4 [Alin Voinea - [`ec8938b`](https://github.com/eea/volto-eea-design-system/commit/ec8938b4847a2973c7a853896d609d2de0041019)]
+- Exclude mockups from npm package [Alin Voinea - [`634af8e`](https://github.com/eea/volto-eea-design-system/commit/634af8e3ddabec36a18597d8d7638888269875fc)]
+- Update eea.github.io on all commits in develop branch [Alin Voinea - [`3d0b8d7`](https://github.com/eea/volto-eea-design-system/commit/3d0b8d745138bd2e0219560c8c895ce2c56dbf04)]
+- Trigger re-build [Alin Voinea - [`3566dd2`](https://github.com/eea/volto-eea-design-system/commit/3566dd2b4d2cd12496e05b792c85a78de550dd50)]
+- fix rounded selector [David Ichim - [`1fa1544`](https://github.com/eea/volto-eea-design-system/commit/1fa15442f03d3f3d9ef59afa14075b061483cf3a)]
+- Back to dev. [Alin Voinea - [`ea47f6f`](https://github.com/eea/volto-eea-design-system/commit/ea47f6f10097f23f635d98f0c5483bebf8378fc4)]
 ### [1.0.0-alpha.3](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.2...1.0.0-alpha.3) - 16 November 2022
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -23,6 +23,7 @@
     "@eeacms/volto-corsproxy": "*",
     "remixicon": "2.5.0",
     "react-slick": "^0.28.1",
+    "slick-carousel": "^1.8.1",
     "react-countup": "^6.3.0"
   },
   "devDependencies": {

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

@@ -2,6 +2,9 @@ import React from 'react';
 import { Card, Image, Grid, Container, Icon, Button } from 'semantic-ui-react';
 import Slider from 'react-slick';
 
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
 const tabletBreakpoint = 835;
 const mobileBreakpoint = 480;
 

package/theme/theme.config

@@ -134,5 +134,4 @@
   @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides";
 }
 
-
 /* End Config */

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

@@ -63,8 +63,8 @@ h2, h3, h4, h5, h6 {
   --layout-max-width: @wideWidth;
 }
 
-// add a 1rem margin top and bottom on all styled classes
-[class*="styled-"] {
+// add a 1rem margin top and bottom on all direct styled classes from container
+[class~="container"] > [class*="styled-"] {
   margin-top: @rem-space-4;
   margin-bottom: @rem-space-4;
 }

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

@@ -34,16 +34,18 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .flex-items-center { align-items: center !important; }
 
 // Text
-.text-left { text-align: left !important; }
-.text-center { text-align: center !important;}
+.text-left,
+.has--text--left { text-align: left !important; }
+.text-center,
+.has--text--center { text-align: center !important;}
 .text-right { text-align: right !important; }
 .bold { font-weight: bold !important; }
 
-.align_left {
+.has--text--left {
   --text-align: left;
 }
 
-.align_center {
+.has--text--center {
   --text-align: center;
   --justify-content: space-evenly;
 }

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

@@ -16,6 +16,8 @@
 .ui.card {
   height: 100%;
   text-align: var(--text-align, @cardTextAlign);
+  background-color: var(--card-background-color, @background);
+  color: var(--card-text-color, @cardColor);
 }
 
 .card .meta .date {
@@ -28,19 +30,13 @@
   height: @cardImageHeight;
 
   img {
-    width: @imageWidth;
-    height: @imageHeight;
+    width: var(--card-image-width, @imageWidth);
+    height: var(--card-image-width, @imageHeight);
     object-fit: @imageObjectFit;
     object-position: @imageObjectPosition;
   }
 }
 
-.ui.cards > .card > i.icon,
-.ui.cards > .card > a:not(.ui) > i.icon,
-.ui.card > i.icon,
-.ui.card > a:not(.ui) > i.icon {
-  color: @iconColor;
-}
 
 .ui.cards > .card > .content > *:not(:last-child),
 .ui.card > .content > *:not(:last-child) {
@@ -87,151 +83,46 @@
 /*******************************
             Primary
 *******************************/
-
-.ui.card.primary:not(.inverted),
-.ui.card.primary:not(.inverted) .image {
-  background: @primaryBackground;
-}
-
-.ui.card.primary > .content > .header {
-  color: @primaryHeaderColor;
-}
-
-.ui.card.primary > i.icon,
-.ui.card.primary > a:not(.ui) > i.icon,
-.ui.card.primary > .content a:not(.ui),
-.ui.card.primary > .content a:not(.ui):hover,
-.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,
-.ui.card.primary > .content > .meta a:not(.ui) {
-  color: @primaryMetaColor;
+.card.has--theme--primary,
+.card.primary {
+  --card-background-color: @primaryCardBackground;
+  --card-text-color: @primaryCardColor;
 }
-
 /* Inverted */
-.ui.card.primary.inverted > i.icon,
-.ui.card.primary.inverted > .content * {
-  color: @invertedPrimaryContentColor;
-}
-
-.ui.card.primary.inverted > a:not(.ui) > i.icon,
-.ui.card.primary.inverted > .content a:not(.ui),
-.ui.card.primary.inverted > .extra.content a:not(.ui) {
-  color: @invertedPrimaryContentColor;
-
-  &:hover {
-    color: @invertedPrimaryColorHover;
-  }
+.card.has--theme--primary.has--inverted--true,
+.card.primary.inverted {
+  --card-background-color: @invertedPrimaryCardBackgroundColor;
+  --card-text-color: @invertedPrimaryCardColor;
 }
 
 /*******************************
             Secondary
 *******************************/
-
-.ui.card.secondary:not(.inverted),
-.ui.card.secondary:not(.inverted) .image {
-  background: @secondaryBackground;
-}
-
-.ui.card.secondary > i.icon,
-.ui.card.secondary > a:not(.ui) > i.icon,
-.ui.card.secondary > .content a:not(.ui),
-.ui.card.secondary > .content a:not(.ui):hover,
-.ui.card.secondary > .content > .header {
-  color: @secondaryHeaderColor;
+.card.has--theme--secondary,
+.card.secondary {
+  --card-background-color:  @secondaryCardBackground;
+  --card-text-color: @secondaryCardColor;
 }
-
-.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,
-.ui.card.secondary > .content > .meta a:not(.ui) {
-  color: @secondaryMetaColor;
-}
-
 /* Inverted */
-.ui.card.secondary.inverted > i.icon,
-.ui.card.secondary.inverted > .content * {
-  color: @invertedSecondaryContentColor;
-}
-
-.ui.card.secondary.inverted > a:not(.ui) > i.icon,
-.ui.card.secondary.inverted > .content a:not(.ui),
-.ui.card.secondary.inverted > .extra.content a:not(.ui) {
-  color: @invertedSecondaryContentColor;
-
-  &:hover {
-    color: @invertedSecondaryColorHover;
-  }
+.card.has--theme--secondary.has--inverted--true,
+.card.secondary.inverted {
+  background-color: @invertedSecondaryCardBackgroundColor;
+  color: @invertedSecondaryCardColor;
 }
 
 /*******************************
             Tertiary
 *******************************/
-
-.ui.card.tertiary:not(.inverted),
-.ui.card.tertiary:not(.inverted) .image {
-  background: @tertiaryBackground;
-}
-
-.ui.card.tertiary > i.icon,
-.ui.card.tertiary > a:not(.ui) > i.icon,
-.ui.card.tertiary > .content a:not(.ui),
-.ui.card.tertiary > .content a:not(.ui):hover,
-.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;
-  }
+.card.has--theme--tertiary,
+.card.tertiary {
+  --card-background-color:  @tertiaryCardBackground;
+  --card-text-color: @tertiaryCardColor;
 }
-
-.ui.card.tertiary > .content > .meta,
-.ui.card.tertiary > .content > .meta a:not(.ui) {
-  color: @tertiaryMetaColor;
-}
-
 /* Inverted */
-.ui.card.tertiary.inverted > i.icon,
-.ui.card.tertiary.inverted > .content * {
-  color: @invertedTertiaryContentColor;
-}
-
-.ui.card.tertiary.inverted > a:not(.ui) > i.icon,
-.ui.card.tertiary.inverted > .content a:not(.ui),
-.ui.card.tertiary.inverted > .extra.content a:not(.ui) {
-  color: @invertedTertiaryContentColor;
-
-  &:hover {
-    color: @invertedTertiaryColorHover;
-  }
+.card.has--theme--tertiary.has--inverted--true,
+.card.tertiary.inverted {
+  --card-background-color:  @invertedTertiaryCardBackgroundColor;
+  --card-text-color:  @invertedTertiaryCardColor;
 }
 
 /*******************************
@@ -239,11 +130,17 @@
 *******************************/
 
 .ui.cards > .ui.card.rounded > .image,
+.ui.card.has--rounded--true > .image,
 .ui.card.rounded > .image {
   height: auto;
 }
 
+.card.has--rounded--true {
+  --card-image-width: @roundedImageWidth;
+  --card-image-height: @roundedImageHeight;
+}
 .ui.cards .ui.card.rounded,
+.ui.card.has--rounded--true,
 .ui.card.rounded {
   padding-top: @iconCardPaddingTop;
   border: none;
@@ -479,4 +376,11 @@
   .icon {
     margin: auto;
   }
-}
+}
+
+.ui.cards > .card > i.icon,
+.ui.cards > .card > a:not(.ui) > i.icon,
+.ui.card > i.icon,
+.ui.card > a:not(.ui) > i.icon {
+  color: @iconColor;
+}

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

@@ -7,6 +7,7 @@
 --------------------*/
 
 @cardBorder: 1px solid @midGray;
+@cardColor: @tertiaryColor;
 @background: @white;
 
 /* Shadow */
@@ -84,13 +85,13 @@
 @headerFontWeight: @bold;
 @headerFontSize: 1.125rem;
 @headerLineHeightOffset: -(@lineHeight - 1em) / 2;
-@headerColor: @tertiaryColor;
+@headerColor: inherit;
 
 /* Metadata */
 @metaJustifyContent: space-between;
 @metaFontSize: @absoluteMedium;
 @metaSpacing: 0.3em;
-@metaColor: @tertiaryColor;
+@metaColor: inherit;
 
 /* Icons */
 @iconCardPaddingTop: @rem-space-4;
@@ -105,8 +106,8 @@
 @likeActiveColor: #FF2733;
 
 /* Links */
-@contentLinkColor: @tertiaryColor;
-@contentLinkHoverColor: @tertiaryColor;
+@contentLinkColor: inherit;
+@contentLinkHoverColor: inherit;
 @contentLinkFontWeight: @bold;
 @contentLinkTransition: color @defaultDuration @defaultEasing;
 @contentLinkTextDecoration: underline;
@@ -240,38 +241,26 @@
 /*******************************
             Primary
 *******************************/
-@primaryBackground: @primaryColor;
-@primaryHeaderColor: @white;
-@primaryDescriptionColor: @white;
-@primaryExtraLinkColor: @white;
-@primaryExtraLinkHoverColor: @white;
-@primaryMetaColor: @white;
-@invertedPrimaryContentColor: @primaryColor;
-@invertedPrimaryColorHover: @primaryColorHover;
+@primaryCardBackground: @primaryColor;
+@primaryCardColor: @white;
+@invertedPrimaryCardColor: @primaryColor;
+@invertedPrimaryCardBackgroundColor: @white;
 
 /*******************************
             Secondary
 *******************************/
-@secondaryBackground: @secondaryColor;
-@secondaryHeaderColor: @white;
-@secondaryDescriptionColor: @white;
-@secondaryExtraLinkColor: @white;
-@secondaryExtraLinkHoverColor: @white;
-@secondaryMetaColor: @white;
-@invertedSecondaryContentColor: @secondaryColor;
-@invertedSecondaryColorHover: @secondaryColorHover;
+@secondaryCardBackground: @secondaryColor;
+@secondaryCardColor: @white;
+@invertedSecondaryCardColor: @secondaryColor;
+@invertedSecondaryCardBackgroundColor: @white;
 
 /*******************************
             Tertiary
 *******************************/
-@tertiaryBackground: @tertiaryColor;
-@tertiaryHeaderColor: @white;
-@tertiaryDescriptionColor: @white;
-@tertiaryExtraLinkColor: @white;
-@tertiaryExtraLinkHoverColor: @white;
-@tertiaryMetaColor: @white;
-@invertedTertiaryContentColor: @tertiaryColor;
-@invertedTertiaryColorHover: @tertiaryColorHover;
+@tertiaryCardBackground: @tertiaryColor;
+@tertiaryCardColor: @white;
+@invertedTertiaryCardColor: @tertiaryColor;
+@invertedTertiaryCardBackgroundColor: @white;
 
 /*******************************
           Rounded Card

package/website/docs/2-whatsnew.md

@@ -38,7 +38,34 @@ Below is a non-exhaustive list of the work-in-progress which is planned for futu
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [Unreleased](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.2...HEAD) - 2022-11-16T14:37:05.681Z
+### [Unreleased](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.3...HEAD) - 2022-11-22T16:23:09.522Z
+
+#### :bug: Bug Fixes
+
+- fix(cards-storybook): load slick carousel css for arrow and pagination styles [`1159b1b`](https://github.com/eea/volto-eea-design-system/commit/1159b1beea0d7f7e026f1f1181fea91b7ac38ffa)
+
+#### :nail_care: Enhancements
+
+- change(cards): refactor cards theming implementation [`d4e4542`](https://github.com/eea/volto-eea-design-system/commit/d4e454238d540ef306f4c1a4f8e9a94c7aa10189)
+- change(cards): allow rounded, inverted and theme parameter to be set by has classes [`4b4ad89`](https://github.com/eea/volto-eea-design-system/commit/4b4ad893fc5d39629b4e8d874327f31ea2e7d885)
+- change(card): expect has classes on the card directly [`6a9e38b`](https://github.com/eea/volto-eea-design-system/commit/6a9e38bcae0656685a99b47800d556813663d2ee)
+- change(utilities): added has text classes to the text alignment utilities [`e6974c6`](https://github.com/eea/volto-eea-design-system/commit/e6974c634551fe0d19a9c9da269f5c6fbaefab7a)
+- change(utilities): modified class name for text align using has naming [`579a0cb`](https://github.com/eea/volto-eea-design-system/commit/579a0cbe0f704eb9305119fdd162f4f29c8086d5)
+- change(theme): ensure that only direct children of container have a default top and bottom margin [`7f8b8dc`](https://github.com/eea/volto-eea-design-system/commit/7f8b8dcc72827004d366e1c531311cf8734053fc)
+- change(build): upgrade action to trigger workflow and wait to latest version [`c63ad3f`](https://github.com/eea/volto-eea-design-system/commit/c63ad3fdae7972bb2c722dea3d046861fa0ac086)
+- refactor(card): theming implementation to allow has theming classes #265 from eea/card-refactoring [`24edc99`](https://github.com/eea/volto-eea-design-system/commit/24edc99d85c0c619fc763a8774a96f7208f529a5)
+- change(theme): add slick-carousel dependency [`f2eec7d`](https://github.com/eea/volto-eea-design-system/commit/f2eec7d7233adf86b9c4f61670eb87d9754ff94c)
+
+#### :hammer_and_wrench: Others
+
+- Update eea.github.io on all commits in develop branch [`3d0b8d7`](https://github.com/eea/volto-eea-design-system/commit/3d0b8d745138bd2e0219560c8c895ce2c56dbf04)
+- Release 1.0.0-alpha.4 [`ec8938b`](https://github.com/eea/volto-eea-design-system/commit/ec8938b4847a2973c7a853896d609d2de0041019)
+- Exclude mockups from npm package [`634af8e`](https://github.com/eea/volto-eea-design-system/commit/634af8e3ddabec36a18597d8d7638888269875fc)
+- fix rounded selector [`1fa1544`](https://github.com/eea/volto-eea-design-system/commit/1fa15442f03d3f3d9ef59afa14075b061483cf3a)
+- Trigger re-build [`3566dd2`](https://github.com/eea/volto-eea-design-system/commit/3566dd2b4d2cd12496e05b792c85a78de550dd50)
+- Back to dev. [`ea47f6f`](https://github.com/eea/volto-eea-design-system/commit/ea47f6f10097f23f635d98f0c5483bebf8378fc4)
+
+### [1.0.0-alpha.3](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.2...1.0.0-alpha.3) - 2022-11-16
 
 #### :rocket: New Features
 
@@ -69,9 +96,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - change(containers): modified class names after layout checks [`1dc3689`](https://github.com/eea/volto-eea-design-system/commit/1dc3689509001031f0afd30422f517de5316e47a)
 - refactor(sidemenu): add is_in_path and is_current attributes for an active example [`a3fe7fd`](https://github.com/eea/volto-eea-design-system/commit/a3fe7fd8da93db0a065d4408ce154c9d8c26b568)
 - change(container): story to avoid adding containerwidth property to container div [`c13d83c`](https://github.com/eea/volto-eea-design-system/commit/c13d83cdbc8741bf4075cdfcd884f39f3f71d73c)
-- change(views): moved narrow style bellow the default container width styles [`72fa58d`](https://github.com/eea/volto-eea-design-system/commit/72fa58dce9ea03a1e4f409a9f9aab21b01efbfc8)
 - refactor(megaMenu): mobile - use buttons for menu section titles [`a7b632f`](https://github.com/eea/volto-eea-design-system/commit/a7b632fd29a8ac815d2e590509baa51f1279e659)
 - refactor(megaMenu): update padding variables [`c5f2583`](https://github.com/eea/volto-eea-design-system/commit/c5f25838ba9ec367a58c98c929921ebf09cd8ad8)
+- change(views): moved narrow style bellow the default container width styles [`72fa58d`](https://github.com/eea/volto-eea-design-system/commit/72fa58dce9ea03a1e4f409a9f9aab21b01efbfc8)
 - change(listing): removed container from default view page-document area [`69f3d8f`](https://github.com/eea/volto-eea-design-system/commit/69f3d8f422e3cb95e89937929aaef48b5569bcdf)
 - change(views): rename classes names to width_view and added app extras layout component [`745b772`](https://github.com/eea/volto-eea-design-system/commit/745b7720839754d1e248795cb1263f8c02f5f3c2)
 - change(container): use important flag for left and right margin [`a49c83a`](https://github.com/eea/volto-eea-design-system/commit/a49c83abe9a045d28118a680558de5416a0516a3)
@@ -103,9 +130,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test(estlint): Fix .project.eslintrc.js [`aaeaa07`](https://github.com/eea/volto-eea-design-system/commit/aaeaa07b27491551daba29bbfdd7cab4a54b6bec)
 - modified left value of full width classes with toolbars [`70d82d4`](https://github.com/eea/volto-eea-design-system/commit/70d82d47fbc2c00a3a709de0d5c087c8443a1eae)
 - Release 1.0.0-alpha.3 [`8fc86a7`](https://github.com/eea/volto-eea-design-system/commit/8fc86a7d0bf4ad06ab339b3066ff56ea61d48878)
-- Feature(container): flexible container size #260 from eea/feature-flexible-container [`8f84c5b`](https://github.com/eea/volto-eea-design-system/commit/8f84c5b67afe9cbe01b2a44a8f92a9a554e1036a)
 - feature(content): added NarrowView useful for modifying the containers from content-area [`d937df7`](https://github.com/eea/volto-eea-design-system/commit/d937df7c262e8d8cc6e78eebec736e28263fc657)
 - jslint fix [`9846159`](https://github.com/eea/volto-eea-design-system/commit/98461593605344d0b6d8cba81f91d1cafc2653cd)
+- Feature(container): flexible container size #260 from eea/feature-flexible-container [`8f84c5b`](https://github.com/eea/volto-eea-design-system/commit/8f84c5b67afe9cbe01b2a44a8f92a9a554e1036a)
 - Add Sonarqube tag using circularity-frontend addons list [`76a41c7`](https://github.com/eea/volto-eea-design-system/commit/76a41c786995fd54afe4d1c345de939f683ffa70)
 - fix broken variable call for contentBox.variables introduced in previous commit by mistake [`d249c11`](https://github.com/eea/volto-eea-design-system/commit/d249c1160d19bedb174a2fde3fdab48d9ce297d4)
 - clean up [`89f3cb3`](https://github.com/eea/volto-eea-design-system/commit/89f3cb33d70a14806a953f0acd1807e94169ee5c)

package/mockups/README.md

@@ -1 +0,0 @@
-### EEA Design mockups