refactor(item): WIP replacing unstackable with row

eea · May 20, 2022 · e3a44de · e3a44de
1 parent 7f4ea47
commit e3a44de
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 23 deletions.
diff --git a/src/ui/Item/ItemGroupWithIcons.stories.js b/src/ui/Item/ItemGroupWithIcons.stories.js
@@ -10,26 +10,7 @@ import Knowledge from '@eeacms/volto-eea-design-system/../theme/themes/eea/asset
 export default {
   title: 'Components/Item/Item group with icons',
   component: Item,
-  argTypes: {
-    imageSize: {
-      control: { type: 'select' },
-      options: ['mini', 'default', 'tiny', 'small'],
-      description: 'Content can specify its vertical alignment',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: ' "" ' },
-      },
-    },
-    verticalAlign: {
-      control: { type: 'select' },
-      options: ['top', 'middle', 'bottom'],
-      description: 'An image can vary in size',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: ' "" ' },
-      },
-    },
-  },
+  argTypes: {},
 };
 
 function SingleItem({ image, imageSize, description, verticalAlign }) {
@@ -45,7 +26,7 @@ function SingleItem({ image, imageSize, description, verticalAlign }) {
 // Single item
 export const DefaultItem = (args) => (
   <Container>
-    <Item.Group relaxed>
+    <Item.Group unstackable className="row">
       <SingleItem {...args}></SingleItem>
     </Item.Group>
   </Container>
@@ -65,6 +46,24 @@ DefaultItem.argTypes = {
       defaultValue: { summary: ' "" ' },
     },
   },
+  imageSize: {
+    control: { type: 'select' },
+    options: ['mini', 'default', 'tiny', 'small'],
+    description: 'Content can specify its vertical alignment',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
+  verticalAlign: {
+    control: { type: 'select' },
+    options: ['top', 'middle', 'bottom'],
+    description: 'An image can vary in size',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: ' "" ' },
+    },
+  },
   description: {
     description: 'Item content description',
     table: {
@@ -80,14 +79,14 @@ function ItemGroup({ imageSize, verticalAlign, ColumnLeft, ColumnRight }) {
       <Grid>
         <Grid.Row>
           <Grid.Column mobile={12} tablet={6} computer={6}>
-            <Item.Group relaxed unstackable>
+            <Item.Group className="row">
               {ColumnLeft.map((item) => (
                 <SingleItem key={item.childKey} {...item}></SingleItem>
               ))}
             </Item.Group>
           </Grid.Column>
           <Grid.Column mobile={12} tablet={6} computer={6}>
-            <Item.Group relaxed unstackable>
+            <Item.Group className="row">
               {ColumnRight.map((item) => (
                 <SingleItem key={item.childKey} {...item}></SingleItem>
               ))}

diff --git a/theme/themes/eea/views/item.overrides b/theme/themes/eea/views/item.overrides
@@ -11,3 +11,23 @@
   width: 50px;
   height: auto;
 }
+
+// 
+@media only screen and (max-width: @largestMobileScreen) {
+  .ui.items.row > .item {
+    flex-direction: row;
+  }
+
+  /*
+  .ui.items.row > .item > .image,
+  .ui.items.row > .item > .image > img {
+    max-width: none !important;
+    max-height: none !important;
+    width: inherit !important;
+  }
+  */
+
+  .ui.items.row > .item > .image + .content {
+    padding: 0em 0em 0em @mobileContentImageDistance;
+  }
+}