Merge branch 'main' into dtack-doc

.gitignore

@@ -23,6 +23,7 @@ out
 .cache
 build
 .contentlayer
+.registry
 
 ## env
 .env*.local

docs/content/components/accordion/accordion.mdx

@@ -25,8 +25,72 @@ import { Accordion } from '@marigold/components';
 
 ### Props Accordion
 
+<PropsTable
+  props={[
+    {
+      property: 'defaultExpandedKeys',
+      type: 'Iterable<Key>',
+      description:
+        'The initial expanded keys in the collection (uncontrolled).',
+      default: 'none',
+    },
+    {
+      property: 'selectionMode',
+      type: 'none, single, multiple',
+      description: 'Sets the mode of items open at the same time. ',
+      default: 'single',
+    },{
+      property: 'children',
+      type: 'ItemElement<object>[] | ItemElement<object>',
+      description: 'Children of the Accordion.',
+      default: 'none',
+    },
+    {
+      property: 'items',
+      type: 'Iterable<object>',
+      description: 'Item objects in the collection.',
+      default: 'none',
+    },
+
+]}
+/>
+
 ### Props Accordion.Item
 
+<PropsTable
+  props={[
+    {
+      property: 'key',
+      type: 'React.Key',
+      description: 'The key of the item.',
+      default: 'none',
+    },
+    {
+      property: 'title',
+      type: 'string | ReactElement',
+      description:
+        'Sets title of the accordion item which will be displayed to the button. ',
+      default: 'none',
+    },
+    {
+      property: 'textValue',
+      type: 'string',
+      description:
+        'Add a textValue if you use JSX-Elements for the title to supported accessibility.',
+      default: 'true',
+    },
+  ]}
+/>
 ## Examples
 
-<ComponentDemo file="./accordion-basic.demo.tsx" />
+### Singleselect Accordion
+
+This component shows how a single selection `<Accordion>` is working. It is possible to have just one item open and the other ones hidden. You can also see that the items are fullwidth, which is true by default. Notice that you can't expand two or more items per default.
+
+<ComponentDemo file="./single-select-accordion.demo.tsx" />
+
+### Multiselect Accordion
+
+With the multiselection mode you can collapse and hide the items as you want. For sure you can set one or more defaultExpandedKeys.
+
+<ComponentDemo file="./multi-select-accordion.demo.tsx" />

docs/content/components/accordion/multi-select-accordion.demo.tsx

@@ -0,0 +1,98 @@
+import {
+  Accordion,
+  Inline,
+  Text,
+  TextField,
+  NumberField,
+  Stack,
+} from '@marigold/components';
+import { Parking, SettingDots, Accessible } from '@marigold/icons';
+
+export default () => {
+  const items = [
+    {
+      key: 'one',
+      textValue: 'Parking passes',
+      title: (
+        <Inline space={2}>
+          <Parking />
+          <Text fontStyle="normal">Parking passes</Text>
+        </Inline>
+      ),
+      children: (
+        <Stack space={2}>
+          <TextField
+            label="Parking Slots"
+            description="Available parking passes"
+          />
+          <NumberField
+            label="Costs"
+            description="Amount in euros"
+            defaultValue={5}
+            formatOptions={{
+              style: 'currency',
+              currency: 'EUR',
+            }}
+          />
+        </Stack>
+      ),
+    },
+    {
+      key: 'two',
+      textValue: 'Handicapped parking spaces',
+      title: (
+        <Inline space={2}>
+          <Accessible />
+          <Text fontStyle="normal">Handicapped parking spaces</Text>
+        </Inline>
+      ),
+      children: (
+        <Stack space={2}>
+          <TextField
+            label="Parking Slots"
+            description="Available parking passes"
+          />
+          <NumberField
+            label="Costs"
+            description="Amount in euros"
+            defaultValue={5}
+            formatOptions={{
+              style: 'currency',
+              currency: 'EUR',
+            }}
+          />
+        </Stack>
+      ),
+    },
+    {
+      key: 'tree',
+      textValue: 'Settings',
+      title: (
+        <Inline space={2}>
+          <SettingDots />
+          <Text fontStyle="normal">Settings</Text>
+        </Inline>
+      ),
+      children: (
+        <TextField
+          label="Parking Stations"
+          description="Available parking stations"
+        />
+      ),
+    },
+  ];
+
+  return (
+    <Accordion selectionMode="multiple" defaultExpandedKeys={['two']}>
+      {items.map(item => (
+        <Accordion.Item
+          key={item.key}
+          title={item.title}
+          textValue={item.textValue}
+        >
+          {item.children}
+        </Accordion.Item>
+      ))}
+    </Accordion>
+  );
+};

docs/content/components/accordion/single-select-accordion.demo.tsx

@@ -0,0 +1,17 @@
+import { Accordion, Text, TextField } from '@marigold/components';
+
+export default () => {
+  return (
+    <Accordion defaultExpandedKeys={[1]}>
+      <Accordion.Item key={1} title="Some Imformations">
+        <TextField label="Name" />
+      </Accordion.Item>
+      <Accordion.Item key={2} title="Personal Settings">
+        <Text>Here is some useful text with some settings to choose</Text>
+      </Accordion.Item>
+      <Accordion.Item key={3} title="Billing Adress">
+        <Text>Some more informations</Text>
+      </Accordion.Item>
+    </Accordion>
+  );
+};

docs/content/components/inline/inline-alignments.demo.tsx

@@ -0,0 +1,18 @@
+import { Inline, Headline, Text } from '@marigold/components';
+
+export default () => (
+  <>
+    <Inline space={3} alignY="top">
+      <Headline level="2">Top</Headline>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+    </Inline>
+    <Inline space={3}>
+      <Headline level="2">Center</Headline>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+    </Inline>
+    <Inline space={3} alignY="bottom">
+      <Headline level="2">Bottom</Headline>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+    </Inline>
+  </>
+);

docs/content/components/inline/inline-elements.demo.tsx

@@ -0,0 +1,11 @@
+import { Inline, Text } from '@marigold/components';
+import { Check } from '@marigold/icons';
+
+export default () => (
+  <Inline space={2}>
+    <Check />
+    <Text>Check</Text>
+    <Text>this</Text>
+    <Text>out</Text>
+  </Inline>
+);

docs/content/components/inline/inline-nested.demo.tsx

@@ -0,0 +1,14 @@
+import { Inline, Headline, Text } from '@marigold/components';
+
+export default () => (
+  <Inline space={7}>
+    <Inline space={1}>
+      <Headline level="2">Block #1</Headline>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+    </Inline>
+    <Inline space={1}>
+      <Headline level="2">Bock #2</Headline>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+    </Inline>
+  </Inline>
+);

docs/content/components/inline/inline-spacing.demo.tsx

@@ -0,0 +1,18 @@
+import { Inline, Text } from '@marigold/components';
+
+export default () => (
+  <Inline space={7}>
+    <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>
+    <Text>
+      Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel metus.
+      Vestibulum malesuada ante eu velit malesuada, nec ultricies sapien
+      finibus. Aenean rutrum in sem a ullamcorper. Integer ut euismod urna.
+      Interdum et malesuada fames ac ante ipsum primis in faucibus.
+    </Text>
+  </Inline>
+);

docs/content/components/inline/inline.mdx

@@ -0,0 +1,71 @@
+---
+title: Inline
+group: Layout
+caption: Component to inline elements with spaces.
+---
+
+The `<Inline>` is a responsive layout component. It's inlining element with space between each element. This component uses the spaces from the given theme or a responsive string.
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { Inline } from '@marigold/components';
+```
+
+### Props
+
+<PropsTable
+  props={[
+    {
+      property: 'space',
+      type: 'ResponsiveStyleValue<string>',
+      description: 'Space between the Inline elements.',
+      default: 'none',
+    },
+    {
+      property: 'alignY',
+      type: '`top, center, bottom` ',
+      description: 'Vertical alignment of the items inside the inline element.',
+      default: 'center',
+    },
+    {
+      property: 'alignX',
+      type: '`left, center, right` ',
+      description:
+        'Horizontal alignment of the items inside the inline element.',
+      default: 'left',
+    },
+  ]}
+/>
+
+## Examples
+
+### More than two elements
+
+If you have more than two elements you can use the `<Inline>` component. The elements are arranged according to the space required.
+
+<ComponentDemo file="./inline-elements.demo.tsx" />
+
+### Spacing
+
+The `<Inline>` component can be used to add spacing between elements.
+For this you need the props `space` and you can then place all components inside the `<Inline>` element.
+
+<ComponentDemo file="./inline-spacing.demo.tsx" />
+
+### Nested Inline
+
+`<Inline>` components can also have themselves as component. This can be used to add more spacing within the elements.
+
+<ComponentDemo file="./inline-nested.demo.tsx" />
+
+### Different alignment
+
+If elements need to be positioned differently on their x and y axis, this can be done with the `<Inline>` component.
+In this case one of the following props is given. Either `alignX` or `alignY`.
+
+<ComponentDemo file="./inline-alignments.demo.tsx" />

docs/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "pnpm registry && next dev",
-    "build": "next build",
+    "build": "pnpm registry && next build",
     "start": "next start",
     "registry": "zx ./scripts/build-registry.mjs"
   },