lucid-ui
Version:
A UI component library from Xandr.
166 lines • 7.35 kB
JavaScript
import React, { useState } from 'react';
import SwitchLabeled from './SwitchLabeled';
export default {
title: 'Controls/SwitchLabeled',
component: SwitchLabeled,
subcomponents: { 'SwitchLabeled.Label': SwitchLabeled.Label },
parameters: {
docs: {
description: {
component: SwitchLabeled.peek.description,
},
},
},
args: SwitchLabeled.defaultProps,
};
export const Basic = (args) => {
const [isSelected, setIsSelected] = useState(false);
const handleSelected = () => {
setIsSelected(!isSelected);
};
return (React.createElement(SwitchLabeled, { ...args, Label: 'Default', onSelect: handleSelected, isSelected: isSelected }));
};
/* Interactive */
export const Interactive = (args) => {
const style = {
marginBottom: '3px',
};
const [state, setState] = useState({
airplaneMode: false,
bluetooth: false,
cellularData: false,
});
const handleSelectedAirplaneMode = (isSelected) => {
setState({
...state,
airplaneMode: isSelected,
});
};
const handleSelectedBluetooth = (isSelected) => {
setState({
...state,
bluetooth: isSelected,
});
};
const handleSelectedCellularData = (isSelected) => {
setState({
...state,
cellularData: isSelected,
});
};
return (React.createElement("section", null,
React.createElement("p", null,
React.createElement("em", null,
"(Use the styles on the parent container of ",
React.createElement("code", null, "SwitchLabeled"),
' ',
"components to ensure only the switches and their labels are clickable)")),
React.createElement("span", { style: {
display: 'inline-flex',
flexDirection: 'column',
alignItems: 'flex-start',
} },
React.createElement(SwitchLabeled, { ...args, isSelected: state.airplaneMode === true, onSelect: handleSelectedAirplaneMode, style: style },
React.createElement(SwitchLabeled.Label, null, "Airplane Mode")),
React.createElement(SwitchLabeled, { ...args, isSelected: state.bluetooth === true, onSelect: handleSelectedBluetooth, style: style },
React.createElement(SwitchLabeled.Label, null, "Bluetooth")),
React.createElement(SwitchLabeled, { ...args, isSelected: state.cellularData === true, onSelect: handleSelectedCellularData, style: style },
React.createElement(SwitchLabeled.Label, null, "Cellular Data")))));
};
/* Interactive With Changing Labels */
export const InteractiveWithChangingLabels = (args) => {
const style = {
marginBottom: '3px',
};
const [state, setState] = useState({
airplaneMode: false,
bluetooth: false,
cellularData: false,
spam: false,
});
const handleSelectedAirplaneMode = (isSelected) => {
setState({
...state,
airplaneMode: isSelected,
});
};
const handleSelectedBluetooth = (isSelected) => {
setState({
...state,
bluetooth: isSelected,
});
};
const handleSelectedCellularData = (isSelected) => {
setState({
...state,
cellularData: isSelected,
});
};
const handleSelectedSpam = (isSelected) => {
setState({
...state,
spam: isSelected,
});
};
const spamSwitchLabel = state.spam
? 'Yes! I would like to receive updates, special offers, and other information from Xandr and its subsidiaries.'
: 'No! Please keep your messages to yourself!';
return (React.createElement("section", null,
React.createElement("span", { style: {
display: 'inline-flex',
flexDirection: 'column',
alignItems: 'flex-start',
} },
React.createElement(SwitchLabeled, { ...args, isSelected: state.airplaneMode === true, Label: `Airplane Mode ${state.airplaneMode === true ? 'Activated' : 'Deactivated'}`, onSelect: handleSelectedAirplaneMode, style: style }),
React.createElement(SwitchLabeled, { ...args, isSelected: state.bluetooth === true, Label: `Bluetooth ${state.bluetooth === true ? 'Enabled' : 'Disabled'}`, onSelect: handleSelectedBluetooth, style: style }),
React.createElement(SwitchLabeled, { ...args, isSelected: state.cellularData === true, Label: `${state.cellularData ? 'Use' : 'Do Not Use'} Cellular Data`, onSelect: handleSelectedCellularData, style: style })),
React.createElement("br", null),
React.createElement(SwitchLabeled, { ...args, isSelected: state.spam === true, onSelect: handleSelectedSpam, style: style },
React.createElement(SwitchLabeled.Label, null, spamSwitchLabel))));
};
/* Label As Prop */
export const LabelAsProp = (args) => {
const style = {
marginRight: '5px',
};
return (React.createElement("section", null,
React.createElement("section", { style: {
display: 'inline-flex',
flexDirection: 'column',
alignItems: 'flex-start',
} },
React.createElement(SwitchLabeled, { ...args, Label: 'Just text', style: style }),
React.createElement(SwitchLabeled, { ...args, Label: React.createElement("span", null, "HTML element"), style: style }),
React.createElement(SwitchLabeled, { ...args, Label: [
'Text in an array',
'Only the first value in the array is used',
'The rest of these should be ignored',
], style: style }),
React.createElement(SwitchLabeled, { ...args, Label: [
React.createElement("span", { key: '1' }, "HTML element in an array"),
React.createElement("span", { key: '2' }, "Again only the first value in the array is used"),
React.createElement("span", { key: '3' }, "The rest should not be rendered"),
], style: style }))));
};
/* States */
export const States = (args) => {
const style = {
marginBottom: '3px',
marginRight: '13px',
};
return (React.createElement("section", { style: {
display: 'inline-flex',
flexDirection: 'column',
alignItems: 'flex-start',
} },
React.createElement(SwitchLabeled, { ...args, style: style },
React.createElement(SwitchLabeled.Label, null, "(default props)")),
React.createElement("section", null,
React.createElement(SwitchLabeled, { ...args, isSelected: true, style: style },
React.createElement(SwitchLabeled.Label, null, "Selected")),
React.createElement(SwitchLabeled, { ...args, isDisabled: true, style: style },
React.createElement(SwitchLabeled.Label, null, "Disabled")),
React.createElement(SwitchLabeled, { ...args, isDisabled: true, isSelected: true, style: style },
React.createElement(SwitchLabeled.Label, null, "Disabled & selected")))));
};
//# sourceMappingURL=SwitchLabeled.stories.js.map