From adec2443e92cf3d00a83b37543677d61151eadfc Mon Sep 17 00:00:00 2001 From: jameswilddev Date: Thu, 4 Jul 2024 11:58:29 +0100 Subject: [PATCH] Add vertical split button components. --- index.ts | 1 + .../index.tsx | 503 + .../readme.md | 154 + .../unit.tsx | 25890 ++++++++++++++++ readme.md | 1 + 5 files changed, 26549 insertions(+) create mode 100644 react-native/components/createVerticalSplitButtonComponent/index.tsx create mode 100644 react-native/components/createVerticalSplitButtonComponent/readme.md create mode 100644 react-native/components/createVerticalSplitButtonComponent/unit.tsx diff --git a/index.ts b/index.ts index 280dc2d..aeb1c34 100644 --- a/index.ts +++ b/index.ts @@ -53,6 +53,7 @@ export { createTabRoutingComponent } from './react-native/components/createTabRo export { createTextComponent } from './react-native/components/createTextComponent' export { createTiledComponent } from './react-native/components/createTiledComponent' export { createUnderlinedTopTabBarComponent } from './react-native/components/createUnderlinedTopTabBarComponent' +export { createVerticalSplitButtonComponent } from './react-native/components/createVerticalSplitButtonComponent' export { errorReporter } from './react-native/services/errorReporter' export { FileStore } from './react-native/services/FileStore' export { flattenRenderedToArray } from './react-native/utilities/flattenRenderedToArray' diff --git a/react-native/components/createVerticalSplitButtonComponent/index.tsx b/react-native/components/createVerticalSplitButtonComponent/index.tsx new file mode 100644 index 0000000..672e300 --- /dev/null +++ b/react-native/components/createVerticalSplitButtonComponent/index.tsx @@ -0,0 +1,503 @@ +import * as React from 'react' +import { StyleSheet, Text, type TextStyle, View, type ViewStyle } from 'react-native' +import { flattenRenderedToArray } from '../../utilities/flattenRenderedToArray' +import type { SplitButtonStyle } from '../../types/SplitButtonStyle' +import type { SplitButtonStateStyle } from '../../types/SplitButtonStateStyle' +import { Hitbox } from '../Hitbox' + +const createSingleButtonHitboxStyleInstance = ( + splitButtonStyle: SplitButtonStyle, + splitButtonStateStyle: SplitButtonStateStyle +): ViewStyle => { + const output: ViewStyle = { + backgroundColor: splitButtonStateStyle.backgroundColor + } + + if (splitButtonStyle.horizontalPadding !== 0) { + output.paddingHorizontal = splitButtonStyle.horizontalPadding + } + + if (splitButtonStyle.verticalPadding !== 0) { + output.paddingVertical = splitButtonStyle.verticalPadding + } + + if (splitButtonStateStyle.radius !== 0) { + output.borderRadius = splitButtonStateStyle.radius + } + + if (splitButtonStateStyle.border !== null) { + output.borderWidth = splitButtonStateStyle.border.width + output.borderColor = splitButtonStateStyle.border.color + } + + const effectiveBorderWidth = + splitButtonStateStyle.border === null + ? 0 + : splitButtonStateStyle.border.width + + const margin = splitButtonStyle.neutralBorderWidth - effectiveBorderWidth + + if (margin !== 0) { + output.margin = margin + } + + return output +} + +const createTopButtonHitboxStyleInstance = ( + splitButtonStyle: SplitButtonStyle, + splitButtonStateStyle: SplitButtonStateStyle +): ViewStyle => { + const output = createSingleButtonHitboxStyleInstance( + splitButtonStyle, + splitButtonStateStyle + ) + + if (output.borderWidth !== undefined) { + output.borderBottomWidth = 0 + } + + if (output.borderRadius !== undefined) { + output.borderTopLeftRadius = output.borderRadius + output.borderTopRightRadius = output.borderRadius + delete output.borderRadius + } + + if (output.margin !== undefined) { + output.marginBottom = 0 + } + + return output +} + +const createMiddleButtonHitboxStyleInstance = ( + splitButtonStyle: SplitButtonStyle, + splitButtonStateStyle: SplitButtonStateStyle +): ViewStyle => { + const output = createSingleButtonHitboxStyleInstance( + splitButtonStyle, + splitButtonStateStyle + ) + + if (output.borderWidth !== undefined) { + output.borderLeftWidth = output.borderWidth + output.borderRightWidth = output.borderWidth + delete output.borderWidth + } + + if (output.margin !== undefined) { + output.marginHorizontal = output.margin + delete output.margin + } + + delete output.borderRadius + + return output +} + +const createBottomButtonHitboxStyleInstance = ( + splitButtonStyle: SplitButtonStyle, + splitButtonStateStyle: SplitButtonStateStyle +): ViewStyle => { + const output = createSingleButtonHitboxStyleInstance( + splitButtonStyle, + splitButtonStateStyle + ) + + if (output.borderWidth !== undefined) { + output.borderTopWidth = 0 + } + + if (output.borderRadius !== undefined) { + output.borderBottomLeftRadius = output.borderRadius + output.borderBottomRightRadius = output.borderRadius + delete output.borderRadius + } + + if (output.margin !== undefined) { + output.marginTop = 0 + } + + return output +} + +const createButtonTextStyleInstance = ( + splitButtonStyle: SplitButtonStyle, + splitButtonStateStyle: SplitButtonStateStyle +): TextStyle => { + return { + fontFamily: splitButtonStyle.fontFamily, + fontSize: splitButtonStyle.fontSize, + lineHeight: splitButtonStyle.fontSize * 1.4, + color: splitButtonStateStyle.color, + textAlign: 'center' + } +} + +type Instance = React.FunctionComponent< +React.PropsWithChildren<{ + /** + * The currently selected values. + */ + readonly value: readonly TValue[] + + /** + * Invoked when the selected value changes. + * @param to The newly selected values. + */ + onChange: (to: readonly TValue[]) => void + +}> +> + +type SegmentInstance = + React.FunctionComponent<{ + /** + * The value of the segment. + */ + readonly value: TValue + + /** + * When true, the segment will style itself to appear disabled, and will not + * accept user input. It will otherwise style itself to appear enabled, and + * will select the segment's value on press (assuming it is not already + * selected). + */ + readonly disabled: boolean + + /** + * The text to display within the segment. + */ + readonly children: string + }> + +/** + * Creates a new React component representing a split button. + * @template TType The types of segment within the button. + * @template TValue The value selected using the button. + * @param splitButtonStyle The style to apply to the split button. + * @returns The created React component. + */ +export const createVerticalSplitButtonComponent = < + TType extends string, + TValue extends null | boolean | number | string +>( + splitButtonStyle: SplitButtonStyle + ): Instance & { + readonly segments: { + readonly [TTypeItem in TType]: SegmentInstance; + } + } => { + const styles = StyleSheet.create({ + view: { + flexDirection: 'column', + alignItems: 'stretch' + } + }) + + const partialSegments: { + [TTypeItem in TType]?: SegmentInstance; + } = {} + + const partialButtonFactories: { + [TTypeItem in TType]?: ( + value: readonly TValue[], + onChange: (to: readonly TValue[]) => void, + buttonPosition: 'single' | 'top' | 'middle' | 'bottom', + buttonValue: TValue, + buttonLabel: string, + buttonDisabled: boolean, + allButtonValues: readonly TValue[] + ) => JSX.Element; + } = {} + + for (const typeKey in splitButtonStyle.types) { + const typeValue = splitButtonStyle.types[typeKey] + + const typeStyles = StyleSheet.create({ + inactiveEnabledSingleHitbox: createSingleButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.inactiveEnabled + ), + inactiveEnabledTopHitbox: createTopButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.inactiveEnabled + ), + inactiveEnabledMiddleHitbox: createMiddleButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.inactiveEnabled + ), + inactiveEnabledBottomHitbox: createBottomButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.inactiveEnabled + ), + + inactiveDisabledSingleHitbox: createSingleButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.inactiveDisabled + ), + inactiveDisabledTopHitbox: createTopButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.inactiveDisabled + ), + inactiveDisabledMiddleHitbox: createMiddleButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.inactiveDisabled + ), + inactiveDisabledBottomHitbox: createBottomButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.inactiveDisabled + ), + + activeEnabledSingleHitbox: createSingleButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.activeEnabled + ), + activeEnabledTopHitbox: createTopButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.activeEnabled + ), + activeEnabledMiddleHitbox: createMiddleButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.activeEnabled + ), + activeEnabledBottomHitbox: createBottomButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.activeEnabled + ), + + activeDisabledSingleHitbox: createSingleButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.activeDisabled + ), + activeDisabledTopHitbox: createTopButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.activeDisabled + ), + activeDisabledMiddleHitbox: createMiddleButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.activeDisabled + ), + activeDisabledBottomHitbox: createBottomButtonHitboxStyleInstance( + splitButtonStyle, + typeValue.activeDisabled + ), + + inactiveEnabledText: createButtonTextStyleInstance( + splitButtonStyle, + typeValue.inactiveEnabled + ), + inactiveDisabledText: createButtonTextStyleInstance( + splitButtonStyle, + typeValue.inactiveDisabled + ), + activeEnabledText: createButtonTextStyleInstance( + splitButtonStyle, + typeValue.activeEnabled + ), + activeDisabledText: createButtonTextStyleInstance( + splitButtonStyle, + typeValue.activeDisabled + ) + }) + + /* istanbul ignore next */ + partialSegments[typeKey] = () => null + + partialButtonFactories[typeKey] = ( + value, + onChange, + buttonPosition, + buttonValue, + buttonLabel, + buttonDisabled, + allButtonValues + ) => { + let hitboxStyle: ViewStyle + let textStyle: TextStyle + + if (value.includes(buttonValue)) { + if (buttonDisabled) { + switch (buttonPosition) { + case 'single': + hitboxStyle = typeStyles.activeDisabledSingleHitbox + break + + case 'top': + hitboxStyle = typeStyles.activeDisabledTopHitbox + break + + case 'middle': + hitboxStyle = typeStyles.activeDisabledMiddleHitbox + break + + case 'bottom': + hitboxStyle = typeStyles.activeDisabledBottomHitbox + break + } + + textStyle = typeStyles.activeDisabledText + } else { + switch (buttonPosition) { + case 'single': + hitboxStyle = typeStyles.activeEnabledSingleHitbox + break + + case 'top': + hitboxStyle = typeStyles.activeEnabledTopHitbox + break + + case 'middle': + hitboxStyle = typeStyles.activeEnabledMiddleHitbox + break + + case 'bottom': + hitboxStyle = typeStyles.activeEnabledBottomHitbox + break + } + + textStyle = typeStyles.activeEnabledText + } + } else { + if (buttonDisabled) { + switch (buttonPosition) { + case 'single': + hitboxStyle = typeStyles.inactiveDisabledSingleHitbox + break + + case 'top': + hitboxStyle = typeStyles.inactiveDisabledTopHitbox + break + + case 'middle': + hitboxStyle = typeStyles.inactiveDisabledMiddleHitbox + break + + case 'bottom': + hitboxStyle = typeStyles.inactiveDisabledBottomHitbox + break + } + + textStyle = typeStyles.inactiveDisabledText + } else { + switch (buttonPosition) { + case 'single': + hitboxStyle = typeStyles.inactiveEnabledSingleHitbox + break + + case 'top': + hitboxStyle = typeStyles.inactiveEnabledTopHitbox + break + + case 'middle': + hitboxStyle = typeStyles.inactiveEnabledMiddleHitbox + break + + case 'bottom': + hitboxStyle = typeStyles.inactiveEnabledBottomHitbox + break + } + + textStyle = typeStyles.inactiveEnabledText + } + } + + return ( + { + if (value.includes(buttonValue)) { + onChange(value.filter(item => allButtonValues.includes(item) && item !== buttonValue)) + } else { + onChange([...value.filter(item => allButtonValues.includes(item)), buttonValue]) + } + }} + > + + {buttonLabel} + + + ) + } + } + + const segments = partialSegments as { + readonly [TTypeItem in TType]: SegmentInstance; + } + + const buttonFactories: { + readonly [TTypeItem in TType]: ( + value: readonly TValue[], + onChange: (to: readonly TValue[]) => void, + buttonPosition: 'single' | 'top' | 'middle' | 'bottom', + buttonValue: TValue, + buttonLabel: string, + buttonDisabled: boolean, + allButtonValues: readonly TValue[] + ) => JSX.Element; + } = partialButtonFactories as { + [TTypeItem in TType]: ( + value: readonly TValue[], + onChange: (to: readonly TValue[]) => void, + buttonPosition: 'single' | 'top' | 'middle' | 'bottom', + buttonValue: TValue, + buttonLabel: string, + buttonDisabled: boolean, + allButtonValues: readonly TValue[] + ) => JSX.Element; + } + + const SplitButton: Instance & { + segments?: { + readonly [TTypeItem in TType]: SegmentInstance; + } + } = ({ value, onChange, children }) => { + const childrenArray = flattenRenderedToArray(children) + + const allButtonValues: TValue[] = [] + + return ( + + {childrenArray + .filter((element): element is JSX.Element => element !== null) + .map((element, i) => { + if (typeof element === 'object' && 'type' in element) { + for (const typeKey in segments) { + if (segments[typeKey] === element.type) { + allButtonValues.push(element.props.value) + + return buttonFactories[typeKey]( + value, + onChange, + childrenArray.length === 1 + ? 'single' + : i === 0 + ? 'top' + : i === childrenArray.length - 1 + ? 'bottom' + : 'middle', + element.props.value, + element.props.children, + element.props.disabled, + allButtonValues + ) + } + } + } + + throw new Error('Unexpected child in split button.') + })} + + ) + } + + SplitButton.segments = segments + + return SplitButton as Instance & { + readonly segments: { + readonly [TTypeItem in TType]: SegmentInstance; + } + } +} diff --git a/react-native/components/createVerticalSplitButtonComponent/readme.md b/react-native/components/createVerticalSplitButtonComponent/readme.md new file mode 100644 index 0000000..b2f90e5 --- /dev/null +++ b/react-native/components/createVerticalSplitButtonComponent/readme.md @@ -0,0 +1,154 @@ +# `react-native-app-helpers/createVerticalSplitButtonComponent` + +Creates a new React component which displays a list of buttons grouped together. + +## Usage + +```tsx +import { createVerticalSplitButtonComponent } from "react-native-app-helpers"; + +type ExampleType = `exampleTypeA` | `exampleTypeB` | `exampleTypeC`; +type ExampleValue = `a` | `b` | `c`; + +const ExampleSplitButton = createVerticalSplitButtonComponent({ + fontFamily: `Example Font Family`, + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: `red`, + color: `blue`, + radius: 10, + border: { + width: 12, + color: `orange`, + }, + }, + activeEnabled: { + backgroundColor: `oldlace`, + color: `mediumorchid`, + radius: 52, + border: { + width: 76, + color: `olivedrab`, + }, + }, + inactiveDisabled: { + backgroundColor: `wheat`, + color: `lightgreen`, + radius: 34, + border: { + width: 2, + color: `magenta`, + }, + }, + activeDisabled: { + backgroundColor: `mintcream`, + color: `rebeccapurple`, + radius: 9, + border: { + width: 48, + color: `peachpuff`, + }, + }, + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: `crimson`, + color: `darkgoldenrod`, + radius: 15, + border: { + width: 8, + color: `darkgrey`, + }, + }, + activeEnabled: { + backgroundColor: `darkmagenta`, + color: `darkolivegreen`, + radius: 23, + border: { + width: 4, + color: `darkorange`, + }, + }, + inactiveDisabled: { + backgroundColor: `darkorchid`, + color: `darkred`, + radius: 19, + border: { + width: 22, + color: `darksalmon`, + }, + }, + activeDisabled: { + backgroundColor: `darkseagreen`, + color: `darkslateblue`, + radius: 44, + border: { + width: 77, + color: `darkslategrey`, + }, + }, + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: `turquoise`, + color: `whitesmoke`, + radius: 47, + border: { + width: 29, + color: `yellowgreen`, + }, + }, + activeEnabled: { + backgroundColor: `seashell`, + color: `seagreen`, + radius: 33, + border: { + width: 43, + color: `saddlebrown`, + }, + }, + inactiveDisabled: { + backgroundColor: `rosybrown`, + color: `sienna`, + radius: 72, + border: { + width: 1, + color: `slategray`, + }, + }, + activeDisabled: { + backgroundColor: `thistle`, + color: `teal`, + radius: 7, + border: { + width: 9, + color: `tan`, + }, + }, + }, + }, +}); + +const ExampleScreen = () => { + const [value, setValue] = React.useState([`a`]); + + return ( + + + Example Label A + + + Example Label B + + + Example Label C + + + ); +}; +``` diff --git a/react-native/components/createVerticalSplitButtonComponent/unit.tsx b/react-native/components/createVerticalSplitButtonComponent/unit.tsx new file mode 100644 index 0000000..3f32ea2 --- /dev/null +++ b/react-native/components/createVerticalSplitButtonComponent/unit.tsx @@ -0,0 +1,25890 @@ +import * as React from 'react' +import { Text, View } from 'react-native' +import { + createVerticalSplitButtonComponent, + unwrapRenderedFunctionComponent +} from '../../..' +import { Hitbox } from '../Hitbox' + +test('renders as expected with one inactive button width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('raises the change event when a single button is pressed width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + unwrapRenderedFunctionComponent(rendered).props.children[0].props.onPress() + + expect(onChange).toHaveBeenCalledTimes(1) + expect(onChange).toHaveBeenCalledWith(['Example Value B']) +}) + +test('renders as expected with one active button width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one disabled button width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one disabled and active button width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one inactive button without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one active button without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one disabled button without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one disabled and active button without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one inactive button without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one active button without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one disabled button without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one disabled and active button without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one inactive button without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 0, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one active button without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 0, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one disabled button without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 0, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one disabled and active button without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 0, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one inactive button without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: null + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one active button without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: null + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one disabled button without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: null + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one disabled and active button without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: null + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two inactive buttons width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is active width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is disabled width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is disabled and active width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is active width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is disabled width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is disabled and active width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two inactive buttons without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is active, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is disabled, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is disabled and active, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is active, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is disabled, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is disabled and active, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two inactive buttons without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is active, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is disabled, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is disabled and active, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is active, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is disabled, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is disabled and active, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two inactive buttons without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 0, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 0, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is active, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 0, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is disabled, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 0, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is disabled and active, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 0, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is active, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 0, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is disabled, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 0, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is disabled and active, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 0, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two inactive buttons without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: null + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: null + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is active, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: null + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is disabled, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: null + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the left of which is disabled and active, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: null + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is active, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: null + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is disabled, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: null + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with two buttons, the right of which is disabled and active, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: null + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label C + + + Example Label A + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label C + + , + + + Example Label A + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three inactive buttons width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is active width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is disabled width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is disabled and active width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is active width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is disabled width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is disabled and active width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is active width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is disabled width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is disabled and active width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three inactive buttons without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is active, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is disabled, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is disabled and active, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is active, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is disabled, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is disabled and active, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is active, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is disabled, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is disabled and active, without horizontal padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 0, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three inactive buttons without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is active, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is disabled, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is disabled and active, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is active, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is disabled, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is disabled and active, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is active, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is disabled, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is disabled and active, without vertical padding width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 0, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three inactive buttons without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 0, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 0, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 0, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is active, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 0, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is disabled, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 0, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is disabled and active, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 0, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is active, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 0, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is disabled, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 0, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is disabled and active, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 0, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is active, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 0, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is disabled, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 0, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is disabled and active, without radius width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 0, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three inactive buttons without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: null + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: null + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: null + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is active, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: null + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is disabled, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: null + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the left of which is disabled and active, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: null + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is active, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: null + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is disabled, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: null + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the middle of which is disabled and active, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: null + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is active, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: null + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is disabled, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: null + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three buttons, the right of which is disabled and active, without borders width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: null + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('raises the change event when the first of three buttons is pressed width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + unwrapRenderedFunctionComponent(rendered).props.children[0].props.onPress() + + expect(onChange).toHaveBeenCalledTimes(1) + expect(onChange).toHaveBeenCalledWith(['Example Value A']) +}) + +test('raises the change event when the second of three buttons is pressed width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + unwrapRenderedFunctionComponent(rendered).props.children[1].props.onPress() + + expect(onChange).toHaveBeenCalledTimes(1) + expect(onChange).toHaveBeenCalledWith(['Example Value C']) +}) + +test('raises the change event when the third of three buttons is pressed width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + unwrapRenderedFunctionComponent(rendered).props.children[2].props.onPress() + + expect(onChange).toHaveBeenCalledTimes(1) + expect(onChange).toHaveBeenCalledWith(['Example Value B']) +}) + +test('excludes null width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + {null} + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('throws the expected error when a non-element is present width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + Example Non-Element + + Example Label C + + + Example Label B + + + ) + + expect(() => { + unwrapRenderedFunctionComponent(rendered) + }).toThrowError('Unexpected child in split button.') + + expect(onChange).not.toHaveBeenCalled() +}) + +test('throws the expected error when an unexpected element is present width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + Example Unexpected Element + + Example Label C + + + Example Label B + + + ) + + expect(() => { + unwrapRenderedFunctionComponent(rendered) + }).toThrowError('Unexpected child in split button.') + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with one inactive button which does not require margin width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 7, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentB = Component.segments.exampleTypeB + + const rendered = ( + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with three inactive buttons which do not require margin width', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 7, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 7, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 7, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('renders as expected with multiple active buttons', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + | 'Example Value E' + | 'Example Value F' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + Example Label D + + + Example Label E + + + ) + + expect(unwrapRenderedFunctionComponent(rendered)).toEqual( + + {[ + + + Example Label A + + , + + + Example Label C + + , + + + Example Label B + + , + + + Example Label D + + , + + + Example Label E + + + ]} + + ) + + expect(onChange).not.toHaveBeenCalled() +}) + +test('raises the change event when an additional button is pressed', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + | 'Example Value E' + | 'Example Value F' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + Example Label D + + + Example Label E + + + ) + + unwrapRenderedFunctionComponent(rendered).props.children[2].props.onPress() + + expect(onChange).toHaveBeenCalledTimes(1) + expect(onChange).toHaveBeenCalledWith(['Example Value C', 'Example Value A', 'Example Value E', 'Example Value B']) +}) + +test('raises the change event when a selected button is pressed', () => { + type ExampleType = 'exampleTypeA' | 'exampleTypeB' | 'exampleTypeC' + type ExampleValue = + | 'Example Value A' + | 'Example Value B' + | 'Example Value C' + | 'Example Value D' + | 'Example Value E' + | 'Example Value F' + const Component = createVerticalSplitButtonComponent({ + fontFamily: 'Example Font Family', + fontSize: 44, + horizontalPadding: 54, + verticalPadding: 32, + neutralBorderWidth: 7, + types: { + exampleTypeA: { + inactiveEnabled: { + backgroundColor: 'red', + color: 'blue', + radius: 10, + border: { + width: 12, + color: 'orange' + } + }, + activeEnabled: { + backgroundColor: 'oldlace', + color: 'mediumorchid', + radius: 52, + border: { + width: 76, + color: 'olivedrab' + } + }, + inactiveDisabled: { + backgroundColor: 'wheat', + color: 'lightgreen', + radius: 34, + border: { + width: 2, + color: 'magenta' + } + }, + activeDisabled: { + backgroundColor: 'mintcream', + color: 'rebeccapurple', + radius: 9, + border: { + width: 48, + color: 'peachpuff' + } + } + }, + exampleTypeB: { + inactiveEnabled: { + backgroundColor: 'crimson', + color: 'darkgoldenrod', + radius: 15, + border: { + width: 8, + color: 'darkgrey' + } + }, + activeEnabled: { + backgroundColor: 'darkmagenta', + color: 'darkolivegreen', + radius: 23, + border: { + width: 4, + color: 'darkorange' + } + }, + inactiveDisabled: { + backgroundColor: 'darkorchid', + color: 'darkred', + radius: 19, + border: { + width: 22, + color: 'darksalmon' + } + }, + activeDisabled: { + backgroundColor: 'darkseagreen', + color: 'darkslateblue', + radius: 44, + border: { + width: 77, + color: 'darkslategrey' + } + } + }, + exampleTypeC: { + inactiveEnabled: { + backgroundColor: 'turquoise', + color: 'whitesmoke', + radius: 47, + border: { + width: 29, + color: 'yellowgreen' + } + }, + activeEnabled: { + backgroundColor: 'seashell', + color: 'seagreen', + radius: 33, + border: { + width: 43, + color: 'saddlebrown' + } + }, + inactiveDisabled: { + backgroundColor: 'rosybrown', + color: 'sienna', + radius: 72, + border: { + width: 1, + color: 'slategray' + } + }, + activeDisabled: { + backgroundColor: 'thistle', + color: 'teal', + radius: 7, + border: { + width: 9, + color: 'tan' + } + } + } + } + }) + const onChange = jest.fn() + const SegmentA = Component.segments.exampleTypeA + const SegmentB = Component.segments.exampleTypeB + const SegmentC = Component.segments.exampleTypeC + + const rendered = ( + + + Example Label A + + + Example Label C + + + Example Label B + + + Example Label D + + + Example Label E + + + ) + + unwrapRenderedFunctionComponent(rendered).props.children[1].props.onPress() + + expect(onChange).toHaveBeenCalledTimes(1) + expect(onChange).toHaveBeenCalledWith(['Example Value E', 'Example Value A']) +}) diff --git a/readme.md b/readme.md index 28b4204..b2a94ca 100644 --- a/readme.md +++ b/readme.md @@ -72,6 +72,7 @@ import { createTextComponent } from "react-native-app-helpers"; - [createTextComponent](./react-native/components/createTextComponent/readme.md) - [createTiledComponent](./react-native/components/createTiledComponent/readme.md) - [createUnderlinedTopTabBarComponent](./react-native/components/createUnderlinedTopTabBarComponent/readme.md) +- [createVerticalSplitButtonComponent](./react-native/components/createVerticalSplitButtonComponent/readme.md) - [Hitbox](./react-native/components/Hitbox/readme.md) - [HorizontallySymmetricalSafeAreaView](./react-native/components/HorizontallySymmetricalSafeAreaView/readme.md) - [Row](./react-native/components/Row/readme.md)