feat(DataBar)!: remove top-level sub-component(s) (#1686)

- in newly composed component also use code block for prop documentation
chanzuckerberg · Jul 19, 2023 · b4b9276 · b4b9276
1 parent 8743e62
commit b4b9276
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 113 deletions.
diff --git a/src/components/DataBar/DataBar.module.css b/src/components/DataBar/DataBar.module.css
@@ -66,3 +66,40 @@
 .data-bar__segment-space--incomplete {
   width: calc(100% + 2 * var(--eds-theme-border-width) - 0.5 * var(--data-bar-height));
 }
+
+/*------------------------------------*\
+    # DATA BAR SEGMENT
+\*------------------------------------*/
+
+/**
+ * A block that represents its progress in a data bar.
+ */
+.data-bar-segment {
+  height: 100%;
+}
+
+/**
+ * The pointer cursor indicates that the element is hoverable.
+ * The non hoverable case is the default cursor, used for the empty state indicator.
+ */
+.data-bar-segment--hoverable:hover {
+  cursor: pointer;
+}
+
+/**
+ * The color variants of the data bar segments.
+ */
+.data-bar-segment--brand {
+  background-color: var(--eds-theme-color-background-brand-primary-strong);
+}
+/* prettier-ignore */
+.data-bar-segment--brand.data-bar-segment--hoverable:hover {
+  background-color: var(--eds-theme-color-background-brand-primary-strong-hover);
+}
+
+.data-bar-segment--success {
+  background-color: var(--eds-theme-color-icon-utility-success);
+}
+.data-bar-segment--success.data-bar-segment--hoverable:hover {
+  background-color: var(--eds-theme-color-icon-utility-success-hover);
+}
diff --git a/src/components/DataBar/DataBar.tsx b/src/components/DataBar/DataBar.tsx
@@ -1,10 +1,9 @@
 import clsx from 'clsx';
 import React from 'react';
 import { useId } from '../../util/useId';
-
-import DataBarSegment from '../DataBarSegment';
-import type { Variants } from '../DataBarSegment';
 import Text from '../Text';
+import Tooltip from '../Tooltip';
+
 import styles from './DataBar.module.css';
 
 type Segment = {
@@ -18,7 +17,28 @@ type Segment = {
   value: number;
 };
 
-export type Props = {
+type Variant = 'brand' | 'success';
+
+export type DataBarSegmentProps = {
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+  /**
+   * Tooltip text to be displayed when the segment is hovered.
+   */
+  text?: string;
+  /**
+   * Width that the segment should consume.
+   */
+  width: string;
+  /**
+   * Color variant of the individual segment.
+   */
+  variant?: Variant;
+} & React.HTMLAttributes<HTMLElement>;
+
+export type DataBarProps = {
   /**
    * CSS class names that can be appended to the component.
    */
@@ -39,7 +59,7 @@ export type Props = {
   /**
    * Color variant of the data bar. Decorates the segments.
    */
-  variant?: Variants;
+  variant?: Variant;
 } & React.HTMLAttributes<HTMLElement>;
 
 /**
@@ -67,7 +87,7 @@ export const DataBar = ({
   segments,
   variant = 'brand',
   ...other
-}: Props) => {
+}: DataBarProps) => {
   /**
    * Calculates the total of the segment values.
    */
@@ -119,7 +139,7 @@ export const DataBar = ({
     /* Ensures a minimumum width of 5% for the segment. */
     const percentage = Math.max(5, (segment.value / max) * 100);
     segmentComponents.push(
-      <DataBarSegment
+      <DataBar.Segment
         aria-label={segment.text}
         key={`segment-${index}`}
         onKeyDown={(e) => handleOnKeyDown(e, index)}
@@ -138,7 +158,7 @@ export const DataBar = ({
    */
   if (!segmentComponents.length) {
     segmentComponents.push(
-      <DataBarSegment
+      <DataBar.Segment
         key="segment-empty"
         role="gridcell"
         variant={variant}
@@ -184,3 +204,51 @@ export const DataBar = ({
     </div>
   );
 };
+
+/**
+ * A segment sub component for the <DataBar>.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * <DataBar.Segment text="Segment 1" width="40%" />
+ * ```
+ */
+const DataBarSegment = React.forwardRef(
+  (
+    {
+      className,
+      text,
+      width,
+      variant = 'brand',
+      ...other
+    }: DataBarSegmentProps,
+    ref: React.ForwardedRef<HTMLDivElement>,
+  ) => {
+    const componentClassName = clsx(
+      styles['data-bar-segment'],
+      styles[`data-bar-segment--${variant}`],
+      text && styles['data-bar-segment--hoverable'],
+      className,
+    );
+    const segmentComponent = (
+      <div
+        className={componentClassName}
+        ref={ref}
+        style={{ width: `${width}` }}
+        {...other}
+      />
+    );
+    return text ? (
+      <Tooltip align="bottom" text={text}>
+        {segmentComponent}
+      </Tooltip>
+    ) : (
+      segmentComponent
+    );
+  },
+);
+
+DataBarSegment.displayName = 'DataBarSegment'; // Satisfy eslint
+
+DataBar.Segment = DataBarSegment;
diff --git a/src/components/DataBarSegment/DataBarSegment.module.css b/src/components/DataBarSegment/DataBarSegment.module.css
diff --git a/src/components/DataBarSegment/DataBarSegment.tsx b/src/components/DataBarSegment/DataBarSegment.tsx
diff --git a/src/components/DataBarSegment/index.ts b/src/components/DataBarSegment/index.ts
diff --git a/src/index.ts b/src/index.ts
@@ -18,7 +18,6 @@ export { default as CheckboxInput } from './components/CheckboxInput';
 export { default as CheckboxLabel } from './components/CheckboxLabel';
 export { default as ClickableStyle } from './components/ClickableStyle';
 export { default as DataBar } from './components/DataBar';
-export { default as DataBarSegment } from './components/DataBarSegment';
 export { default as DragDrop } from './components/DragDrop';
 export { default as DragDropContainer } from './components/DragDropContainer';
 export { default as DragDropContainerHeader } from './components/DragDropContainerHeader';