change(item): set same height as width on item images

- set secondary by default to the color variation since the images are green
- set to center by default the alignment instead of start

src/ui/Item/ItemGroupWithIcons.stories.js

@@ -38,15 +38,15 @@ export default {
       options: ['start', 'center', 'end'],
       control: { type: 'select' },
       table: {
-        defaultValue: { summary: 'start' },
+        defaultValue: { summary: 'center' },
       },
     },
     colorVariation: {
       name: 'icon variation',
       options: ['primary', 'secondary', 'tertiary'],
       control: { type: 'select' },
       table: {
-        defaultValue: { summary: 'tertiary' },
+        defaultValue: { summary: 'secondary' },
       },
     },
   },
@@ -95,7 +95,8 @@ DefaultItem.args = {
   imageUrl: GlobeEco,
   icon: 'ri-leaf-line',
   imageSize: 'medium',
-  flexAlign: 'start',
+  flexAlign: 'center',
+  colorVariation: 'secondary',
   stackable: false,
   description:
     'Support Europe’s transition to a sustainable future with evidence-based knowledge and data.',
@@ -177,8 +178,8 @@ export const DefaultGroup = Template.bind({});
 DefaultGroup.args = {
   mediaType: 'image',
   imageSize: 'medium',
-  colorVariation: 'tertiary',
-  flexAlign: 'start',
+  colorVariation: 'secondary',
+  flexAlign: 'center',
   stackable: false,
   ColumnLeft: [
     {
@@ -257,8 +258,8 @@ export const FlexGroup = FlexTemplate.bind({});
 FlexGroup.args = {
   mediaType: 'image',
   imageSize: 'medium',
-  colorVariation: 'tertiary',
-  flexAlign: 'start',
+  colorVariation: 'secondary',
+  flexAlign: 'center',
   stackable: false,
   Items: [
     {

theme/themes/eea/views/item.overrides

@@ -96,30 +96,30 @@
 // SMALL - 48px
 .item .small.image,
 .block .item .small.image,
-.item i.small.icon, 
+.item i.small.icon,
 .item i.small.icons {
   width: @smallMediaSize;
-  height: auto;
+  height: @smallMediaSize;
   font-size: @smallMediaSize;
 }
 
 // MEDIUM - 64px
 .item .medium.image,
 .block .item .medium.image,
-.item i.medium.icon, 
+.item i.medium.icon,
 .item i.medium.icons {
   width: @mediumMediaSize;
-  height: auto;
+  height: @mediumMediaSize;
   font-size: @mediumMediaSize;
 }
 
 // LARGE - 80px
 .item .large.image,
 .block .item .large.image,
-.item i.large.icon, 
+.item i.large.icon,
 .item i.large.icons {
-  width: @largeMediaSize; 
-  height: auto;
+  width: @largeMediaSize;
+  height: @largeMediaSize;
   font-size: @largeMediaSize;
 }
 
@@ -248,4 +248,4 @@
   > .icon.tertiary {
     color: @tertiaryColor;
   }
-}
+}