[NO JIRA][BpkSwitch]: Remove label and just ship switch

examples/bpk-component-aria-live/examples.module.scss

@@ -43,8 +43,12 @@
     flex: 0.5;
   }
 
-  &__switch {
-    flex: 0.3;
+  &__switch-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: center;
+    flex: 0.2;
   }
 
   &__chip {

examples/bpk-component-aria-live/examples.tsx

@@ -29,7 +29,6 @@ import { BpkCode } from '../../packages/bpk-component-code';
 import BpkFieldset from '../../packages/bpk-component-fieldset';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSelect from '../../packages/bpk-component-select';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSwitch from '../../packages/bpk-component-switch';
 import { cssModules } from '../../packages/bpk-react-utils';
 
@@ -78,7 +77,7 @@ const AriaLiveDemo = ({
 );
 
 class SelectExample<SProps extends {}> extends Component<
-SProps,
+  SProps,
   { destination: string; direct: boolean }
 > {
   constructor(props: SProps) {
@@ -131,12 +130,16 @@ SProps,
                 <option value="Panjin">Panjin</option>
               </BpkSelect>
             </BpkFieldset>
-            <BpkSwitch
-              className={getClassName('bpk-storybook-aria-live-demo__switch')}
-              label="Direct flights only"
-              checked={direct}
-              onChange={this.toggleDirectness}
-            />
+            <div
+              className={getClassName('bpk-storybook-aria-live-demo__switch-wrapper')}
+            >
+              <span>Direct flights only</span>
+              <BpkSwitch
+                ariaLabel="Direct flights only"
+                checked={direct}
+                onChange={this.toggleDirectness}
+              />
+            </div>
           </div>
         </div>
         <AriaLiveDemo
@@ -186,7 +189,7 @@ class ChipsExample<CProps extends {}> extends Component<
 
   id = 'aria-live-chips-example';
 
-  toggleCategory = (category: "Flights" | "Hotels" | "Car hire") => {
+  toggleCategory = (category: 'Flights' | 'Hotels' | 'Car hire') => {
     this.setState((prevState) => {
       const nextState = prevState;
       nextState.categories[category] = !prevState.categories[category];
@@ -213,19 +216,21 @@ class ChipsExample<CProps extends {}> extends Component<
             <BpkCode>aria-controls=&quot;{this.id}&quot;</BpkCode> to link it to
             the ARIA live region below with the same ID.
           </p>
-          {(Object.keys(categories) as Array<keyof typeof categories>).map((category) => (
-            <BpkChip
-              className={getClassName('bpk-storybook-aria-live-demo__chip')}
-              aria-controls={this.id}
-              selected={categories[category]}
-              accessibilityLabel={category}
-              onClick={() => {
-                this.toggleCategory(category);
-              }}
-            >
-              {category}
-            </BpkChip>
-          ))}
+          {(Object.keys(categories) as Array<keyof typeof categories>).map(
+            (category) => (
+              <BpkChip
+                className={getClassName('bpk-storybook-aria-live-demo__chip')}
+                aria-controls={this.id}
+                selected={categories[category]}
+                accessibilityLabel={category}
+                onClick={() => {
+                  this.toggleCategory(category);
+                }}
+              >
+                {category}
+              </BpkChip>
+            ),
+          )}
         </div>
         <AriaLiveDemo
           id={this.id}

examples/bpk-component-switch/examples.js → examples/bpk-component-switch/examples.tsx

@@ -15,23 +15,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import BpkSwitch from '../../packages/bpk-component-switch';
 
-const DefaultExample = ({ ...rest }: {}) => (
-  <BpkSwitch {...rest} label="Backpack" />
+type Props = {
+  checked?: boolean,
+  [rest: string]: any
+};
+
+const DefaultExample = ({ ...rest }: Props) => (
+  <BpkSwitch {...rest} ariaLabel="Activate Backpack" />
 );
 
-const SmallExample = ({ ...rest }: {}) => (
-  <BpkSwitch small {...rest} label="Backpack" />
+const SmallExample = ({ ...rest }: Props) => (
+  <BpkSwitch small {...rest} ariaLabel="Activate Backpack" />
 );
 
 // Putting the switch in a container which we know is too small to contain the label and the switch
-const ReducedSpaceExample =  ({ ...rest }: {}) => (
+const ReducedSpaceExample =  ({ ...rest }: Props) => (
   <div style={{ width: "4rem" }}>
-    <BpkSwitch {...rest} label="Backpack" />
-    <BpkSwitch {...rest} label="Backpack" small />
+    <BpkSwitch {...rest} ariaLabel="Activate Backpack" />
+    <BpkSwitch {...rest} ariaLabel="Activate Backpack" small />
   </div>
 );
 

examples/bpk-component-switch/stories.js → examples/bpk-component-switch/stories.tsx

@@ -48,7 +48,9 @@ export const Small = SmallExample;
 export const ReducedSpace = ReducedSpaceExample;
 
 export const VisualTest = MixedExample;
-export const VisualTestWithZoom = VisualTest.bind({});
-VisualTestWithZoom.args = {
-  zoomEnabled: true
-};
+export const VisualTestWithZoom = {
+  render: VisualTest,
+  args: {
+    zoomEnabled: true
+  }
+}

packages/bpk-component-switch/src/BpkSwitch-test.tsx

@@ -0,0 +1,59 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render, screen } from '@testing-library/react';
+
+import BpkSwitch from './BpkSwitch';
+
+describe('BpkSwitch', () => {
+  it('should render correctly', () => {
+    const { container } = render(<BpkSwitch ariaLabel="Switch" />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-label', 'Switch');
+    expect(container.querySelectorAll(".bpk-switch__switch")[0].className).toBe("bpk-switch__switch");
+  });
+
+  it('should render small switch', () => {
+    const { container } = render(<BpkSwitch ariaLabel="Switch" small />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    expect(container.querySelectorAll(".bpk-switch__checkbox")[0].className).toBe("bpk-switch__checkbox");
+    expect(container.querySelectorAll(".bpk-switch__switch--small")[0].className).toBe("bpk-switch__switch bpk-switch__switch--small");
+  });
+
+  it('should render correctly when checked', () => {
+    const { container } = render(
+      <BpkSwitch checked onChange={() => {}} ariaLabel="Switch" />,
+    );
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    expect(container.querySelectorAll(".bpk-switch__checkbox")[0]).toHaveAttribute('checked');
+  });
+
+  it('should support custom class names', () => {
+    const { container } = render(
+      <BpkSwitch ariaLabel="Switch" className="custom-classname" />,
+    );
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    expect(container.querySelectorAll(".custom-classname")[0]).toBeInTheDocument();
+  });
+
+  it('should support arbitrary props', () => {
+    render(<BpkSwitch ariaLabel="Switch" data-testid="my-switch" />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    expect(screen.getAllByTestId('my-switch')).toHaveLength(1);
+  });
+});

packages/bpk-component-switch/src/BpkSwitch.module.scss

@@ -47,12 +47,6 @@ $border-width: tokens.$bpk-one-pixel-rem * 2;
     }
   }
 
-  &__label {
-    /* stylelint-disable backpack/use-typography-styles */
-    line-height: $height;
-    margin-inline-end: tokens.bpk-spacing-md();
-  }
-
   // The 'track'.
   &__switch {
     position: relative;

packages/bpk-component-switch/src/BpkSwitch.js → packages/bpk-component-switch/src/BpkSwitch.tsx

@@ -15,10 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import type { Node } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 
@@ -27,44 +23,34 @@ import STYLES from './BpkSwitch.module.scss';
 const getClassName = cssModules(STYLES);
 
 export type Props = {
-  label: Node,
-  className: ?string,
+  ariaLabel: string;
+  className?: string | null;
+  small?: boolean;
+  [rest: string]: any;
 };
 
-const BpkSwitch = (props: Props) => {
-  const { className, label, small, ...rest } = props;
-
+const BpkSwitch = ({
+  ariaLabel,
+  className = null,
+  small = false,
+  ...rest
+}: Props) => {
   const switchClassNames = getClassName(
     'bpk-switch__switch',
     small && 'bpk-switch__switch--small',
   );
 
   return (
     <label className={getClassName('bpk-switch', className)}>
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
       <input
         type="checkbox"
         className={getClassName('bpk-switch__checkbox')}
-        aria-label={label}
+        aria-label={ariaLabel}
         {...rest}
       />
-      <span aria-hidden className={getClassName('bpk-switch__label')}>
-        {label}
-      </span>
       <span aria-hidden className={switchClassNames} />
     </label>
   );
 };
 
-BpkSwitch.propTypes = {
-  label: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  small: PropTypes.bool,
-};
-
-BpkSwitch.defaultProps = {
-  className: null,
-  small: false,
-};
-
 export default BpkSwitch;