pixel-react 1.8.1 → 1.8.2

package/src/components/Modal/modal.scss

@@ -1,51 +1,51 @@
-@use '../../assets/styles/mixins' as *;
-
-.ff-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--modal-background-color);
-  @include center-content;
-  flex-direction: column;
-}
-
-.ff-modal-container {
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.ff-modal-content {
-  background: var(--ff-mini-modal-border);
-  position: relative;
-  max-width: 100%;
-  padding: 16px;
-
-  .ff-modal-header {
-    height: 32px;
-    width: 100%;
-  }
-}
-
-.modal-bottom-border {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
-.modal-top-border {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-
-.ff-modal-footer {
-  background-color: var(--expandable-menu-option-bg);
-  max-width: 100%;
-  width: 100%;
-  height: 32px;
-  display: flex;
-  flex-direction: row;
-  justify-content: end;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 16px;
-}
+@use '../../assets/styles/mixins' as *;
+
+.ff-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--modal-background-color);
+  @include center-content;
+  flex-direction: column;
+}
+
+.ff-modal-container {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.ff-modal-content {
+  background: var(--ff-mini-modal-border);
+  position: relative;
+  max-width: 100%;
+  padding: 16px;
+
+  .ff-modal-header {
+    height: 32px;
+    width: 100%;
+  }
+}
+
+.modal-bottom-border {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+.modal-top-border {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.ff-modal-footer {
+  background-color: var(--expandable-menu-option-bg);
+  max-width: 100%;
+  width: 100%;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 16px;
+}

package/src/components/Modal/types.ts

@@ -1,43 +1,43 @@
-import { ReactNode } from 'react';
-
-export interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-
-  /*** label value for aria-label  */
-  contentLabel?: string;
-
-  /*** default header will be provided with title and close icon. */
-  isHeaderDisplayed: boolean;
-
-  /*** Title to be displayed in the header when defaultHeader is true*/
-  headerTitle?: string;
-
-  /*** Custom class names for the modal content */
-  contentClassName?: string;
-
-  /*** Custom class name for the overlay */
-  overlayClassName?: string;
-
-  /*** Whether the modal should close when the 'Escape' key is pressed */
-  shouldCloseOnEsc?: boolean;
-
-  /*** Whether to hide the app from screen readers when the modal is open */
-  ariaHideApp?: boolean; //for screen readers
-
-  /*** Whether the modal should close when clicking outside of it (on the overlay) */
-  shouldCloseOnOverlayClick?: boolean;
-  //   shouldFocusAfterRender?: boolean;
-  //   shouldReturnFocusAfterClose?: boolean;
-  headerContent?: string | ReactNode;
-  footerContent?: ReactNode;
-  /***Content to be displayed inside the modal */
-  children: ReactNode;
-  isFooterDisplayed: boolean;
-  customWidth?: string;
-  customHeight?: string;
-  zIndex?: number;
-  boxShadow?: string;
-  border?: string;
-  background?: string;
-}
+import { ReactNode } from 'react';
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+
+  /*** label value for aria-label  */
+  contentLabel?: string;
+
+  /*** default header will be provided with title and close icon. */
+  isHeaderDisplayed: boolean;
+
+  /*** Title to be displayed in the header when defaultHeader is true*/
+  headerTitle?: string;
+
+  /*** Custom class names for the modal content */
+  contentClassName?: string;
+
+  /*** Custom class name for the overlay */
+  overlayClassName?: string;
+
+  /*** Whether the modal should close when the 'Escape' key is pressed */
+  shouldCloseOnEsc?: boolean;
+
+  /*** Whether to hide the app from screen readers when the modal is open */
+  ariaHideApp?: boolean; //for screen readers
+
+  /*** Whether the modal should close when clicking outside of it (on the overlay) */
+  shouldCloseOnOverlayClick?: boolean;
+  //   shouldFocusAfterRender?: boolean;
+  //   shouldReturnFocusAfterClose?: boolean;
+  headerContent?: string | ReactNode;
+  footerContent?: ReactNode;
+  /***Content to be displayed inside the modal */
+  children: ReactNode;
+  isFooterDisplayed: boolean;
+  customWidth?: string;
+  customHeight?: string;
+  zIndex?: number;
+  boxShadow?: string;
+  border?: string;
+  background?: string;
+}

package/src/components/ModulesChip/ModuleChip.scss

@@ -1,33 +1,33 @@
-@use '../../assets/styles/fonts';
-@use '../../assets/styles/mixins';
-
-.ff-Module-chip {
-  width: 68px;
-  height: 30px;
-  color: var(--table-column-text-color);
-  border: 1px solid var(--ff-editor-line-bg);
-  border-radius: 16px;
-  cursor: pointer;
-  @include mixins.center-content();
-  .module-typography {
-    color: var(--table-column-text-color);
-  }
-  &--active {
-    border: 0.5px solid var(--brand-color);
-    background: var(--brand-color);
-    .module-typography {
-      color: var(--base-bg-color);
-      font-weight: 600;
-    }
-  }
-  &--hover {
-    &:hover {
-      border: 0.5px solid var(--brand-color);
-      background-color: var(--hover-color);
-      .module-typography {
-        color: var(--table-column-text-color);
-        font-weight: 600;
-      }
-    }
-  }
-}
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/mixins';
+
+.ff-Module-chip {
+  width: 68px;
+  height: 30px;
+  color: var(--table-column-text-color);
+  border: 1px solid var(--ff-editor-line-bg);
+  border-radius: 16px;
+  cursor: pointer;
+  @include mixins.center-content();
+  .module-typography {
+    color: var(--table-column-text-color);
+  }
+  &--active {
+    border: 0.5px solid var(--brand-color);
+    background: var(--brand-color);
+    .module-typography {
+      color: var(--base-bg-color);
+      font-weight: 600;
+    }
+  }
+  &--hover {
+    &:hover {
+      border: 0.5px solid var(--brand-color);
+      background-color: var(--hover-color);
+      .module-typography {
+        color: var(--table-column-text-color);
+        font-weight: 600;
+      }
+    }
+  }
+}

package/src/components/ModulesChip/ModuleChip.stories.tsx

@@ -1,41 +1,41 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import ModuleChip from './ModuleChip';
-import { useState } from 'react';
-
-const meta: Meta<typeof ModuleChip> = {
-  title: 'Components/ModuleChip',
-  component: ModuleChip,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    isActive: Boolean,
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof ModuleChip>;
-
-const defaultArgs = {
-  label: 'Modules',
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [selectedMenu, setSelectedMenu] = useState<boolean>(true);
-    const handleChipClick = () => {
-      setSelectedMenu(!selectedMenu);
-    };
-
-    return (
-      <ModuleChip
-        {...defaultArgs}
-        isActive={selectedMenu}
-        onClick={handleChipClick}
-      />
-    );
-  },
-};
-
-export default meta;
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import ModuleChip from './ModuleChip';
+import { useState } from 'react';
+
+const meta: Meta<typeof ModuleChip> = {
+  title: 'Components/ModuleChip',
+  component: ModuleChip,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    isActive: Boolean,
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof ModuleChip>;
+
+const defaultArgs = {
+  label: 'Modules',
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [selectedMenu, setSelectedMenu] = useState<boolean>(true);
+    const handleChipClick = () => {
+      setSelectedMenu(!selectedMenu);
+    };
+
+    return (
+      <ModuleChip
+        {...defaultArgs}
+        isActive={selectedMenu}
+        onClick={handleChipClick}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/ModulesChip/ModuleChip.tsx

@@ -1,28 +1,28 @@
-import './ModuleChip.scss';
-import classNames from 'classnames';
-import { ModuleChipProps } from './types';
-import Typography from '../Typography';
-
-const ModuleChip: React.FC<ModuleChipProps> = ({
-  label = '',
-  isActive = true,
-  onClick = () => {},
-}) => {
-  return (
-    <div
-      className={classNames('ff-Module-chip', {
-        'ff-Module-chip--active': isActive,
-        'ff-Module-chip--hover': !isActive,
-      })}
-      onClick={onClick}
-    >
-      <Typography
-        lineHeight="18px"
-        className="module-typography"
-        children={label}
-      />
-    </div>
-  );
-};
-
-export default ModuleChip;
+import './ModuleChip.scss';
+import classNames from 'classnames';
+import { ModuleChipProps } from './types';
+import Typography from '../Typography';
+
+const ModuleChip: React.FC<ModuleChipProps> = ({
+  label = '',
+  isActive = true,
+  onClick = () => {},
+}) => {
+  return (
+    <div
+      className={classNames('ff-Module-chip', {
+        'ff-Module-chip--active': isActive,
+        'ff-Module-chip--hover': !isActive,
+      })}
+      onClick={onClick}
+    >
+      <Typography
+        lineHeight="18px"
+        className="module-typography"
+        children={label}
+      />
+    </div>
+  );
+};
+
+export default ModuleChip;

package/src/components/ModulesChip/types.ts

@@ -1,14 +1,14 @@
-export interface ModuleChipProps {
-  /**
-   * mandatory | label for the ModuleChip component
-   */
-  label: string;
-  /**
-   * mandatory | isActive for the ModuleChip component
-   */
-  isActive: boolean;
-  /**
-   * mandatory | onClick for the ModuleChip component
-   */
-  onClick: () => void;
-}
+export interface ModuleChipProps {
+  /**
+   * mandatory | label for the ModuleChip component
+   */
+  label: string;
+  /**
+   * mandatory | isActive for the ModuleChip component
+   */
+  isActive: boolean;
+  /**
+   * mandatory | onClick for the ModuleChip component
+   */
+  onClick: () => void;
+}

package/src/components/MultiSelect/Dropdown.scss

@@ -1,77 +1,77 @@
-@use '../../assets/styles/fonts';
-
-.ff-multiselect-dropdown-container {
-  position: absolute;
-  background: var(--drawer-footer-bg);
-  z-index: 1000;
-  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
-  border: 0.5px solid var(--ff-select-option-border-color);
-  border-radius: 4px;
-  box-sizing: border-box;
-  margin-block: 4px;
-  max-height: 160px;
-  .ff-multiselect-options-wrapper {
-    max-height: 128px;
-    overflow-y: auto;
-    border-radius: 2px;
-    overflow-x: hidden;
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 40px;
-      border-radius: 12px 0px 0px 0px;
-      background: var(--description-text);
-
-      &-track {
-        background: var(--ff-select-scroll-track-bg);
-      }
-
-      &-thumb {
-        background: var(--ff-select-scroll-thumb-color);
-        border-radius: 10px;
-
-        &:hover {
-          background: var(--ff-select-scroll-thumb-hover);
-        }
-      }
-    }
-  }
-
-  .no-options {
-    color: var(--ff-select-text-color);
-    text-align: center;
-    margin: 0;
-    padding: 7px;
-    line-height: 12px;
-  }
-  .dropdown-option-container {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    height: 32px;
-    padding: 4px 8px;
-    gap: 4px;
-    border-radius: 4px 0px 0px 0px;
-    background-color: white;
-
-    .dropdown-option-label {
-      @extend .fontMd;
-      color: var(--ff-select-text-color);
-    }
-    &:hover {
-      background-color: var(--hover-color);
-    }
-  }
-
-  &:focus {
-    outline: none;
-  }
-  .select-button-container {
-    box-sizing: border-box;
-    width: 100%;
-    border-top: 1px solid var(--slider-table-color);
-    height: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
+@use '../../assets/styles/fonts';
+
+.ff-multiselect-dropdown-container {
+  position: absolute;
+  background: var(--drawer-footer-bg);
+  z-index: 1000;
+  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);
+  border: 0.5px solid var(--ff-select-option-border-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  margin-block: 4px;
+  max-height: 160px;
+  .ff-multiselect-options-wrapper {
+    max-height: 128px;
+    overflow-y: auto;
+    border-radius: 2px;
+    overflow-x: hidden;
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 40px;
+      border-radius: 12px 0px 0px 0px;
+      background: var(--description-text);
+
+      &-track {
+        background: var(--ff-select-scroll-track-bg);
+      }
+
+      &-thumb {
+        background: var(--ff-select-scroll-thumb-color);
+        border-radius: 10px;
+
+        &:hover {
+          background: var(--ff-select-scroll-thumb-hover);
+        }
+      }
+    }
+  }
+
+  .no-options {
+    color: var(--ff-select-text-color);
+    text-align: center;
+    margin: 0;
+    padding: 7px;
+    line-height: 12px;
+  }
+  .dropdown-option-container {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    padding: 4px 8px;
+    gap: 4px;
+    border-radius: 4px 0px 0px 0px;
+    background-color: white;
+
+    .dropdown-option-label {
+      @extend .fontMd;
+      color: var(--ff-select-text-color);
+    }
+    &:hover {
+      background-color: var(--hover-color);
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+  .select-button-container {
+    box-sizing: border-box;
+    width: 100%;
+    border-top: 1px solid var(--slider-table-color);
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}