feat(common):[components] add WToggleSwitchRounded (#299)

Co-authored-by: Tushar98644 <[email protected]>
Co-authored-by: Anindya Kundu <[email protected]>

src/common/components/WToggleSwitchRounded/index.scss

@@ -0,0 +1,43 @@
+@import '@/common/scss/colors.scss';
+@import '@/common/scss/sizes.scss';
+
+.w-toggle-r {
+  width: 40px;
+  height: 24px;
+  padding: 2px;
+  border-radius: 20px;
+  background-color: $c-bg-white;
+  cursor: pointer;
+
+  .w-toggle-r-track {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 18px;
+    box-shadow: inset 0px 0px 4px $c-shadow;
+    background-color: $c-bg-grey;
+    transition: background-color 0.5s ease;
+
+    .w-toggle-r-handle {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 16px;
+      height: 16px;
+      border-radius: 8px;
+      box-shadow: 0px 0px 4px $c-shadow;
+      background-color: $c-bg-white;
+      transition: left 0.25s ease;
+    }
+  }
+
+  &.w-toggle-r-active {
+    .w-toggle-r-track {
+      background-color: $mb-accent;
+
+      .w-toggle-r-handle {
+        left: calc(100% - 18px);
+      }
+    }
+  }
+}

src/common/components/WToggleSwitchRounded/index.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { linkTo } from '@storybook/addon-links';
+import { WToggleSwitchRounded } from '..';
+
+// -------------------------------------------------------------------------------------------------
+
+export default {
+  title: 'Common/WToggleSwitchRounded',
+  component: WToggleSwitchRounded,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof WToggleSwitchRounded>;
+
+type Story = StoryObj<typeof WToggleSwitchRounded>;
+
+// -------------------------------------------------------------------------------------------------
+
+export const Active: Story = {
+  args: {
+    active: true,
+    handlerClick: linkTo('Common/WToggleSwitchRounded', 'Inactive'),
+  },
+};
+
+export const Inactive: Story = {
+  args: {
+    active: false,
+    handlerClick: linkTo('Common/WToggleSwitchRounded', 'Active'),
+  },
+};

src/common/components/WToggleSwitchRounded/index.tsx

@@ -0,0 +1,28 @@
+// -- stylesheet -----------------------------------------------------------------------------------
+
+import './index.scss';
+
+// -- component definition -------------------------------------------------------------------------
+
+/**
+ * React component definition for Toggle Switch widget.
+ */
+export default function Toggle(props: {
+  /** Whether state is `on` (active) or `off`. */
+  active: boolean;
+  /** Callback function for click event. */
+  handlerClick: CallableFunction;
+}): JSX.Element {
+  // ---------------------------------------------------------------------------
+
+  return (
+    <div
+      className={`w-toggle-r ${props.active ? 'w-toggle-r-active' : ''}`}
+      onClick={() => props.handlerClick()}
+    >
+      <div className="w-toggle-r-track">
+        <div className="w-toggle-r-handle"></div>
+      </div>
+    </div>
+  );
+}

src/common/components/index.ts

@@ -1,4 +1,5 @@
 export { default as WToggleSwitch } from './WToggleSwitch';
+export { default as WToggleSwitchRounded } from './WToggleSwitchRounded';
 export { default as WTextButton } from './WTextButton';
 
 export { default as SImage } from './SImage';