Feat/card list (#15)

* feat: add texts description for 3 components * feat: add CardList component doc * feat: add cardList component * feat: fix pr review from Quentin * feat: fix review from Quentin --------- Co-authored-by: pereag <[email protected]>
Smile-SA · Feb 27, 2024 · 0513cf9 · 0513cf9
1 parent f2d2240
commit 0513cf9
Showing 1 changed file with 37 additions and 0 deletions.
diff --git a/docs/components/01-card-list.mdx b/docs/components/01-card-list.mdx
@@ -0,0 +1,37 @@
+import { GitHubLogo } from '../../src/icons/GitHubLogo';
+
+# Card List
+
+<Description
+  extendsInfo={[
+    {
+      label: 'ScrollArea',
+      link: 'https://v6.mantine.dev/core/scroll-area/',
+    },
+  ]}
+  importExample="import { CardList } from '@smile/react-front-kit';"
+  packageInfo={{
+    label: '@smile/react-front-kit',
+    link: 'https://www.npmjs.com/package/@smile/react-front-kit',
+  }}
+  sourceInfo={{
+    link: 'https://github.com/Smile-SA/react-front-kit/blob/main/packages/react-front-kit/src/Components/CardList/CardList.tsx',
+  }}
+>
+  Renders a section of card containing a list of items with the option of having
+  or not having a separator and a vertical scrolling bar
+</Description>
+
+## Storybook Docs
+
+<StorybookEmbed storyId="3-custom-components-cardlist" height="2180" />
+
+## Props
+
+| Name                 | Type                | Default | Description                                                                               |
+| -------------------- | ------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| children <Required/> | `ReactNode[]`       | -       | Table of items to be displayed in the component's list.                                   |
+| separator            | `boolean`           | `true`  | Enable or disable the display of the separator between items.                             |
+| gap                  | `MantineNumberSize` | `"xl"`  | Space between items.                                                                      |
+| stackProps           | `stackProps`        | -       | Allows access to the props of the sub-component Stack.                                    |
+| ...                  |                     | -       | Extends [ScrollArea props](https://v6.mantine.dev/core/scroll-area/?t=props) from Mantine |