@oliasoft-open-source/react-ui-library 1.0.0

package/src/components/list/list.stories-data.jsx

@@ -0,0 +1,287 @@
+import React from 'react';
+import {
+  FaArrowDown,
+  FaArrowUp,
+  FaCheckCircle,
+  FaEllipsisV,
+  FaPlus,
+  FaTrash,
+} from 'react-icons/fa';
+import { Menu } from '../../..';
+
+export const items = [
+  {
+    id: 1,
+    name: 'Aardvark',
+  },
+  {
+    id: 2,
+    name: 'Kangaroo',
+    active: true,
+  },
+  {
+    id: 3,
+    name: 'Jaguar',
+    disabled: true,
+  },
+];
+
+const itemsSubheadings = [
+  {
+    id: 1,
+    name: 'Marsupials',
+    type: 'Heading',
+    metaCount: 1,
+  },
+  {
+    id: 2,
+    name: 'Aardvark',
+  },
+  {
+    id: 3,
+    name: 'Kangaroo',
+    active: true,
+  },
+  {
+    id: 4,
+    name: 'Mammals',
+    type: 'Heading',
+    metaCount: 1,
+  },
+  {
+    id: 5,
+    name: 'Jaguar',
+  },
+];
+
+const itemsNested = [
+  {
+    id: 1,
+    name: 'Aardvark',
+  },
+  {
+    id: 2,
+    name: 'Kangaroo',
+    active: true,
+  },
+  {
+    id: 3,
+    name: 'Grey',
+    level: 1,
+  },
+  {
+    id: 4,
+    name: 'Eastern',
+    level: 2,
+  },
+  {
+    id: 5,
+    name: 'Macropus giganteus giganteus',
+    title: 'Macropus giganteus giganteus',
+    level: 3,
+  },
+  {
+    id: 6,
+    name: 'Macropus giganteus tasmaniensis',
+    title: 'Macropus giganteus tasmaniensis',
+    level: 3,
+  },
+  {
+    id: 7,
+    name: 'Western',
+    level: 2,
+  },
+  {
+    id: 8,
+    name: 'Red',
+    level: 1,
+  },
+  {
+    id: 9,
+    name: 'Jaguar',
+  },
+];
+
+export const list = {
+  items,
+};
+
+export const listHeader = {
+  name: 'Animals',
+  actions: [
+    {
+      label: 'More',
+      subActions: [
+        {
+          label: 'Item',
+          icon: <FaArrowUp />,
+          onClick: () => {},
+        },
+        {
+          label: 'Item',
+          icon: <FaArrowDown />,
+          onClick: () => {},
+        },
+      ],
+    },
+
+    {
+      label: 'Add',
+      primary: true,
+      icon: <FaPlus />,
+      onClick: () => {},
+    },
+  ],
+  items,
+};
+
+export const listSubheadings = {
+  ...listHeader,
+  items: itemsSubheadings,
+};
+
+export const listSubcomponents = {
+  items: items.map((item, index) => ({
+    ...item,
+    actions: [
+      {
+        childComponent: (
+          <Menu
+            menu={{
+              trigger: 'Component',
+              component: <FaEllipsisV />,
+              placement: 'bottom-end',
+              sections: [
+                {
+                  type: 'Option',
+                  label: 'Item',
+                  onClick: () => {},
+                },
+                {
+                  type: 'Option',
+                  label: 'Item',
+                  onClick: () => {},
+                },
+              ],
+            }}
+          />
+        ),
+      },
+    ],
+  })),
+};
+
+export const listSubmenus = {
+  items: items.map((item) => ({
+    ...item,
+    actions: [
+      {
+        label: 'More',
+        subActions: [
+          {
+            label: 'Move Up',
+            icon: <FaArrowUp />,
+            onClick: () => {},
+          },
+          {
+            label: 'Move Down',
+            icon: <FaArrowDown />,
+            onClick: () => {},
+          },
+        ],
+      },
+    ],
+  })),
+};
+
+export const listBadges = {
+  items: items.map((item, index) => ({
+    ...item,
+    label: {
+      value: index + 1,
+      color: 'var(--color-text-info)',
+    },
+  })),
+};
+
+export const listSubheadingsBadges = {
+  ...listSubheadings,
+  items: listSubheadings.items.map((item, index) => ({
+    ...item,
+    label: {
+      value: index + 1,
+      color: 'var(--color-text-info)',
+    },
+  })),
+};
+
+export const listActions = {
+  items: items.map((item) => ({
+    ...item,
+    actions: [
+      {
+        label: 'Delete',
+        icon: <FaTrash />,
+        onClick: () => {},
+      },
+    ],
+  })),
+};
+
+export const listDetails = {
+  items: items.map((item) => ({
+    ...item,
+    details: 'Description goes here',
+    metadata: '2019-05-03 09:03:51',
+  })),
+};
+
+export const listExpanding = {
+  items: items.map((item) => ({
+    ...item,
+    content: <div>Example content element (for show/hide).</div>,
+  })),
+};
+
+export const listNested = {
+  items: itemsNested,
+};
+
+export const listInvalid = {
+  items: [
+    ...items,
+    {
+      id: 4,
+      name: 'Dodo',
+      invalid: true,
+    },
+  ],
+};
+
+export const listIconTooltip = {
+  items: items.map((item) => ({
+    ...item,
+    icon: {
+      icon: <FaCheckCircle />,
+      color: 'var(--color-text-success)',
+      tooltip: {
+        text: <>Tooltip goes here</>,
+      },
+    },
+  })),
+};
+
+export const listCounts = {
+  items: items.map((item) => ({
+    ...item,
+    metaCount: 3,
+  })),
+};
+
+export const listLong = {
+  name: 'Animals',
+  items: [...Array(50)].map((item, index) => ({
+    id: index,
+    name: `Aardvark #${index + 1}`,
+  })),
+};