lucid-ui
Version:
A UI component library from Xandr.
188 lines • 9.32 kB
JavaScript
import React from 'react';
import Tabs from './Tabs';
import RadioGroup from '../RadioGroup/RadioGroup';
import Button from '../Button/Button';
import SearchField from '../SearchField/SearchField';
export default {
title: 'Navigation/Tabs',
component: Tabs,
parameters: {
docs: {
description: {
component: Tabs.peek.description,
},
},
},
};
/* Title As Prop */
export const TitleAsProp = (args) => {
return (React.createElement("div", null,
React.createElement(Tabs, { ...args },
React.createElement(Tabs.Tab, { Title: 'One', className: 'one' }, "One content"),
React.createElement(Tabs.Tab, { Title: 'Two', isDisabled: true }, "Two content"),
React.createElement(Tabs.Tab, { Title: 'Three' }, "Three content"),
React.createElement(Tabs.Tab, { Title: 'Four' }, "Four content"))));
};
/* Title As Child */
export const TitleAsChild = (args) => {
return (React.createElement("div", null,
React.createElement(Tabs, { ...args },
React.createElement(Tabs.Tab, null,
React.createElement(Tabs.Title, null, "One"),
"One content"),
React.createElement(Tabs.Tab, { isDisabled: true },
React.createElement(Tabs.Title, null, "Two"),
"Two content"),
React.createElement(Tabs.Tab, null,
React.createElement(Tabs.Title, null, "Three"),
"Three content"),
React.createElement(Tabs.Tab, null,
React.createElement(Tabs.Title, null, "Four"),
"Four content"))));
};
/* Complex Title As Child */
export const ComplexTitleAsChild = (args) => {
const titleThree = (React.createElement(RadioGroup, { ...RadioGroup.defaultProps, selectedIndex: 1 },
React.createElement(RadioGroup.RadioButton, { ...RadioGroup.RadioButton.defaultProps },
React.createElement(RadioGroup.Label, null, "Captain America")),
React.createElement(RadioGroup.RadioButton, { ...RadioGroup.RadioButton.defaultProps },
React.createElement(RadioGroup.Label, null, "Iron Man")),
React.createElement(RadioGroup.RadioButton, { ...RadioGroup.RadioButton.defaultProps },
React.createElement(RadioGroup.Label, null, "Thor"))));
const tabStyle = {
height: '100px',
width: '200px',
};
return (React.createElement("div", null,
React.createElement(Tabs, { ...args, hasMultilineTitle: true },
React.createElement(Tabs.Tab, { style: tabStyle },
React.createElement(Tabs.Title, null,
"One",
React.createElement("br", null),
React.createElement(Button, { ...Button.defaultProps }, "Button")),
"One content"),
React.createElement(Tabs.Tab, { style: tabStyle },
React.createElement(Tabs.Title, null,
"Two",
React.createElement("br", null),
"Line Two",
React.createElement(SearchField, null)),
"Two content"),
React.createElement(Tabs.Tab, { style: tabStyle },
React.createElement(Tabs.Title, null, titleThree),
"Three content"),
React.createElement(Tabs.Tab, { isDisabled: true, style: tabStyle },
React.createElement(Tabs.Title, null, "Four"),
"Four content"))));
};
/* Tab As Prop */
export const TabAsProp = (args) => {
return (React.createElement("div", null,
React.createElement(Tabs, { ...args, Tab: [
{ Title: 'Bert', children: 'Bert' },
{ Title: 'Ernie', children: 'Ernie' },
] })));
};
/* Full Width */
export const FullWidth = (args) => {
return (React.createElement("div", null,
React.createElement(Tabs, { ...args, hasFullWidthTabs: true },
React.createElement(Tabs.Tab, null,
React.createElement(Tabs.Title, null, "One"),
"One content"),
React.createElement(Tabs.Tab, null,
React.createElement(Tabs.Title, null, "Two"),
"Two content"),
React.createElement(Tabs.Tab, null,
React.createElement(Tabs.Title, null, "Three"),
"Three content"))));
};
/* Variable Width */
export const VariableWidth = (args) => {
const tabStyle = { width: '100px' };
return (React.createElement("div", null,
React.createElement(Tabs, { ...args, hasFullWidthTabs: false },
React.createElement(Tabs.Tab, { style: tabStyle },
React.createElement(Tabs.Title, null, "One"),
"One content"),
React.createElement(Tabs.Tab, { style: tabStyle },
React.createElement(Tabs.Title, null, "Two"),
"Two content"),
React.createElement(Tabs.Tab, { style: tabStyle },
React.createElement(Tabs.Title, null, "Three"),
"Three content"))));
};
/* Progression */
export const Progression = (args) => {
return (React.createElement("div", null,
React.createElement(Tabs, { ...args, isOpen: false, isProgressive: true },
React.createElement(Tabs.Tab, { Title: 'One' }, "One content"),
React.createElement(Tabs.Tab, { Title: 'Two' }, "Two content"),
React.createElement(Tabs.Tab, { Title: 'Three' }, "Three content"),
React.createElement(Tabs.Tab, { Title: 'Disabled', isDisabled: true }, "Disabled Content"),
React.createElement(Tabs.Tab, { Title: 'Five', isDisabled: true }, "Four content"))));
};
/* Progression Variable Width */
export const ProgressionVariableWidth = (args) => {
const tabStyle = { width: '100px' };
return (React.createElement("div", null,
React.createElement(Tabs, { ...args, hasFullWidthTabs: false, isOpen: false, isProgressive: true },
React.createElement(Tabs.Tab, { style: tabStyle, Title: 'One' }, "One content"),
React.createElement(Tabs.Tab, { style: tabStyle, Title: 'Two' }, "Two content"),
React.createElement(Tabs.Tab, { style: tabStyle, Title: 'Three' }, "Three content"),
React.createElement(Tabs.Tab, { style: tabStyle, Title: 'Disabled', isDisabled: true }, "Disabled Content"),
React.createElement(Tabs.Tab, { style: tabStyle, Title: 'Five', isDisabled: true }, "Four content"))));
};
/* With Count */
export const WithCount = (args) => {
return (React.createElement("div", null,
React.createElement("h4", null, "Static Width"),
React.createElement(Tabs, { ...args, hasFullWidthTabs: false },
React.createElement(Tabs.Tab, { count: 12 },
React.createElement(Tabs.Title, null, "One"),
"One content"),
React.createElement(Tabs.Tab, { count: 15 },
React.createElement(Tabs.Title, null, "Two"),
"Two content"),
React.createElement(Tabs.Tab, { count: 7 },
React.createElement(Tabs.Title, null, "Three"),
"Three content"),
React.createElement(Tabs.Tab, { count: 3, isDisabled: true },
React.createElement(Tabs.Title, null, "Four"),
"Four content"),
React.createElement(Tabs.Tab, { count: 0, isDisabled: true },
React.createElement(Tabs.Title, null, "Five"),
"Five content")),
React.createElement("h4", null, "Variable Width"),
React.createElement(Tabs, { ...args, hasFullWidthTabs: false },
React.createElement(Tabs.Tab, { count: 1231321, isVariableCountWidth: true },
React.createElement(Tabs.Title, null, "One"),
"One content"),
React.createElement(Tabs.Tab, { count: 6546541612, isVariableCountWidth: true },
React.createElement(Tabs.Title, null, "Two"),
"Two content"),
React.createElement(Tabs.Tab, { count: 7, isVariableCountWidth: true },
React.createElement(Tabs.Title, null, "Three"),
"Three content"),
React.createElement(Tabs.Tab, { count: 123, isDisabled: true, isVariableCountWidth: true },
React.createElement(Tabs.Title, null, "Four"),
"Four content"))));
};
/* 10 Floating */
export const Floating = (args) => {
return (React.createElement("div", null,
React.createElement(Tabs, { ...args, hasFullWidthTabs: false, isFloating: true },
React.createElement(Tabs.Tab, { count: 12 },
React.createElement(Tabs.Title, null, "One"),
"One content"),
React.createElement(Tabs.Tab, { count: 15 },
React.createElement(Tabs.Title, null, "Two"),
"Two content"),
React.createElement(Tabs.Tab, { count: 7 },
React.createElement(Tabs.Title, null, "Three"),
"Three content"),
React.createElement(Tabs.Tab, { count: 3, isDisabled: true },
React.createElement(Tabs.Title, null, "Three"),
"Three content"))));
};
//# sourceMappingURL=Tabs.stories.js.map