[UI components]: Switch (#2014)

* adding switch component

removing unwanted files and code

removing unwanted files and code

removing unwanted files and code

removing unwanted files and code

* changeset

.changeset/silver-jobs-sneeze.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions': patch
+'@shopify/ui-extensions-react': patch
+---
+
+Add Switch component

packages/ui-extensions-react/src/surfaces/checkout.ts

@@ -227,6 +227,9 @@ export type {SpinnerProps} from './checkout/components/Spinner/Spinner';
 export {Stepper} from './checkout/components/Stepper/Stepper';
 export type {StepperProps} from './checkout/components/Stepper/Stepper';
 
+export {Switch} from './checkout/components/Switch/Switch';
+export type {SwitchProps} from './checkout/components/Switch/Switch';
+
 export {Tag} from './checkout/components/Tag/Tag';
 export type {TagProps} from './checkout/components/Tag/Tag';
 

packages/ui-extensions-react/src/surfaces/checkout/components/Switch/Switch.ts

@@ -0,0 +1,7 @@
+import {Switch as BaseSwitch} from '@shopify/ui-extensions/checkout';
+import {createRemoteReactComponent} from '@remote-ui/react';
+import type {ReactPropsFromRemoteComponentType} from '@remote-ui/react';
+
+export type SwitchProps = ReactPropsFromRemoteComponentType<typeof BaseSwitch>;
+
+export const Switch = createRemoteReactComponent(BaseSwitch);

packages/ui-extensions-react/src/surfaces/checkout/components/Switch/examples/basic-switch.example.tsx

@@ -0,0 +1,15 @@
+import {
+  reactExtension,
+  Switch,
+} from '@shopify/ui-extensions-react/checkout';
+
+export default reactExtension(
+  'purchase.checkout.block.render',
+  () => <Extension />,
+);
+
+function Extension() {
+  return (
+    <Switch accessibilityLabel="my-switch" />
+  );
+}

packages/ui-extensions/docs/surfaces/checkout/reference/examples/ui-components/switch-custom-label.example.ts

@@ -0,0 +1,35 @@
+import {
+  extension,
+  InlineLayout,
+  Switch,
+  Text,
+} from '@shopify/ui-extensions/checkout';
+
+export default extension(
+  'purchase.checkout.block.render',
+  (root) => {
+    const switchLabel = 'Shipping insurance';
+
+    const inlineLayout = root.createComponent(
+      InlineLayout,
+      {
+        padding: 'base',
+        borderRadius: 'base',
+        border: 'base',
+        columns: ['fill', 'auto'],
+      },
+      [
+        root.createComponent(
+          Text,
+          null,
+          switchLabel,
+        ),
+        root.createComponent(Switch, {
+          accessibilityLabel: switchLabel,
+        }),
+      ],
+    );
+
+    root.appendChild(inlineLayout);
+  },
+);

packages/ui-extensions/docs/surfaces/checkout/reference/examples/ui-components/switch-custom-label.example.tsx

@@ -0,0 +1,26 @@
+import {
+  reactExtension,
+  InlineLayout,
+  Switch,
+  Text,
+} from '@shopify/ui-extensions-react/checkout';
+
+export default reactExtension(
+  'purchase.checkout.footer.render-after',
+  () => <Extension />,
+);
+
+function Extension() {
+  const switchLabel = 'Shipping insurance';
+  return (
+    <InlineLayout
+      padding="base"
+      borderRadius="base"
+      border="base"
+      columns={['fill', 'auto']}
+    >
+      <Text>{switchLabel}</Text>
+      <Switch accessibilityLabel={switchLabel} />
+    </InlineLayout>
+  );
+}

packages/ui-extensions/src/surfaces/checkout/components.ts

@@ -158,6 +158,9 @@ export type {SpinnerProps} from './components/Spinner/Spinner';
 export {Stepper} from './components/Stepper/Stepper';
 export type {StepperProps} from './components/Stepper/Stepper';
 
+export {Switch} from './components/Switch/Switch';
+export type {SwitchProps} from './components/Switch/Switch';
+
 export {Tag} from './components/Tag/Tag';
 export type {TagProps} from './components/Tag/Tag';
 

packages/ui-extensions/src/surfaces/checkout/components/Switch/Switch.doc.ts

@@ -0,0 +1,80 @@
+import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+import {getExample} from '../../helper.docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Switch',
+  description:
+    'Use a switch to represent an on or off state that takes effect immediately when tapped.',
+  requires: '',
+  isVisualComponent: true,
+  thumbnail: 'switch-thumbnail.png',
+  type: '',
+  definitions: [
+    {
+      title: 'SwitchProps',
+      description: '',
+      type: 'SwitchProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Forms',
+  defaultExample: {
+    image: 'switch-default.png',
+    codeblock: {
+      title: 'Basic Switch',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/checkout/components/Switch/examples/basic-switch.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-switch.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+  subSections: [
+    {
+      type: 'Generic',
+      anchorLink: 'best-practices',
+      title: 'Best Practices',
+      sectionContent: `
+- The outcome of a switch should take effect immediately when tapped.
+- Use for independent settings, like turning on a stand-alone feature.
+- Most of the time no call-to-action should be needed as the switch should take effect immediately, but if the experience needs one, use “done” instead of “submit” or “apply”.
+
+### Content
+The label should be a noun. Try explaining the setting out loud to test the name. The name should make sense when you insert it into these statements:
+
+- You can turn [setting_label] on or off in settings.
+- [setting_label] is on.
+- [setting_label] is off.
+
+### Switch vs checkbox
+- If the experience requires multiple connected inputs, like a survey, use a checkbox instead of a switch.
+- If the experience requires an error state, like agreeing to terms and conditions, use a checkbox instead of a switch. Both on and off options for a switch should always be valid.
+- If you’re unsure, default to a checkbox as it’s the more familiar web pattern.
+
+<img src="/assets/landing-pages/templated-apis/checkout-ui-extensions/ui-components/switch-checkbox-example.png" />
+      `,
+    },
+  ],
+  examples: {
+    description: '',
+    examples: [getExample('ui-components/switch-custom-label', ['jsx', 'js'])],
+  },
+  related: [
+    {
+      name: 'Checkbox',
+      subtitle: 'Component',
+      url: 'checkbox',
+      type: 'Component',
+    },
+  ],
+};
+
+export default data;

packages/ui-extensions/src/surfaces/checkout/components/Switch/Switch.ts

@@ -0,0 +1,50 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import type {IdProps, DisclosureActivatorProps} from '../shared';
+
+export interface SwitchProps extends IdProps, DisclosureActivatorProps {
+  /**
+   * An identifier for the field that is unique within the nearest
+   * containing `Form` component.
+   */
+  name?: string;
+
+  /**
+   * Whether the switch is active.
+   */
+  checked?: boolean;
+
+  /**
+   * Visual content to use as the switch label.
+   */
+  label?: string;
+
+  /**
+   * Whether the switch is selected. This prop is an alias for `checked`,
+   * and can be useful in form libraries that provide a normalized API for
+   * dealing with both `boolean` and `string` values. If both `value` and
+   * `checked` are set, `checked` takes precedence.
+   */
+  value?: boolean;
+
+  /**
+   * Whether the switch can be changed.
+   */
+  disabled?: boolean;
+
+  /**
+   * A label used for buyers using assistive technologies.
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * A callback that is run whenever the switch is changed. This callback
+   * is called with a boolean indicating whether the switch should now be
+   * active or inactive. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components),
+   * so you must store this value in state and reflect it back in the
+   * `checked` or `value` props.
+   */
+  onChange?(value: boolean): void;
+}
+
+export const Switch = createRemoteComponent<'Switch', SwitchProps>('Switch');

packages/ui-extensions/src/surfaces/checkout/components/Switch/examples/basic-switch.example.ts

@@ -0,0 +1,9 @@
+import {extension, Switch} from '@shopify/ui-extensions/checkout';
+
+export default extension('purchase.checkout.block.render', (root) => {
+  const baseSwitch = root.createComponent(Switch, {
+    accessibilityLabel: 'my-switch',
+  });
+
+  root.appendChild(baseSwitch);
+});

packages/ui-extensions/src/surfaces/checkout/helper.docs.ts

@@ -149,6 +149,15 @@ export function getExamples(
         ),
       },
     },
+    'ui-components/switch-custom-label': {
+      description:
+        'This example demonstrates pairing the switch with a custom label and layout while keeping it accessible to screen readers.',
+      image: 'switch-custom-label.png',
+      codeblock: {
+        title: 'Custom label',
+        tabs: getExtensionCodeTabs('ui-components/switch-custom-label'),
+      },
+    },
   };
 }