@eeacms/volto-eea-design-system 1.0.0-alpha.6 → 1.0.0-alpha.7

package/CHANGELOG.md

@@ -4,6 +4,39 @@ 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.7](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.6...1.0.0-alpha.7) - 16 December 2022
+
+#### :rocket: New Features
+
+- feat(item): normalized size for image or icon items #258 from eea/refactor-items [ichim-david - [`945170f`](https://github.com/eea/volto-eea-design-system/commit/945170f1503be68aa3fc1bd950a97eeebfd81037)]
+
+#### :bug: Bug Fixes
+
+- fix(item): removed margin set for description which pushed the text from icon [David Ichim - [`d9d4031`](https://github.com/eea/volto-eea-design-system/commit/d9d40310fcfb1bd214bd901b79dcbac41e9a8518)]
+- fix(card): rounded after removal of has--rounded--true style class [David Ichim - [`d4727af`](https://github.com/eea/volto-eea-design-system/commit/d4727afdecf3d25e3e5bc98d472b976d60154183)]
+- fix(project): Proper paths if volto-eea-design-system package is not installed, but in development #270 from eea/correct_paths [ichim-david - [`0f8ee8d`](https://github.com/eea/volto-eea-design-system/commit/0f8ee8d770f1b26d4315be8f615d58a61acbafc8)]
+
+#### :nail_care: Enhancements
+
+- change(item): added tiny size that outputs 24px icon sizes [David Ichim - [`2ea9636`](https://github.com/eea/volto-eea-design-system/commit/2ea96363a957f9033cb5bfe2d7fd311e92377493)]
+- change(image):  added preview image size default to 400px [David Ichim - [`a0aa867`](https://github.com/eea/volto-eea-design-system/commit/a0aa867e932d1b3c0bf449553726d6feb645853e)]
+- change(item): rename large to big class [David Ichim - [`24ff127`](https://github.com/eea/volto-eea-design-system/commit/24ff1275b9a0556b85ab86757bc0c84f50357e7d)]
+- change(item): set same height as width on item images [David Ichim - [`69cbd23`](https://github.com/eea/volto-eea-design-system/commit/69cbd23ca53dd68ae9f7c00a69ed2d8820746305)]
+- refactor(item): update item part 2 [Antonis Tarantilis - [`9812ae2`](https://github.com/eea/volto-eea-design-system/commit/9812ae2e41ac86cfd4c56e13af8af570b752966f)]
+- refactor(item): update spacing [Antonis Tarantilis - [`2fd91c4`](https://github.com/eea/volto-eea-design-system/commit/2fd91c4aa1a76dd2f7099d3f24f94067e95e06a1)]
+- refactor(item): update icon variations and paddings [Antonis Tarantilis - [`6a407b3`](https://github.com/eea/volto-eea-design-system/commit/6a407b3e7f743eb7b73247bcc5d489685d567bc6)]
+- refactor(item): update image and icon sizes [Antonis Tarantilis - [`b802573`](https://github.com/eea/volto-eea-design-system/commit/b8025735121aaa0024a5783afbde0f6be3715618)]
+- refactor(item): initial values for new sizes  & add description class [Antonis Tarantilis - [`3546296`](https://github.com/eea/volto-eea-design-system/commit/3546296f0cacb96411c8c67b98e9763e2b843b05)]
+- refactor(item): update operator for condition controls [Antonis Tarantilis - [`149ccb2`](https://github.com/eea/volto-eea-design-system/commit/149ccb2f1e498c27e5550214cdee25eb808ab27e)]
+- refactor(item): add icon and more size options [Antonis Tarantilis - [`1120bb6`](https://github.com/eea/volto-eea-design-system/commit/1120bb62d9ab908c5c97a4871a66e3c08c5c7ece)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.7 [Alin Voinea - [`7e66bcc`](https://github.com/eea/volto-eea-design-system/commit/7e66bcc296b389bc55073e7f99681534977dce3a)]
+- added back descriptionDistance variable until package release [David Ichim - [`3af811a`](https://github.com/eea/volto-eea-design-system/commit/3af811a8d86a132e16de118697ba5a4302a8a4da)]
+- Back to dev [Alin Voinea - [`cb531c9`](https://github.com/eea/volto-eea-design-system/commit/cb531c933c907bdbb88c9de0f1df2eb7ce899a4c)]
+- Proper paths if the package is not installed, but in development [Tiberiu Ichim - [`7a2655f`](https://github.com/eea/volto-eea-design-system/commit/7a2655f7cf9d3c687f172eefcf2b4cff4b12f832)]
+- Update .project.eslintrc.js [ichim-david - [`a2fd3f2`](https://github.com/eea/volto-eea-design-system/commit/a2fd3f23473325976c2b146e066eeb538d140dce)]
 ### [1.0.0-alpha.6](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.5...1.0.0-alpha.6) - 7 December 2022
 
 #### :rocket: New Features

package/package.json

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

package/razzle.extend.js

@@ -7,8 +7,13 @@ const modify = (config, { target, dev }, webpack) => {
   config.resolve.alias['../../theme.config$'] = themeConfigPath;
   config.resolve.alias['../../theme.config'] = themeConfigPath;
 
-  const projectRootPath = path.resolve('.');
-  const themesPath = `${projectRootPath}/node_modules/@eeacms/volto-eea-design-system/theme/themes`;
+  const designSystem = '@eeacms/volto-eea-design-system';
+  const designSystemPath =
+    config.resolve.alias[designSystem] ||
+    path.dirname(require.resolve(designSystem));
+  const themeLessPath = path.resolve(`${designSystemPath}/../theme`);
+
+  const themesPath = `${themeLessPath}/themes`;
 
   config.resolve.alias['eea-volto-themes'] = themesPath;
   config.resolve.alias['ui-theme'] = `${themesPath}/eea/`;

package/src/ui/Item/ItemGroupWithIcons.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Item, Container, Grid } from 'semantic-ui-react';
+import { Item, Container, Grid, Icon } from 'semantic-ui-react';
 
 import GlobeEco from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Svg/globe-eco.svg';
 import Sustainable from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Svg/sustainable.svg';
@@ -12,26 +12,72 @@ export default {
   component: Item,
   argTypes: {
     stackable: {
-      description: 'Image above content',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
+    mediaType: {
+      name: 'media type',
+      options: ['image', 'icon'],
+      control: { type: 'radio' },
+      table: {
+        defaultValue: { summary: 'image' },
+      },
+    },
+    imageSize: {
+      control: { type: 'select' },
+      options: ['tiny', 'small', 'medium', 'big'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'medium' },
+      },
+    },
+    flexAlign: {
+      name: 'vertical align',
+      options: ['start', 'center', 'end'],
+      control: { type: 'select' },
+      table: {
+        defaultValue: { summary: 'center' },
+      },
+    },
+    colorVariation: {
+      name: 'icon variation',
+      options: ['primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      table: {
+        defaultValue: { summary: 'secondary' },
+      },
+    },
   },
 };
 
 function SingleItem({
-  image,
+  mediaType,
+  imageUrl,
+  icon,
   imageSize,
+  colorVariation,
   description,
-  verticalAlign,
+  flexAlign,
   stackable,
 }) {
   return (
-    <Item className={stackable ? 'stackable' : ''}>
-      <Item.Image className={`ui ${imageSize}`} src={image} alt="item image" />
-      <Item.Content verticalAlign={verticalAlign}>{description}</Item.Content>
+    <Item
+      className={`flex-items-${flexAlign} ${stackable ? ' stackable' : ''}`}
+    >
+      {mediaType === 'image' ? (
+        <Item.Image
+          className={`ui ${imageSize}`}
+          src={imageUrl}
+          alt="item image"
+        />
+      ) : (
+        <Icon className={`${imageSize} ${icon} ${colorVariation}`} />
+      )}
+      <Item.Content>
+        <Item.Description>{description}</Item.Description>
+      </Item.Content>
     </Item>
   );
 }
@@ -45,41 +91,28 @@ export const DefaultItem = (args) => (
   </Container>
 );
 DefaultItem.args = {
-  imageSize: 'tile',
-  verticalAlign: 'middle',
+  mediaType: 'image',
+  imageUrl: GlobeEco,
+  icon: 'ri-leaf-line',
+  imageSize: 'medium',
+  flexAlign: 'center',
+  colorVariation: 'secondary',
   stackable: false,
-  image: GlobeEco,
   description:
     'Support Europe’s transition to a sustainable future with evidence-based knowledge and data.',
 };
 DefaultItem.argTypes = {
-  imageSize: {
-    control: { type: 'select' },
-    options: ['mini', 'tile', 'tiny', 'small'],
-    description: 'Content can specify its vertical alignment',
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: ' "" ' },
-    },
+  imageUrl: {
+    name: 'Image URL',
+    control: 'text',
+    if: { arg: 'mediaType', eq: 'image' },
   },
-  verticalAlign: {
-    control: { type: 'select' },
-    options: ['top', 'middle', 'bottom'],
-    description: 'An image can vary in size',
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: ' "" ' },
-    },
-  },
-  image: {
-    description: 'Path or Url of the image',
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: ' "" ' },
-    },
+  icon: {
+    name: 'Icon class',
+    control: 'text',
+    if: { arg: 'mediaType', eq: 'icon' },
   },
   description: {
-    description: 'Item content description',
     table: {
       type: { summary: 'string' },
       defaultValue: { summary: ' "" ' },
@@ -88,8 +121,12 @@ DefaultItem.argTypes = {
 };
 
 function ItemGroup({
+  mediaType,
+  imageUrl,
+  icon,
   imageSize,
-  verticalAlign,
+  colorVariation,
+  flexAlign,
   ColumnLeft,
   ColumnRight,
   stackable,
@@ -104,8 +141,10 @@ function ItemGroup({
                 <SingleItem
                   key={item.childKey}
                   {...item}
+                  flexAlign={flexAlign}
+                  mediaType={mediaType}
                   imageSize={imageSize}
-                  verticalAlign={verticalAlign}
+                  colorVariation={colorVariation}
                   stackable={stackable}
                 ></SingleItem>
               ))}
@@ -117,8 +156,10 @@ function ItemGroup({
                 <SingleItem
                   key={item.childKey}
                   {...item}
+                  flexAlign={flexAlign}
+                  mediaType={mediaType}
                   imageSize={imageSize}
-                  verticalAlign={verticalAlign}
+                  colorVariation={colorVariation}
                   stackable={stackable}
                 ></SingleItem>
               ))}
@@ -135,25 +176,30 @@ const Template = (args) => <ItemGroup {...args}></ItemGroup>;
 // Group of items
 export const DefaultGroup = Template.bind({});
 DefaultGroup.args = {
-  imageSize: 'tile',
-  verticalAlign: 'middle',
+  mediaType: 'image',
+  imageSize: 'medium',
+  colorVariation: 'secondary',
+  flexAlign: 'center',
   stackable: false,
   ColumnLeft: [
     {
       childKey: 0,
-      image: GlobeEco,
+      imageUrl: GlobeEco,
+      icon: 'ri-earth-line',
       description:
         'Support Europe’s transition to a sustainable future with evidence-based knowledge and data.',
     },
     {
       childKey: 1,
-      image: Sustainable,
+      imageUrl: Sustainable,
+      icon: 'ri-leaf-line',
       description:
         'Supply input on solutions to the sustainability challenges of today – and tomorrow.  ',
     },
     {
       childKey: 2,
-      image: DataAnalytics,
+      imageUrl: DataAnalytics,
+      icon: 'ri-pie-chart-line',
       description:
         'Leverage the data and technology to support the EU’s decision-making processes concerning the environment and climate',
     },
@@ -161,35 +207,102 @@ DefaultGroup.args = {
   ColumnRight: [
     {
       childKey: 0,
-      image: Network,
+      imageUrl: Network,
+      icon: 'ri-pin-distance-line',
       description:
         'Build stronger networks and partnerships with state and regional governments and organisations.',
     },
     {
       childKey: 1,
-      image: Knowledge,
+      imageUrl: Knowledge,
+      icon: 'ri-line-chart-line',
       description:
         'Strengthen the EU’s knowledge capacity and help secure the resources needed to create a sustainable Europe.',
     },
   ],
 };
-DefaultGroup.argTypes = {
-  imageSize: {
-    control: { type: 'select' },
-    options: ['mini', 'tile', 'tiny', 'small'],
-    description: 'Content can specify its vertical alignment',
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: ' "" ' },
+
+function ItemFlexGroup({
+  mediaType,
+  imageUrl,
+  icon,
+  imageSize,
+  colorVariation,
+  flexAlign,
+  Items,
+  stackable,
+}) {
+  return (
+    <Container>
+      <Item.Group unstackable className="row flex-items-wrapper">
+        {Items.map((item) => (
+          <SingleItem
+            key={item.childKey}
+            {...item}
+            flexAlign={flexAlign}
+            mediaType={mediaType}
+            imageSize={imageSize}
+            colorVariation={colorVariation}
+            stackable={stackable}
+          ></SingleItem>
+        ))}
+      </Item.Group>
+    </Container>
+  );
+}
+
+const FlexTemplate = (args) => <ItemFlexGroup {...args}></ItemFlexGroup>;
+
+// Flex items
+export const FlexGroup = FlexTemplate.bind({});
+FlexGroup.args = {
+  mediaType: 'image',
+  imageSize: 'medium',
+  colorVariation: 'secondary',
+  flexAlign: 'center',
+  stackable: false,
+  Items: [
+    {
+      childKey: 0,
+      imageUrl: GlobeEco,
+      icon: 'ri-earth-line',
+      description:
+        'Support Europe’s transition to a sustainable future with evidence-based knowledge and data.',
     },
-  },
-  verticalAlign: {
-    control: { type: 'select' },
-    options: ['top', 'middle', 'bottom'],
-    description: 'An image can vary in size',
-    table: {
-      type: { summary: 'string' },
-      defaultValue: { summary: ' "" ' },
+    {
+      childKey: 1,
+      imageUrl: Sustainable,
+      icon: 'ri-leaf-line',
+      description:
+        'Supply input on solutions to the sustainability challenges of today – and tomorrow.  ',
     },
-  },
+    {
+      childKey: 2,
+      imageUrl: DataAnalytics,
+      icon: 'ri-pie-chart-line',
+      description:
+        'This is an exmple of an item having bigger description text. Leverage the data and technology to support the EU’s decision-making processes concerning the environment and climate',
+    },
+    {
+      childKey: 3,
+      imageUrl: Network,
+      icon: 'ri-pin-distance-line',
+      description:
+        'Build stronger networks and partnerships with state and regional governments and organisations.',
+    },
+    {
+      childKey: 4,
+      imageUrl: GlobeEco,
+      icon: 'ri-earth-line',
+      description:
+        'Support Europe’s transition to a sustainable future with evidence-based knowledge and data.',
+    },
+    {
+      childKey: 5,
+      imageUrl: Knowledge,
+      icon: 'ri-line-chart-line',
+      description:
+        'Strengthen the EU’s knowledge capacity and help secure the resources needed to create a sustainable Europe.',
+    },
+  ],
 };

package/theme/theme.config

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

package/theme/themes/eea/definitions/elements/icon.less

@@ -402,6 +402,7 @@ i.small.icons {
 }
 i.icon,
 i.icons {
+  line-height: 1;
   font-size: @medium;
 }
 i.large.icon,

package/theme/themes/eea/definitions/views/item.less

@@ -186,7 +186,6 @@
 ---------------*/
 
 .ui.items > .item > .content > .description {
-  margin-top: @descriptionDistance;
   max-width: @descriptionMaxWidth;
   font-size: @descriptionFontSize;
   line-height: @descriptionLineHeight;

package/theme/themes/eea/elements/icon.overrides

@@ -1968,10 +1968,6 @@ i.icon.medapps:before {
   content: '\f3c6';
 }
 
-i.icon.medium:before {
-  content: '\f23a';
-}
-
 i.icon.medium.m:before {
   content: '\f3c7';
 }

package/theme/themes/eea/elements/image.overrides

@@ -28,6 +28,10 @@
   width: @mediumWidth;
 }
 
+.block .ui.preview.image {
+  width: @previewWidth;
+}
+
 .block .ui.large.image {
   width: @largeWidth;
 }

package/theme/themes/eea/elements/image.variables

@@ -38,6 +38,7 @@
 @tinyWidth: 80px;
 @smallWidth: 150px;
 @mediumWidth: 300px;
+@previewWidth: 400px;
 @largeWidth: 450px;
 @bigWidth: 600px;
 @hugeWidth: 800px;

package/theme/themes/eea/extras/custom.overrides

@@ -57,6 +57,12 @@
   z-index: @z-index-5;
 }
 
+// remove extra margin from cards on edit, when they are inside a grid such as teaser
+// the outline is cut before the theme background with margin 1em set
+.block .ui.card {
+  margin: 0;
+}
+
 
 // inherit font weight of styled headers so that if we set 300 weight it's visible also on
 // the edit page

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

@@ -24,7 +24,6 @@
   margin-left: @cardMetaDateMarginLeft;
 }
 
-.ui.cards > .card:not(.rounded) > .image,
 .ui.card:not(.rounded) > .image {
   overflow: @cardImageOverflow;
   height: @cardImageHeight;
@@ -128,19 +127,14 @@
 /*******************************
           Rounded Card
 *******************************/
-
-.ui.cards > .ui.card.rounded > .image,
-.ui.card.has--rounded--true > .image,
 .ui.card.rounded > .image {
   height: auto;
 }
 
-.card.has--rounded--true {
+.card.rounded {
   --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;
@@ -154,7 +148,7 @@
   img {
     width: @roundedImageWidth;
     height: @roundedImageHeight;
-    border-radius: @roundedImageBorderRadius;
+    border-radius: @roundedImageBorderRadius !important;
   }
 
   .content {
@@ -326,7 +320,7 @@
 .cards-carousel .next-arrow {
   right: @carouselButtonDistance;
   left: auto;
-} 
+}
 
 /* Custom carousel pagination bullets */
 // avoid dots going over content that follows sliders
@@ -346,7 +340,7 @@
 
 .cards-carousel .slick-dots li.slick-active button:before {
   background-color: @carouselDotsActiveBackgroundColor;
-  color: transparent;  
+  color: transparent;
 }
 
 .slick-dots li button:focus-visible {

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

@@ -90,14 +90,50 @@
   width: auto;
   margin-right: 0;
 }
-.ui.items > .item > .icon + .content {
-  padding-left: @tabletItemSpacing;
+
+/* Image & Icon size */
+.item .image {
+  overflow: hidden;
+}
+
+// Tiny - 24px
+.item .tiny.image,
+.block .item .tiny.image,
+.item i.tiny.icon,
+.item i.tiny.icons {
+  width: @tinyMediaSize;
+  height: @tinyMediaSize;
+  font-size: @tinyMediaSize;
+}
+
+// SMALL - 48px
+.item .small.image,
+.block .item .small.image,
+.item i.small.icon,
+.item i.small.icons {
+  width: @smallMediaSize;
+  height: @smallMediaSize;
+  font-size: @smallMediaSize;
+}
+
+// MEDIUM - 64px
+.item .medium.image,
+.block .item .medium.image,
+.item i.medium.icon,
+.item i.medium.icons {
+  width: @mediumMediaSize;
+  height: @mediumMediaSize;
+  font-size: @mediumMediaSize;
 }
 
-.item .tile.image,
-.block .item .tile.image {
-  width: @tileImageWidth;
-  height: @tileImageHeight;
+// BIG - 80px
+.item .big.image,
+.block .item .big.image,
+.item i.big.icon,
+.item i.big.icons {
+  width: @largeMediaSize;
+  height: @largeMediaSize;
+  font-size: @largeMediaSize;
 }
 
 .ui.items.row > .item {
@@ -106,7 +142,7 @@
 
 // As semantic does for non unstackable items
 // so columns does not affect margin in mobiles
-.ui.items.row > .item:last-child {
+.ui.items.row:not(.flex-items-wrapper) > .item:last-child {
   margin-bottom: 0;
 }
 
@@ -114,7 +150,8 @@
 .ui.items.row .item.stackable {
   display: grid;
 
-  .image {
+  .image,
+  i.icon {
     margin: auto;
   }
 
@@ -124,6 +161,18 @@
   }
 }
 
+// Flex wrapper for list of items
+.ui.items.flex-items-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .item {
+    width: @mobileFlexItemWidth;
+  }
+}
+
+
 @media only screen and (max-width: @largestMobileScreen) {
   .ui.items.row > .item {
     flex-direction: row;
@@ -157,6 +206,11 @@
   .ui.items.row > .item {
     margin: @tabletRowItemMargin;
   }
+
+  // Flex wrapper for list of items
+  .ui.items.flex-items-wrapper .item {
+    width: @tabletFlexItemWidth;
+  }
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
@@ -181,6 +235,11 @@
   .ui.items.row > .item {
     margin: @desktopRowItemMargin;
   }
+
+  // Flex wrapper for list of items
+  .ui.items.flex-items-wrapper .item {
+    width: @desktopFlexItemWidth;
+  }
 }
 
 /*--------------

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

@@ -7,7 +7,7 @@
 --------------------*/
 
 /* Group */
-@groupMargin: 1.5em 0em;
+@groupMargin: @rem-space-6 0em;
 
 /* Item */
 @display: flex;
@@ -56,9 +56,11 @@
 @imageBoxShadow: none;
 @imageBorder: none;
 
-/* Tile image size */
-@tileImageWidth: 50px;
-@tileImageHeight: auto;
+/* Image & Icon size */
+@tinyMediaSize  : 1.5rem;
+@smallMediaSize  : 3rem;
+@mediumMediaSize : 4rem;
+@largeMediaSize  : 5rem;
 
 /* Content */
 @contentDisplay: block;
@@ -107,9 +109,8 @@
 @contentLinkHoverColor: '';
 @contentLinkTransition: color @defaultDuration @defaultEasing;
 
-
 /* Description */
-@descriptionDistance: 0.6em;
+@descriptionDistance: 0;
 @descriptionMaxWidth: auto;
 @descriptionFontSize: 1em;
 @descriptionLineHeight: @lineHeight;
@@ -147,6 +148,11 @@
       Variations
 --------------------*/
 
+/* Flex item */
+@mobileFlexItemWidth: 100%;
+@tabletFlexItemWidth: 48.8%;
+@desktopFlexItemWidth: 49%;
+
 /* Relaxed */
 @relaxedItemSpacing: 1.5em;
 @veryRelaxedItemSpacing: 2em;
@@ -213,4 +219,4 @@
 /* Content */
 @mobileDefaultItemContentPadding: 1.5em;
 @tabletDefaultItemContentPadding: 1em;
-@computerDefaultItemContentPadding: 1.5em;
+@computerDefaultItemContentPadding: 1.5em;

package/website/docs/2-whatsnew.md

@@ -38,7 +38,42 @@ 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.5...HEAD) - 2022-12-07T11:06:35.697Z
+### [Unreleased](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.6...HEAD) - 2022-12-16T13:43:12.354Z
+
+#### :rocket: New Features
+
+- feat(item): normalized size for image or icon items #258 from eea/refactor-items [`945170f`](https://github.com/eea/volto-eea-design-system/commit/945170f1503be68aa3fc1bd950a97eeebfd81037)
+
+#### :bug: Bug Fixes
+
+- fix(card): rounded after removal of has--rounded--true style class [`d4727af`](https://github.com/eea/volto-eea-design-system/commit/d4727afdecf3d25e3e5bc98d472b976d60154183)
+- fix(item): removed margin set for description which pushed the text from icon [`d9d4031`](https://github.com/eea/volto-eea-design-system/commit/d9d40310fcfb1bd214bd901b79dcbac41e9a8518)
+- fix(project): Proper paths if volto-eea-design-system package is not installed, but in development #270 from eea/correct_paths [`0f8ee8d`](https://github.com/eea/volto-eea-design-system/commit/0f8ee8d770f1b26d4315be8f615d58a61acbafc8)
+
+#### :nail_care: Enhancements
+
+- refactor(item): update icon variations and paddings [`6a407b3`](https://github.com/eea/volto-eea-design-system/commit/6a407b3e7f743eb7b73247bcc5d489685d567bc6)
+- refactor(item): update spacing [`2fd91c4`](https://github.com/eea/volto-eea-design-system/commit/2fd91c4aa1a76dd2f7099d3f24f94067e95e06a1)
+- refactor(item): initial values for new sizes  & add description class [`3546296`](https://github.com/eea/volto-eea-design-system/commit/3546296f0cacb96411c8c67b98e9763e2b843b05)
+- refactor(item): add icon and more size options [`1120bb6`](https://github.com/eea/volto-eea-design-system/commit/1120bb62d9ab908c5c97a4871a66e3c08c5c7ece)
+- refactor(item): update image and icon sizes [`b802573`](https://github.com/eea/volto-eea-design-system/commit/b8025735121aaa0024a5783afbde0f6be3715618)
+- change(item): set same height as width on item images [`69cbd23`](https://github.com/eea/volto-eea-design-system/commit/69cbd23ca53dd68ae9f7c00a69ed2d8820746305)
+- refactor(item): update item part 2 [`9812ae2`](https://github.com/eea/volto-eea-design-system/commit/9812ae2e41ac86cfd4c56e13af8af570b752966f)
+- change(item): rename large to big class [`24ff127`](https://github.com/eea/volto-eea-design-system/commit/24ff1275b9a0556b85ab86757bc0c84f50357e7d)
+- change(item): added tiny size that outputs 24px icon sizes [`2ea9636`](https://github.com/eea/volto-eea-design-system/commit/2ea96363a957f9033cb5bfe2d7fd311e92377493)
+- change(image):  added preview image size default to 400px [`a0aa867`](https://github.com/eea/volto-eea-design-system/commit/a0aa867e932d1b3c0bf449553726d6feb645853e)
+- refactor(item): update operator for condition controls [`149ccb2`](https://github.com/eea/volto-eea-design-system/commit/149ccb2f1e498c27e5550214cdee25eb808ab27e)
+
+#### :hammer_and_wrench: Others
+
+- Proper paths if the package is not installed, but in development [`7a2655f`](https://github.com/eea/volto-eea-design-system/commit/7a2655f7cf9d3c687f172eefcf2b4cff4b12f832)
+- Update .project.eslintrc.js [`a2fd3f2`](https://github.com/eea/volto-eea-design-system/commit/a2fd3f23473325976c2b146e066eeb538d140dce)
+- added back descriptionDistance variable until package release [`3af811a`](https://github.com/eea/volto-eea-design-system/commit/3af811a8d86a132e16de118697ba5a4302a8a4da)
+- Release 1.0.0-alpha.7 [`7e66bcc`](https://github.com/eea/volto-eea-design-system/commit/7e66bcc296b389bc55073e7f99681534977dce3a)
+- Add Sonarqube tag using cca-frontend addons list [`ce47e9b`](https://github.com/eea/volto-eea-design-system/commit/ce47e9b163bcb4eda988e3a87718b54ffbd3f99f)
+- Back to dev [`cb531c9`](https://github.com/eea/volto-eea-design-system/commit/cb531c933c907bdbb88c9de0f1df2eb7ce899a4c)
+
+### [1.0.0-alpha.6](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.5...1.0.0-alpha.6) - 2022-12-07
 
 #### :rocket: New Features
 
@@ -71,8 +106,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - grammar fixes [`cb2a5a5`](https://github.com/eea/volto-eea-design-system/commit/cb2a5a5fd9dfc01eccc179721b06988742f5b2e2)
 - Release 1.0.0-alpha.6 [`6ca32f0`](https://github.com/eea/volto-eea-design-system/commit/6ca32f03c1860781d3c1c4ff9558713ad8acac95)
 - feature(copyright): image information #250 from eea/feature-copyright [`a8618c7`](https://github.com/eea/volto-eea-design-system/commit/a8618c7f0230a19b6c973aa2c9646463de9eeffb)
-- Update 3-images.md [`1b0ef03`](https://github.com/eea/volto-eea-design-system/commit/1b0ef033f9c8a36aaa739f268263f24a6d0fb473)
 - lint fix by introducing local variable tagsGap [`7b6c0ae`](https://github.com/eea/volto-eea-design-system/commit/7b6c0ae2ebfed06221700faf9a0d0c2bdeb60d99)
+- Update 3-images.md [`1b0ef03`](https://github.com/eea/volto-eea-design-system/commit/1b0ef033f9c8a36aaa739f268263f24a6d0fb473)
 
 ### [1.0.0-alpha.5](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.4...1.0.0-alpha.5) - 2022-11-29