pixel-react 1.0.0

package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss

@@ -0,0 +1,160 @@
+.ff-arrow-buttons-container {
+  position: absolute;
+  transition: opacity 0.3s ease;
+
+  &.ff-down-right-top,
+  &.ff-down-top {
+    height: 80px;
+    width: 52px;
+    transform: translateY(calc(-50% + 12px));
+
+    .ff-arrow-button--right {
+      top: 28px;
+      right: 2px;
+      animation: slideRight 0.4s ease-out;
+    }
+
+    .ff-arrow-button--top {
+      top: 2px;
+      animation: slideTop 0.4s ease-out;
+    }
+
+    .ff-arrow-button--down {
+      bottom: 2px;
+      animation: slideDown 0.4s ease-out;
+    }
+  }
+
+  &.ff-right-top {
+    height: 52px;
+    width: 52px;
+    transform: translateY(calc(-54%));
+
+    .ff-arrow-button--right {
+      top: 28px;
+      right: 2px;
+      animation: slideRight 0.4s ease-out;
+    }
+
+    .ff-arrow-button--top {
+      top: 2px;
+      animation: slideTop 0.4s ease-out;
+    }
+  }
+
+  &.ff-down-right {
+    height: 52px;
+    width: 52px;
+
+    .ff-arrow-button--right {
+      top: 0px;
+      right: 2px;
+      animation: slideRight 0.4s ease-out;
+    }
+
+    .ff-arrow-button--down {
+      bottom: 2px;
+      animation: slideDown 0.4s ease-out;
+    }
+  }
+
+  &.ff-top {
+    height: 52px;
+    width: 24px;
+    transform: translateY(calc(-54%));
+
+    .ff-arrow-button--top {
+      top: 2px;
+      animation: slideTop 0.4s ease-out;
+    }
+  }
+
+  &.ff-right {
+    height: 24px;
+    width: 52px;
+
+    .ff-arrow-button--right {
+      right: 2px;
+      animation: slideRight 0.4s ease-out;
+    }
+  }
+
+  &.ff-down {
+    height: 52px;
+    width: 24px;
+
+    .ff-arrow-button--down {
+      bottom: 2px;
+      animation: slideDown 0.4s ease-out;
+    }
+  }
+  .ff-arrow-button {
+    background: var(--arrow-button-bg-color);
+    border: 0.5px solid var(--arrows-button-border-color);
+    padding: 0;
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    border-radius: 4px;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s ease;
+    position: absolute;
+
+    &--top {
+      top: 0px;
+      left: 0;
+    }
+
+    &--down {
+      bottom: 0px;
+      left: 0;
+    }
+  }
+
+  @keyframes slideTop {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    50% {
+      transform: translateY(-10px);
+      opacity: 0.5;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideRight {
+    from {
+      transform: translateX(-20px);
+      opacity: 0;
+    }
+    50% {
+      transform: translateX(10px);
+      opacity: 0.5;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideDown {
+    from {
+      transform: translateY(-20px);
+      opacity: 0;
+    }
+    50% {
+      transform: translateY(10px);
+      opacity: 0.5;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}

package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import './ArrowsButton.scss';
+import { DirectionalArrowButtonProps } from '../type';
+import MenuOption from '../../MenuOption/MenuOption';
+
+const ArrowsButton = ({
+  direction,
+  menuOptions,
+  onArrowClick,
+}: DirectionalArrowButtonProps & { isActive: boolean }) => {
+  const getIconName = () => {
+    return `arrows_${direction}_icon`;
+  };
+
+  return (
+    <div>
+      <button
+        className={classNames(
+          'ff-arrow-button',
+          `ff-arrow-button--${direction}`
+        )}
+        onClick={onArrowClick}
+      >
+        <MenuOption
+          iconName={getIconName()}
+          options={menuOptions}
+          dropdownPlacement={direction}
+          iconSize={12}
+          iconButtonSize={24}
+          iconButtonBorderRadius={3}
+          onOptionClick={() => {}} 
+        />
+      </button>
+    </div>
+  );
+};
+
+export default ArrowsButton;

package/src/components/AddResourceButton/index.ts

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

package/src/components/AddResourceButton/type.ts

@@ -0,0 +1,60 @@
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+/**
+ * Describes the directional arrow used in the Add Resource Button component.
+ * The arrow specifies its direction (top, right, down) and associated menu options.
+ *
+ * @property {('top' | 'right' | 'down')} direction - Specifies the direction of the arrow.
+ * @property {(Object | null)[]} menuOptions - The list of menu options displayed when the arrow button is active.
+ * If null, no menu options will be shown.
+ */
+export interface DirectionalArrow {
+  direction: 'top' | 'right' | 'down';
+  menuOptions: ({ label: string; value: string | string[]; icon: string; disable?: boolean })[];
+}
+
+/**a
+ * Props for the Add Resource Button component.
+ *
+ * @property {string} [id] - An optional unique identifier for the Add Resource Button.
+ * @property {('primary' | 'secondary')} [variant] - Optional button style variant.
+ * @property {DirectionalArrow[]} directionalArrow - An array of directional arrows, each specifying the direction and associated menu options. Default values will be provided if not passed.
+ * @property {number} [zIndex] - An optional z-index value for positioning, defaults to 99.
+ */
+export interface AddResourceButtonProps {
+  id?: string;
+  variant?: 'primary' | 'secondary';
+  directionalArrow: {
+    direction: 'top' | 'right' | 'down';
+    menuOptions: ({ label: string; value: string | string[]; icon: string; disable?: boolean })[];
+  }[];
+  zIndex?: number;
+}
+
+/**
+ * Props for individual directional arrow buttons.
+ *
+ * @property {('top' | 'right' | 'down')} direction - The direction of the arrow button (top, right, or down).
+ * @property {(Object | any)} menuOptions - The list of menu options or a generic value for dynamic content.
+ * @property {() => void} onArrowClick - Callback function triggered when the arrow button is clicked.
+ * @property {boolean} isActive - Specifies if the button is in an active state (highlighted when selected).
+ */
+export interface DirectionalArrowButtonProps {
+  direction: 'top' | 'right' | 'down';
+  menuOptions: ({ label: string; value: string | string[]; icon: string; disable?: boolean })[];
+  onArrowClick: () => void;
+  isActive: boolean;
+  variant?: 'primary' | 'secondary';
+}
+
+/**
+ * Utility function to validate an array of directional arrows.
+ * Ensures there is at least one valid arrow in the array.
+ * If the array is empty, it returns a default arrow object.
+ */
+export const validateArrows = (arrows: DirectionalArrow[]): DirectionalArrow[] => {
+  if (checkEmpty(arrows)) {
+    return [{ direction: null as any, menuOptions: [{ label: 'Sub Module', value: 'sub_module', icon: "", disable: false }] }];
+  }
+  return arrows;
+}

package/src/components/Button/Button.scss

@@ -0,0 +1,148 @@
+@use '../../assets/styles/colors' as *;
+@import '../../assets/styles/fonts';
+
+.ff-button {
+  width: auto;
+  background-color: $primary-button-text-color;
+  border-radius: 4px;
+  padding: 4px 8px;
+  text-align: center;
+  text-decoration: none;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  align-items: center;
+  @extend .fontXs;
+  border: 2px solid transparent;
+  &--transparent {
+    background-color: transparent;
+  }
+
+  &--primary,
+  &--delete,
+  &--secondary {
+    position: relative;
+    cursor: pointer;
+    border-radius: 4px;
+    z-index: 1;
+    border: none;
+    overflow: hidden;
+
+    &:before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 4px;
+      padding: 0.6px;
+
+      background: $primary-button-border;
+      mask: linear-gradient($primary-button-text-color 0 0) content-box,
+        linear-gradient($primary-button-text-color 0 0);
+      mask-composite: exclude;
+      -webkit-mask: linear-gradient($primary-button-text-color 0 0) content-box,
+        linear-gradient($primary-button-text-color 0 0);
+      -webkit-mask-composite: destination-out;
+      z-index: -1;
+    }
+
+    &:hover {
+      background: $primary-button-hover;
+    }
+
+    &:disabled {
+      opacity: 50%;
+      cursor: no-drop;
+
+      &:before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: 4px;
+        padding: 0.6px;
+        -webkit-mask-composite: destination-out;
+        mask-composite: exclude;
+        z-index: -1;
+      }
+    }
+  }
+
+  &--primary {
+    background: $primary-button-color;
+
+    &:before {
+      background: $primary-button-border;
+    }
+
+    &:hover {
+      background: $primary-button-hover;
+    }
+  }
+
+  &--delete {
+    background: $delete-button-color;
+    color: $primary-button-text-color;
+
+    &:before {
+      background: $delete-button-border;
+    }
+
+    &:hover {
+      background: $delete-button-hover;
+    }
+  }
+
+  &--secondary {
+    &:before {
+      background: $primary-button-border;
+    }
+
+    &:hover {
+      background: $secondary-button-hover;
+    }
+  }
+
+  &--tertiary {
+    border: none;
+    background: $tertiary-button-color;
+
+    &:hover {
+      background: $tertiary-button-hover;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: no-drop;
+    }
+  }
+
+  &--small {
+    @extend .fontXs;
+    font-weight: 500;
+    padding: 4.5px 8px;
+  }
+
+  &--medium {
+    @extend .fontXs;
+    font-weight: 500;
+    padding: 6px 12px;
+  }
+
+  &--large {
+    @extend .fontMd;
+    padding: 8px 16px;
+  }
+
+  &-primary--text {
+    color: $primary-button-text-color;
+  }
+
+  &-secondary--text,
+  &-tertiary--text {
+    background: $secondary-button-color-text;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Button>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Primary Button',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Secondary Button',
+    variant: 'secondary',
+  },
+};
+export const Tertiary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Tertiary Button',
+    variant: 'tertiary',
+  },
+};
+export const Delete: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Delete',
+    variant: 'delete',
+  },
+};
+export const PrimaryWithIcon: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Primary Button',
+    variant: 'primary',
+    iconName: 'manage_apps',
+  },
+};
+
+export const SecondaryWithIcon: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Secondary Button',
+    variant: 'secondary',
+    iconName: 'manage_apps',
+  },
+};
+export const TertiaryWithIcon: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Tertiary Button',
+    variant: 'tertiary',
+    iconName: 'manage_apps',
+  },
+};
+
+export default meta;

package/src/components/Button/Button.tsx

@@ -0,0 +1,66 @@
+import { forwardRef } from 'react';
+import './Button.scss';
+import '../../assets/styles/_colors.scss';
+import Icon from '../Icon';
+import { ButtonProps } from './types';
+import classNames from 'classnames';
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'primary',
+      backgroundColor,
+      size = 'small',
+      onClick,
+      label,
+      disabled = false,
+      children = null,
+      type = 'button',
+      className = '',
+      style = {},
+      iconName,
+      iconPosition = 'left',
+      ...props
+    }: ButtonProps,
+    ref
+  ) => {
+    const renderIcon = () =>
+      iconName && (
+        <div>
+          <Icon
+            height={8}
+            width={8}
+            color={
+              variant === 'primary'
+                ? `var(--primary-icon-color)`
+                : `var(--secondary-icon-color)`
+            }
+            name={iconName}
+          />
+        </div>
+      );
+    return (
+      <button
+        type={type}
+        ref={ref}
+        className={classNames(
+          'ff-button',
+          `ff-button--${size}`,
+          `ff-button--${variant}`,
+          `${className}`,
+          'button'
+        )}
+        style={{ backgroundColor, ...style }}
+        onClick={onClick}
+        disabled={disabled}
+        {...props}
+      >
+        {iconPosition === 'left' && renderIcon()}
+        <div className={classNames(`ff-button-${variant}--text`)}>{label}</div>
+        {iconPosition === 'right' && renderIcon()}
+        {children}
+      </button>
+    );
+  }
+);
+export default Button;

package/src/components/Button/index.ts

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

package/src/components/Button/types.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /**
+   * Variant of the button
+   */
+  variant: 'primary' | 'secondary' | 'tertiary' | 'delete';
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label?: string;
+  /**
+   * Type of the button
+   */
+
+  type?: 'button' | 'submit';
+
+  disabled?: boolean;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /**
+   * Button content
+   */
+  children?: ReactNode;
+  /**
+   * Button id
+   */
+  id?: string;
+  /**
+   * onSubmit function handler
+   */
+  onSubmit?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /**
+   * react ref for the button
+   */
+  ref?: any;
+  /**
+   * Classname for the button
+   */
+  className?: string;
+  /**
+   * Additional styles for the button
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Give icon name availble in storybook that to be on left side of button
+   */
+  iconName?: string;
+  /**
+   * Give icon name availble in storybook that to be on left side of button
+   */
+  iconPosition?: 'left' | 'right';
+  transparentBackground?:boolean;
+}

package/src/components/Charts/DonutChart/DonutChart.scss

@@ -0,0 +1,76 @@
+@import '../../../assets/styles/fonts';
+.ff-donut-chart-section {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+}
+
+.ff-donut-chart-svg-container {
+  display: flex;
+  svg {
+    text:nth-of-type(1) {
+      @extend .fontSm;
+      font-weight: 600;
+    }
+    text:nth-of-type(2) {
+      @extend .fontXL;
+      font-weight: 600;
+    }
+    text:nth-of-type(3) {
+      @extend .font-size-8;
+      font-weight: 500;
+    }
+  }
+}
+.ff-status-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.ff-status-item {
+  display: flex;
+  gap: 40px;
+  justify-content: space-between;
+  opacity: 1;
+  @extend .fontSm;
+  &.ff-highlighted {
+    opacity: 1;
+  }
+
+  &.ff-fade {
+    opacity: 10%;
+  }
+
+  .ff-status-text {
+    font-weight: 500;
+    color: var(--status-skipped-text-color);
+  }
+  .ff-status-details-script-count {
+    display: flex;
+    gap: 4px;
+    font-weight: 600;
+  }
+  .ff-status-details-script-percentage {
+    font-weight: 400;
+    color: var(--brand2-color);
+  }
+}
+
+.ff-status-label {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.ff-status-details {
+  display: flex;
+  gap: 4px;
+}
+
+.ff-status-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  opacity: 80%;
+}