pixel-react 1.6.3 → 1.6.6

package/src/components/PopUpModal/PopUpModal.stories.tsx

@@ -1,61 +1,61 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import PopUpModal from './PopUpModal';
-import Button from '../Button';
-
-const meta: Meta<typeof PopUpModal> = {
-  title: 'Components/PopUpModal',
-  component: PopUpModal,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof PopUpModal>;
-
-const defaultArgs = {
-    iconName:"license_warning",
-    titleMessage:"Warning!",
-    subTitleMessage:"Unsaved Changes.",
-    modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
-    footerMessage:"How do you want to proceed?",
-    firstButtonLabel:"Cancel",
-    secondButtonLabel:"Continue",
-    buttonVariant:"warning",
-    border:'1px solid var(--warning-modal-border-color)'
-}
-
-export const DefaultModal: Story = {
-  args: {
-    isOpen: true,
-    onClose: () => alert('Closed'),
-    onContinue: () => alert('Continued'),
-    iconName: 'license_warning',
-    titleMessage: 'Warning!',
-    subTitleMessage: 'Unsaved Changes.',
-  },
-};
-
-export const ControlledPopUp: Story = {
-  render: () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const handleContinue = () => {
-        alert('Continued!');
-        setIsOpen(false);
-      };
-    return (
-      <>
-        <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp'/>
-        <PopUpModal
-          {...defaultArgs}
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          onContinue={handleContinue}
-        />
-      </>
-    );
-  },
-};
-
-export default meta;
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import PopUpModal from './PopUpModal';
+import Button from '../Button';
+
+const meta: Meta<typeof PopUpModal> = {
+  title: 'Components/PopUpModal',
+  component: PopUpModal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof PopUpModal>;
+
+const defaultArgs = {
+    iconName:"license_warning",
+    titleMessage:"Warning!",
+    subTitleMessage:"Unsaved Changes.",
+    modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
+    footerMessage:"How do you want to proceed?",
+    firstButtonLabel:"Cancel",
+    secondButtonLabel:"Continue",
+    buttonVariant:"warning",
+    border:'1px solid var(--warning-modal-border-color)'
+}
+
+export const DefaultModal: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => alert('Closed'),
+    onContinue: () => alert('Continued'),
+    iconName: 'license_warning',
+    titleMessage: 'Warning!',
+    subTitleMessage: 'Unsaved Changes.',
+  },
+};
+
+export const ControlledPopUp: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleContinue = () => {
+        alert('Continued!');
+        setIsOpen(false);
+      };
+    return (
+      <>
+        <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp'/>
+        <PopUpModal
+          {...defaultArgs}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          onContinue={handleContinue}
+        />
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/PopUpModal/PopUpModal.tsx

@@ -1,85 +1,85 @@
-import { FC } from 'react';
-import './PopUpModal.scss';
-import Modal from '../Modal';
-import Icon from '../Icon';
-import Typography from '../Typography';
-import Button from '../Button';
-import { PopUpModalProps } from './types';
-
-const PopUpModal: FC<PopUpModalProps> = ({
-  isOpen,
-  onClose,
-  onContinue,
-  titleMessage = 'Warning!',
-  subTitleMessage = 'Unsaved Changes.',
-  iconName,
-  modalMessage = 'Your web service data will be lost. Are you sure you want to exit?',
-  footerMessage = 'How do you want to proceed?',
-  firstButtonLabel = 'Cancel',
-  secondButtonLabel = 'Continue',
-  buttonVariant = 'warning',
-  border = '1px solid var(--warning-modal-border-color)',
-}) => {
-  return (
-    <Modal
-      overlayClassName="custom-overlay"
-      isOpen={isOpen}
-      onClose={onClose}
-      isHeaderDisplayed={false}
-      children={
-        <div className={'warning_modal_container'}>
-          <div className={'warning_modal_content'}>
-            <Icon
-              name={iconName}
-              className={'warning_modal_icon'}
-              width={94}
-              height={94}
-            />
-            <div className={'warning_modal_message'}>
-              <Typography
-                fontSize={20}
-                fontWeight="semi-bold"
-                className="warning_modal_title_wrapper"
-              >
-                {' '}
-                <Typography
-                  color="var(--status-button-bg-warning)"
-                  fontSize={20}
-                  fontWeight="semi-bold"
-                >
-                  {' '}
-                  {titleMessage}{' '}
-                </Typography>{' '}
-                {subTitleMessage}
-              </Typography>
-              <div className="warning_modal_message_wrapper">
-                <Typography fontSize={16}>{modalMessage}</Typography>
-                <Typography fontSize={16}>{footerMessage}</Typography>
-              </div>
-            </div>
-          </div>
-          <div className={'warning_modal_footer_button'}>
-            <Button
-              variant="secondary"
-              label={firstButtonLabel}
-              onClick={onClose}
-            />
-            <Button
-              variant={buttonVariant || 'warning'}
-              label={secondButtonLabel}
-              onClick={onContinue}
-            />
-          </div>
-        </div>
-      }
-      ariaHideApp
-      isFooterDisplayed={false}
-      customWidth="420px"
-      customHeight="226px"
-      boxShadow="0px 1px 4px 0px var(--toaster-boxshadow)"
-      border={border}
-    />
-  );
-};
-
-export default PopUpModal;
+import { FC } from 'react';
+import './PopUpModal.scss';
+import Modal from '../Modal';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import Button from '../Button';
+import { PopUpModalProps } from './types';
+
+const PopUpModal: FC<PopUpModalProps> = ({
+  isOpen,
+  onClose,
+  onContinue,
+  titleMessage = 'Warning!',
+  subTitleMessage = 'Unsaved Changes.',
+  iconName,
+  modalMessage = 'Your web service data will be lost. Are you sure you want to exit?',
+  footerMessage = 'How do you want to proceed?',
+  firstButtonLabel = 'Cancel',
+  secondButtonLabel = 'Continue',
+  buttonVariant = 'warning',
+  border = '1px solid var(--warning-modal-border-color)',
+}) => {
+  return (
+    <Modal
+      overlayClassName="custom-overlay"
+      isOpen={isOpen}
+      onClose={onClose}
+      isHeaderDisplayed={false}
+      children={
+        <div className={'warning_modal_container'}>
+          <div className={'warning_modal_content'}>
+            <Icon
+              name={iconName}
+              className={'warning_modal_icon'}
+              width={94}
+              height={94}
+            />
+            <div className={'warning_modal_message'}>
+              <Typography
+                fontSize={20}
+                fontWeight="semi-bold"
+                className="warning_modal_title_wrapper"
+              >
+                {' '}
+                <Typography
+                  color="var(--status-button-bg-warning)"
+                  fontSize={20}
+                  fontWeight="semi-bold"
+                >
+                  {' '}
+                  {titleMessage}{' '}
+                </Typography>{' '}
+                {subTitleMessage}
+              </Typography>
+              <div className="warning_modal_message_wrapper">
+                <Typography fontSize={16}>{modalMessage}</Typography>
+                <Typography fontSize={16}>{footerMessage}</Typography>
+              </div>
+            </div>
+          </div>
+          <div className={'warning_modal_footer_button'}>
+            <Button
+              variant="secondary"
+              label={firstButtonLabel}
+              onClick={onClose}
+            />
+            <Button
+              variant={buttonVariant || 'warning'}
+              label={secondButtonLabel}
+              onClick={onContinue}
+            />
+          </div>
+        </div>
+      }
+      ariaHideApp
+      isFooterDisplayed={false}
+      customWidth="420px"
+      customHeight="226px"
+      boxShadow="0px 1px 4px 0px var(--toaster-boxshadow)"
+      border={border}
+    />
+  );
+};
+
+export default PopUpModal;

package/src/components/PopUpModal/types.ts

@@ -1,14 +1,14 @@
-export interface PopUpModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onContinue?: () => void;
-    titleMessage:string,
-    subTitleMessage?:string,
-    iconName:string,
-    modalMessage:string,
-    footerMessage:string,
-    firstButtonLabel?:string,
-    secondButtonLabel:string,
-    buttonVariant:any,
-    border:string,
+export interface PopUpModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onContinue?: () => void;
+    titleMessage:string,
+    subTitleMessage?:string,
+    iconName:string,
+    modalMessage:string,
+    footerMessage:string,
+    firstButtonLabel?:string,
+    secondButtonLabel:string,
+    buttonVariant:any,
+    border:string,
   }

package/src/components/RadioButton/RadioButton.scss

@@ -1,106 +1,106 @@
-@use '../../assets/styles/_fonts';
-
-@mixin circle($size, $border: none) {
-  width: $size;
-  height: $size;
-  border-radius: 50%;
-  @if $border != none {
-    border: $border;
-  }
-}
-@mixin transition($properties, $duration: 0.3s) {
-  transition: $properties $duration;
-}
-
-.ff-radio-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  .ff-radio {
-    @extend .fontSm;
-    position: relative;
-    color: var(--text-color);
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .ff-radio-input {
-      display: none;
-    }
-    .ff-radio-custom {
-      box-sizing: content-box;
-      @include circle(14px, 1px solid var(--radio-button-border)); //todo
-      position: relative;
-      margin-right: 8px;
-      @include transition(border-color, background-color);
-
-      &::before {
-        content: '';
-        @include circle(12px);
-        background: #fbfdff; //todo
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        @include transition(background-color);
-      }
-
-      &::after {
-        content: '';
-        @include circle(16px, 4px solid #f7edff); //todo
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        opacity: 0;
-        @include transition(opacity);
-      }
-    }
-
-    &:hover .ff-radio-custom {
-      border: 1px solid var(--brand-color);
-      &::before {
-        background-color: var(--drawer-footer-bg);
-      }
-      &::after {
-        opacity: 1;
-        @include transition(opacity);
-      }
-    }
-    .ff-radio-input:checked + .ff-radio-custom {
-      border-color: var(--brand-color);
-
-      &::before {
-        background: var(--brand-color);
-        height: 12px;
-        width: 12px;
-      }
-    }
-    .ff-radio-input:disabled + .ff-radio-custom {
-      border: 1px solid var(--radio-button-border);
-      &::before {
-        background: var(--drawer-footer-bg);
-      }
-
-      &::after {
-        border: 4px solid var(--radio-button-hover);
-        opacity: 0;
-        @include transition(opacity);
-      }
-    }
-
-    .ff-radio-input:checked:disabled + .ff-radio-custom {
-      border-color: var(--brand-color);
-      background-color: var(--drawer-footer-bg);
-      &::before {
-        background: var(--brand-color);
-      }
-    }
-    &--disabled {
-      cursor: default;
-      .ff-radio-custom {
-        opacity: 0.5;
-      }
-    }
-  }
-}
+@use '../../assets/styles/_fonts';
+
+@mixin circle($size, $border: none) {
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  @if $border != none {
+    border: $border;
+  }
+}
+@mixin transition($properties, $duration: 0.3s) {
+  transition: $properties $duration;
+}
+
+.ff-radio-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  .ff-radio {
+    @extend .fontSm;
+    position: relative;
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    .ff-radio-input {
+      display: none;
+    }
+    .ff-radio-custom {
+      box-sizing: content-box;
+      @include circle(14px, 1px solid var(--radio-button-border)); //todo
+      position: relative;
+      margin-right: 8px;
+      @include transition(border-color, background-color);
+
+      &::before {
+        content: '';
+        @include circle(12px);
+        background: #fbfdff; //todo
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        @include transition(background-color);
+      }
+
+      &::after {
+        content: '';
+        @include circle(16px, 4px solid #f7edff); //todo
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        @include transition(opacity);
+      }
+    }
+
+    &:hover .ff-radio-custom {
+      border: 1px solid var(--brand-color);
+      &::before {
+        background-color: var(--drawer-footer-bg);
+      }
+      &::after {
+        opacity: 1;
+        @include transition(opacity);
+      }
+    }
+    .ff-radio-input:checked + .ff-radio-custom {
+      border-color: var(--brand-color);
+
+      &::before {
+        background: var(--brand-color);
+        height: 12px;
+        width: 12px;
+      }
+    }
+    .ff-radio-input:disabled + .ff-radio-custom {
+      border: 1px solid var(--radio-button-border);
+      &::before {
+        background: var(--drawer-footer-bg);
+      }
+
+      &::after {
+        border: 4px solid var(--radio-button-hover);
+        opacity: 0;
+        @include transition(opacity);
+      }
+    }
+
+    .ff-radio-input:checked:disabled + .ff-radio-custom {
+      border-color: var(--brand-color);
+      background-color: var(--drawer-footer-bg);
+      &::before {
+        background: var(--brand-color);
+      }
+    }
+    &--disabled {
+      cursor: default;
+      .ff-radio-custom {
+        opacity: 0.5;
+      }
+    }
+  }
+}

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -1,43 +1,43 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import RadioButton from './RadioButton';
-
-const meta: Meta<typeof RadioButton> = {
-  title: 'Components/RadioButton',
-  component: RadioButton,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof RadioButton>;
-
-export const Default: Story = {
-  args: {
-    label: 'men',
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    label: 'women',
-    checked: true,
-  },
-};
-export const UncheckedDisabled: Story = {
-  args: {
-    label: 'women',
-    disabled: true,
-  },
-};
-export const CheckedDisabled: Story = {
-  args: {
-    label: 'women',
-    disabled: true,
-    checked: true,
-  },
-};
-
-export const WithoutLabel: Story = {};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import RadioButton from './RadioButton';
+
+const meta: Meta<typeof RadioButton> = {
+  title: 'Components/RadioButton',
+  component: RadioButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof RadioButton>;
+
+export const Default: Story = {
+  args: {
+    label: 'men',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    label: 'women',
+    checked: true,
+  },
+};
+export const UncheckedDisabled: Story = {
+  args: {
+    label: 'women',
+    disabled: true,
+  },
+};
+export const CheckedDisabled: Story = {
+  args: {
+    label: 'women',
+    disabled: true,
+    checked: true,
+  },
+};
+
+export const WithoutLabel: Story = {};
+
+export default meta;