From 8d714fad0465cc71650dcb41236d5667ccc3e789 Mon Sep 17 00:00:00 2001
From: Antonis Tarantilis <antonis@itml.gr>
Date: Thu, 4 Aug 2022 13:49:04 +0000
Subject: [PATCH 1/2] refactor(item): add stackable functionality

---
 src/ui/Item/ItemGroupWithIcons.stories.js | 39 +++++++++++++++++++----
 theme/themes/eea/views/item.overrides     | 16 +++++++++-
 theme/themes/eea/views/item.variables     |  7 ++--
 3 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/src/ui/Item/ItemGroupWithIcons.stories.js b/src/ui/Item/ItemGroupWithIcons.stories.js
index 9091a92730..7a08b30b4c 100644
--- a/src/ui/Item/ItemGroupWithIcons.stories.js
+++ b/src/ui/Item/ItemGroupWithIcons.stories.js
@@ -10,13 +10,28 @@ import Knowledge from '@eeacms/volto-eea-design-system/../theme/themes/eea/asset
 export default {
   title: 'Components/Item/Item group with icons',
   component: Item,
-  argTypes: {},
+  argTypes: {
+    argTypes: {
+      stackable: {
+        description: 'Image above content',
+        table: {
+          type: { summary: 'boolean' },
+          defaultValue: { summary: false },
+        },
+      },
+    },
+  },
 };
 
-function SingleItem({ image, imageSize, description, verticalAlign }) {
+function SingleItem({
+  image,
+  imageSize,
+  description,
+  verticalAlign,
+  stackable,
+}) {
   return (
-    <Item>
-      {/* <Item.Image size={imageSize == 'default' ? '' : imageSize} src={image} alt="item image" /> */}
+    <Item className={stackable ? 'stackable' : ''}>
       <Item.Image className={`ui ${imageSize}`} src={image} alt="item image" />
       <Item.Content verticalAlign={verticalAlign}>{description}</Item.Content>
     </Item>
@@ -32,8 +47,9 @@ export const DefaultItem = (args) => (
   </Container>
 );
 DefaultItem.args = {
-  imageSize: 'default',
+  imageSize: 'tile',
   verticalAlign: 'middle',
+  stackable: false,
   image: GlobeEco,
   description:
     'Support Europe’s transition to a sustainable future with evidence-based knowledge and data.',
@@ -73,7 +89,13 @@ DefaultItem.argTypes = {
   },
 };
 
-function ItemGroup({ imageSize, verticalAlign, ColumnLeft, ColumnRight }) {
+function ItemGroup({
+  imageSize,
+  verticalAlign,
+  ColumnLeft,
+  ColumnRight,
+  stackable,
+}) {
   return (
     <Container>
       <Grid>
@@ -86,6 +108,7 @@ function ItemGroup({ imageSize, verticalAlign, ColumnLeft, ColumnRight }) {
                   {...item}
                   imageSize={imageSize}
                   verticalAlign={verticalAlign}
+                  stackable={stackable}
                 ></SingleItem>
               ))}
             </Item.Group>
@@ -98,6 +121,7 @@ function ItemGroup({ imageSize, verticalAlign, ColumnLeft, ColumnRight }) {
                   {...item}
                   imageSize={imageSize}
                   verticalAlign={verticalAlign}
+                  stackable={stackable}
                 ></SingleItem>
               ))}
             </Item.Group>
@@ -113,8 +137,9 @@ const Template = (args) => <ItemGroup {...args}></ItemGroup>;
 // Group of items
 export const DefaultGroup = Template.bind({});
 DefaultGroup.args = {
-  imageSize: 'mini',
+  imageSize: 'tile',
   verticalAlign: 'middle',
+  stackable: false,
   ColumnLeft: [
     {
       childKey: 0,
diff --git a/theme/themes/eea/views/item.overrides b/theme/themes/eea/views/item.overrides
index 8d4d59af4e..f9c2d3d9b9 100644
--- a/theme/themes/eea/views/item.overrides
+++ b/theme/themes/eea/views/item.overrides
@@ -97,12 +97,26 @@
   margin-bottom: 0;
 }
 
+// Stackable items that have image above content
+.ui.items.row .item.stackable {
+  display: grid;
+
+  .image {
+    margin: auto;
+  }
+
+  .content {
+    padding-left: @stackableContentPaddingLeft;
+    padding-top: @stackableContentPaddingTop;
+  }
+}
+
 @media only screen and (max-width: @largestMobileScreen) {
   .ui.items.row > .item {
     flex-direction: row;
   }
 
-  .ui.items.row > .item > .image + .content {
+  .ui.items.row > .item:not(.stackable) > .image + .content {
     padding: 0em 0em 0em @mobileContentImageDistance;
   }
 }
diff --git a/theme/themes/eea/views/item.variables b/theme/themes/eea/views/item.variables
index 0aea7772ac..4d6f506440 100644
--- a/theme/themes/eea/views/item.variables
+++ b/theme/themes/eea/views/item.variables
@@ -155,10 +155,13 @@
 @dividedFirstLastMargin: 0em;
 @dividedFirstLastPadding: 0em;
 
-
-/* Unstackable */
+/* Unstackable items */
 @unstackableMobileImageWidth: 125px;
 
+/* Stackable item */
+@stackableContentPaddingTop: @rem-space-4;
+@stackableContentPaddingLeft: 0;
+
 /* Row */
 @mobileRowItemMargin  : 1rem 0;
 @tabletRowItemMargin  : 1.5rem 0;

From dde0be5f7fe362143e248f7e53aa1d2e5df1fda0 Mon Sep 17 00:00:00 2001
From: Antonis Tarantilis <antonis@itml.gr>
Date: Thu, 4 Aug 2022 13:59:43 +0000
Subject: [PATCH 2/2] fix(item): remove duplicate argType

---
 src/ui/Item/ItemGroupWithIcons.stories.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/ui/Item/ItemGroupWithIcons.stories.js b/src/ui/Item/ItemGroupWithIcons.stories.js
index 7a08b30b4c..39245b7771 100644
--- a/src/ui/Item/ItemGroupWithIcons.stories.js
+++ b/src/ui/Item/ItemGroupWithIcons.stories.js
@@ -11,13 +11,11 @@ export default {
   title: 'Components/Item/Item group with icons',
   component: Item,
   argTypes: {
-    argTypes: {
-      stackable: {
-        description: 'Image above content',
-        table: {
-          type: { summary: 'boolean' },
-          defaultValue: { summary: false },
-        },
+    stackable: {
+      description: 'Image above content',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
       },
     },
   },