adding more components

marigold-ui · Jun 17, 2024 · 548762d · 548762d
1 parent c5c8959
commit 548762d
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 467 deletions.
diff --git a/docs/content/components/collection/tag/tag.mdx b/docs/content/components/collection/tag/tag.mdx
@@ -21,47 +21,7 @@ import { Tag } from '@marigold/components';
 
 ### Group props
 
-<PropsTable
-  props={[
-    {
-      property: 'label',
-      type: 'string',
-      description: 'Set a label for the select.',
-      default: 'none',
-    },
-    {
-      property: 'required',
-      type: 'boolean',
-      description: 'Set the select required.',
-      default: 'false',
-    },
-    {
-      property: 'width',
-      type: 'string | number',
-      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
-      default: 'full',
-    },
-    {
-      property: 'allowsRemoving',
-      type: 'boolean',
-      description: 'Displays a remove button on each tag.',
-      default: 'false',
-    },
-    {
-      property: 'onRemove',
-      type: '(key: Key) => any',
-      description: 'Handler that is called when the remove button is pressed.',
-      default: 'none',
-    },
-    {
-      property: 'renderEmptyState',
-      type: '(props: TagListRenderProps) => ReactNode',
-      description:
-        'Provides content to display when there are no items in the tag list.',
-      default: 'none',
-    },
-  ]}
-/>
+<PropsTable componentFile="TagGroup.tsx" />
 
 ## Examples
 

diff --git a/docs/content/components/content/text/text.mdx b/docs/content/components/content/text/text.mdx
@@ -19,46 +19,7 @@ import { Text } from '@marigold/components';
 
 ## Props
 
-<PropsTable
-  props={[
-    {
-      property: 'align',
-      type: '"left" | "cenetr" | "right"',
-      description: 'Aligns the text.',
-      default: 'none',
-    },
-    {
-      property: 'color',
-      type: 'string',
-      description: 'Set the text color.',
-      default: 'currentColor',
-    },
-    {
-      property: 'cursor',
-      type: 'string',
-      description: 'Set the cursor for the text element.',
-      default: 'text',
-    },
-    {
-      property: 'fontSize',
-      type: '"xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl"',
-      description: 'Set the font size for the text element.',
-      default: 'none',
-    },
-    {
-      property: 'weight',
-      type: '"thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | "black"',
-      description: 'Set the font weight for the text element.',
-      default: 'none',
-    },
-    {
-      property: 'fontStyle',
-      type: '"italic" | "normal"',
-      description: 'Set the font style for the text element.',
-      default: 'none',
-    },
-  ]}
-/>
+<PropsTable componentFile="Text.tsx" />
 
 ## Examples
 

diff --git a/docs/content/components/content/visually-hidden/visually-hidden.mdx b/docs/content/components/content/visually-hidden/visually-hidden.mdx
@@ -15,16 +15,7 @@ import { VisuallyHidden } from '@marigold/components';
 
 ## Props
 
-<PropsTable
-  props={[
-    {
-      property: 'isFocusable',
-      type: 'boolean',
-      description: 'Whether the element should become visible on focus.',
-      default: 'false',
-    },
-  ]}
-/>
+<PropsTable componentFile="VisuallyHidden.tsx" />
 
 ## Examples
 

diff --git a/docs/content/components/content/xloader/xloader.mdx b/docs/content/components/content/xloader/xloader.mdx
@@ -20,28 +20,7 @@ import { XLoader } from '@marigold/components';
 
 ## Props
 
-<PropsTable
-  props={[
-    {
-      property: 'className',
-      type: 'string',
-      description: 'Set class names of the loader.',
-      default: 'none',
-    },
-    {
-      property: 'size',
-      type: 'string | number',
-      description: 'Set the width and height of the loader.',
-      default: '150',
-    },
-    {
-      property: '...',
-      type: '',
-      description: 'Yes! You can use all regular properties of svg!',
-      default: '',
-    },
-  ]}
-/>
+<PropsTable componentFile="XLoader.tsx" />
 
 ## Examples
 

diff --git a/docs/content/components/form/text-area/text-area.mdx b/docs/content/components/form/text-area/text-area.mdx
@@ -21,84 +21,7 @@ import { TextArea } from '@marigold/components';
 
 ## Props
 
-<PropsTable
-  props={[
-    {
-      property: 'label',
-      type: 'ReactNode',
-      description: 'The label text.',
-      default: 'none',
-    },
-    {
-      property: 'description',
-      type: 'ReactNode',
-      description: 'A helpful text.',
-      default: 'none',
-    },
-    {
-      property: 'errorMessage',
-      type: 'ReactNode',
-      description: 'An error message.',
-      default: 'none',
-    },
-    {
-      property: 'error',
-      type: 'boolean',
-      description:
-        'If true, the is considered invalid and if set the errorMessage is shown instead of the description.',
-      default: 'false',
-    },
-    {
-      property: 'value',
-      type: 'string',
-      description: 'The value of the textarea.',
-      default: 'none',
-    },
-    {
-      property: 'disabled',
-      type: 'boolean',
-      description: 'If true, the textarea is disabled.',
-      default: 'false',
-    },
-    {
-      property: 'required',
-      type: 'boolean',
-      description: 'If true, the textarea is required.',
-      default: 'false',
-    },
-    {
-      property: 'readOnly',
-      type: 'boolean',
-      description: 'If true, the textarea is readOnly.',
-      default: 'false',
-    },
-    {
-      property: 'onChange',
-      type: 'function',
-      description:
-        "A callback function that is called with the textarea's current value when the input value changes.",
-      default: 'none',
-    },
-    {
-      property: 'width',
-      type: 'string | number',
-      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
-      default: 'full',
-    },
-    {
-      property: 'rows',
-      type: 'number',
-      description: 'Sets the number of rows from the textarea.',
-      default: 'none',
-    },
-    {
-      property: '...',
-      type: '',
-      description: 'Yes you can use all regular attributes of textarea!',
-      default: '',
-    },
-  ]}
-/>
+<PropsTable componentFile="TextArea.tsx" />
 
 ## Examples
 

diff --git a/docs/content/components/form/textfield/textfield.mdx b/docs/content/components/form/textfield/textfield.mdx
@@ -21,85 +21,7 @@ import { TextField } from '@marigold/components';
 
 ## Props
 
-<PropsTable
-  props={[
-    {
-      property: 'label',
-      type: 'ReactNode',
-      description:
-        "The label text. If you don't want to visually display a label, provide an `aria-label` or `aria-labelledby` attribute for accessibility.",
-      default: 'none',
-    },
-    {
-      property: 'description',
-      type: 'ReactNode',
-      description: 'A helpful text.',
-      default: 'none',
-    },
-    {
-      property: 'errorMessage',
-      type: 'ReactNode',
-      description: 'An error message.',
-      default: 'none',
-    },
-    {
-      property: 'error',
-      type: 'boolean',
-      description:
-        'If `true`, the field is considered invalid and if set the `errorMessage` is shown instead of the `description`.',
-      default: 'false',
-    },
-    {
-      property: 'value',
-      type: 'string',
-      description: 'The value of the input field.',
-      default: 'none',
-    },
-    {
-      property: 'disabled',
-      type: 'boolean',
-      description: 'If `true`, the input is disabled.',
-      default: 'false',
-    },
-    {
-      property: 'required',
-      type: 'boolean',
-      description: 'If `true`, the input is required',
-      default: 'false',
-    },
-    {
-      property: 'readOnly',
-      type: 'boolean',
-      description: 'If `true`, the input is readOnly.',
-      default: 'false',
-    },
-    {
-      property: 'type',
-      type: 'string',
-      description: 'The type of the input field.',
-      default: 'text',
-    },
-    {
-      property: 'onChange',
-      type: 'function',
-      description:
-        "A callback function that is called with the input's current value when the input `value` changes.",
-      default: 'none',
-    },
-    {
-      property: 'width',
-      type: 'string | number',
-      description: `Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width  `,
-      default: 'full',
-    },
-    {
-      property: '...',
-      type: '',
-      description: 'Yes you can use all regular attributes of `input!`',
-      default: '',
-    },
-  ]}
-/>
+<PropsTable componentFile="TextField.tsx" />
 
 ## Examples
 

diff --git a/docs/content/components/layout/tiles/tiles.mdx b/docs/content/components/layout/tiles/tiles.mdx
@@ -19,36 +19,7 @@ import { Tiles } from '@marigold/components';
 
 ### Props
 
-<PropsTable
-  props={[
-    {
-      property: 'space',
-      type: 'number',
-      description: 'Set space between items',
-      default: 'none',
-    },
-    {
-      property: 'tilesWidth',
-      type: 'string',
-      description: 'Set minimum width for all items inside',
-      default: '250px',
-    },
-    {
-      property: 'equalHeight',
-      type: 'boolean',
-      description:
-        'If you set equalHeight, all items will have the size of the biggest item',
-      default: 'false',
-    },
-    {
-      property: 'stretch',
-      type: 'boolean',
-      description:
-        'Tiles will take stretch to available width and will distribute their width equally. Note that this can make them wider than the specified tiles width, but not smaller than the given "itemWidth". Basically this is full responsive mode.',
-      default: 'false',
-    },
-  ]}
-/>
+<PropsTable componentFile="Tiles.tsx" />
 
 ## Examples