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

package/src/components/atoms/Icon/icons/HourGlass.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const HourGlass: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M18.9917 21.002H17.9917V19.335C17.9886 18.7627 17.8873 18.1953 17.6921 17.6573C17.6812 17.6279 17.6697 17.6007 17.6562 17.5727C17.4943 17.1311 17.2705 16.7148 16.9917 16.336L15.5918 14.4688C15.2034 13.9486 14.9929 13.3172 14.9917 12.668V11.6582C14.994 10.8631 15.3096 10.101 15.8701 9.53711L16.5273 8.87988C17.291 8.11213 17.7815 7.11497 17.9236 6.0415C17.9242 6.02759 17.9316 6.01599 17.9316 6.00195L17.9288 5.98822C17.9636 5.7753 17.9846 5.56036 17.9917 5.34473V3.002H18.9917C19.2569 3.002 19.5113 2.89664 19.6988 2.70911C19.8864 2.52157 19.9917 2.26722 19.9917 2.002C19.9917 1.73678 19.8864 1.48243 19.6988 1.29489C19.5113 1.10736 19.2569 1.002 18.9917 1.002H4.99171C4.72649 1.002 4.47214 1.10736 4.2846 1.29489C4.09707 1.48243 3.99171 1.73678 3.99171 2.002C3.99171 2.26722 4.09707 2.52157 4.2846 2.70911C4.47214 2.89664 4.72649 3.002 4.99171 3.002H5.99171V5.34473C5.99881 5.56036 6.01981 5.7753 6.05458 5.98822L6.05176 6.002C6.05176 6.016 6.0592 6.02764 6.05976 6.04155C6.20192 7.11502 6.69245 8.11217 7.45606 8.87993L8.11329 9.53716C8.67378 10.101 8.9894 10.8631 8.9917 11.6582V12.668C8.9904 13.3171 8.78015 13.9485 8.39209 14.4688L6.99121 16.3359C6.71245 16.7149 6.48878 17.1314 6.32684 17.5731C6.31354 17.6008 6.30212 17.6277 6.29132 17.6568C6.09618 18.1949 5.99483 18.7626 5.9917 19.335V21.002H4.9917C4.72648 21.002 4.47213 21.1074 4.28459 21.2949C4.09706 21.4824 3.9917 21.7368 3.9917 22.002C3.9917 22.2672 4.09706 22.5216 4.28459 22.7091C4.47213 22.8966 4.72648 23.002 4.9917 23.002H18.9917C19.2569 23.002 19.5113 22.8966 19.6988 22.7091C19.8863 22.5216 19.9917 22.2672 19.9917 22.002C19.9917 21.7368 19.8863 21.4824 19.6988 21.2949C19.5113 21.1074 19.2569 21.002 18.9917 21.002ZM7.9917 5.002V3.002H15.9917V5.002H7.9917ZM8.87012 7.46587C8.72921 7.32431 8.60294 7.1689 8.49323 7.002H15.4902C15.3805 7.1689 15.2542 7.32431 15.1133 7.46587L14.456 8.1231C13.676 8.89855 13.1758 9.91126 13.0342 11.002H10.9492C10.8075 9.91123 10.3074 8.89848 9.52734 8.123L8.87012 7.46587ZM9.99219 15.668C10.5708 14.8927 10.9139 13.9671 10.9805 13.002H13.0029C13.0694 13.9672 13.4127 14.8928 13.9917 15.668L14.9918 17.002H8.99133L9.99219 15.668ZM15.9917 21.002H7.9917V19.335C7.99448 19.2236 8.00357 19.1124 8.01892 19.002H15.9645C15.9798 19.1124 15.9889 19.2236 15.9917 19.335V21.002Z" />
+  </svg>
+);
+
+export default HourGlass;

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";