CategoryList

import React from 'react';
import CategoryList from '../../../src/components/Category/CategoryList';
const items = [
    {
        title: 'Category #1',
    },
    {
        title: 'Category with long name #2',
    },
    {
        title: 'Category #3',
        iconKind: 'ExclamationMarkTriangle',
    },
];

const Example = () => <CategoryList items={items} />;

export default Example;

CategoryList.propTypes = {
    items: Array<CategoryItemType>,
    showBoxes: boolean,
    showIcons: boolean,
}

CategoryList.defaultProps = {
   showBoxes: false,
   showIcons: true,
}

CategoryList Boxes

import React from 'react';
import CategoryList from '../../../src/components/Category/CategoryList';
const items = [
    {
        title: 'Category #1',
    },
    {
        title: 'Category long name #2',
    },
    {
        title: 'Category #3',
    },
    {
        title: 'Category #4',
        iconKind: 'ExclamationMarkTriangle',
    },
    {
        title: 'Category #5',
        iconKind: 'ExclamationMarkTriangle',
    },
    {
        title: 'Category #6',
        iconKind: 'ExclamationMarkTriangle',
    },
];

const Example = () => <CategoryList items={items} showBoxes={true} />;

export default Example;

CategoryList.propTypes = {
    items: Array<CategoryItemType>,
    showBoxes: boolean,
    showIcons: boolean,
}

CategoryList.defaultProps = {
   showBoxes: false,
   showIcons: true,
}

CategoryList with active category

import React from 'react';
import CategoryList from '../../../src/components/Category/CategoryList';
const items = [
    {
        title: 'Category #1',
        isActive: true,
    },
    {
        title: 'Category long name #2',
    },
    {
        title: 'Category #3',
    },
];

const Example = () => <CategoryList items={items} showBoxes={true} />;

export default Example;

CategoryList.propTypes = {
    items: Array<CategoryItemType>,
    showBoxes: boolean,
    showIcons: boolean,
}

CategoryList.defaultProps = {
   showBoxes: false,
   showIcons: true
}

CategoryList without icons

import React from 'react';
import CategoryList from '../../../src/components/Category/CategoryList';
const items = [
    {
        title: 'Category #1',
    },
    {
        title: 'Category long name #2',
    },
    {
        title: 'Category #3',
    },
];

const Example = () => <CategoryList items={items} showBoxes={true} showIcons={false} />;

export default Example;

CategoryList.propTypes = {
    items: Array<CategoryItemType>,
    showBoxes: boolean,
    showIcons: boolean,
}

CategoryList.defaultProps = {
   showBoxes: false,
   showIcons: true,
}