pixel-react 1.5.4 → 1.5.5

package/src/components/Charts/RadialChart/RadialChart.tsx

@@ -1,174 +1,174 @@
-import React, { useMemo } from 'react';
-import './RadialChart.scss';
-import {
-  RadialChartProps,
-  ArcParams,
-  ArcResult,
-  ArcAnglesResult,
-} from './types';
-
-const useColorMappings = () =>
-  useMemo(() => {
-    return {
-      colorMapping: {
-        passed: 'var(--status-success-text-color)',
-        failed: 'var(--status-rejected-text-color)',
-        warning: 'var(--status-warning-text-color)',
-        skipped: 'var(--status-skipped-text-color)',
-      },
-      backgroundColorMapping: {
-        passed: 'var(--status-success-bg-color)',
-        failed: 'var(--status-rejected-bg-color)',
-        warning: 'var(--status-warning-bg-color)',
-        skipped: 'var(--status-skipped-bg-color)',
-      },
-    };
-  }, []);
-
-// Function to generate SVG arc paths
-const calculateArc = ({
-  x,
-  y,
-  radius,
-  startAngle,
-  endAngle,
-}: ArcParams): ArcResult => {
-  const startX = x + radius * Math.cos(startAngle);
-  const startY = y + radius * Math.sin(startAngle);
-  const endX = x + radius * Math.cos(endAngle);
-  const endY = y + radius * Math.sin(endAngle);
-  const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
-
-  return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
-};
-
-// Function to calculate arc paths and angles
-const calculateArcAngles = (
-  statusValue: number,
-  total: number,
-  currentAngle: number,
-  radius: number
-): ArcAnglesResult => {
-  if (total === 0) {
-    const backgroundArcPath = calculateArc({
-      x: 0,
-      y: 0,
-      radius,
-      startAngle: 0,
-      endAngle: 2 * Math.PI,
-    });
-    return {
-      endAngle: currentAngle,
-      backgroundArcPath,
-      foregroundArcPath: '',
-      percentage: 0,
-    };
-  }
-
-  const percentage = statusValue / total;
-  const angleIncrement = percentage * 2 * Math.PI;
-  let startAngle = currentAngle;
-  let endAngle = startAngle + angleIncrement;
-
-  // Scenario when statusValue is equal to total
-  if (statusValue === total) {
-    startAngle = 0;
-    endAngle = 2 * Math.PI;
-  }
-
-  const backgroundArcPath = calculateArc({
-    x: 0,
-    y: 0,
-    radius,
-    startAngle: 0,
-    endAngle: 2 * Math.PI,
-  });
-  const foregroundArcPath = calculateArc({
-    x: 0,
-    y: 0,
-    radius,
-    startAngle,
-    endAngle,
-  });
-
-  return { endAngle, backgroundArcPath, foregroundArcPath, percentage };
-};
-
-// RadialChart component
-const RadialChart: React.FC<RadialChartProps> = ({
-  radius = 15,
-  lineWidth = 5,
-  statusValues = [],
-  onClick = () => {},
-  fontSize = 6,
-}) => {
-  const { colorMapping, backgroundColorMapping } = useColorMappings();
-  const total = statusValues.reduce((acc, status) => acc + status.value, 0);
-  let currentAngle = -Math.PI / 2;
-  const svgSize = 2 * (radius + lineWidth);
-  return (
-    <div
-      className="ff-radial-chart-container"
-      style={{ '--fontSize': `${fontSize}px` } as React.CSSProperties}
-    >
-      {statusValues.map((status) => {
-        const normalizedStatus = status.status.toLowerCase();
-        const { endAngle, backgroundArcPath, foregroundArcPath, percentage } =
-          calculateArcAngles(status.value, total, currentAngle, radius);
-        currentAngle = endAngle;
-        return (
-          <svg
-            key={status.status}
-            width={svgSize}
-            height={svgSize}
-            viewBox={`0 0 ${svgSize} ${svgSize}`}
-            onClick={() => onClick(status)}
-            role="img"
-            aria-label={`${status.status}: ${Math.round(percentage * 100)}%`}
-          >
-            <g
-              transform={`translate(${radius + lineWidth}, ${
-                radius + lineWidth
-              })`}
-            >
-              {/* Background Circle */}
-              <path
-                d={backgroundArcPath}
-                fill="none"
-                stroke={
-                  backgroundColorMapping[
-                    normalizedStatus as keyof typeof colorMapping
-                  ]
-                }
-                strokeWidth={lineWidth}
-              />
-              {/* Status Arc */}
-              <path
-                d={foregroundArcPath}
-                fill="none"
-                stroke={
-                  colorMapping[normalizedStatus as keyof typeof colorMapping]
-                }
-                strokeWidth={lineWidth}
-              />
-              {/* Percentage Text */}
-              <text
-                x="0"
-                y="0"
-                fill={
-                  colorMapping[normalizedStatus as keyof typeof colorMapping]
-                }
-                textAnchor="middle"
-                dominantBaseline="central"
-              >
-                {`${Math.round(percentage * 100)}%`}
-              </text>
-            </g>
-          </svg>
-        );
-      })}
-    </div>
-  );
-};
-
-export default RadialChart;
+import React, { useMemo } from 'react';
+import './RadialChart.scss';
+import {
+  RadialChartProps,
+  ArcParams,
+  ArcResult,
+  ArcAnglesResult,
+} from './types';
+
+const useColorMappings = () =>
+  useMemo(() => {
+    return {
+      colorMapping: {
+        passed: 'var(--status-success-text-color)',
+        failed: 'var(--status-rejected-text-color)',
+        warning: 'var(--status-warning-text-color)',
+        skipped: 'var(--status-skipped-text-color)',
+      },
+      backgroundColorMapping: {
+        passed: 'var(--status-success-bg-color)',
+        failed: 'var(--status-rejected-bg-color)',
+        warning: 'var(--status-warning-bg-color)',
+        skipped: 'var(--status-skipped-bg-color)',
+      },
+    };
+  }, []);
+
+// Function to generate SVG arc paths
+const calculateArc = ({
+  x,
+  y,
+  radius,
+  startAngle,
+  endAngle,
+}: ArcParams): ArcResult => {
+  const startX = x + radius * Math.cos(startAngle);
+  const startY = y + radius * Math.sin(startAngle);
+  const endX = x + radius * Math.cos(endAngle);
+  const endY = y + radius * Math.sin(endAngle);
+  const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
+
+  return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
+};
+
+// Function to calculate arc paths and angles
+const calculateArcAngles = (
+  statusValue: number,
+  total: number,
+  currentAngle: number,
+  radius: number
+): ArcAnglesResult => {
+  if (total === 0) {
+    const backgroundArcPath = calculateArc({
+      x: 0,
+      y: 0,
+      radius,
+      startAngle: 0,
+      endAngle: 2 * Math.PI,
+    });
+    return {
+      endAngle: currentAngle,
+      backgroundArcPath,
+      foregroundArcPath: '',
+      percentage: 0,
+    };
+  }
+
+  const percentage = statusValue / total;
+  const angleIncrement = percentage * 2 * Math.PI;
+  let startAngle = currentAngle;
+  let endAngle = startAngle + angleIncrement;
+
+  // Scenario when statusValue is equal to total
+  if (statusValue === total) {
+    startAngle = 0;
+    endAngle = 2 * Math.PI;
+  }
+
+  const backgroundArcPath = calculateArc({
+    x: 0,
+    y: 0,
+    radius,
+    startAngle: 0,
+    endAngle: 2 * Math.PI,
+  });
+  const foregroundArcPath = calculateArc({
+    x: 0,
+    y: 0,
+    radius,
+    startAngle,
+    endAngle,
+  });
+
+  return { endAngle, backgroundArcPath, foregroundArcPath, percentage };
+};
+
+// RadialChart component
+const RadialChart: React.FC<RadialChartProps> = ({
+  radius = 15,
+  lineWidth = 5,
+  statusValues = [],
+  onClick = () => {},
+  fontSize = 6,
+}) => {
+  const { colorMapping, backgroundColorMapping } = useColorMappings();
+  const total = statusValues.reduce((acc, status) => acc + status.value, 0);
+  let currentAngle = -Math.PI / 2;
+  const svgSize = 2 * (radius + lineWidth);
+  return (
+    <div
+      className="ff-radial-chart-container"
+      style={{ '--fontSize': `${fontSize}px` } as React.CSSProperties}
+    >
+      {statusValues.map((status) => {
+        const normalizedStatus = status.status.toLowerCase();
+        const { endAngle, backgroundArcPath, foregroundArcPath, percentage } =
+          calculateArcAngles(status.value, total, currentAngle, radius);
+        currentAngle = endAngle;
+        return (
+          <svg
+            key={status.status}
+            width={svgSize}
+            height={svgSize}
+            viewBox={`0 0 ${svgSize} ${svgSize}`}
+            onClick={() => onClick(status)}
+            role="img"
+            aria-label={`${status.status}: ${Math.round(percentage * 100)}%`}
+          >
+            <g
+              transform={`translate(${radius + lineWidth}, ${
+                radius + lineWidth
+              })`}
+            >
+              {/* Background Circle */}
+              <path
+                d={backgroundArcPath}
+                fill="none"
+                stroke={
+                  backgroundColorMapping[
+                    normalizedStatus as keyof typeof colorMapping
+                  ]
+                }
+                strokeWidth={lineWidth}
+              />
+              {/* Status Arc */}
+              <path
+                d={foregroundArcPath}
+                fill="none"
+                stroke={
+                  colorMapping[normalizedStatus as keyof typeof colorMapping]
+                }
+                strokeWidth={lineWidth}
+              />
+              {/* Percentage Text */}
+              <text
+                x="0"
+                y="0"
+                fill={
+                  colorMapping[normalizedStatus as keyof typeof colorMapping]
+                }
+                textAnchor="middle"
+                dominantBaseline="central"
+              >
+                {`${Math.round(percentage * 100)}%`}
+              </text>
+            </g>
+          </svg>
+        );
+      })}
+    </div>
+  );
+};
+
+export default RadialChart;

package/src/components/Charts/RadialChart/index.ts

@@ -1 +1 @@
-export { default } from './RadialChart';
+export { default } from './RadialChart';

package/src/components/Charts/RadialChart/types.ts

@@ -1,32 +1,32 @@
-export type Status = {
-  status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'passed' | 'failed' | 'warning' | 'skipped';
-  value: number;
-};
-//main component type
-export interface RadialChartProps {
-  radius: number;
-  lineWidth: number;
-  statusValues: Status[];
-  onClick?: (status: Status) => void;
-  fontSize: number;
-}
-
-//type for the calculateArc function
-export type ArcParams = {
-  x: number;
-  y: number;
-  radius: number;
-  startAngle: number;
-  endAngle: number;
-};
-
-// type for the calculateArc function
-export type ArcResult = string;
-
-// type for the calculateArcAngles function
-export type ArcAnglesResult = {
-  endAngle: number;
-  backgroundArcPath: string;
-  foregroundArcPath: string;
-  percentage: number;
-};
+export type Status = {
+  status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'passed' | 'failed' | 'warning' | 'skipped';
+  value: number;
+};
+//main component type
+export interface RadialChartProps {
+  radius: number;
+  lineWidth: number;
+  statusValues: Status[];
+  onClick?: (status: Status) => void;
+  fontSize: number;
+}
+
+//type for the calculateArc function
+export type ArcParams = {
+  x: number;
+  y: number;
+  radius: number;
+  startAngle: number;
+  endAngle: number;
+};
+
+// type for the calculateArc function
+export type ArcResult = string;
+
+// type for the calculateArcAngles function
+export type ArcAnglesResult = {
+  endAngle: number;
+  backgroundArcPath: string;
+  foregroundArcPath: string;
+  percentage: number;
+};

package/src/components/Checkbox/Checkbox.scss

@@ -1,89 +1,89 @@
-@use '../../assets/styles/fonts';
-@use '../../assets/styles/mixins';
-
-.ff-checkbox--overlay {
-  @include mixins.center-content();
-  cursor: pointer;
-  position: relative;
-
-  .ff-checkbox-input {
-    display: none;
-  }
-
-  .ff-checkbox-custom {
-    @include mixins.box(16px, 1px solid var(--checkbox-border-color));
-    box-sizing: border-box;
-    border-radius: 2px;
-    margin-right: 4px;
-    background-color: var(--checkbox-bg-color);
-    position: relative;
-    @include mixins.center-content;
-    @include mixins.transition(border-color, background-color);
-
-    &::before {
-      content: '';
-      width: 9px;
-      height: 2px;
-      background-color: var(--checkbox-partial-color);
-      border-radius: 2px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) rotate(180deg);
-      opacity: 0;
-      @include mixins.transition(border-color, background-color);
-    }
-
-    &::after {
-      content: '';
-      @include mixins.box(16px, 4px solid var(--checkbox-hover-color));
-      border-radius: 4px;
-      position: absolute;
-      opacity: 0;
-      background-color: var(--checkbox-hover-color);
-      z-index: -1;
-      @include mixins.transition(border-color, background-color);
-    }
-    &:hover {
-      border-color: var(--brand-color);
-      &::after {
-        opacity: 1;
-      }
-    }
-  }
-
-  .ff-checkbox-input:checked + .ff-checkbox-custom {
-    background: var(--brand-color);
-    border-color: var(--brand-color);
-  }
-
-  .ff-checkbox-input:checked:hover + .ff-checkbox-custom {
-    background: var(--brand-color);
-    &::after {
-      opacity: 1;
-    }
-  }
-
-  .ff-checkbox-input:disabled + .ff-checkbox-custom {
-    opacity: 0.5;
-    cursor: not-allowed;
-    border: 1px solid var(--checkbox-border-color);
-    &::after {
-      opacity: 0;
-    }
-  }
-  .ff-storybook-checkbox--partial {
-    background-color: var(--brand-color);
-    border: none;
-    &::before {
-      opacity: 1;
-    }
-
-    &:hover {
-      background-color: var(--brand-color);
-      &::after {
-        opacity: 1;
-      }
-    }
-  }
-}
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/mixins';
+
+.ff-checkbox--overlay {
+  @include mixins.center-content();
+  cursor: pointer;
+  position: relative;
+
+  .ff-checkbox-input {
+    display: none;
+  }
+
+  .ff-checkbox-custom {
+    @include mixins.box(16px, 1px solid var(--checkbox-border-color));
+    box-sizing: border-box;
+    border-radius: 2px;
+    margin-right: 4px;
+    background-color: var(--checkbox-bg-color);
+    position: relative;
+    @include mixins.center-content;
+    @include mixins.transition(border-color, background-color);
+
+    &::before {
+      content: '';
+      width: 9px;
+      height: 2px;
+      background-color: var(--checkbox-partial-color);
+      border-radius: 2px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(180deg);
+      opacity: 0;
+      @include mixins.transition(border-color, background-color);
+    }
+
+    &::after {
+      content: '';
+      @include mixins.box(16px, 4px solid var(--checkbox-hover-color));
+      border-radius: 4px;
+      position: absolute;
+      opacity: 0;
+      background-color: var(--checkbox-hover-color);
+      z-index: -1;
+      @include mixins.transition(border-color, background-color);
+    }
+    &:hover {
+      border-color: var(--brand-color);
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+
+  .ff-checkbox-input:checked + .ff-checkbox-custom {
+    background: var(--brand-color);
+    border-color: var(--brand-color);
+  }
+
+  .ff-checkbox-input:checked:hover + .ff-checkbox-custom {
+    background: var(--brand-color);
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  .ff-checkbox-input:disabled + .ff-checkbox-custom {
+    opacity: 0.5;
+    cursor: not-allowed;
+    border: 1px solid var(--checkbox-border-color);
+    &::after {
+      opacity: 0;
+    }
+  }
+  .ff-storybook-checkbox--partial {
+    background-color: var(--brand-color);
+    border: none;
+    &::before {
+      opacity: 1;
+    }
+
+    &:hover {
+      background-color: var(--brand-color);
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+}