From d8fffbc2857460600e2259c4d9ca8b619a28f99d Mon Sep 17 00:00:00 2001
From: William Kelley <williamkelley9@gmail.com>
Date: Thu, 30 May 2024 11:44:42 -0400
Subject: [PATCH] feat: add ArcUnits

---
 .../dual-radial-gauge.stories.tsx             | 33 ++++++++++++++-----
 .../src/ArcUnitLabel/ArcUnitLabelProps.ts     |  2 +-
 packages/components/src/ArcUnits/ArcUnits.tsx | 17 ++++++++++
 .../components/src/ArcUnits/ArcUnitsProps.ts  |  6 ++++
 packages/components/src/ArcUnits/index.ts     |  2 ++
 packages/components/src/index.ts              |  1 +
 packages/components/src/utils/arc-units.ts    |  6 ++++
 packages/components/src/utils/index.ts        |  1 +
 8 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 packages/components/src/ArcUnits/ArcUnits.tsx
 create mode 100644 packages/components/src/ArcUnits/ArcUnitsProps.ts
 create mode 100644 packages/components/src/ArcUnits/index.ts
 create mode 100644 packages/components/src/utils/arc-units.ts

diff --git a/packages/components/examples/report-card/empowerment-metric/dual-radial-gauge.stories.tsx b/packages/components/examples/report-card/empowerment-metric/dual-radial-gauge.stories.tsx
index d8a31d6f..e88ae1f7 100644
--- a/packages/components/examples/report-card/empowerment-metric/dual-radial-gauge.stories.tsx
+++ b/packages/components/examples/report-card/empowerment-metric/dual-radial-gauge.stories.tsx
@@ -7,6 +7,7 @@ import {
   ArcUnitLabel,
   ArcScale,
   Chart,
+  ArcUnits,
 } from '../../../src';
 
 const Neutral70 = '#EBECF0';
@@ -42,6 +43,8 @@ const ReportCardEmpowermentMetricDualRadialGauge = (props: {
   valueSecondary: number;
   radiusSecondary: number;
   radiusRatioSecondary: number;
+  // extra
+  unitsOffset?: number;
 }) => {
   const {
     valueMin,
@@ -52,6 +55,7 @@ const ReportCardEmpowermentMetricDualRadialGauge = (props: {
     radiusRatioPrimary,
     radiusSecondary,
     radiusRatioSecondary,
+    unitsOffset,
   } = props;
 
   return (
@@ -77,15 +81,17 @@ const ReportCardEmpowermentMetricDualRadialGauge = (props: {
           >
             <ArcSweep style={{ fill: Neutral70 }} />
             <ArcCircle at={valuePrimary} style={{ fill: Purple600 }} />
-            <ArcUnitLabel at={1} style={unitLabelStyle(1, valuePrimary)}>
-              Too easy
-            </ArcUnitLabel>
-            <ArcUnitLabel at={2} style={unitLabelStyle(2, valuePrimary)}>
-              Just right
-            </ArcUnitLabel>
-            <ArcUnitLabel at={3} style={unitLabelStyle(3, valuePrimary)}>
-              Too hard
-            </ArcUnitLabel>
+            <ArcUnits offset={unitsOffset}>
+              <ArcUnitLabel at={1} style={unitLabelStyle(1, valuePrimary)}>
+                Too easy
+              </ArcUnitLabel>
+              <ArcUnitLabel at={2} style={unitLabelStyle(2, valuePrimary)}>
+                Just right
+              </ArcUnitLabel>
+              <ArcUnitLabel at={3} style={unitLabelStyle(3, valuePrimary)}>
+                Too hard
+              </ArcUnitLabel>
+            </ArcUnits>
           </Arc>
           <Arc
             radius={radiusSecondary}
@@ -113,6 +119,7 @@ const meta: Meta<typeof ReportCardEmpowermentMetricDualRadialGauge> = {
     radiusRatioPrimary: 0.77,
     radiusSecondary: 93,
     radiusRatioSecondary: 0.87,
+    unitsOffset: 8,
   },
   argTypes: {
     valuePrimary: {
@@ -131,6 +138,14 @@ const meta: Meta<typeof ReportCardEmpowermentMetricDualRadialGauge> = {
         step: 1,
       },
     },
+    unitsOffset: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 16,
+        step: 1,
+      },
+    },
   },
 };
 
diff --git a/packages/components/src/ArcUnitLabel/ArcUnitLabelProps.ts b/packages/components/src/ArcUnitLabel/ArcUnitLabelProps.ts
index 778d1c36..6ddfd70f 100644
--- a/packages/components/src/ArcUnitLabel/ArcUnitLabelProps.ts
+++ b/packages/components/src/ArcUnitLabel/ArcUnitLabelProps.ts
@@ -8,7 +8,7 @@ export interface ArcUnitLabelProps
    */
   at: number;
   /**
-   * The offset of the unit label from the arc's (primary/outer) radius
+   * The offset of the unit label from the arc's (primary/outer) radius.
    */
   offset?: number;
   /**
diff --git a/packages/components/src/ArcUnits/ArcUnits.tsx b/packages/components/src/ArcUnits/ArcUnits.tsx
new file mode 100644
index 00000000..39ebca8b
--- /dev/null
+++ b/packages/components/src/ArcUnits/ArcUnits.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { ArcUnitsProps } from './ArcUnitsProps';
+
+export const ArcUnits = (props: ArcUnitsProps) => {
+  const { children, offset, ...other } = props;
+
+  return React.Children.map(children, (child) => {
+    if (React.isValidElement<Omit<ArcUnitsProps, 'children'>>(child)) {
+      return React.cloneElement(child, {
+        offset: child.props.offset ?? offset,
+        ...other,
+      });
+    }
+
+    return child;
+  });
+};
diff --git a/packages/components/src/ArcUnits/ArcUnitsProps.ts b/packages/components/src/ArcUnits/ArcUnitsProps.ts
new file mode 100644
index 00000000..f6f69498
--- /dev/null
+++ b/packages/components/src/ArcUnits/ArcUnitsProps.ts
@@ -0,0 +1,6 @@
+import React from 'react';
+import { ArcUnitsParams } from '../utils';
+
+export interface ArcUnitsProps extends ArcUnitsParams {
+  children: React.ReactNode;
+}
diff --git a/packages/components/src/ArcUnits/index.ts b/packages/components/src/ArcUnits/index.ts
new file mode 100644
index 00000000..8e8318b0
--- /dev/null
+++ b/packages/components/src/ArcUnits/index.ts
@@ -0,0 +1,2 @@
+export * from './ArcUnits';
+export * from './ArcUnitsProps';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index dc1809e1..bf8588f3 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -3,6 +3,7 @@ export * from './ArcCircle';
 export * from './ArcSegments';
 export * from './ArcSegmentsSweep';
 export * from './ArcSweep';
+export * from './ArcUnits';
 export * from './ArcUnitLabel';
 export * from './ArcScale';
 export * from './Bar';
diff --git a/packages/components/src/utils/arc-units.ts b/packages/components/src/utils/arc-units.ts
new file mode 100644
index 00000000..a45226a5
--- /dev/null
+++ b/packages/components/src/utils/arc-units.ts
@@ -0,0 +1,6 @@
+export type ArcUnitsParams = {
+  /**
+   * The offset of the unit label from the arc's (primary/outer) radius.
+   */
+  offset?: number;
+};
diff --git a/packages/components/src/utils/index.ts b/packages/components/src/utils/index.ts
index 8ee174d0..f1a2cb16 100644
--- a/packages/components/src/utils/index.ts
+++ b/packages/components/src/utils/index.ts
@@ -2,6 +2,7 @@ export * from './arc';
 export * from './arc-circle';
 export * from './arc-scale';
 export * from './arc-segments';
+export * from './arc-units';
 export * from './bar';
 export * from './bar-fill';
 export * from './bar-scale';