pdh-design-system/src/organisms/TreeView/TreeView.stories.js

PDH Design System React Components

import React from 'react';
import { TreeView, TreeViewProps } from './TreeView';

export default {
  title: 'organisms/TreeView',
  component: TreeView,
  argTypes: {},
};

const data = [
  {
    id: '1',
    title: 'Parent 1',
    isOpenDefault: true,
    children: [
      {
        id: '1.1',
        title: 'Child 1.1',
      },
      {
        id: '1.2',
        title: 'Child 1.2',
      },
    ],
  },
  {
    id: '2',
    title: 'Parent 2 (long title)',
    children: [
      {
        id: '2.1',
        title: 'Child 2.1',        
      },
       {
        id: '2.2',
        title: 'Child 2.2',
      },
    ],
  },
  {
    id: '3',
    title: <a href="https://pacificdata.org">Parent 3 (with link)</a>,
    className: 'active',
  }
]

const dataWithCustomIcons = [
  {
    id: '1',
    title: 'Parent 1',
    buttonClassName: 'btn-lg',
    iconNames: ['plus', 'dash'],
    children: [
      {
        id: '1.1',
        title: 'Child 1.1',
      },
       {
        id: '1.2',
        title: 'Child 1.2',
      },
    ],
  }
]

const Template = (args) => {
  return <TreeView {...args} />;
};

export const _TreeDefaultView = Template.bind({});
_TreeDefaultView.args = {
  data: data,
  className: 'fs-5'
};

export const _TreeButtonsRight = Template.bind({});
_TreeButtonsRight.args = {
  data: data,
  buttonVariant: 'right'
};

export const _TreeButtonsFarRight = Template.bind({});
_TreeButtonsFarRight.args = {
  data: data,
  buttonVariant: 'far-right'
};

export const _TreeWithCustomIcons = Template.bind({});
_TreeWithCustomIcons.args = {
  data: dataWithCustomIcons
};