lucid-ui/dist/esm/components/Selection/Selection.stories.js

A UI component library from Xandr.

import { set, map, get } from 'lodash';
import React, { useState } from 'react';
import Selection from './Selection';
import Resizer from '../Resizer/Resizer';
export default {
    title: 'Communication/Selection',
    component: Selection,
    parameters: {
        docs: {
            description: {
                component: Selection.peek.description,
            },
        },
    },
};
/* Kinds */
export const Kinds = (args) => {
    return (React.createElement(Resizer, null, (width) => {
        const responsiveMode = width >= 400 ? 'large' : 'small';
        return (React.createElement("div", null,
            React.createElement("div", { style: { margin: '10px' } },
                React.createElement(Selection, { ...args, isRemovable: false, responsiveMode: responsiveMode, kind: 'container', Label: 'Container Light Not Removable' })),
            React.createElement("div", { style: { margin: '10px' } },
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'container', Label: 'Container Light' })),
            React.createElement("div", { style: { margin: '10px' } },
                React.createElement(Selection, { ...args, isFilled: true, isRemovable: false, responsiveMode: responsiveMode, kind: 'container', Label: 'Container Filled Not Removable' })),
            React.createElement("div", { style: { margin: '10px' } },
                React.createElement(Selection, { ...args, isFilled: true, responsiveMode: responsiveMode, kind: 'container', Label: 'Container Filled' })),
            React.createElement("div", { style: { margin: '10px' } },
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, Label: 'Default' })),
            React.createElement("div", { style: { margin: '10px' } },
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'success', Label: 'Success' })),
            React.createElement("div", { style: { margin: '10px' } },
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'danger', Label: 'Danger' })),
            React.createElement("div", { style: { margin: '10px' } },
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'info', Label: 'Info' })),
            React.createElement("div", { style: { margin: '10px' } },
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'warning', Label: 'Warning' }))));
    }));
};
/* Nested */
export const Nested = (args) => {
    return (React.createElement(Resizer, null, (width) => {
        const responsiveMode = width >= 400 ? 'large' : 'small';
        return (React.createElement("div", null,
            React.createElement(Selection, { ...args, isTop: true, responsiveMode: responsiveMode, Label: 'Arts and Entertainment' },
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, Label: 'Item 1' }),
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, Label: 'Item 2' }),
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, Label: 'Item 3' },
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, Label: 'Item 1' }),
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, Label: 'Item 2' }),
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, Label: 'Item 3' })),
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, Label: 'Item 4' },
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, Label: 'Item 1' }),
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, Label: 'Item 2' }),
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, Label: 'Item 3' }),
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, Label: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' }))),
            React.createElement(Selection, { ...args, isTop: true, responsiveMode: responsiveMode, kind: 'info', Label: 'Arts and Entertainment' },
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'info', Label: 'Item 1' }),
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'info', Label: 'Item 2' }),
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'info', Label: 'Item 3' },
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'info', Label: 'Item 1' }),
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'info', Label: 'Item 2' }),
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'info', Label: 'Item 3' })),
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'warning', Label: 'Item 4' },
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'warning', Label: 'Item 1' }),
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'warning', Label: 'Item 2' }),
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'warning', Label: 'Item 3' }),
                    React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'warning', Label: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' }))),
            React.createElement(Selection, { ...args, isTop: true, responsiveMode: responsiveMode, kind: 'success', hasBackground: true, isBold: true, Label: 'Leisure' },
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'danger', Label: 'Item 1' }),
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'danger', Label: 'Item 2' }),
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'danger', Label: 'Item 3' })),
            React.createElement(Selection, { ...args, isTop: true, responsiveMode: responsiveMode, kind: 'danger', hasBackground: true, isBold: true, Label: 'Arts and Entertainment' },
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'success', Label: 'Item 1' }),
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'success', Label: 'Item 2' }),
                React.createElement(Selection, { ...args, responsiveMode: responsiveMode, kind: 'success', Label: 'Item 3' }))));
    }));
};
/* Interactive */
export const Interactive = (args) => {
    const groups = [
        ['Last Man on Earth', ['Phil']],
        ['Last Woman on Earth', ['Carol']],
        [
            'Star Wars',
            [
                'Ask Aak',
                'Admiral Gial Ackbar',
                'Acros-Krik',
                'Ak-Rev',
                'Stass Allie',
                'Almec',
                'Mas Amedda',
            ],
        ],
        [
            'Lord of the Rings',
            ['Adrahil', 'Adrahil II', 'Araglas', 'Aragorn I', 'Aragorn II Elessar'],
        ],
        [
            'Star Trek',
            [
                'Jonathan Archer',
                'Ayala',
                'Azan',
                'Bareil Antos',
                'Julian Bashir',
                'Season 6 (TNG)',
                'Lieutenant, JG (S1-3)',
            ],
        ],
    ];
    const [removedItems, setRemovedItems] = useState({});
    const handleRemove = ({ props }) => {
        const { callbackId } = props;
        setRemovedItems({ ...set(removedItems, callbackId, true) });
    };
    return (React.createElement(Resizer, null, (width) => {
        const responsiveMode = width >= 400 ? 'large' : 'small';
        return (React.createElement("div", null, map(groups, ([group, names], groupIndex) => {
            const groupCallbackId = `${groupIndex}`;
            if (get(removedItems, groupCallbackId) === true) {
                return null;
            }
            return (React.createElement(Selection, { ...args, key: groupCallbackId, responsiveMode: responsiveMode, isRemovable: true, isBold: true, hasBackground: true, kind: 'container', onRemove: handleRemove, callbackId: groupCallbackId, Label: group }, map(names, (name, nameIndex) => {
                const nameCallbackId = `${groupIndex}.${nameIndex}`;
                if (get(removedItems, nameCallbackId) === true) {
                    return null;
                }
                return (React.createElement(Selection, { ...args, key: nameCallbackId, responsiveMode: responsiveMode, isRemovable: true, onRemove: handleRemove, callbackId: nameCallbackId, Label: name }));
            })));
        })));
    }));
};
//# sourceMappingURL=Selection.stories.js.map