pixel-react 1.8.1 → 1.8.2

package/src/components/Toast/Toast.scss

@@ -1,121 +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;
-  }
-}
+@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

@@ -1,144 +1,144 @@
-import React, { 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: 'Operation completed successfully!',
-  closeButtonLabel: 'x',
-  displayDuration: 3000, // Set toast display duration in milliseconds
-};
-
-export const Controlled: Story = {
-  args: {
-    ...defaultArgs,
-  },
-  render: () => {
-    const [toasts, setToasts] = useState({
-      success: false,
-      info: false,
-      confirm: false,
-      warning: false,
-      alert: false,
-      error: false,
-    });
-
-    const handleToastToggle = (key: keyof typeof toasts) => {
-      setToasts((prev) => ({ ...prev, [key]: !prev[key] }));
-    };
-
-    return (
-      <div className="fireflink-stories-toaster-container">
-        <div className="fireflink-stories-toaster-container-row">
-          <div>
-            <Button
-              variant="primary"
-              label="SUCCESS"
-              onClick={() => handleToastToggle('success')}
-            />
-            <Toaster
-              {...defaultArgs}
-              isOpen={toasts.success}
-              variant="success"
-              toastTitle="Success!"
-              toastMessage="Variable name requested for review successfully."
-              onCancelClick={() => handleToastToggle('success')}
-            />
-          </div>
-          <div>
-            <Button
-              variant="secondary"
-              label="Information"
-              onClick={() => handleToastToggle('info')}
-            />
-            <Toaster
-              {...defaultArgs}
-              isOpen={toasts.info}
-              variant="info"
-              toastTitle="Info!"
-              toastMessage="Data updated successfully."
-              onCancelClick={() => handleToastToggle('info')}
-            />
-          </div>
-          <div>
-            <Button
-              variant="delete"
-              label="Confirmation"
-              onClick={() => handleToastToggle('confirm')}
-            />
-            <Toaster
-              {...defaultArgs}
-              isOpen={toasts.confirm}
-              variant="confirm"
-              toastTitle="Delete Confirmation"
-              toastMessage="Are you sure you want to delete this data?"
-              onCancelClick={() => handleToastToggle('confirm')}
-            />
-          </div>
-        </div>
-        <div className="fireflink-stories-toaster-container-row">
-          <div>
-            <Button
-              variant="primary"
-              label="WARNING"
-              onClick={() => handleToastToggle('warning')}
-            />
-            <Toaster
-              {...defaultArgs}
-              isOpen={toasts.warning}
-              variant="warning"
-              toastTitle="Warning!"
-              toastMessage="Action might have consequences."
-              onCancelClick={() => handleToastToggle('warning')}
-            />
-          </div>
-          <div>
-            <Button
-              variant="primary"
-              label="Alert"
-              onClick={() => handleToastToggle('alert')}
-            />
-            <Toaster
-              {...defaultArgs}
-              isOpen={toasts.alert}
-              variant="alert"
-              toastTitle="Alert!"
-              toastMessage="Immediate action required!"
-              onCancelClick={() => handleToastToggle('alert')}
-            />
-          </div>
-          <div>
-            <Button
-              variant="delete"
-              label="ERROR"
-              onClick={() => handleToastToggle('error')}
-            />
-            <Toaster
-              {...defaultArgs}
-              isOpen={toasts.error}
-              variant="danger"
-              toastTitle="Error!"
-              toastMessage="An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request."
-              onCancelClick={() => handleToastToggle('error')}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export default meta;
+import React, { 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: 'Operation completed successfully!',
+  closeButtonLabel: 'x',
+  displayDuration: 3000, // Set toast display duration in milliseconds
+};
+
+export const Controlled: Story = {
+  args: {
+    ...defaultArgs,
+  },
+  render: () => {
+    const [toasts, setToasts] = useState({
+      success: false,
+      info: false,
+      confirm: false,
+      warning: false,
+      alert: false,
+      error: false,
+    });
+
+    const handleToastToggle = (key: keyof typeof toasts) => {
+      setToasts((prev) => ({ ...prev, [key]: !prev[key] }));
+    };
+
+    return (
+      <div className="fireflink-stories-toaster-container">
+        <div className="fireflink-stories-toaster-container-row">
+          <div>
+            <Button
+              variant="primary"
+              label="SUCCESS"
+              onClick={() => handleToastToggle('success')}
+            />
+            <Toaster
+              {...defaultArgs}
+              isOpen={toasts.success}
+              variant="success"
+              toastTitle="Success!"
+              toastMessage="Variable name requested for review successfully."
+              onCancelClick={() => handleToastToggle('success')}
+            />
+          </div>
+          <div>
+            <Button
+              variant="secondary"
+              label="Information"
+              onClick={() => handleToastToggle('info')}
+            />
+            <Toaster
+              {...defaultArgs}
+              isOpen={toasts.info}
+              variant="info"
+              toastTitle="Info!"
+              toastMessage="Data updated successfully."
+              onCancelClick={() => handleToastToggle('info')}
+            />
+          </div>
+          <div>
+            <Button
+              variant="delete"
+              label="Confirmation"
+              onClick={() => handleToastToggle('confirm')}
+            />
+            <Toaster
+              {...defaultArgs}
+              isOpen={toasts.confirm}
+              variant="confirm"
+              toastTitle="Delete Confirmation"
+              toastMessage="Are you sure you want to delete this data?"
+              onCancelClick={() => handleToastToggle('confirm')}
+            />
+          </div>
+        </div>
+        <div className="fireflink-stories-toaster-container-row">
+          <div>
+            <Button
+              variant="primary"
+              label="WARNING"
+              onClick={() => handleToastToggle('warning')}
+            />
+            <Toaster
+              {...defaultArgs}
+              isOpen={toasts.warning}
+              variant="warning"
+              toastTitle="Warning!"
+              toastMessage="Action might have consequences."
+              onCancelClick={() => handleToastToggle('warning')}
+            />
+          </div>
+          <div>
+            <Button
+              variant="primary"
+              label="Alert"
+              onClick={() => handleToastToggle('alert')}
+            />
+            <Toaster
+              {...defaultArgs}
+              isOpen={toasts.alert}
+              variant="alert"
+              toastTitle="Alert!"
+              toastMessage="Immediate action required!"
+              onCancelClick={() => handleToastToggle('alert')}
+            />
+          </div>
+          <div>
+            <Button
+              variant="delete"
+              label="ERROR"
+              onClick={() => handleToastToggle('error')}
+            />
+            <Toaster
+              {...defaultArgs}
+              isOpen={toasts.error}
+              variant="danger"
+              toastTitle="Error!"
+              toastMessage="An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request.An error occurred while processing your request."
+              onCancelClick={() => handleToastToggle('error')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export default meta;