@integrigo/integrigo-ui 1.6.17-e → 1.6.17-f

package/lib/src/components/molecules/Checkbox/Checkbox.stories.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

package/lib/src/components/molecules/Radio/Radio.stories.d.ts

@@ -1,20 +1,20 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Size } from './Radio';
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

package/lib/src/components/molecules/Switch/Switch.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface SwitchOption {
+    id: string;
+    name: string;
+    disabled?: boolean;
+}
+export interface SwitchProps {
+    options: [SwitchOption, SwitchOption] | [SwitchOption, SwitchOption, SwitchOption];
+    active?: SwitchOption["id"];
+}
+export declare const Switch: React.FC<SwitchProps>;
+export {};

package/lib/src/components/molecules/Switch/Switch.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<import("react").FC<import("./Switch").SwitchProps>>;
+export default _default;
+export declare const TwoOptions: ComponentStory<import("react").FC<import("./Switch").SwitchProps>>;
+export declare const ThreeOptions: ComponentStory<import("react").FC<import("./Switch").SwitchProps>>;
+export declare const ThreeWithDisabled: ComponentStory<import("react").FC<import("./Switch").SwitchProps>>;

package/lib/src/components/molecules/Switch/index.d.ts

@@ -0,0 +1 @@
+export { Switch } from './Switch';

package/lib/src/components/molecules/index.d.ts

@@ -7,3 +7,4 @@ export { Dropdown } from './Dropdown';
 export { Radio } from './Radio';
 export { Profile } from './Profile';
 export { Tile } from './Tile';
+export { Switch } from './Switch';

package/lib/src/index.d.ts

@@ -1,4 +1,4 @@
 export { Alert, Avatar, Card, Divider, DateTime, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, Gradient, } from "./components/atoms";
-export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, Tile, } from "./components/molecules";
+export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, Tile, Switch, } from "./components/molecules";
 export { Menu, Setting, Modal, Select } from "./components/organisms";
 export { GlobalStyles as IntegrigoUI, Color } from "./styles";

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.6.17e",
+  "version": "1.6.17f",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/molecules/Switch/Switch.stories.tsx

@@ -0,0 +1,36 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Switch } from "./Switch";
+
+export default {
+  title: "Molecules/Switch",
+  component: Switch,
+} as ComponentMeta<typeof Switch>;
+
+const Template: ComponentStory<typeof Switch> = (args) => <Switch {...args} />;
+
+export const TwoOptions = Template.bind({});
+TwoOptions.args = {
+  options: [
+    { id: "1", name: "One" },
+    { id: "2", name: "Two" },
+  ],
+};
+
+export const ThreeOptions = Template.bind({});
+ThreeOptions.args = {
+  options: [
+    { id: "1", name: "One" },
+    { id: "2", name: "Two" },
+    { id: "3", name: "Three" },
+  ],
+};
+
+export const ThreeWithDisabled = Template.bind({});
+ThreeWithDisabled.args = {
+  options: [
+    { id: "1", name: "One" },
+    { id: "2", name: "Two", disabled: true },
+    { id: "3", name: "Three" },
+  ],
+};

package/src/components/molecules/Switch/Switch.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+interface SwitchOption {
+  id: string;
+  name: string;
+  disabled?: boolean;
+}
+
+export interface SwitchProps {
+  options:
+    | [SwitchOption, SwitchOption]
+    | [SwitchOption, SwitchOption, SwitchOption];
+  active?: SwitchOption["id"];
+}
+
+export const Switch: React.FC<SwitchProps> = ({
+  options,
+  active: defaultActive,
+}) => {
+  const [active, setActive] = useState(defaultActive);
+
+  const activeOption = options.find(({ id }) => id === active);
+  const offset = activeOption ? options.indexOf(activeOption) : 0;
+
+  const handleOptionClick = (id: string, disabled?: boolean) => {
+    if (disabled) {
+      return;
+    }
+
+    setActive(id);
+  };
+
+  return (
+    <Root count={options.length} offset={offset}>
+      {options.map((option) => (
+        <Option
+          onClick={() => handleOptionClick(option.id, option.disabled)}
+          key={option.id}
+          disabled={option.disabled}
+        >
+          {option.name}
+        </Option>
+      ))}
+    </Root>
+  );
+};
+
+const Root = styled.div<{ count: number; offset: number }>`
+  border-radius: var(--padding-l);
+  background-color: var(--shades-of-grey-20);
+  gap: 0;
+  position: relative;
+  display: flex;
+  padding: var(--padding-s) 0;
+
+  & > div {
+    transition: color var(--transition-speed);
+  }
+
+  & > div:nth-child(${(p) => p.offset + 1}) {
+    color: white;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    background-color: var(--color-orange);
+    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
+    width: ${(p) => `calc(100% / ${p.count})`};
+    height: 100%;
+    transform: ${(p) => `translateX(calc(${p.offset} * 100%))`};
+    left: 0;
+    top: 0;
+    border-radius: var(--padding-xl);
+    z-index: 1;
+    transition: transform var(--transition-speed);
+  }
+`;
+
+const Option = styled.div<{ disabled?: boolean }>`
+  flex: 1;
+  font-weight: var(--font-medium);
+  display: flex;
+  ${(p) => p.disabled && "color: var(--shades-of-grey-40)"};
+  cursor: ${(p) => (p.disabled ? "default" : "pointer")};
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: ${(p) => (p.disabled ? 0 : 2)};
+`;

package/src/components/molecules/Switch/index.ts

@@ -0,0 +1 @@
+export { Switch } from './Switch'

package/src/components/molecules/index.ts

@@ -7,3 +7,4 @@ export { Dropdown } from './Dropdown';
 export { Radio } from './Radio';
 export { Profile } from './Profile';
 export { Tile } from './Tile'
+export { Switch } from './Switch'

package/src/index.ts

@@ -24,6 +24,7 @@ export {
   Profile,
   Radio,
   Tile,
+  Switch,
 } from "./components/molecules";
 
 export { Menu, Setting, Modal, Select } from "./components/organisms";