pixel-react 1.0.0

package/src/components/Toast/Toast.scss

@@ -0,0 +1,121 @@
+@use '../../assets/styles/fonts';
+
+.ff-toaster-overlay {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  pointer-events: none;
+  justify-content: flex-end;
+  align-items: flex-end;
+
+  .ff-toaster {
+    background-color: var(--drawer-footer-bg);
+    display: flex;
+    border-radius: 10px;
+    margin: 16px;
+    pointer-events: auto;
+    min-width: 320px;
+    max-width: 600px;
+    gap: 8px;
+    box-shadow: 0px 1px 4px 0px var(--toaster-boxshadow);
+    animation: slideInToasterBottomRight 0.5s forwards;
+
+    .ff-toaster-container {
+      padding: 8px;
+      display: flex;
+      border-radius: 10px;
+      gap: 8px;
+      width: 100%;
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: 8px;
+        padding: 1px;
+        -webkit-mask: linear-gradient(var(--drawer-footer-bg) 0 0) content-box,
+          linear-gradient(var(--drawer-footer-bg) 0 0);
+        -webkit-mask-composite: xor;
+        mask-composite: exclude;
+        z-index: -1;
+      }
+
+      .ff-toaster-content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        gap: 4px;
+        &__title {
+          max-width: 500px;
+          word-wrap: break-word;
+        }
+        &__message {
+          max-width: 500px;
+          word-wrap: break-word;
+        }
+        &__prompt {
+          margin-top: 4px;
+          display: flex;
+          gap: 10px;
+        }
+      }
+    }
+    &--success::before {
+      background: var(--toaster-success-border);
+    }
+    &--warning::before {
+      background: var(--toaster-warning-border);
+    }
+
+    &--info::before {
+      background: var(--toaster-info-border);
+    }
+
+    &--danger::before,
+    &--confirm::before {
+      background: var(--toaster-danger_confirm-border);
+    }
+
+    .ff-close-icon-wrapper {
+      box-sizing: border-box;
+      cursor: pointer;
+      height: fit-content;
+      width: fit-content;
+      border-radius: 8px;
+      padding: 8px;
+      background: var(--toast-close-icon-wrapper-bg);
+      margin-left: auto;
+    }
+  }
+
+  &.exiting {
+    animation: slideOutToasterBottomRight 0.5s forwards;
+  }
+}
+@keyframes slideOutToasterBottomRight {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes slideInToasterBottomRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+// style related to buttons in storybook UI only
+.fireflink-stories-toaster-container {
+  .fireflink-stories-toaster-container-row {
+    display: flex;
+    gap: 5px;
+    margin: 15px;
+  }
+}

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,180 @@
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import Toaster from './Toast';
+import Button from '../Button';
+
+const meta: Meta<typeof Toaster> = {
+  title: 'Components/Toast',
+  component: Toaster,
+  parameters: {
+    layout: 'centered',
+  },
+
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Toaster>;
+const defaultArgs = {
+  isOpen: false,
+  toastTitle: 'Success',
+  toastMessage: 'Variable name Requested for Review successfully',
+  closeButtonLabel: 'x',
+  displayDuration: 3000, // Set toast displayDuration in milliseconds
+};
+
+export const Controlled: Story = {
+  args: {
+    ...defaultArgs,
+  },
+  render: () => {
+    const [open1, setOpen1] = useState(false);
+    const handleButtonClick1 = () => {
+      setOpen1(true);
+    };
+    const handleCancelClick1 = () => {
+      setOpen1(false);
+    };
+
+    const [open2, setOpen2] = useState(false);
+    const handleButtonClick2 = () => {
+      setOpen2(true);
+    };
+    const handleCancelClick2 = () => {
+      setOpen2(false);
+    };
+    const [open3, setOpen3] = useState(false);
+    const handleButtonClick3 = () => {
+      setOpen3(true);
+    };
+    const handleCancelClick3 = () => {
+      setOpen3(false);
+    };
+    const [open4, setOpen4] = useState(false);
+    const handleButtonClick4 = () => {
+      setOpen4(true);
+    };
+    const handleCancelClick4 = () => {
+      setOpen4(false);
+    };
+    const [open5, setOpen5] = useState(false);
+    const handleButtonClick5 = () => {
+      setOpen5(true);
+    };
+    const handleCancelClick5 = () => {
+      setOpen5(false);
+    };
+    const [open6, setOpen6] = useState(false);
+    const handleButtonClick6 = () => {
+      setOpen6(true);
+    };
+    const handleCancelClick6 = () => {
+      setOpen6(false);
+    };
+    return (
+      <div className="fireflink-stories-toaster-container">
+        <div className="fireflink-stories-toaster-container-row">
+          <div>
+            <Button
+              variant="primary"
+              label="SUCCESS"
+              onClick={handleButtonClick1}
+              disabled={false}
+            />
+            <Toaster
+              {...defaultArgs}
+              isOpen={open1}
+              variant="success"
+              toastTitle="Success!"
+              onCancelClick={handleCancelClick1}
+              toastMessage="Variable name Requested for Review successfully"
+            />
+          </div>
+          <div>
+            <Button
+              variant="secondary"
+              label="Information"
+              onClick={handleButtonClick2}
+              disabled={false}
+            />
+            <Toaster
+              {...defaultArgs}
+              isOpen={open2}
+              variant="info"
+              toastTitle="Info!!!"
+              onCancelClick={handleCancelClick2}
+              toastMessage="Data updated succesfully"
+            />
+          </div>
+          <div>
+            <Button
+              variant="delete"
+              label="Confirmation"
+              onClick={handleButtonClick3}
+              disabled={false}
+            />
+            <Toaster
+              {...defaultArgs}
+              isOpen={open3}
+              variant="confirm"
+              toastTitle="Delete !!"
+              onCancelClick={handleCancelClick3}
+              toastMessage="Are you sure to delete data?"
+            />
+          </div>
+        </div>
+        <div className="fireflink-stories-toaster-container-row">
+          <div>
+            <Button
+              variant="primary"
+              label="WARNING "
+              onClick={handleButtonClick4}
+              disabled={false}
+            />
+            <Toaster
+              {...defaultArgs}
+              isOpen={open4}
+              variant="warning"
+              toastTitle="Warning!"
+              onCancelClick={handleCancelClick4}
+              toastMessage="Variable name Requested for Review successfully"
+            />
+          </div>
+          <div>
+            <Button
+              variant="primary"
+              label="click "
+              onClick={handleButtonClick5}
+              disabled={false}
+            />
+            <Toaster
+              {...defaultArgs}
+              isOpen={open5}
+              variant="success"
+              toastTitle="Success!"
+              onCancelClick={handleCancelClick5}
+              toastMessage="Variable name Requested for Review successfully"
+            />
+          </div>
+          <div>
+            <Button
+              variant="delete"
+              label="ERROR "
+              onClick={handleButtonClick6}
+              disabled={false}
+            />
+            <Toaster
+              {...defaultArgs}
+              isOpen={open6}
+              variant="danger"
+              toastTitle="Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!Error!"
+              onCancelClick={handleCancelClick6}
+              toastMessage="SomethingVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariableVariable"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export default meta;

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import Icon from '../Icon';
+import './Toast.scss';
+import Button from '../Button';
+import classNames from 'classnames';
+import { ToasterProps } from './types';
+import Typography from '../Typography';
+import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+const Toaster: React.FC<ToasterProps> = ({
+  isOpen = false,
+  variant = 'success',
+  toastTitle = 'Success',
+  onCancelClick = () => {},
+  onConfirmation = () => {},
+  toastMessage = 'Hello this is child element',
+  displayDuration = 5000,
+  confirmationText = 'Confirm',
+  zIndex = 99,
+}) => {
+  const [isExiting, setIsExiting] = useState(false);
+
+  const iconMap = {
+    success: 'success',
+    info: 'info',
+    warning: 'warning',
+    danger: 'error',
+    confirm: 'delete',
+  };
+
+  const getToasterIcon = (
+    variant: 'success' | 'warning' | 'danger' | 'info' | 'confirm'
+  ) => {
+    const name = iconMap[variant];
+    return <Icon name={name} height={40} width={40} />;
+  };
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
+  useEffect(() => {
+    if (isOpen && variant !== 'confirm') {
+      const timer = setTimeout(() => {
+        setIsExiting(true);
+        setTimeout(onCancelClick, 500); // Duration of exit animation
+      }, displayDuration);
+
+      return () => {
+        clearTimeout(timer);
+        setIsExiting(false);
+      };
+    }
+    return () => {};
+  }, [isOpen]);
+
+  const handleClose = () => {
+    setIsExiting(true);
+    setTimeout(() => {
+      onCancelClick();
+      setIsExiting(false);
+    }, 500);
+  };
+
+  if (!isOpen && !isExiting) return null;
+
+  return createPortal(
+    <div
+      role="alert"
+      aria-live="assertive"
+      className={classNames('ff-toaster-overlay', {
+        exiting: isExiting,
+        [currentTheme || '']: true,
+      })}
+      style={{ zIndex }}
+    >
+      <div className={classNames('ff-toaster', { exiting: isExiting })}>
+        <div className={`ff-toaster-container ff-toaster--${variant}`}>
+          {getToasterIcon(variant)}
+          <div className="ff-toaster-content">
+            <Typography
+              color={'var(--tooltip-bg-color)'}
+              fontWeight="semi-bold"
+              lineHeight="18px"
+              className="ff-toaster-content__title"
+            >
+              {toastTitle}
+            </Typography>
+            <Typography
+              color={'var(--input-default-label-color)'}
+              fontWeight="semi-bold"
+              fontSize={'10px'}
+              className="ff-toaster-content__message"
+            >
+              {toastMessage}
+            </Typography>
+            {variant === 'confirm' && (
+              <div className="ff-toaster-content__prompt">
+                <Button onClick={handleClose} variant="secondary">
+                  Cancel
+                </Button>
+                <Button onClick={onConfirmation} variant="delete">
+                  {confirmationText}
+                </Button>
+              </div>
+            )}
+          </div>
+
+          <div className="ff-close-icon-wrapper" onClick={handleClose}>
+            <Icon name="close" height={8} width={8} />
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default Toaster;

package/src/components/Toast/index.ts

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

package/src/components/Toast/types.ts

@@ -0,0 +1,27 @@
+export interface ToasterProps {
+  /**Boolean value to handle state of toaster. */
+  isOpen: boolean;
+
+  /**Variant for different type of toast message. */
+  variant: 'success' | 'warning' | 'danger' | 'info' | 'confirm';
+
+  /**Title of the toaster  */
+  toastTitle: string;
+
+  /**Message for the toaster. */
+  toastMessage?: string;
+
+  /**Function to call upon clicking the close icon or cancel button. */
+  onCancelClick?: () => void;
+
+  /**Function to call when confirmation the prompt. */
+  onConfirmation?: () => void;
+
+  /**Duration in ms for which toaster will stay on the screen */
+  displayDuration?: number;
+
+  /**Confirmation text for variant confirm. */
+  confirmationText?: string;
+  /**z-index value */
+  zIndex?: number;
+}

package/src/components/Toggle/Toggle.scss

@@ -0,0 +1,132 @@
+$switch-sizes: (
+  small: (
+    button-size: 16px,
+    container-width: 24px,
+    container-height: 10px,
+    translate-x: 10px,
+  ),
+  medium: (
+    button-size: 20px,
+    container-width: 32px,
+    container-height: 14px,
+    translate-x: 14px,
+  ),
+  large: (
+    button-size: 24px,
+    container-width: 40px,
+    container-height: 16px,
+    translate-x: 16px,
+  ),
+);
+
+@mixin switch-size($size) {
+  $button-size: map-get(map-get($switch-sizes, $size), button-size);
+  $container-width: map-get(map-get($switch-sizes, $size), container-width);
+  $container-height: map-get(map-get($switch-sizes, $size), container-height);
+  $translate-x: map-get(map-get($switch-sizes, $size), translate-x);
+
+  width: $container-width;
+  height: $container-height;
+
+  .ff--switch-button {
+    width: $button-size;
+    height: $button-size;
+    transform: translateX(0);
+    &.checked {
+      transform: translateX($translate-x);
+    }
+  }
+}
+
+.ff--switch-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .ff--switch-checkbox {
+    height: 0;
+    width: 0;
+    display: none;
+
+    &:checked {
+      + .ff--switch-label {
+        .ff--switch-button {
+          right: -1px;
+          border: 1px solid var(--brand-color);
+          background: var(--toggle-button-bg-color);
+          transition: all 0.3s;
+          box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
+          .ff-checked-icon--primary {
+            svg {
+              path {
+                fill: var(--brand-color);
+              }
+            }
+          }
+        }
+
+        &--primary {
+          background: var(--brand-color);
+          transition: all 0.3s;
+        }
+
+        &:disabled {
+          cursor: default;
+          color: var(--disable-color);
+          background: var(--disable-color);
+        }
+      }
+    }
+    &:disabled {
+      cursor: no-drop;
+    }
+  }
+
+  .ff--switch-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    border-radius: 8px;
+    position: relative;
+    background: var(--toggle-strip-color);
+    transition: all 0.3s;
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: no-drop;
+    }
+
+    .ff--switch-button {
+      position: absolute;
+      left: 0;
+      border: 1px solid var(--toggle-strip-color);
+      display: flex;
+      background: var(--toggle-button-bg-color);
+      border-radius: 50%;
+      box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
+      transition: all 0.3s;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+
+      .ff-unchecked-icon--primary {
+        svg {
+          path {
+            fill: var(--toggle-disable-icon-color);
+          }
+        }
+      }
+    }
+  }
+
+  .default--small {
+    @include switch-size(small);
+  }
+  .default--medium {
+    @include switch-size(medium);
+  }
+  .default--large {
+    @include switch-size(large);
+  }
+}

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

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Toggle from './Toggle';
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Components/Toggle',
+  component: Toggle,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    onChange: { action: 'changed' },
+    disabled: { control: 'boolean' },
+    checked: { control: 'boolean' },
+    id: { control: 'text' },
+    size: {
+      control: {
+        type: 'select',
+        options: ['small', 'medium', 'large'],
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toggle>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    checked: false,
+    id: 'toggle1',
+    size: 'large',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+    id: 'toggle2',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    ...Default.args,
+    checked: true,
+    id: 'toggle3',
+  },
+};
+
+export const SmallSize: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = (
+      e: React.MouseEvent<HTMLInputElement, MouseEvent>
+    ) => {
+      setChecked((e.target as HTMLInputElement).checked);
+    };
+    return (
+      <Toggle
+        id="toggle4"
+        size="small"
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+};
+
+export const MediumSize: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = (
+      e: React.MouseEvent<HTMLInputElement, MouseEvent>
+    ) => {
+      setChecked((e.target as HTMLInputElement).checked);
+    };
+    return (
+      <Toggle
+        id="toggle5"
+        size="medium"
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+};
+
+export const DynamicIconAndSize: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = (
+      e: React.MouseEvent<HTMLInputElement, MouseEvent>
+    ) => {
+      setChecked((e.target as HTMLInputElement).checked);
+    };
+    return (
+      <Toggle
+        id="toggle7"
+        size="large"
+        checked={checked}
+        onChange={handleChange}
+        icon={{
+          checked: { name: 'moon_stars_icon', width: 14, height: 14 },
+          unchecked: { name: 'sun_icon', width: 14, height: 14 },
+        }}
+      />
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = (
+      e: React.MouseEvent<HTMLInputElement, MouseEvent>
+    ) => {
+      setChecked((e.target as HTMLInputElement).checked);
+    };
+    return (
+      <Toggle
+        id="toggle8"
+        size="large"
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+};