feat(Switch): added Switch component

src/components/Switch/Switch.module.css

@@ -0,0 +1,87 @@
+/**
+ * Copyright 2024 Mia srl
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.switchComponent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-xs, 4px);
+
+  .switchTextWrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-gap-md, 12px);
+    color: var(--palette-text-neutral-main, #636363);
+  }
+
+  .switchDescription {
+    padding-right: var(--spacing-padding-sm, 8px);
+    padding-left: calc(var(--spacing-padding-sm, 8px) + var(--spacing-padding-3xl, 48px));
+    color: var(--palette-text-neutral-main, #636363);
+
+    &.small {
+      padding-left: calc(var(--spacing-padding-sm, 8px) + var(--spacing-padding-2xl, 32px));
+    }
+  }
+
+  :global(.mia-platform-switch) {
+    background: var(--palette-action-secondary-bold, #cdcdcd);
+
+    &:hover {
+       background: var(--palette-action-secondary-bolder, #acacac);
+    }
+
+    /* Disabled or loading switch */
+
+    &:global(.mia-platform-switch-disabled), &:global(.mia-platform-switch-loading) {
+      opacity: 1;
+      background: var(--palette-action-disabled-main, #f2f2f2);
+
+      &:hover {
+        background: var(--palette-action-disabled-main, #f2f2f2);
+      }
+
+      :global(.mia-platform-switch-loading-icon) {
+        color: var(--palette-action-disabled-main, #f2f2f2);
+      }
+    }
+
+    /* Checked switch */
+
+    &:global(.mia-platform-switch-checked) {
+      background: var(--palette-action-primary-default, #1261e4);
+
+      &:hover {
+        background: var(--palette-action-primary-hover, #1890ff);
+      }
+
+      /* Disabled or loading checked switch */
+
+      &:global(.mia-platform-switch-disabled), &:global(.mia-platform-switch-loading){
+        background: var(--palette-background-primary-0, #aad1fb);
+
+        &:hover {
+          background: var(--palette-background-primary-0, #aad1fb);
+        }
+
+        :global(.mia-platform-switch-loading-icon) {
+          color: var(--palette-background-primary-0, #aad1fb);
+        }
+      }
+    }
+  }
+}

src/components/Switch/Switch.props.ts

@@ -0,0 +1,71 @@
+/**
+ * Copyright 2024 Mia srl
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SwitchChangeEventHandler, SwitchClickEventHandler } from 'antd/es/switch'
+import { ReactNode } from 'react'
+
+import { Size } from './Switch.types'
+
+export type SwitchProps = {
+
+    /**
+     * Additional description of the switch, to be rendered below the switch `text`.
+     * Is ignored if the `text` prop is not provided.
+     */
+    description?: ReactNode,
+
+    /**
+     * Allows you to control whether the switch is checked.
+     */
+    isChecked?: boolean,
+
+    /**
+     * Allows you to control whether the switch is disabled. Defaults to false.
+     */
+    isDisabled?: boolean,
+
+    /**
+     * Allows you to control whether the switch is checked on its first render. Defaults to false.
+     */
+    isInitiallyChecked?: boolean,
+
+    /**
+     * Allows you to control whether the switch is in loading state. Defaults to false.
+     */
+    isLoading?: boolean,
+
+    /**
+    * Function that is invoked when the switch state is changed.
+    */
+    onChange?: SwitchChangeEventHandler
+
+    /**
+    * Function that is invoked when the switch is clicked.
+    */
+    onClick?: SwitchClickEventHandler,
+
+    /**
+     * Determines the switch size. Can be set to `large` or `small`. Defaults to `large`.
+     */
+    size?: Size,
+
+    /**
+     * Text to be displayed next to the switch.
+     */
+    text?: ReactNode
+}

src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,125 @@
+/**
+ * Copyright 2024 Mia srl
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Size } from './Switch.types'
+import { Switch } from '.'
+import { defaults } from './Switch'
+
+const meta = {
+  component: Switch,
+  args: {
+    ...defaults,
+  },
+  argTypes: {
+    description: { type: 'string' },
+    text: { type: 'string' },
+    onClick: { control: false },
+    onChange: { control: false },
+  },
+} satisfies Meta<typeof Switch>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const BasicExample: Story = {}
+
+export const CheckedOnFirstRender: Story = {
+  args: {
+    isInitiallyChecked: true,
+  },
+}
+
+export const CheckedState: Story = {
+  args: {
+    isChecked: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+  },
+}
+
+export const CheckedDisabled: Story = {
+  args: {
+    isChecked: true,
+    isDisabled: true,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
+}
+
+export const CheckedLoading: Story = {
+  args: {
+    isChecked: true,
+    isLoading: true,
+  },
+}
+
+export const WithText: Story = {
+  args: {
+    text: 'Switch with text',
+  },
+}
+
+export const WithTextAndDescription: Story = {
+  args: {
+    text: 'Switch with text',
+    description: 'This is a description of the switch.',
+  },
+}
+
+export const SmallSize: Story = {
+  args: {
+    size: Size.Small,
+  },
+}
+
+export const SmallSizeWithText: Story = {
+  args: {
+    size: Size.Small,
+    text: 'Switch with text',
+  },
+}
+
+export const SmallSizeWithTextAndDescription: Story = {
+  args: {
+    size: Size.Small,
+    text: 'Switch with text',
+    description: 'This is a description of the switch.',
+  },
+}
+
+export const WithOnChange: Story = {
+  args: {
+    onChange: (checked) => alert(`Switch is now ${checked ? 'checked' : 'unchecked'}`),
+  },
+}
+
+export const WithOnClick: Story = {
+  args: {
+    onClick: () => alert('Switch has been clicked'),
+  },
+}