lucid-ui
Version:
A UI component library from Xandr.
222 lines • 8.5 kB
JavaScript
import React, { useState } from 'react';
import _ from 'lodash';
import Tag from '../Tag/Tag';
export default {
title: 'Communication/Tag',
component: Tag,
args: Tag.defaultProps,
parameters: {
docs: {
description: {
component: Tag.peek.description,
},
},
},
};
export const Basic = (args) => {
return (React.createElement("div", null,
React.createElement("div", null,
React.createElement(Tag, { ...args }, "Amet"),
React.createElement(Tag, { ...args }, "nam"),
React.createElement(Tag, { ...args }, "quibusdam"),
React.createElement(Tag, { ...args, isRemovable: true }, "nobis"),
React.createElement(Tag, { ...args, isRemovable: true }, "autem"),
React.createElement(Tag, { ...args, isRemovable: true }, "sapiente")),
React.createElement("div", null,
React.createElement(Tag, { ...args },
"Fruits",
React.createElement(Tag, { ...args }, "Apples"),
React.createElement(Tag, { ...args }, "Oranges"),
React.createElement(Tag, { ...args }, "Bananas")),
React.createElement(Tag, { ...args, isRemovable: true },
"Vegetables",
React.createElement(Tag, { ...args, isRemovable: true }, "Carrots"),
React.createElement(Tag, { ...args, isRemovable: true }, "Spinach"),
React.createElement(Tag, { ...args, isRemovable: true }, "Celery")))));
};
export const Nested = (args) => {
const words = [
'Fashion',
'The',
'Vexillologist',
'Cold Brew',
'This is a longer sentence that should be handled okay',
];
return (React.createElement("div", null,
React.createElement(Tag, { ...args },
"Grouped items",
_.times(8, (n) => (React.createElement(Tag, { key: n }, words[n % words.length])))),
React.createElement(Tag, { ...args, isRemovable: true },
"Grouped items",
_.times(10, (n) => (React.createElement(Tag, { ...args, isRemovable: true, key: n }, words[n % words.length]))))));
};
Nested.parameters = {
docs: {
description: {
story: `Use a parent \`tag\` to group child \`tags\` into categories. This example also shows you how to dynamically generate a list of \`tags\`.`,
},
},
};
export const DoubleNested = (args) => {
const words = [
'Fashion',
'The',
'Vexillologist',
'Cold Brew',
'This is a longer sentence that should be handled okay but what if it is even longer than you could ever think imaginable',
];
return (React.createElement("div", null,
React.createElement(Tag, { ...args, isTop: true },
"Global:",
React.createElement(Tag, { ...args },
"Group 1",
_.times(4, (n) => (React.createElement(Tag, { ...args, key: n }, words[n % words.length])))),
React.createElement(Tag, { ...args },
"Group 2",
_.times(4, (n) => (React.createElement(Tag, { ...args, key: n }, words[n % words.length]))))),
React.createElement(Tag, { ...args, isTop: true },
"In-Progess:",
React.createElement(Tag, { ...args },
"Group 1",
_.times(4, (n) => (React.createElement(Tag, { ...args, key: n }, words[n % words.length])))),
React.createElement(Tag, { ...args },
"Group 2",
_.times(4, (n) => (React.createElement(Tag, { ...args, key: n }, words[n % words.length])))))));
};
DoubleNested.parameters = {
docs: {
description: {
story: `Double nesting allows you to add a third level of hierarchy to your \`tag\` categorization.`,
},
},
};
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',
'Amee',
'Padmé Amidala',
'Cassian Andor',
'Bail Antilles',
'Raymus Antilles',
'Wedge Antilles',
'Queen Apailana',
'Commander Appo',
'Passel Argente',
'Faro Argyus',
'Seti Ashgad',
'AZI-3',
],
],
[
'Lord of the Rings',
[
'Adrahil',
'Adrahil II',
'Aegnor',
'Aerandir',
'Aghan',
'Aglahad',
'Ailinel',
'Alatar',
'Aldamir',
'Aldor',
'Almarian',
'Almiel',
'Amandil',
'Amdír',
'Amlaith',
'Amrod',
'Amroth',
'Anardil',
'Anborn',
'Ancalagon The Black',
'Andróg',
'Angbor',
'Angelimar',
'Angelimir',
'Angrod',
'Anárion',
'Ar-Adûnakhôr',
'Ar-Gimilzôr',
'Ar-Pharazôn',
'Ar-Sakalthôr',
'Ar-Zimrathôn',
'Arador',
'Araglas',
'Aragorn I',
'Aragorn II Elessar',
],
],
[
'Star Trek',
[
'Jonathan Archer',
'Ayala',
'Azan',
'Reginald Barclay',
'Lieutenant, JG (TNG,FCT)',
'Engineering Officer (TNG,Movies)',
'Bareil Antos',
'Julian Bashir',
'Season 6 (TNG)',
'Lieutenant, JG (S1-3)',
],
],
];
const [removedItems, setRemovedItems] = useState({});
const handleRemove = ({ props: { callbackId } }) => {
const newRemovedItems = _.set(removedItems, callbackId, true);
setRemovedItems({ ...newRemovedItems });
};
return (React.createElement("div", null, _.map(groups, ([group, names], groupIndex) => {
const groupCallbackId = `${groupIndex}`;
if (_.get(removedItems, groupCallbackId) === true) {
return null;
}
return (React.createElement(Tag, { ...args, key: groupCallbackId, isRemovable: true, onRemove: handleRemove, callbackId: groupCallbackId },
group,
_.map(names, (name, nameIndex) => {
const nameCallbackId = `${groupIndex}.${nameIndex}`;
if (_.get(removedItems, nameCallbackId) === true) {
return null;
}
return (React.createElement(Tag, { ...args, key: nameCallbackId, isRemovable: true, onRemove: handleRemove, callbackId: nameCallbackId }, name));
})));
})));
};
Interactive.parameters = {
docs: {
description: {
story: `Use interactive \`tags\` to allow users to remove a selection.`,
},
},
};
export const Colors = (args) => {
return (React.createElement("div", null,
React.createElement(Tag, { ...args },
React.createElement(Tag, { ...args, kind: 'info' }, "notitia"),
React.createElement(Tag, { ...args, kind: 'danger' }, "periculum"),
React.createElement(Tag, { ...args, kind: 'default' }, "deficio")),
React.createElement(Tag, { ...args },
React.createElement(Tag, { ...args, isRemovable: true, kind: 'info' }, "notitia"),
React.createElement(Tag, { ...args, isRemovable: true, kind: 'danger' }, "periculum"))));
};
Colors.parameters = {
docs: {
description: {
story: `\`Tag\` is available in two additional colors: \`kind='danger'\` for settings that can not be saved (for example, custom dates outside of the flight range), and \`kind='default'\` for disabled items (for example, past flights). The \`'default'\` color cannot be used for the \`isRemovable\` \`tag\`.`,
},
},
};
//# sourceMappingURL=Tag.stories.js.map