pixel-react 1.7.1 → 1.7.3

package/src/components/Drawer/Drawer.scss

@@ -1,139 +1,139 @@
-@use '../../assets/styles/fonts';
-
-.ff-drawer-container {
-  .ff-overlay {
-    position: fixed;
-    inset: 0;
-    background-color: var(--drawer-title-color);
-    opacity: 0.5;
-    z-index: 999;
-  }
-
-  .child-drawer-overlay {
-    z-index: 999;
-  }
-
-  .ff-drawer {
-    margin-bottom: 4px;
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    top: 87px;
-    background-color: var(--primary-button-text-color);
-    z-index: 999;
-    transform: translateX(100%);
-    opacity: 0;
-
-    &--open {
-      transform: translateX(0);
-      opacity: 1;
-    }
-    &--small {
-      width: 444px;
-    }
-    &--medium {
-      width: 666px;
-    }
-    &--large {
-      width: 888px;
-    }
-    &--x-large {
-      width: calc(100vw - 10px);
-    }
-    &--open,
-    &--medium,
-    &--large,
-    &--x-large {
-      transition: all 0.4s ease-in-out;
-      border-radius: 5px;
-      border: 1px solid var(--border-color);
-    }
-
-    .ff-drawer-header {
-      padding: 4px 8px 4px 8px;
-      display: flex;
-      gap: 10px;
-      border-bottom: 1px solid var(--border-color);
-
-      .ff-drawer-title {
-        @extend .fontSm;
-        font-weight: 600;
-        color: var(--drawer-title-color);
-        display: flex;
-        align-items: center;
-        gap: 12px;
-      }
-      .ff-close-icon {
-        height: 16px;
-        width: 16px;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .ff-drawer-action-section {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-        height: 24px;
-
-        .ff-action-button {
-          display: flex;
-          align-items: center;
-          gap: 5px;
-
-          .ff-expand-collapse-button {
-            cursor: pointer;
-            background-color: var(--button-bg-color);
-            outline: none;
-            border: none;
-            margin: 0;
-            border: 1px solid transparent;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 8px;
-          }
-          .ff-custom-header {
-            background-color: var(--drawer-footer-bg);
-            padding: 4px 8px;
-            width: 100%;
-          }
-        }
-      }
-    }
-
-    .ff-drawer-body {
-      background-color: var(--drawer-footer-bg);
-      overflow-y: auto;
-    }
-
-    .ff-drawer-footer {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      padding: 4px 8px 4px 8px;
-      display: flex;
-      justify-content: space-between;
-      border-top: 1px solid var(--drawer-footer-border);
-      z-index: 1000;
-      background-color: var(--base-bg-color);
-      transform: translateY(3px);
-      border-radius: 0 0 4px 4px;
-
-      .button-container {
-        display: flex;
-        justify-content: flex-end;
-        gap: 8px;
-      }
-      .ff-custom-footer {
-        background-color: var(--drawer-footer-bg);
-        padding: 4px 8px;
-      }
-    }
-  }
-}
+@use '../../assets/styles/fonts';
+
+.ff-drawer-container {
+  .ff-overlay {
+    position: fixed;
+    inset: 0;
+    background-color: var(--drawer-title-color);
+    opacity: 0.5;
+    z-index: 999;
+  }
+
+  .child-drawer-overlay {
+    z-index: 999;
+  }
+
+  .ff-drawer {
+    margin-bottom: 4px;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    top: 87px;
+    background-color: var(--primary-button-text-color);
+    z-index: 999;
+    transform: translateX(100%);
+    opacity: 0;
+
+    &--open {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    &--small {
+      width: 444px;
+    }
+    &--medium {
+      width: 666px;
+    }
+    &--large {
+      width: 888px;
+    }
+    &--x-large {
+      width: calc(100vw - 10px);
+    }
+    &--open,
+    &--medium,
+    &--large,
+    &--x-large {
+      transition: all 0.4s ease-in-out;
+      border-radius: 5px;
+      border: 1px solid var(--border-color);
+    }
+
+    .ff-drawer-header {
+      padding: 4px 8px 4px 8px;
+      display: flex;
+      gap: 10px;
+      border-bottom: 1px solid var(--border-color);
+
+      .ff-drawer-title {
+        @extend .fontSm;
+        font-weight: 600;
+        color: var(--drawer-title-color);
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .ff-close-icon {
+        height: 16px;
+        width: 16px;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .ff-drawer-action-section {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        height: 24px;
+
+        .ff-action-button {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+
+          .ff-expand-collapse-button {
+            cursor: pointer;
+            background-color: var(--button-bg-color);
+            outline: none;
+            border: none;
+            margin: 0;
+            border: 1px solid transparent;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 8px;
+          }
+          .ff-custom-header {
+            background-color: var(--drawer-footer-bg);
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    .ff-drawer-body {
+      background-color: var(--drawer-footer-bg);
+      overflow-y: auto;
+    }
+
+    .ff-drawer-footer {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 4px 8px 4px 8px;
+      display: flex;
+      justify-content: space-between;
+      border-top: 1px solid var(--drawer-footer-border);
+      z-index: 1000;
+      background-color: var(--base-bg-color);
+      transform: translateY(3px);
+      border-radius: 0 0 4px 4px;
+
+      .button-container {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+      }
+      .ff-custom-footer {
+        background-color: var(--drawer-footer-bg);
+        width: 100%;
+        border-radius: 0 0 8px 8px;
+      }
+    }
+  }
+}

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,155 +1,156 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Drawer from './Drawer';
-import { useState } from 'react';
-import Button from '../Button';
-import Icon from '../Icon';
-
-const meta: Meta<typeof Drawer> = {
-  title: 'Components/Drawer',
-  component: Drawer,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Drawer>;
-const defaultArgs = {
-  isOpen: true,
-  title: 'Drawer Title',
-  showEditButton: false,
-  _isExpanded: false,
-  showHeader: true,
-  onClose: () => {},
-  primaryButtonProps: {
-    label: 'Create',
-    variant: 'primary',
-    disabled: false,
-    onClick: () => {},
-  },
-  secondaryButtonProps: {
-    label: 'Cancel',
-    variant: 'secondary',
-    disabled: false,
-    onClick: () => {},
-  },
-  leftPrimaryButtonProps: {
-    label: 'Next',
-    variant: 'primary',
-    disabled: false,
-    onClick: () => {},
-  },
-  leftSecondaryButtonProps: {
-    label: 'Previuos',
-    variant: 'secondary',
-    disabled: false,
-    onClick: () => {},
-  },
-  onEdit: () => {},
-  overlay: false,
-  isFooterRequired: true,
-  footerContent: null,
-  backButtonIcon: <Icon name="error" height={16} width={16} />,
-  onCloseIconClick: () => alert('Close icon clicked!'),
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-    size: 'medium',
-    showHeader: true,
-  },
-};
-export const WithoutHeader: Story = {
-  args: {
-    ...defaultArgs,
-    showHeader: false,
-    size: 'medium',
-  },
-  parameters: {
-    docs: { disable: true },
-  },
-};
-export const WithCustomHeader: Story = {
-  args: {
-    ...defaultArgs,
-    customHeader: (
-      <div>
-        <h3>My Custom Header</h3>
-      </div>
-    ),
-  },
-  parameters: {
-    docs: { disable: true },
-  },
-};
-export const WithCustomFooter: Story = {
-  args: {
-    ...defaultArgs,
-    customFooter: (
-      <div>
-        <h3>My Custom Footer</h3>
-      </div>
-    ),
-  },
-  parameters: {
-    docs: { disable: true },
-  },
-};
-export const WithTertiaryButtons: Story = {
-  args: {
-    ...defaultArgs,
-    leftTertiaryButtonProps: {
-      label: 'Help',
-      onClick: () => {},
-    },
-    rightTertiaryButtonProps: {
-      label: 'More Info',
-      onClick: () => {},
-    },
-  },
-  parameters: {
-    docs: { disable: true },
-  },
-};
-
-export const WithCustomZIndex: Story = {
-  args: {
-    ...defaultArgs,
-    zIndex: 1050,
-  },
-  parameters: {
-    docs: { disable: true },
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [showModal, setShowModal] = useState(false);
-
-    return (
-      <>
-        <div>
-          <Button
-            onClick={() => setShowModal(true)}
-            label="show modal"
-            variant="primary"
-            disabled={false}
-          />
-        </div>
-        <Drawer
-          {...defaultArgs}
-          isOpen={showModal}
-          onClose={() => setShowModal(false)}
-          isFooterRequired={true}
-          _isExpanded={false}
-          size="medium"
-        >
-          <span>Drawer body</span>
-        </Drawer>
-      </>
-    );
-  },
-};
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Drawer from './Drawer';
+import { useState } from 'react';
+import Button from '../Button';
+import Icon from '../Icon';
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Components/Drawer',
+  component: Drawer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+const defaultArgs = {
+  isOpen: true,
+  title: 'Drawer Title',
+  showEditButton: false,
+  _isExpanded: false,
+  showHeader: true,
+  onClose: () => {},
+  primaryButtonProps: {
+    label: 'Create',
+    variant: 'primary',
+    disabled: false,
+    onClick: () => {},
+  },
+  secondaryButtonProps: {
+    label: 'Cancel',
+    variant: 'secondary',
+    disabled: false,
+    onClick: () => {},
+  },
+  leftPrimaryButtonProps: {
+    label: 'Next',
+    variant: 'primary',
+    disabled: false,
+    onClick: () => {},
+  },
+  leftSecondaryButtonProps: {
+    label: 'Previuos',
+    variant: 'secondary',
+    disabled: false,
+    onClick: () => {},
+  },
+  onEdit: () => {},
+  overlay: false,
+  isFooterRequired: true,
+  footerContent: null,
+  backButtonIcon: <Icon name="error" height={16} width={16} />,
+  onCloseIconClick: () => alert('Close icon clicked!'),
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    size: 'medium',
+    showHeader: true,
+  },
+};
+export const WithoutHeader: Story = {
+  args: {
+    ...defaultArgs,
+    showHeader: false,
+    size: 'medium',
+  },
+  parameters: {
+    docs: { disable: true },
+  },
+};
+export const WithCustomHeader: Story = {
+  args: {
+    ...defaultArgs,
+    customHeader: (
+      <div>
+        <h3>My Custom Header</h3>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: { disable: true },
+  },
+};
+export const WithCustomFooter: Story = {
+  args: {
+    ...defaultArgs,
+    customFooter: (
+      <div>
+        <h3>My Custom Footer</h3>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: { disable: true },
+  },
+};
+export const WithTertiaryButtons: Story = {
+  args: {
+    ...defaultArgs,
+    leftTertiaryButtonProps: {
+      label: 'Help',
+      onClick: () => {},
+    },
+    rightTertiaryButtonProps: {
+      label: 'More Info',
+      onClick: () => {},
+    },
+  },
+  parameters: {
+    docs: { disable: true },
+  },
+};
+
+export const WithCustomZIndex: Story = {
+  args: {
+    ...defaultArgs,
+    zIndex: 1050,
+  },
+  parameters: {
+    docs: { disable: true },
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [showModal, setShowModal] = useState(false);
+
+    return (
+      <>
+        <div>
+          <Button
+            onClick={() => setShowModal(true)}
+            label="show modal"
+            variant="primary"
+            disabled={false}
+          />
+        </div>
+        <Drawer
+          {...defaultArgs}
+          isOpen={showModal}
+          onClose={() => setShowModal(false)}
+          isFooterRequired={true}
+          _isExpanded={false}
+          size="medium"
+        >
+          <span>Drawer body</span>
+        </Drawer>
+      </>
+    );
+  },
+};