Repository: marigold-ui/marigold
Pull request #1925 (2022-03-28 10:30:26)

feat(comp): Rewrite Columns and remove Column
#1860 

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: e59eab386b77e3d76e8fc1254e6ed9f96f379d75

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/columns-update?filename=.changeset/tidy-eggs-try.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Afeat(comp)%3A%20Rewrite%20Columns%20and%20remove%20Column%0A)



Patch:
diff --git a/.changeset/dirty-comics-swim.md b/.changeset/dirty-comics-swim.md
new file mode 100644
index 000000000..ed50f2877
--- /dev/null
+++ b/.changeset/dirty-comics-swim.md
@@ -0,0 +1,5 @@
+---
+"@marigold/system": minor
+---
+
+feat(comp): improve SVG to handle width and height prop
diff --git a/.changeset/tidy-eggs-try.md b/.changeset/tidy-eggs-try.md
new file mode 100644
index 000000000..86312f922
--- /dev/null
+++ b/.changeset/tidy-eggs-try.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": minor
+"@marigold/components": minor
+---
+
+feat(comp): Rewrite Columns and remove Column
diff --git a/docs/content/components/column.mdx b/docs/content/components/column.mdx
deleted file mode 100644
index f07d7a76d..000000000
--- a/docs/content/components/column.mdx
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Column
----
-
-# Column
-
-## Description
-
-With the Column component you can add a column with a width in percent of the full content.
-
-## Properties
-
-| Property           | Type                                    | Default |
-| :----------------- | :-------------------------------------- | :------ |
-| `width` (optional) | `1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12` | `12`    |
-
-## Import
-
-```tsx onlyCode
-import { Column } from '@marigold/components';
-```
-
-## Live-Code Example
-
-```tsx expandCode
-<Column>
-  <Box p="small" border="1px solid #9496a3" borderRadius="4px">
-    width=12
-  </Box>
-</Column>
-```
-
-## Usage
-
-```tsx
-<Column>
-  <Box p="small" border="1px solid gray" borderRadius="4px">
-    width=12
-  </Box>
-</Column>
-```
-
-```tsx
-<Column width={6}>
-  <Box p="small" border="1px solid gray" borderRadius="4px">
-    width=6
-  </Box>
-</Column>
-```
-
-```tsx
-<Column width={3}>
-  <Box p="small" border="1px solid gray" borderRadius="4px">
-    width=3
-  </Box>
-</Column>
-```
-
-```tsx
-<Column width={2}>
-  <Box p="small" border="1px solid gray" borderRadius="4px">
-    width=2
-  </Box>
-</Column>
-```
diff --git a/docs/content/components/columns.mdx b/docs/content/components/columns.mdx
index b4483a361..9a79997bc 100644
--- a/docs/content/components/columns.mdx
+++ b/docs/content/components/columns.mdx
@@ -6,228 +6,120 @@ title: Columns
 
 ## Description
 
-With the Columns component you can add a bundle of column components by adding props to create a layout.
+Columns component with sized columns in one row. Add an array of numbers to set the size of the children. The columns array length and the count of children must be the same. You can add space between the columns und set a collapseAt prop to collapse the columns at a certain width.
 
-## Properties
-
-| Property                     | Type                           | Default |
-| :--------------------------- | :----------------------------- | :------ |
-| `space` (optional)           | `ResponsiveStyleValue<string>` | `none`  |
-| `horizontalAlign` (optional) | `left, right, center`          | `left`  |
-| `verticalAlign` (optional)   | `top, bottom, center`          | `top`   |
-
-## Import
+<Columns space="xsmall" columns={[2, 8, 2]}>
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+</Columns>
 
 ```tsx onlyCode
 import { Columns } from '@marigold/components';
 ```
 
-## Live-Code Example
+## Props
 
-```tsx expandCode
-<Columns space="xsmall" verticalAlign="top" horizontalAlign="left">
-  <Column width={6}>
-    <Text>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-      dignissim.
-    </Text>
-  </Column>
-  <Column width={6}>
-    <Text>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-      dignissim.
-    </Text>
-  </Column>
-</Columns>
-```
+| Property        | Type                           | Default  |
+| :-------------- | :----------------------------- | :------- |
+| `columns` (req) | `number[]`                     |          |
+| `space`         | `ResponsiveStyleValue<string>` | `none`   |
+| `collapseAt`    | `40em`                         | `string` |
 
-## Usage
+## Examples
 
-### Spacing
+Columns and a space between them
 
-```tsx
-<Columns space="medium">
-  <Column width={4}>
-    <Text>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-      dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada,
-      massa nec ultricies efficitur, lectus ante consequat magna, a porttitor
-      massa ex ut quam.
-    </Text>
-  </Column>
-  <Column width={4}>
-    <Text>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-      dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada,
-      massa nec ultricies efficitur, lectus ante consequat magna, a porttitor
-      massa ex ut quam.
-    </Text>
-  </Column>
-  <Column width={4}>
-    <Text>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-      dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada,
-      massa nec ultricies efficitur, lectus ante consequat magna, a porttitor
-      massa ex ut quam.
-    </Text>
-  </Column>
+```tsx expandCode
+<Columns space="xsmall" columns={[2, 8, 2]}>
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
 </Columns>
 ```
 
-### Width
+Columns collapsing at a certain width
 
 ```tsx
-<Columns space="xsmall">
-  <Column width={12}>
-    <Box p="xsmall" bg="#dddde2" borderRadius="4px" mb="xxsmall">
-      width=12
-    </Box>
-  </Column>
-  <Column width={6}>
-    <Box p="xsmall" bg="#dddde2" borderRadius="4px" mb="xxsmall">
-      width=6
-    </Box>
-  </Column>
-  <Column width={6}>
-    <Box p="xsmall" bg="#dddde2" borderRadius="4px" mb="xxsmall">
-      width=6
-    </Box>
-  </Column>
-  <Column width={4}>
-    <Box p="xsmall" bg="#dddde2" borderRadius="4px" mb="xxsmall">
-      width=4
-    </Box>
-  </Column>
-  <Column width={4}>
-    <Box p="xsmall" bg="#dddde2" borderRadius="4px" mb="xxsmall">
-      width=4
-    </Box>
-  </Column>
-  <Column width={4}>
-    <Box p="xsmall" bg="#dddde2" borderRadius="4px" mb="xxsmall">
-      width=4
-    </Box>
-  </Column>
-  <Column width={3}>
-    <Box p="xsmall" bg="#dddde2" borderRadius="4px" mb="xxsmall">
-      width=3
-    </Box>
-  </Column>
-  <Column width={3}>
-    <Box p="xsmall" bg="#dddde2" borderRadius="4px" mb="xxsmall">
-      width=3
-    </Box>
-  </Column>
-  <Column width={3}>
-    <Box p="xsmall" bg="#dddde2" borderRadius="4px" mb="xxsmall">
-      width=3
-    </Box>
-  </Column>
-  <Column width={3}>
-    <Box p="xsmall" bg="#dddde2" borderRadius="4px" mb="xxsmall">
-      width=3
-    </Box>
-  </Column>
+<Columns collapseAt="50em" space="xsmall" columns={[2, 10]}>
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
 </Columns>
 ```
 
-### Horizontal Alignment
+## Page layout
 
-```tsx
-<>
-  <Columns space="medium" horizontalAlign="left">
-    <Column width={2}>
-      <Box p="small" bg="#dddde2" borderRadius="4px">
-        left
-      </Box>
-    </Column>
-  </Columns>
-  <Divider />
-  <Columns space="medium" horizontalAlign="center">
-    <Column width={2}>
-      <Box p="small" bg="#dddde2" borderRadius="4px">
-        center
-      </Box>
-    </Column>
-  </Columns>
-  <Divider />
-  <Columns space="medium" horizontalAlign="right">
-    <Column width={2}>
-      <Box p="small" bg="#dddde2" borderRadius="4px">
-        right
-      </Box>
-    </Column>
-  </Columns>
-</>
-```
+Create a page layout with three columns
 
-### Vertical Alignment
-
-```tsx
-<Columns space="xxsmall" verticalAlign="top">
-  <Column width={3}>
-    <Box
-      display="flex"
-      alignItems="flex-start"
-      justifyContent="center"
-      height="80px"
-      bg="#dddde2"
-      borderRadius="4px"
-      p="xxsmall"
-    >
-      top
-    </Box>
-  </Column>
-  <Column width={9}>
-    <Box p="xsmall" height="40px" bg="#dddde2" borderRadius="4px">
-      <ArrowUp />
-    </Box>
-  </Column>
+<Columns space="xsmall" columns={[2, 8, 2]}>
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="250px" p="xsmall">
+    Left Sidebar
+  </Box>
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="250px" p="xsmall">
+    Main Content
+  </Box>
+  <Box border="1px solid #ced4da" bg="#e9ecef" height="250px" p="xsmall">
+    Right Sidebar
+  </Box>
 </Columns>
-```
 
-```tsx
-<Columns space="xxsmall" verticalAlign="center">
-  <Column width={3}>
-    <Box
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      height="80px"
-      bg="#dddde2"
-      borderRadius="4px"
-      p="xxsmall"
-    >
-      center
-    </Box>
-  </Column>
-  <Column width={9}>
-    <Box p="xsmall" height="40px" bg="#dddde2" borderRadius="4px">
-      <ArrowLeft />
-    </Box>
-  </Column>
+## Breadcrumb
+
+Create a Breadcrumb with different widths
+
+<Columns columns={[2, 2, 2, 1, 1, 1]}>
+  <Box
+    border="1px solid"
+    height="50px"
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+  >
+    Sport
+  </Box>
+  <Box
+    border="1px solid"
+    height="50px"
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+  >
+    Shows
+  </Box>
+  <Box
+    border="1px solid"
+    height="50px"
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+  >
+    Konzerte
+  </Box>
+  <Box
+    border="1px solid"
+    height="50px"
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+  >
+    Comedy
+  </Box>
+  <Box
+    border="1px solid"
+    height="50px"
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+  >
+    Theater
+  </Box>
+  <Box
+    border="1px solid"
+    height="50px"
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+  >
+    Klassik
+  </Box>
 </Columns>
-```
-
-```tsx
-<Columns space="xxsmall" verticalAlign="bottom">
-  <Column width={3}>
-    <Box
-      display="flex"
-      alignItems="flex-end"
-      justifyContent="center"
-      height="80px"
-      bg="#dddde2"
-      borderRadius="4px"
-      p="xxsmall"
-    >
-      bottom
-    </Box>
-  </Column>
-  <Column width={9}>
-    <Box p="xsmall" height="40px" bg="#dddde2" borderRadius="4px">
-      <ArrowDown />
-    </Box>
-  </Column>
-</Columns>
-```
diff --git a/docs/src/components/Layout.tsx b/docs/src/components/Layout.tsx
index 92fe86c99..8e89aa459 100644
--- a/docs/src/components/Layout.tsx
+++ b/docs/src/components/Layout.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Column, Columns, Stack } from '@marigold/components';
+import { Box, Columns, Stack } from '@marigold/components';
 
 import { Link } from './Link';
 import { Logo } from './Logo';
@@ -10,19 +10,17 @@ import { Version } from './Version';
 export const Layout: React.FC = ({ children }) => {
   return (
     <>
-      <Columns space="xsmall">
-        <Column width={[12, 2]}>
-          <Stack space="small">
-            <Box p="medium">
-              <Link to="/">
-                <Logo size="small" />
-              </Link>
-            </Box>
-            <ThemeSelect />
-            <Navigation />
-          </Stack>
-        </Column>
-        <Column width={[12, 10]}>{children}</Column>
+      <Columns columns={[2, 10]} space="xsmall" collapseAt="60em">
+        <Stack space="small">
+          <Box p="medium">
+            <Link to="/">
+              <Logo size="small" />
+            </Link>
+          </Box>
+          <ThemeSelect />
+          <Navigation />
+        </Stack>
+        <Box>{children}</Box>
       </Columns>
       <Version />
     </>
diff --git a/docs/src/theme/index.ts b/docs/src/theme/index.ts
index 4e9540760..1abebb833 100644
--- a/docs/src/theme/index.ts
+++ b/docs/src/theme/index.ts
@@ -34,7 +34,7 @@ export const theme: Theme = {
   },
   root: {
     body: {
-      m: 'xsmall',
+      m: 'small',
       p: 'none',
       fontFamily: 'body',
     },
diff --git a/packages/components/src/Column/Column.stories.tsx b/packages/components/src/Column/Column.stories.tsx
deleted file mode 100644
index 17f0e6579..000000000
--- a/packages/components/src/Column/Column.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-
-import { Column } from './Column';
-import { Box } from '../Box';
-
-export default {
-  title: 'Components/Column',
-  argTypes: {
-    width: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 12,
-        step: 1,
-      },
-      description: 'Absolute width in 12 grid',
-      table: {
-        defaultValue: {
-          summary: 12,
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Column> = args => (
-  <Column width={12} {...args}>
-    <Box p="small" border="1px solid gray" borderRadius="4px">
-      width=12
-    </Box>
-  </Column>
-);
diff --git a/packages/components/src/Column/Column.tsx b/packages/components/src/Column/Column.tsx
deleted file mode 100755
index 8d1648e60..000000000
--- a/packages/components/src/Column/Column.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { Box } from '../Box';
-
-type WidthValues = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-export interface ColumnProps {
-  className?: string;
-  width?: WidthValues | WidthValues[];
-}
-
-const transform = (width: WidthValues | WidthValues[]) => {
-  if (Array.isArray(width)) {
-    return width.map(v => `${(v / 12) * 100}%`);
-  }
-
-  return `${(width / 12) * 100}%`;
-};
-
-export const Column: React.FC<ColumnProps> = ({
-  width = 12,
-  children,
-  ...props
-}) => (
-  <Box {...props} width={transform(width)}>
-    {children}
-  </Box>
-);
diff --git a/packages/components/src/Column/index.ts b/packages/components/src/Column/index.ts
deleted file mode 100644
index f59b699c2..000000000
--- a/packages/components/src/Column/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export * from './Column';
diff --git a/packages/components/src/Columns/Columns.stories.tsx b/packages/components/src/Columns/Columns.stories.tsx
index b59e788de..5110cb1ef 100644
--- a/packages/components/src/Columns/Columns.stories.tsx
+++ b/packages/components/src/Columns/Columns.stories.tsx
@@ -1,10 +1,30 @@
 import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
-import { Column, Columns, Text } from '@marigold/components';
+
+import { Box, Columns } from '@marigold/components';
 
 export default {
   title: 'Components/Columns',
   argTypes: {
+    columns: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        [4, 4, 4],
+        [2, 8, 2],
+        [2, 5, 5],
+        [3, 6, 3],
+        [8, 2, 2],
+      ],
+      description: 'array of numbers to set width of every column',
+      defaultValue: [2, 8, 2],
+      table: {
+        defaultValue: {
+          summary: [2, 8, 2],
+        },
+      },
+    },
     space: {
       control: {
         type: 'select',
@@ -26,27 +46,15 @@ export default {
         },
       },
     },
-    horizontalAlign: {
+    collapseAt: {
       control: {
-        type: 'select',
-      },
-      options: ['left', 'right', 'center'],
-      description: 'where to place',
-      table: {
-        defaultValue: {
-          summary: 'left',
-        },
+        type: 'text',
       },
-    },
-    verticalAlign: {
-      control: {
-        type: 'select',
-      },
-      options: ['top', 'bottom', 'center'],
-      description: 'where to place',
+      defaultValue: '40em',
+      description: 'Responsive Style Value',
       table: {
         defaultValue: {
-          summary: 'top',
+          summary: '40em',
         },
       },
     },
@@ -55,21 +63,8 @@ export default {
 
 export const Basic: ComponentStory<typeof Columns> = args => (
   <Columns {...args}>
-    <Column width={6}>
-      <Text>First column</Text>
-      <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-        dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada,
-        massa nec ultricies efficitur.
-      </Text>
-    </Column>
-    <Column width={6}>
-      <Text>Second column</Text>
-      <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-        dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada,
-        massa nec ultricies efficitur.
-      </Text>
-    </Column>
+    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
   </Columns>
 );
diff --git a/packages/components/src/Columns/Columns.tsx b/packages/components/src/Columns/Columns.tsx
index 13a1c9225..dd9b9da9c 100755
--- a/packages/components/src/Columns/Columns.tsx
+++ b/packages/components/src/Columns/Columns.tsx
@@ -1,69 +1,57 @@
 import React, { Children } from 'react';
+
+import { ResponsiveStyleValue } from '@marigold/system';
+
 import { Box } from '../Box';
-import { ResponsiveStyleValue, useTheme } from '@marigold/system';
-import { flattenChildren } from '../utils';
 
 export interface ColumnsProps {
-  className?: string;
+  columns: Array<number>;
   space?: ResponsiveStyleValue<string>;
-  horizontalAlign?: 'left' | 'right' | 'center';
-  verticalAlign?: 'top' | 'bottom' | 'center';
+  columnLimit?: number;
+  collapseAt?: string;
 }
 
-const useAlignment = (direction: string) => {
-  switch (direction) {
-    case 'right':
-      return 'flex-end';
-    case 'bottom':
-      return 'flex-end';
-    case 'center':
-      return 'center';
-  }
-  return 'flex-start';
-};
-
 export const Columns: React.FC<ColumnsProps> = ({
   space = 'none',
-  horizontalAlign = 'left',
-  verticalAlign = 'top',
-  className,
+  columns,
+  collapseAt = '40em',
   children,
   ...props
 }) => {
-  const justifyContent = useAlignment(horizontalAlign);
-  const alignItems = useAlignment(verticalAlign);
+  if (Children.count(children) !== columns.length) {
+    throw new Error(
+      `Columns: expected ${columns.length} children, got ${Children.count(
+        children
+      )}`
+    );
+  }
 
-  /**
-   * transform space string to space value from theme
-   */
-  const { css } = useTheme();
-  const spaceObject = css({ space }) as Object;
-  const spaceValue = Object.values(spaceObject)[0];
+  // create an array to get column widths
+  const getColumnWidths = columns.map((column, index) => {
+    return {
+      [`> :nth-of-type(${index + 1})`]: {
+        flexGrow: column,
+      },
+    };
+  });
 
   return (
-    <Box p={space} display="flex" className={className}>
-      <Box
-        width={`calc(100% + ${spaceValue}px)`}
-        m={`${-spaceValue / 2}px`}
-        display="flex"
-        flexWrap="wrap"
-        alignItems={alignItems}
-        justifyContent={justifyContent}
-        {...props}
-      >
-        {Children.map(
-          flattenChildren(children) as unknown as React.ReactElement,
-          (child: React.ReactElement) => {
-            return React.cloneElement(
-              child,
-              {},
-              <Box css={{ p: `${spaceValue / 2}px` }}>
-                {child.props.children}
-              </Box>
-            );
-          }
-        )}
-      </Box>
+    <Box
+      display="flex"
+      css={Object.assign(
+        {
+          flexWrap: 'wrap',
+          gap: space,
+          '> *': {
+            // display breakpoint at collapseAt value
+            flexBasis: `calc(( ${collapseAt} - 100%) * 999)`,
+          },
+        },
+        ...getColumnWidths!
+      )}
+      {...props}
+    >
+      {children}
     </Box>
   );
 };
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 861606714..c24a90172 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -10,7 +10,6 @@ export * from './Breakout';
 export * from './Card';
 export * from './Center';
 export * from './Checkbox';
-export * from './Column';
 export * from './Columns';
 export * from './Dialog';
 export * from './Divider';
diff --git a/packages/system/src/SVG.tsx b/packages/system/src/SVG.tsx
index e5b90c375..75fe9e435 100644
--- a/packages/system/src/SVG.tsx
+++ b/packages/system/src/SVG.tsx
@@ -25,7 +25,6 @@ export const SVG = ({
   ...props
 }: SVGProps) => {
   const { css } = useTheme();
-  const dimension = toDimension(size);
 
   return jsx(
     'svg',
@@ -34,8 +33,8 @@ export const SVG = ({
       css: css({
         ...normalizedStyles,
         fill,
-        width: dimension,
-        height: dimension,
+        width: toDimension(props.width || size),
+        height: toDimension(props.height || size),
       }),
       ...props,
     },


Test patch:
diff --git a/packages/components/src/Column/Column.test.tsx b/packages/components/src/Column/Column.test.tsx
deleted file mode 100644
index ef900cf6a..000000000
--- a/packages/components/src/Column/Column.test.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Column } from './Column';
-
-test('supports width prop', () => {
-  render(<Column width={6}>column</Column>);
-  const column = screen.getByText('column');
-
-  expect(column).toHaveStyle(`width: 50%`);
-});
-
-test('renders correct HTML element', () => {
-  render(<Column>column</Column>);
-  const column = screen.getByText('column');
-
-  expect(column instanceof HTMLDivElement).toBeTruthy();
-});
-
-test('accepts custom styles prop className', () => {
-  render(<Column className="custom-class-name">column</Column>);
-  const column = screen.getByText('column');
-
-  expect(column.className).toMatch('custom-class-name');
-});
-
-test('accepts responsive values', () => {
-  render(<Column width={[12, 6]}>column</Column>);
-  const column = screen.getByText('column');
-
-  // Note: as of November 2021 jest-dom does not support media queries...
-  expect(column).toHaveStyle('width: 100%');
-});
diff --git a/packages/components/src/Columns/Columns.test.tsx b/packages/components/src/Columns/Columns.test.tsx
index 54812db7c..32beb645e 100644
--- a/packages/components/src/Columns/Columns.test.tsx
+++ b/packages/components/src/Columns/Columns.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Column, Columns, MarigoldProvider } from '@marigold/components';
+import { Box, Columns, MarigoldProvider } from '@marigold/components';
 
 const theme = {
   space: {
@@ -12,102 +12,91 @@ const theme = {
 test('supports default space prop', () => {
   render(
     <MarigoldProvider theme={theme}>
-      <Columns data-testid="column">
-        <Column>column</Column>
+      <Columns columns={[6, 6]} data-testid="columns">
+        <Box>column</Box>
+        <Box>column</Box>
       </Columns>
     </MarigoldProvider>
   );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`margin: 0px`);
+  const column = screen.getByTestId(/columns/);
+  expect(column).toHaveStyle(`gap: 0`);
 });
 
 test('supports custom space prop', () => {
   render(
     <MarigoldProvider theme={theme}>
-      <Columns space="large" data-testid="column">
-        <Column>column</Column>
+      <Columns columns={[6, 6]} space="large" data-testid="columns">
+        <Box>column</Box>
+        <Box>column</Box>
       </Columns>
     </MarigoldProvider>
   );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`margin: -12px`);
-});
-
-test('supports default horizontalAlign prop: left', () => {
-  render(
-    <Columns data-testid="column">
-      <Column>column</Column>
-    </Columns>
-  );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`justify-content: flex-start`);
+  const column = screen.getByTestId(/columns/);
+  expect(column).toHaveStyle(`gap: 24px`);
 });
 
-test('supports custom horizontalAlign prop: center', () => {
+test('supports default collapseAt prop', () => {
   render(
-    <Columns horizontalAlign="center" data-testid="column">
-      <Column>column</Column>
+    <Columns columns={[12]}>
+      <Box>columnOne</Box>
     </Columns>
   );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`justify-content: center`);
+  const columnOne = screen.getByText(/columnOne/);
+  expect(columnOne).toHaveStyle(`flexBasis : calc(( 40em - 100%) * 999)`);
 });
 
-test('supports custom horizontalAlign prop: right', () => {
+test('supports custom collapseAt prop', () => {
   render(
-    <Columns horizontalAlign="right" data-testid="column">
-      <Column>column</Column>
+    <Columns columns={[12]} collapseAt="50em">
+      <Box>columnOne</Box>
     </Columns>
   );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`justify-content: flex-end`);
+  const columnOne = screen.getByText(/columnOne/);
+  expect(columnOne).toHaveStyle(`flexBasis : calc(( 50em - 100%) * 999)`);
 });
 
-test('supports default verticalAlign prop: top', () => {
+test('supports columns with two values', () => {
   render(
-    <Columns data-testid="column">
-      <Column>column</Column>
+    <Columns columns={[2, 10]}>
+      <Box>columnOne</Box>
+      <Box>columnTwo</Box>
     </Columns>
   );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`align-items: flex-start`);
+  const columnOne = screen.getByText(/columnOne/);
+  const columnTwo = screen.getByText(/columnTwo/);
+  expect(columnOne).toHaveStyle(`flexGrow : 2`);
+  expect(columnTwo).toHaveStyle(`flexGrow : 10`);
 });
 
-test('supports custom verticalAlign prop: center', () => {
+test('supports columns with three values', () => {
   render(
-    <Columns verticalAlign="center" data-testid="column">
-      <Column>column</Column>
+    <Columns columns={[2, 4, 6]}>
+      <Box>columnOne</Box>
+      <Box>columnTwo</Box>
+      <Box>columnThree</Box>
     </Columns>
   );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`align-items: center`);
+  const columnOne = screen.getByText(/columnOne/);
+  const columnTwo = screen.getByText(/columnTwo/);
+  const columnThree = screen.getByText(/columnThree/);
+  expect(columnOne).toHaveStyle(`flexGrow : 2`);
+  expect(columnTwo).toHaveStyle(`flexGrow : 4`);
+  expect(columnThree).toHaveStyle(`flexGrow : 6`);
 });
 
-test('supports custom verticalAlign prop: bottom', () => {
-  render(
-    <Columns verticalAlign="bottom" data-testid="column">
-      <Column>column</Column>
-    </Columns>
-  );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`align-items: flex-end`);
-});
-
-test('renders correct HTML element', () => {
-  render(
-    <Columns data-testid="column">
-      <Column>column</Column>
-    </Columns>
-  );
-  const column = screen.getByTestId(/column/);
-
-  expect(column instanceof HTMLDivElement).toBeTruthy();
+test('throws error if columns length and children length are different', () => {
+  // avoid that the error will be thrown in console during test run
+  const spy = jest.spyOn(console, 'error');
+  spy.mockImplementation(() => {});
+
+  expect(() =>
+    render(
+      <Columns columns={[12]}>
+        <Box>columnOne</Box>
+        <Box>columnTwo</Box>
+        <Box>columnThree</Box>
+      </Columns>
+    )
+  ).toThrow('Columns: expected 1 children, got 3');
+  spy.mockRestore();
 });
diff --git a/packages/system/src/SVG.test.tsx b/packages/system/src/SVG.test.tsx
index 48598a2a3..a0a1376bf 100644
--- a/packages/system/src/SVG.test.tsx
+++ b/packages/system/src/SVG.test.tsx
@@ -99,6 +99,48 @@ test('supports size from theme', () => {
   expect(svg).toHaveStyle('height: 16px');
 });
 
+test('supports custom width instead of default size', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <SVG data-testid="svg" width={16}>
+        <path d="M9.9 20.113V13.8415H14" />
+      </SVG>
+    </ThemeProvider>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg).toHaveStyle('width: 16px');
+  expect(svg).toHaveStyle('height: 24px');
+});
+
+test('supports custom height instead of default size', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <SVG data-testid="svg" height={16}>
+        <path d="M9.9 20.113V13.8415H14" />
+      </SVG>
+    </ThemeProvider>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg).toHaveStyle('width: 24px');
+  expect(svg).toHaveStyle('height: 16px');
+});
+
+test('supports width and height from theme', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <SVG data-testid="svg" width="small" height="small">
+        <path d="M9.9 20.113V13.8415H14" />
+      </SVG>
+    </ThemeProvider>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg).toHaveStyle('width: 16px');
+  expect(svg).toHaveStyle('height: 16px');
+});
+
 test('supports fill prop', () => {
   render(
     <SVG data-testid="svg" fill="#fafafa">