feature(item): icon is now stackable moving the icon on top #220

eea · Aug 16, 2022 · b716acf · b716acf
2 parents bb6dc01 + 59d1466
commit b716acf
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 10 deletions.
diff --git a/src/ui/Item/ItemGroupWithIcons.stories.js b/src/ui/Item/ItemGroupWithIcons.stories.js
@@ -10,13 +10,26 @@ 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: {
+    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 +45,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 +87,13 @@ DefaultItem.argTypes = {
   },
 };
 
-function ItemGroup({ imageSize, verticalAlign, ColumnLeft, ColumnRight }) {
+function ItemGroup({
+  imageSize,
+  verticalAlign,
+  ColumnLeft,
+  ColumnRight,
+  stackable,
+}) {
   return (
     <Container>
       <Grid>
@@ -86,6 +106,7 @@ function ItemGroup({ imageSize, verticalAlign, ColumnLeft, ColumnRight }) {
                   {...item}
                   imageSize={imageSize}
                   verticalAlign={verticalAlign}
+                  stackable={stackable}
                 ></SingleItem>
               ))}
             </Item.Group>
@@ -98,6 +119,7 @@ function ItemGroup({ imageSize, verticalAlign, ColumnLeft, ColumnRight }) {
                   {...item}
                   imageSize={imageSize}
                   verticalAlign={verticalAlign}
+                  stackable={stackable}
                 ></SingleItem>
               ))}
             </Item.Group>
@@ -113,8 +135,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
@@ -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
@@ -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;