diff --git a/packages/react-component-library/src/components/Switch/Switch.stories.tsx b/packages/react-component-library/src/components/Switch/Switch.stories.tsx index 7ab224e83f..3845706755 100644 --- a/packages/react-component-library/src/components/Switch/Switch.stories.tsx +++ b/packages/react-component-library/src/components/Switch/Switch.stories.tsx @@ -5,7 +5,7 @@ import { storiesOf } from '@storybook/react' import { Field, Formik, Form } from 'formik' import withFormik from '../../enhancers/withFormik' -import { ResponsiveSwitch, Switch } from '.' +import { ResponsiveSwitch, Switch, SWITCH_SIZE } from '.' const stories = storiesOf('Switch', module) const examples = storiesOf('Switch/Examples', module) @@ -49,7 +49,7 @@ examples.add('Small', () => ( label="Date Range" options={options} onChange={action('onChange')} - size="small" + size={SWITCH_SIZE.SMALL} /> )) @@ -60,7 +60,7 @@ examples.add('Large', () => ( label="Date Range" options={options} onChange={action('onChange')} - size="large" + size={SWITCH_SIZE.LARGE} /> )) diff --git a/packages/react-component-library/src/components/Switch/Switch.tsx b/packages/react-component-library/src/components/Switch/Switch.tsx index 569b2cb939..393bc4b311 100644 --- a/packages/react-component-library/src/components/Switch/Switch.tsx +++ b/packages/react-component-library/src/components/Switch/Switch.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react' import { v4 as uuidv4 } from 'uuid' import { getKey } from '../../helpers' +import { SWITCH_SIZE } from '.' function getActiveOption(options: SwitchOptionProps[], value: string) { const initial: SwitchOptionProps | string = options.find( @@ -23,7 +24,10 @@ export interface SwitchProps { className?: string onChange?: (event: React.FormEvent) => void options: SwitchOptionProps[] - size?: string + size?: + | typeof SWITCH_SIZE.LARGE + | typeof SWITCH_SIZE.SMALL + | typeof SWITCH_SIZE.REGULAR } export const Switch: React.FC = ({ @@ -32,7 +36,7 @@ export const Switch: React.FC = ({ name, onChange, options = [], - size = 'regular', + size = SWITCH_SIZE.REGULAR, value, }) => { const [active, setActive] = useState(getActiveOption(options, value)) diff --git a/packages/react-component-library/src/components/Switch/constants.ts b/packages/react-component-library/src/components/Switch/constants.ts new file mode 100644 index 0000000000..0e86f157c3 --- /dev/null +++ b/packages/react-component-library/src/components/Switch/constants.ts @@ -0,0 +1,7 @@ +const SWITCH_SIZE = { + LARGE: 'large', + REGULAR: 'regular', + SMALL: 'small', +} as const + +export { SWITCH_SIZE } diff --git a/packages/react-component-library/src/components/Switch/index.tsx b/packages/react-component-library/src/components/Switch/index.tsx index fcd8e547e8..d02d3bc3e1 100644 --- a/packages/react-component-library/src/components/Switch/index.tsx +++ b/packages/react-component-library/src/components/Switch/index.tsx @@ -1,2 +1,3 @@ +export * from './constants' export * from './ResponsiveSwitch' export * from './Switch' diff --git a/packages/react-component-library/src/components/index.ts b/packages/react-component-library/src/components/index.ts index 500792f132..3ff9b44f8e 100644 --- a/packages/react-component-library/src/components/index.ts +++ b/packages/react-component-library/src/components/index.ts @@ -26,7 +26,7 @@ import { ScrollableNav, ScrollableNavItem } from './ScrollableNav' import { Searchbar } from './Searchbar' import { Select } from './Select' import { Sidebar, SidebarNav, SidebarNavItem, SidebarUser } from './Sidebar' -import { ResponsiveSwitch, Switch } from './Switch' +import { ResponsiveSwitch, Switch, SWITCH_SIZE } from './Switch' import { RangeSlider } from './RangeSlider' import { Tab, TabSet } from './TabSet' import { Table, TableColumn, TABLE_SORT_ORDER } from './Table' @@ -87,6 +87,7 @@ export { SidebarNavItem, SidebarUser, Switch, + SWITCH_SIZE, RangeSlider, ResponsiveSwitch, Tab, diff --git a/packages/react-component-library/src/index.ts b/packages/react-component-library/src/index.ts index ee2cc85357..32ee85163e 100755 --- a/packages/react-component-library/src/index.ts +++ b/packages/react-component-library/src/index.ts @@ -33,7 +33,7 @@ import { Popover, POPOVER_PLACEMENT } from './components/Popover' import { ProgressIndicator } from './components/ProgressIndicator' import { Select } from './components/Select' import { Sidebar, SidebarNav, SidebarNavItem, SidebarUser } from './components/Sidebar' -import { ResponsiveSwitch, Switch } from './components/Switch' +import { ResponsiveSwitch, Switch, SWITCH_SIZE } from './components/Switch' import { RangeSlider } from './components/RangeSlider' import Radio from './components/Radio' import { Table, TableColumn, TABLE_SORT_ORDER } from './components/Table' @@ -93,6 +93,7 @@ export { POPOVER_PLACEMENT, ProgressIndicator, Switch, + SWITCH_SIZE, RangeSlider, ResponsiveSwitch, Radio,