refa(docs): update mdx pages with name d-p (#1966)

* feat(docs): update mdx pages with name d-p * Create wicked-chefs-guess.md
marigold-ui · Apr 4, 2022 · ff1d083 · ff1d083
1 parent 872c741
commit ff1d083
Show file tree

Hide file tree

Showing 10 changed files with 181 additions and 247 deletions.
diff --git a/.changeset/wicked-chefs-guess.md b/.changeset/wicked-chefs-guess.md
@@ -0,0 +1,5 @@
+---
+"@marigold/docs": patch
+---
+
+refa(docs): update mdx pages with name d-p
diff --git a/docs/content/components/dialog.mdx b/docs/content/components/dialog.mdx
@@ -6,18 +6,20 @@ import { FigmaLink } from '../../src/components/FigmaLink';
 
 # Dialog
 
-## Description
-
 Component to display a Dialog as a reaction to an event. The Dialog could be styled via theme and should be filled with content.
 You can also add a title via title prop.
 
+```tsx onlyCode
+import { Dialog } from '@marigold/components';
+```
+
 <FigmaLink
   to={
     'https://www.figma.com/file/DFKyTGHAoDxOsUBPszLLxP/%F0%9F%8F%B5%EF%B8%8FMarigold?node-id=845%3A1095'
   }
 />
 
-## Properties
+## Props
 
 | Property                     | Type                                       | Default     |
 | :--------------------------- | :----------------------------------------- | :---------- |
@@ -27,15 +29,9 @@ You can also add a title via title prop.
 | `variant (optional)`         | `string`                                   | `__default` |
 | `backdropVariant (optional)` | `string`                                   | `backdrop`  |
 
-## Import
-
-```tsx onlyCode
-import { Dialog } from '@marigold/components';
-```
-
-## Live-Code Example
+## Example
 
-```tsx expandCode
+```tsx
 () => {
   const { state, openButtonProps, openButtonRef } = useDialogButtonProps();
   return (
@@ -63,31 +59,3 @@ import { Dialog } from '@marigold/components';
   );
 };
 ```
-
-## Usage
-
-```tsx
-() => {
-  const { state, openButtonProps, openButtonRef } = useDialogButtonProps();
-  return (
-    <>
-      <Button
-        variant="secondary"
-        size="small"
-        {...openButtonProps}
-        ref={openButtonRef}
-      >
-        Open Dialog
-      </Button>
-      {state.isOpen && (
-        <Dialog title="Dialog Title" isOpen={state.isOpen} close={state.close}>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum
-            dolor sit amet, consectetur adipiscing elit.
-          </Text>
-        </Dialog>
-      )}
-    </>
-  );
-};
-```
diff --git a/docs/content/components/divider.mdx b/docs/content/components/divider.mdx
@@ -2,53 +2,51 @@
 title: Divider
 ---
 
-# Divider
+import { DoAndDont } from '../../src/components/DoAndDont';
 
-## Description
+# Divider
 
 A divider is a visual separator between two groups of content,
 e.g. groups of menu items or sections of a page.
 
-## Properties
+<Divider />
+
+```tsx onlyCode
+import { Divider } from '@marigold/components';
+```
+
+## Props
 
 | Property             | Type     | Default     |
 | :------------------- | :------- | :---------- |
 | `variant` (optional) | `string` | `__default` |
 
-## Import
+## Examples
 
-```tsx onlyCode
-import { Divider } from '@marigold/components';
+Standard Divider
+
+```tsx
+<Divider />
 ```
 
-## Live-Code Example
+Bold Divider
 
-```tsx expandCode
-<>
-  <Text>Brightside</Text>
-  <Divider />
-  <Text>Darkside</Text>
-</>
+```tsx
+<Divider variant="bold" />
 ```
 
-## Usage
-
-### Standard Divider
+## Divider between Text
 
 ```tsx
 <>
-  <Text>Some text</Text>
+  <Text>Dark Side</Text>
   <Divider />
-  <Text>Some other text to show regular divider</Text>
+  <Text>Bright Side</Text>
 </>
 ```
 
-### Bold Divider
+## Divider in Do & Don't component
 
-```tsx
-<>
-  <Text>Some text</Text>
-  <Divider variant="bold" />
-  <Text>Some other text to show strong divider</Text>
-</>
-```
+<DoAndDont preview={<Text>Look at the greend bold Divider below</Text>}>
+  Example to show how Divider is used in Do & Don't component
+</DoAndDont>
diff --git a/docs/content/components/icon.mdx b/docs/content/components/icon.mdx
@@ -4,9 +4,18 @@ title: Icon
 
 # Icon
 
-## Installation
+With the Icon component you can render one of the [Marigold Icons](../../foundation/icons).
+By adding the `size` prop you can change to another size. `24` is the default size.
+The `fill` prop is the second attribute and per default `currentcolor`.
 
-### 1. React Icon component:
+<Inline space="small">
+  <DesignTicket />
+  <Ticket />
+  <TicketInsurance />
+  <Resale />
+</Inline>
+
+### React Icon component
 
 Marigold Icons have a separate package to install.
 The first option is to install the package and use the Icons like other React components and as in the code example below.
@@ -20,44 +29,30 @@ npm install @marigold/icons --save
 yarn add @marigold/icons
 ```
 
-### 2. HTML SVG Element
-
-The second option is to go to [Marigold Icons](../../foundation/icons) and click on an Icon in the list to copy them as `<svg>` Element
+```tsx onlyCode
+import { DesignTicket } from '@marigold/icons';
+```
 
-## Description
+### HTML SVG Element
 
-With the Icon component you can render one of the [Marigold Icons](../../foundation/icons).
-By adding the `size` prop you can change to another size. `24` is the default size.
-The `fill` prop is the second attribute and per default `currentcolor`.
+The second option is to go to [Marigold Icons](../../foundation/icons) and click on an Icon in the list to copy them as `<svg>` Element
 
-## Properties
+## Props
 
 | Property | Type     | Default          |
 | :------- | :------- | :--------------- |
 | `size`   | `number` | `24`             |
 | `fill`   | `string` | `'currentcolor'` |
 
-## Import
-
-```tsx onlyCode
-import { DesignTicket } from '@marigold/icons';
-```
-
-## Live-Code Example
-
-```tsx expandCode
-<DesignTicket />
-```
-
-## Usage
+## Examples
 
-### size prop
+Icon size
 
 ```tsx
 <DesignTicket size={40} />
 ```
 
-### fill prop
+Icon color fill
 
 ```tsx
 <DesignTicket fill="red" />

diff --git a/docs/content/components/image.mdx b/docs/content/components/image.mdx
@@ -4,23 +4,19 @@ title: Image
 
 # Image
 
-## Description
+With the Image component you can render an image element.
+The variant can be added with the variant prop. The default variant is `fullWidth`. You can also put the standard html image props like `alt` and `src`.
 
-With the Image component you can render an image.
-The variant can be added with the variant prop. The default variant is `fullWidth`.
+```tsx onlyCode
+import { Image } from '@marigold/components';
+```
 
-## Properties
+## Props
 
 | Property             | Type     | Default     |
 | :------------------- | :------- | :---------- |
 | `variant` (optional) | `string` | `fullWidth` |
 
-## Import
-
-```tsx onlyCode
-import { Image } from '@marigold/components';
-```
-
 ## Usage
 
 ```tsx expandCode

diff --git a/docs/content/components/inline.mdx b/docs/content/components/inline.mdx
@@ -4,35 +4,40 @@ title: Inline
 
 # Inline
 
-## Description
+Layout component to inline elements with space. This component uses the spaces from the given theme or a responsive string.
 
-Layout component to inline elements with space. This component uses the spaces from the given theme.
+<MarigoldTheme>
+  <Inline space="small">
+    <Check />
+    <Text>Check</Text>
+  </Inline>
+</MarigoldTheme>
+
+```tsx onlyCode
+import { Inline } from '@marigold/components';
+```
 
-## Properties
+## Props
 
 | Property | Type                           | Default  |
 | :------- | :----------------------------- | :------- |
 | `space`  | `ResponsiveStyleValue<string>` | `none`   |
 | `align`  | `center, top, bottom`          | `center` |
 
-## Import
-
-```tsx onlyCode
-import { Inline } from '@marigold/components';
-```
+## Examples
 
-## Live-Code Example
+More than two elements
 
 ```tsx expandCode
 <Inline space="small">
   <Check />
   <Text>Check</Text>
+  <Text>this</Text>
+  <Text>out</Text>
 </Inline>
 ```
 
-## Usage
-
-### Spacing
+Spacing
 
 ```tsx
 <Inline space="large">
@@ -51,7 +56,7 @@ import { Inline } from '@marigold/components';
 </Inline>
 ```
 
-### Nested
+Nested Inline
 
 ```tsx
 <Inline space="large">
@@ -70,7 +75,7 @@ import { Inline } from '@marigold/components';
 </Inline>
 ```
 
-### Alignment
+Different alignment
 
 ```tsx
 <Inline space="medium" align="top">
@@ -98,3 +103,9 @@ import { Inline } from '@marigold/components';
   <Text>Lorem ipsum dolor sit amet.</Text>
 </Inline>
 ```
+
+## Use cases
+
+- [ActionGroup](../action-group)
+- [Badge](../badge)
+- [Button](../button)