@indico-data/design-system 1.0.54 → 1.0.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "1.0.54",
+  "version": "1.0.56",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Toggle } from './Toggle';
+
+const meta = {
+  component: Toggle,
+  title: 'Toggle',
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+
+function StoryRender(props: any) {
+  const [isPressed, setIsPressed] = useState(false);
+
+  return (
+    <Toggle
+      {...props}
+      value={isPressed}
+      onChange={() => {
+        console.log(isPressed);
+        setIsPressed(!isPressed);
+      }}
+      disabled={props.disabled}
+    />
+  );
+}
+
+export const Normal: Story = {
+  args: {},
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const Icons: Story = {
+  args: {
+    checkedIconName: 'fa-check',
+    notCheckedIconName: 'x-close',
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};

package/src/components/Toggle/Toggle.styles.ts

@@ -0,0 +1,86 @@
+import styled from 'styled-components';
+
+import { COLORS } from '@/tokens';
+
+export const StyledToggle = styled.label`
+  position: relative;
+  display: inline-block;
+  width: 28px;
+  height: 18px;
+  border: 2px solid ${COLORS.defaultFontColor};
+  border-radius: 34px;
+  margin-bottom: 0;
+  cursor: pointer;
+
+  & input {
+    display: none;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .slider {
+    position: absolute;
+    top: 0;
+    left: -1px;
+    right: 0;
+    bottom: 0;
+    transition: 0.4s;
+    border-radius: 34px;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: '';
+    height: 17px;
+    width: 17px;
+    left: -1px;
+    bottom: -1px;
+    background-color: ${COLORS.clay};
+    transition: 0.4s;
+    border: 2px solid ${COLORS.defaultFontColor};
+    border-radius: 50%;
+  }
+
+  input:checked + .slider {
+    background-color: ${COLORS.defaultFontColor};
+    width: 100%;
+  }
+
+  input:checked + .slider:before {
+    transform: translateX(12px);
+  }
+
+  p {
+    position: relative;
+    left: 35px;
+    bottom: 2px;
+  }
+
+  .checked-icon,
+  .not-checked-icon {
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .checked-icon {
+    fill: #fff;
+    display: none;
+    left: 3px;
+  }
+
+  .not-checked-icon {
+    right: 3px;
+  }
+
+  input:checked ~ .not-checked-icon {
+    display: none;
+  }
+  input:checked ~ .checked-icon {
+    display: block;
+  }
+`;

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,57 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+import classNames from 'classnames';
+
+import { Icon } from '@/components';
+import { PermafrostComponent, IconName } from '@/types';
+import { StyledToggle } from './Toggle.styles';
+
+type Props = {
+  disabled: boolean;
+  onChange: any;
+  value: boolean;
+  ['aria-label']?: string;
+  iconSize?: number | string;
+  checkedIconName?: IconName;
+  notCheckedIconName?: IconName;
+} & PermafrostComponent;
+
+export const Toggle = (props: Props) => {
+  const {
+    disabled,
+    onChange,
+    value,
+    className,
+    id,
+    checkedIconName,
+    notCheckedIconName,
+    iconSize,
+  } = props;
+
+  return (
+    <StyledToggle
+      className={classNames(className, {
+        disabled,
+      })}
+      data-cy={props['data-cy']}
+      id={id}
+    >
+      <input
+        aria-label={props['aria-label']}
+        type="checkbox"
+        disabled={disabled}
+        checked={value}
+        onChange={onChange}
+      />
+      <span className="slider round" />
+
+      {checkedIconName && (
+        <Icon name={checkedIconName} size={[iconSize || 5]} className="checked-icon" />
+      )}
+      {notCheckedIconName && (
+        <Icon name={notCheckedIconName} size={[iconSize || 5]} className="not-checked-icon" />
+      )}
+    </StyledToggle>
+  );
+};

package/src/components/Toggle/index.ts

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

package/src/components/index.ts

@@ -33,3 +33,4 @@ export { Wizard, WizardCard, WizardSection, StyledWizard } from './Wizard';
 export { WizardWithSidebar } from './WizardWithSidebar';
 export { Drawer } from './Navigation/Drawer';
 export { TextTruncate } from './text-truncate';
+export { Toggle } from './Toggle';

package/src/index.ts

@@ -57,5 +57,8 @@ export {
   WizardSection,
   StyledWizard,
   TextTruncate,
+  Toggle,
   WizardWithSidebar,
 } from './components';
+
+export { numberUtils, stringUtils, colorUtils } from './utils';