docs: add columns (#3158)

docs/content/components/columns/collapse-columns.demo.tsx

@@ -0,0 +1,8 @@
+import { Columns } from '@marigold/components';
+
+export default () => (
+  <Columns collapseAt="25em" space={1} columns={[2, 10]}>
+    <div className="h-28 border border-slate-300 bg-slate-200" />
+    <div className="h-28 border border-slate-300 bg-slate-200" />
+  </Columns>
+);

docs/content/components/columns/columns.mdx

@@ -0,0 +1,81 @@
+---
+title: Columns
+group: Layout
+caption: Component with sized columns in one row.
+---
+
+The `<Columns>` is a responsive layout component, with sized columns in one row.
+With the `<Columns>` component you can set an array of numbers 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.
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { Columns } from '@marigold/components';
+```
+
+### Props
+
+<PropsTable
+  props={[
+    {
+      property: 'columns (required)',
+      description:
+        'An array of numbers to set the size of the children. The columns array length and the count of children must be the same.',
+      type: 'number[]',
+      default: '',
+    },
+    {
+      property: 'space',
+      description: 'Space between the columns.',
+      type: 'ResponsiveStyleValue<string>',
+      default: 'none',
+    },
+    {
+      property: 'collapseAt',
+      description:
+        'Collapse children into a vertical layout at given width. Note that `collapseAt` is based on the total element width, and not the window width. With a default value of "0em" columns will not collapse by default.',
+      type: 'string | number',
+      default: '0em',
+    },
+    {
+      property: 'stretch',
+      description: 'Stretch to height of parent container.',
+      type: 'boolean',
+      default: 'false',
+    },
+  ]}
+/>
+
+## Examples
+
+### Columns and a space between them
+
+The example shows how to use the `space` prop. It defines the gap between the contents.
+
+<ComponentDemo file="./space-columns.demo.tsx" />
+
+### Columns collapsing at a certain width
+
+The example show how the `collapseAt` prop is to use. If you resize the window of your browser you can see that the columns are collapsing or expanding. Please note that the collapsing or expanding starting in a small range of the `collapseAt` value.
+
+<ComponentDemo file="./collapse-columns.demo.tsx" />
+
+### Page layout
+
+Create a page layout with three columns and collapse or expanding at `25em`
+
+<ComponentDemo file="./layout-columns.demo.tsx" />
+
+### Stretch to Height of Parent
+
+By using the `stretch` prop you can make the container to take full width. Note that this is usually not necessary since the columns will expand with their children anyway.
+
+<ComponentDemo file="./stretch-columns.demo.tsx" />
+
+Here is another interactive example on how to use the `stretch` prop. Note that there has to be a parent of the columns that sets a `height`. Otherwhise setting the height in a column to `100%` will not have any effect.
+
+<ComponentDemo file="./stretch-columns-switch.demo.tsx" />

docs/content/components/columns/layout-columns.demo.tsx

@@ -0,0 +1,15 @@
+import { Columns } from '@marigold/components';
+
+export default () => (
+  <Columns space={2} columns={[2, 8, 2]} collapseAt="25em">
+    <div className="h-56 border border-slate-300 bg-slate-200 p-1">
+      Left Sidebar
+    </div>
+    <div className="h-56 border border-slate-300 bg-slate-200 p-1">
+      Main Content
+    </div>
+    <div className="h-56 border border-slate-300 bg-slate-200 p-1">
+      Right Sidebar
+    </div>
+  </Columns>
+);

docs/content/components/columns/space-columns.demo.tsx

@@ -0,0 +1,9 @@
+import { Columns } from '@marigold/components';
+
+export default () => (
+  <Columns space={1} columns={[2, 8, 2]} collapseAt="25em">
+    <div className="h-28 border border-slate-300 bg-slate-200" />
+    <div className="h-28 border border-slate-300 bg-slate-200" />
+    <div className="h-28 border border-slate-300 bg-slate-200" />
+  </Columns>
+);

docs/content/components/columns/stretch-columns-switch.demo.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { Columns, Stack, Switch } from '@marigold/components';
+
+export default () => {
+  const [stretch, setStretch] = useState(false);
+
+  return (
+    <Stack space={2}>
+      <div className="rounded-xl bg-slate-200 p-2">
+        <Switch onChange={() => setStretch(!stretch)}>Toggle stretch</Switch>
+      </div>
+      <div className="h-72 bg-slate-400">
+        <Columns columns={[1, 1, 1]} stretch={stretch}>
+          <div className="h-40 border border-slate-400 bg-slate-200" />
+          <div className="h-40 border border-slate-400 bg-slate-200" />
+          <div className="h-full border border-slate-400 bg-slate-200">
+            I will grow, if you set <code>stretch</code> prop on the{' '}
+            <code>Columns</code>!
+          </div>
+        </Columns>
+      </div>
+    </Stack>
+  );
+};

docs/content/components/columns/stretch-columns.demo.tsx

@@ -0,0 +1,25 @@
+import { Columns, Stack } from '@marigold/components';
+
+export default () => (
+  <div>
+    <Stack space={4}>
+      <div className="bordder h-96 rounded-xl border-slate-300/50 bg-slate-500/50 p-3">
+        <Columns columns={[4, 4, 4]} space={2} stretch>
+          <div className="bordder h-full rounded-xl border-slate-300/50 bg-slate-500/50 p-3">
+            I have a height set to 100%!
+          </div>
+          <div>I space myself</div>
+          <div className="bordder h-52 rounded-xl border-slate-300/50 bg-slate-500/50 p-3">
+            I have a height set to 200px.
+          </div>
+        </Columns>
+      </div>
+      <Columns columns={[2, 1]} space={2}>
+        <div>
+          Columns will stretch if they get longer, like a regular CSS element.
+        </div>
+        <div>I am here too!</div>
+      </Columns>
+    </Stack>
+  </div>
+);

packages/components/src/Columns/Columns.stories.tsx

@@ -126,7 +126,7 @@ export const FullHeight: Story = {
       <Columns {...args}>
         <div className="h-[150px] border border-[#495057] bg-[#e9ecef]" />
         <div className="h-[150px] border border-[#495057] bg-[#e9ecef]" />
-        <div className="h-[150px] border border-[#495057] bg-[#e9ecef] p-2">
+        <div className="h-full border border-[#495057] bg-[#e9ecef] p-2">
           I will grow, if you set <code>stretch</code> prop on the{' '}
           <code>Columns</code>!
         </div>

packages/components/src/Columns/Columns.tsx

@@ -30,6 +30,7 @@ export const Columns = ({
     );
   }
 
+  console.log(stretch);
   return (
     <div
       className={cn(
@@ -41,7 +42,9 @@ export const Columns = ({
     >
       {Children.map(children, (child, idx) => (
         <div
-          className="grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
+          className={cn(
+            'grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]'
+          )}
           style={createVar({ collapseAt, columnSize: columns[idx] })}
         >
           {isValidElement(child) ? cloneElement(child) : child}