From eaeb1029c3e428a42dcb3fb41b07c5e9ceb28a4c Mon Sep 17 00:00:00 2001 From: Damien Robson Date: Thu, 17 Oct 2024 11:41:27 +0100 Subject: [PATCH] feat(switch): enhances Switch component to allow inline variant in new validation redesign --- .../checkable-input/checkable-input.style.ts | 8 +- src/__internal__/label/label.component.tsx | 4 + src/__internal__/label/label.style.ts | 9 +- src/__internal__/label/label.test.tsx | 18 +++ .../__internal__/switch-slider-panel.style.ts | 18 ++- .../__internal__/switch-slider-panel.test.tsx | 18 +++ .../__internal__/switch-slider.component.tsx | 4 + .../__internal__/switch-slider.style.ts | 27 +++- .../__internal__/switch-slider.test.tsx | 27 ++++ src/components/switch/switch.component.tsx | 127 +++++++++++---- src/components/switch/switch.mdx | 45 +++++- src/components/switch/switch.stories.tsx | 89 +++++++++++ src/components/switch/switch.style.ts | 36 +++-- src/components/switch/switch.test.tsx | 147 +++++++++++++++++- 14 files changed, 524 insertions(+), 53 deletions(-) diff --git a/src/__internal__/checkable-input/checkable-input.style.ts b/src/__internal__/checkable-input/checkable-input.style.ts index 2b131b44a5..426b3215c1 100644 --- a/src/__internal__/checkable-input/checkable-input.style.ts +++ b/src/__internal__/checkable-input/checkable-input.style.ts @@ -2,10 +2,11 @@ import styled, { css } from "styled-components"; import FieldHelpStyle from "../field-help/field-help.style"; import { FieldLineStyle } from "../form-field/form-field.style"; -import HiddenCheckableInputStyle from "./hidden-checkable-input.style"; import LabelStyle, { StyledLabelContainer } from "../label/label.style"; -import StyledHelp from "../../components/help/help.style"; import StyledValidationIcon from "../validations/validation-icon.style"; +import StyledHelp from "../../components/help/help.style"; + +import HiddenCheckableInputStyle from "./hidden-checkable-input.style"; const StyledCheckableInput = styled.div` display: inline-block; @@ -30,6 +31,8 @@ const StyledCheckableInputWrapper = styled.div labelInline, reverse, }) => css` + width: 100% !important; + ${FieldLineStyle} { display: flex; } @@ -105,6 +108,7 @@ const StyledCheckableInputWrapper = styled.div css` ${StyledCheckableInput} { width: ${inputWidth}% !important; + min-width: 67px; } `} diff --git a/src/__internal__/label/label.component.tsx b/src/__internal__/label/label.component.tsx index 22058c961b..ff0a7420be 100644 --- a/src/__internal__/label/label.component.tsx +++ b/src/__internal__/label/label.component.tsx @@ -38,6 +38,8 @@ export interface LabelProps className?: string; /** Sets aria-label for label element */ "aria-label"?: string; + /** Whether this component is shown against a dark background */ + isDarkBackground?: boolean; } const shouldDisplayValidationIcon = ({ @@ -70,6 +72,7 @@ export const Label = ({ htmlFor, info, inline, + isDarkBackground = false, isRequired, labelId, optional, @@ -167,6 +170,7 @@ export const Label = ({ isRequired={isRequired} as={as} aria-label={ariaLabel} + isDarkBackground={isDarkBackground} > {children} diff --git a/src/__internal__/label/label.style.ts b/src/__internal__/label/label.style.ts index 9532d634c1..83f65e8313 100644 --- a/src/__internal__/label/label.style.ts +++ b/src/__internal__/label/label.style.ts @@ -5,10 +5,17 @@ export interface StyledLabelProps { disabled?: boolean; /** Flag to configure component as mandatory */ isRequired?: boolean; + /** Flag to determine whether to use colours for dark backgrounds */ + isDarkBackground?: boolean; } const StyledLabel = styled.label` - color: var(--colorsUtilityYin090); + ${({ isDarkBackground }) => + css` + color: ${isDarkBackground + ? "var(--colorsUtilityYang100)" + : "var(--colorsUtilityYin090)"}; + `} display: block; font-weight: var(--fontWeights500); diff --git a/src/__internal__/label/label.test.tsx b/src/__internal__/label/label.test.tsx index 2b6360d47e..5266663caf 100644 --- a/src/__internal__/label/label.test.tsx +++ b/src/__internal__/label/label.test.tsx @@ -168,3 +168,21 @@ test("renders with expected styles when `inline` is true and `align` is 'left'", justifyContent: "flex-start", }); }); + +// coverage +test("renders with dark background styles when `isDarkBackground` is true", () => { + render(); + + expect(screen.getByTestId("label-container").childNodes[0]).toHaveStyle({ + color: "var(--colorsUtilityYang100)", + }); +}); + +// coverage +test("renders with normal styles when `isDarkBackground` is false", () => { + render(); + + expect(screen.getByTestId("label-container").childNodes[0]).toHaveStyle({ + color: "var(--colorsUtilityYin090)", + }); +}); diff --git a/src/components/switch/__internal__/switch-slider-panel.style.ts b/src/components/switch/__internal__/switch-slider-panel.style.ts index 044ff41888..428bb68008 100644 --- a/src/components/switch/__internal__/switch-slider-panel.style.ts +++ b/src/components/switch/__internal__/switch-slider-panel.style.ts @@ -1,29 +1,37 @@ import styled, { css } from "styled-components"; -import StyledLoader from "../../loader/loader.style"; -import StyledLoaderSquare from "../../loader/loader-square.style"; import { SwitchProps } from "../switch.component"; +import StyledLoaderSquare from "../../loader/loader-square.style"; +import StyledLoader from "../../loader/loader.style"; export interface SwitchSliderPanelProps { isLoading?: boolean; size?: SwitchProps["size"]; + isDarkBackground?: boolean; } const SwitchSliderPanel = styled.div` - ${({ isLoading, size }: SwitchSliderPanelProps) => css` + ${({ isLoading, size, isDarkBackground }: SwitchSliderPanelProps) => css` border: 0; - color: var(--colorsActionMinorYang100); + color: ${isDarkBackground + ? "var(--colorsUtilityYin100)" + : "var(--colorsActionMinorYang100)"}; margin: auto; position: absolute; left: 0; &[type="on"] { + color: ${isDarkBackground + ? "var(--colorsUtilityYin100)" + : "var(--colorsUtilityYang100)"}; margin-left: 9px; padding-right: ${size === "large" ? "43px" : "27px"}; } &[type="off"] { - color: var(--colorsActionMinor500); + color: ${isDarkBackground + ? "var(--colorsUtilityYang100)" + : "var(--colorsActionMinor500)"}; margin-right: 9px; padding-left: ${size === "large" ? "43px" : "27px"}; } diff --git a/src/components/switch/__internal__/switch-slider-panel.test.tsx b/src/components/switch/__internal__/switch-slider-panel.test.tsx index 2271ae0870..0ec278c764 100644 --- a/src/components/switch/__internal__/switch-slider-panel.test.tsx +++ b/src/components/switch/__internal__/switch-slider-panel.test.tsx @@ -71,3 +71,21 @@ describe("when the theme is set to sageTheme", () => { ); }); }); + +// coverage +test("renders with normal styles when `isDarkBackground` is false", () => { + render( {}} isDarkBackground={false} />); + + const switchPanel = screen.getByTestId("slider-panel"); + + expect(switchPanel).toHaveStyleRule("color: var(--colorsActionMinorYang100)"); +}); + +// coverage +test("renders with dark background styles when `isDarkBackground` is true", () => { + render( {}} isDarkBackground />); + + const switchPanel = screen.getByTestId("slider-panel"); + + expect(switchPanel).toHaveStyleRule("color: var(--colorsUtilityYin100)"); +}); diff --git a/src/components/switch/__internal__/switch-slider.component.tsx b/src/components/switch/__internal__/switch-slider.component.tsx index b456341804..a0797e3a6b 100644 --- a/src/components/switch/__internal__/switch-slider.component.tsx +++ b/src/components/switch/__internal__/switch-slider.component.tsx @@ -13,6 +13,7 @@ export interface SwitchSliderProps extends ValidationProps { loading?: boolean; size?: "small" | "large"; useValidationIcon?: boolean; + isDarkBackground?: boolean; } const SwitchSlider = ({ @@ -24,6 +25,7 @@ const SwitchSlider = ({ warning, info, useValidationIcon, + isDarkBackground, }: SwitchSliderProps) => { const locale = useLocale(); const onText = locale.switch.on(); @@ -45,6 +47,7 @@ const SwitchSlider = ({ error, warning, info, + isDarkBackground, }; const sliderPanelStyleProps = { @@ -52,6 +55,7 @@ const SwitchSlider = ({ size, type: checked ? "on" : "off", disabled, + isDarkBackground, }; const loaderProps = { diff --git a/src/components/switch/__internal__/switch-slider.style.ts b/src/components/switch/__internal__/switch-slider.style.ts index b6a307ff18..4bdacaa81c 100644 --- a/src/components/switch/__internal__/switch-slider.style.ts +++ b/src/components/switch/__internal__/switch-slider.style.ts @@ -1,10 +1,11 @@ import styled, { css } from "styled-components"; -import SwitchSliderPanel from "./switch-slider-panel.style"; import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style"; -import { SwitchSliderProps } from "./switch-slider.component"; import baseTheme, { ThemeObject } from "../../../style/themes/base"; +import SwitchSliderPanel from "./switch-slider-panel.style"; +import { SwitchSliderProps } from "./switch-slider.component"; + interface StyledSwitchSliderProps extends Pick< SwitchSliderProps, @@ -12,6 +13,7 @@ interface StyledSwitchSliderProps > { isLoading?: boolean; theme?: Partial; + isDarkBackground?: boolean; } const StyledSwitchSlider = styled.div` @@ -23,6 +25,7 @@ const StyledSwitchSlider = styled.div` error, warning, theme, + isDarkBackground, }: StyledSwitchSliderProps) => css` display: flex; font-size: 12px; @@ -39,14 +42,22 @@ const StyledSwitchSlider = styled.div` theme?.roundedCornersOptOut ? "90px" : "var(--borderRadius400)" }; border-style: solid; - border-color: var(--colorsActionMinor400); + border-color: ${ + isDarkBackground + ? "var(--colorsUtilityYang100)" + : "var(--colorsActionMinor400)" + }; border-width: var(--borderWidth200); box-sizing: border-box; margin-top: ${size === "large" ? "-47px" : "-28px"}; align-items: center; &::before { - background-color: var(--colorsActionMinor400); + background-color: ${ + isDarkBackground + ? "var(--colorsUtilityYang100)" + : "var(--colorsActionMinor400)" + }; bottom: 4px; content: ""; height: ${size === "large" ? "var(--spacing400)" : "var(--spacing200)"}; @@ -61,7 +72,9 @@ const StyledSwitchSlider = styled.div` ${ checked && css` - background-color: var(--colorsActionMinor500); + background-color: ${isDarkBackground + ? "var(--colorsUtilityYang100)" + : "var(--colorsActionMinor500)"}; border-color: var(--colorsActionMinorTransparent); &::before { @@ -69,7 +82,9 @@ const StyledSwitchSlider = styled.div` 100% - ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"} ); - background-color: var(--colorsActionMinorYang100); + background-color: ${isDarkBackground + ? "var(--colorsUtilityYin100)" + : "var(--colorsActionMinorYang100)"}; } ` } diff --git a/src/components/switch/__internal__/switch-slider.test.tsx b/src/components/switch/__internal__/switch-slider.test.tsx index dac132cf78..856b06db5b 100644 --- a/src/components/switch/__internal__/switch-slider.test.tsx +++ b/src/components/switch/__internal__/switch-slider.test.tsx @@ -134,3 +134,30 @@ test("when `size` is large and the consumer has opted out of rounded corners sty expect(switchPanel).toHaveStyle("border-radius: 30px"); }); + +// coverage +test("renders with normal styles when `isDarkBackground` is false", () => { + render(); + + const switchPanel = screen.getByTestId("slider"); + + expect(switchPanel).toHaveStyleRule("color: var(--colorsActionMinorYang100)"); +}); + +// coverage +test("renders with dark background styles when `isDarkBackground` is true", () => { + render(); + + const switchPanel = screen.getByTestId("slider"); + + expect(switchPanel).toHaveStyleRule("color: var(--colorsUtilityYin100)"); +}); + +// coverage +test("renders with dark background styles when `isDarkBackground` is true and checked is true", () => { + render(); + + const switchPanel = screen.getByTestId("slider"); + + expect(switchPanel).toHaveStyleRule("color: var(--colorsUtilityYang100)"); +}); diff --git a/src/components/switch/switch.component.tsx b/src/components/switch/switch.component.tsx index f217a21bfc..a77c5f4220 100644 --- a/src/components/switch/switch.component.tsx +++ b/src/components/switch/switch.component.tsx @@ -1,19 +1,19 @@ import React, { useState, useCallback, useContext, useRef } from "react"; import { MarginProps } from "styled-system"; -import StyledSwitch, { ErrorBorder, StyledHintText } from "./switch.style"; +import Box from "../box"; import CheckableInput, { CommonCheckableInputProps, } from "../../__internal__/checkable-input"; -import SwitchSlider from "./__internal__/switch-slider.component"; -import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint"; +import Label from "../../__internal__/label"; import { TooltipProvider } from "../../__internal__/tooltip-provider"; -import Logger from "../../__internal__/utils/logger"; -import useFormSpacing from "../../hooks/__internal__/useFormSpacing"; import NewValidationContext from "../carbon-provider/__internal__/new-validation.context"; +import Logger from "../../__internal__/utils/logger"; import ValidationMessage from "../../__internal__/validation-message/validation-message.component"; -import Box from "../box"; -import Label from "../../__internal__/label"; +import useFormSpacing from "../../hooks/__internal__/useFormSpacing"; +import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint"; +import StyledSwitch, { ErrorBorder, StyledHintText } from "./switch.style"; +import SwitchSlider from "./__internal__/switch-slider.component"; import guid from "../../__internal__/utils/helpers/guid"; export interface SwitchProps extends CommonCheckableInputProps, MarginProps { @@ -39,6 +39,8 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps { tooltipPosition?: "top" | "bottom" | "left" | "right"; /** [Legacy] Aria label for rendered help component */ helpAriaLabel?: string; + /** Whether this component resides on a dark background */ + isDarkBackground?: boolean; } let deprecateUncontrolledWarnTriggered = false; @@ -76,6 +78,7 @@ export const Switch = React.forwardRef( "data-element": dataElement, "data-role": dataRole, helpAriaLabel, + isDarkBackground = false, ...rest }: SwitchProps, ref: React.ForwardedRef @@ -124,6 +127,7 @@ export const Switch = React.forwardRef( "data-role": dataRole, "data-element": dataElement, checked: isControlled ? checked : checkedInternal, + isDarkBackground, fieldHelpInline, labelInline: shouldLabelBeInline, labelSpacing, @@ -136,6 +140,7 @@ export const Switch = React.forwardRef( checked: isControlled ? checked : checkedInternal, disabled: disabled || loading, loading, + isDarkBackground, size, error, warning, @@ -158,6 +163,7 @@ export const Switch = React.forwardRef( labelInline: shouldLabelBeInline, labelSpacing, onBlur, + isDarkBackground, onFocus, onChange: isControlled ? onChange : onChangeInternal, id, @@ -180,6 +186,8 @@ export const Switch = React.forwardRef( "data-role": dataRole, "data-element": dataElement, checked: isControlled ? checked : checkedInternal, + labelInline: shouldLabelBeInline, + isDarkBackground, size, ...marginProps, }; @@ -188,6 +196,7 @@ export const Switch = React.forwardRef( checked: isControlled ? checked : checkedInternal, disabled: disabled || loading, loading, + isDarkBackground, size, error, warning, @@ -197,10 +206,12 @@ export const Switch = React.forwardRef( autoFocus, // set aria-invalid but prevent validationIconId from being added to aria-describedby error: !!error, + warning, disabled: disabled || loading, loading, checked: isControlled ? checked : checkedInternal, onBlur, + isDarkBackground, onFocus, onChange: isControlled ? onChange : onChangeInternal, id, @@ -223,24 +234,83 @@ export const Switch = React.forwardRef( .filter(Boolean) .join(" "); + if (!validationRedesignOptIn) { + return ( + <> + + + + + + + + + ); + } + + const defaultMargin = labelInline ? 1 : 0; + const errorMargin = error || warning ? 3 : defaultMargin; + const direction = labelInline ? "row" : "column"; + const reverseDirection = labelInline ? "row-reverse" : "column"; + + let requestedInputWidth = rest.inputWidth; + if ( + requestedInputWidth && + requestedInputWidth <= 1 && + requestedInputWidth >= 0 + ) + requestedInputWidth *= 100; + const enforcedInputWidth = + requestedInputWidth && typeof requestedInputWidth === "number" + ? `${requestedInputWidth}%` + : rest.inputWidth; + return ( <> - {validationRedesignOptIn ? ( - + + - {labelHelp && ( - - {labelHelp} - - )} - + )} - - ) : ( - + + + {labelInline && rest.fieldHelp && ( + - - - - - - + {rest.fieldHelp} + )} ); diff --git a/src/components/switch/switch.mdx b/src/components/switch/switch.mdx index ad01c01c44..817fcb833f 100644 --- a/src/components/switch/switch.mdx +++ b/src/components/switch/switch.mdx @@ -83,7 +83,7 @@ You can use the `isOptional` prop to indicate if the field is optional. ### With labelInline -**Note:** The `labelInline` prop is not supported if the `validationRedesignOptIn` flag on the `CarbonProvider` is true. +**Note:** The `labelInline` prop is not supported if the `validationRedesignOptIn` flag on the `CarbonProvider` is true. @@ -162,6 +162,49 @@ The folowing examples use the new validation pattern that is available by settin name="single switch - new string validation" /> +### Inline field layout with new validation +#### Default usage + + + +#### With optional props + + + +#### With error + + + +#### With overflowing hint text + + + +#### On a dark background + + + +#### On a dark background and with an error + + + ## Props ### Switch diff --git a/src/components/switch/switch.stories.tsx b/src/components/switch/switch.stories.tsx index 97c24ca139..a4d324502b 100644 --- a/src/components/switch/switch.stories.tsx +++ b/src/components/switch/switch.stories.tsx @@ -299,3 +299,92 @@ export const NewValidationString: Story = () => { ); }; NewValidationString.storyName = "Single Switch - New Validation"; + +export const NewValidationInlineDefault: Story = () => { + return ( + + + + + + ); +}; +NewValidationInlineDefault.storyName = "New Validation - Inline"; + +export const NewValidationInlineDefaultWithOptions: Story = () => { + return ( + + + + + + ); +}; +NewValidationInlineDefaultWithOptions.storyName = + "New Validation - Inline with options"; + +export const NewValidationInlineError: Story = () => { + return ( + + + + + + ); +}; +NewValidationInlineError.storyName = "New Validation - Inline with error"; + +export const NewValidationInlineWithOverflowHintText: Story = () => { + return ( + + + + + + ); +}; +NewValidationInlineWithOverflowHintText.storyName = + "New Validation - Inline with overflowing hint text"; + +export const NewValidationInlineWithDarkMode: Story = () => { + return ( + + + + + + ); +}; +NewValidationInlineWithDarkMode.storyName = + "New Validation - Inline with dark background support"; + +export const NewValidationInlineWithDarkModeAndError: Story = () => { + return ( + + + + + + ); +}; +NewValidationInlineWithDarkModeAndError.storyName = + "New Validation - Inline with dark background support and error"; diff --git a/src/components/switch/switch.style.ts b/src/components/switch/switch.style.ts index f3621cb05a..5d584745ab 100644 --- a/src/components/switch/switch.style.ts +++ b/src/components/switch/switch.style.ts @@ -1,17 +1,20 @@ import styled, { css } from "styled-components"; + import { margin } from "styled-system"; -import baseTheme, { ThemeObject } from "../../style/themes/base"; -import FieldHelpStyle from "../../__internal__/field-help/field-help.style"; +import { StyledCheckableInput } from "../../__internal__/checkable-input/checkable-input.style"; import HiddenCheckableInputStyle from "../../__internal__/checkable-input/hidden-checkable-input.style"; +import FieldHelpStyle from "../../__internal__/field-help/field-help.style"; +import { FieldLineStyle } from "../../__internal__/form-field/form-field.style"; import { StyledLabelContainer } from "../../__internal__/label/label.style"; -import { StyledCheckableInput } from "../../__internal__/checkable-input/checkable-input.style"; -import StyledSwitchSlider from "./__internal__/switch-slider.style"; import StyledValidationIcon from "../../__internal__/validations/validation-icon.style"; -import { FieldLineStyle } from "../../__internal__/form-field/form-field.style"; -import { SwitchProps } from "./switch.component"; +import baseTheme, { ThemeObject } from "../../style/themes/base"; import addFocusStyling from "../../style/utils/add-focus-styling"; +import { SwitchProps } from "./switch.component"; + +import StyledSwitchSlider from "./__internal__/switch-slider.style"; + interface StyledSwitchProps extends Pick< SwitchProps, @@ -20,12 +23,16 @@ interface StyledSwitchProps theme: ThemeObject; } +interface StyledHintTextProps { + isDarkBackground?: boolean; +} + const oldFocusStyling = ` outline: solid 3px var(--colorsSemanticFocus500); `; export const ErrorBorder = styled.span` - ${({ warning }: { warning: boolean }) => + ${({ reverse, warning }: { reverse: boolean; warning: boolean }) => css` position: absolute; z-index: 6; @@ -33,18 +40,24 @@ export const ErrorBorder = styled.span` background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"}; - left: -12px; + ${reverse ? "right" : "left"}: -12px; bottom: -4px; top: 2px; `} `; -export const StyledHintText = styled.div` +export const StyledHintText = styled.div` margin-top: 8px; margin-bottom: 8px; - color: var(--colorsUtilityYin055); font-size: 14px; font-weight: 400; + max-width: 160px; + ${({ isDarkBackground }) => + css` + color: ${isDarkBackground + ? "var(--colorsUtilityYang065)" + : "var(--colorsUtilityYin055)"}; + `} `; const StyledSwitch = styled.div` @@ -68,6 +81,9 @@ const StyledSwitch = styled.div` `} } + display: flex; + flex-flow: ${labelInline ? "row wrap" : "column wrap"}; + ${StyledCheckableInput}, ${HiddenCheckableInputStyle} { border: none; box-sizing: border-box; diff --git a/src/components/switch/switch.test.tsx b/src/components/switch/switch.test.tsx index fdb7bf9907..a745441eec 100644 --- a/src/components/switch/switch.test.tsx +++ b/src/components/switch/switch.test.tsx @@ -374,7 +374,7 @@ test("should render with correct accessible name and description when `validatio const switchElement = screen.getByRole("switch"); - expect(switchElement).toHaveAccessibleName("foo"); + expect(switchElement).toHaveAccessibleName("foo hint text"); expect(switchElement).toHaveAccessibleDescription( "hint text this is an error" ); @@ -419,3 +419,148 @@ test("the expected translations are correctly applied for off", () => { expect(i18nText[0]).toBeVisible(); }); + +// coverage +test("renders with normal styles when `isDarkBackground` is false", () => { + render( + + + + ); + + const switchElement = screen.getByRole("switch"); + + expect(switchElement).toHaveStyleRule( + "color: var(--colorsActionMinorYang100)" + ); +}); + +// coverage +test("renders with dark background styles when `isDarkBackground` is true", () => { + render( + + + + ); + + const switchElement = screen.getByRole("switch"); + + expect(switchElement).toHaveStyleRule("color: var(--colorsUtilityYin100)"); +}); + +// coverage +test("renders correctly with inputWidth set to numerical value of between 0 and 1", () => { + render( + + + + ); + + const switchElement = screen.getByRole("switch"); + + expect(switchElement).toHaveStyleRule("width: 50%"); +}); + +// coverage +test("renders correctly with labelInline and new validation", () => { + render( + + + + ); + + const switchElement = screen.getByRole("switch"); + + expect(switchElement).toHaveStyleRule("width: 50%"); +}); + +// coverage +test("renders correctly with reverse flag set under erroneous state and new validation", () => { + render( + + + + ); + + const switchElement = screen.getByRole("switch"); + + expect(switchElement).toHaveStyleRule("width: 50%"); +}); + +// coverage +test("renders correctly with no reverse flag set under erroneous state and new validation", () => { + render( + + + + ); + + const switchElement = screen.getByRole("switch"); + + expect(switchElement).toHaveStyleRule("width: 50%"); +}); + +// coverage +test("renders correctly with reverse flag not set and new validation", () => { + render( + + + + ); + + const switchElement = screen.getByRole("switch"); + + expect(switchElement).toHaveStyleRule("width: 50%"); +}); + +// coverage +test("renders correctly with hint text and dark background in new validation", () => { + render( + + + + ); + + const switchElement = screen.getByRole("switch"); + + expect(switchElement).toHaveStyleRule("width: 50%"); +}); + +// coverage +test("renders correctly with hint text in new validation", () => { + render( + + + + ); + + const switchElement = screen.getByRole("switch"); + + expect(switchElement).toHaveStyleRule("width: 50%"); +}); + +// coverage +test("renders correctly with inline label and field help in new validation", () => { + render( + + + + ); + + const switchElement = screen.getByRole("switch"); + + expect(switchElement).toHaveStyleRule("width: 50%"); +}); + +// coverage +test("renders correctly with inline label, dark background and field help in new validation", () => { + render( + + + + ); + + const switchElement = screen.getByRole("switch"); + + expect(switchElement).toHaveStyleRule("width: 50%"); +});