LG-5623 feat: add variant to GalleryIndicator component (#3232)

* LG-5623 feat: add variant to GalleryIndicator component

* cleanup, exported Variant

Author: adamrasheed

.changeset/sad-apes-talk.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/gallery-indicator': minor
+---
+
+Add variant allowing user to pick between default and BaseGreen

packages/gallery-indicator/src/GalleryIndicator.stories.tsx

@@ -6,7 +6,7 @@ import {
 } from '@lg-tools/storybook-utils';
 import { StoryFn } from '@storybook/react';
 
-import { GalleryIndicator } from '.';
+import { GalleryIndicator, Variant } from '.';
 
 const meta: StoryMetaType<typeof GalleryIndicator> = {
   title: 'Components/Display/GalleryIndicator',
@@ -20,13 +20,15 @@ const meta: StoryMetaType<typeof GalleryIndicator> = {
       combineArgs: {
         darkMode: [false, true],
         activeIndex: [0, 1, 2, 3],
+        variant: Object.values(Variant),
       },
     },
   },
   args: {
     activeIndex: 0,
     length: 4,
     darkMode: false,
+    variant: Variant.Default,
   },
   argTypes: {
     darkMode: storybookArgTypes.darkMode,
@@ -42,6 +44,11 @@ const meta: StoryMetaType<typeof GalleryIndicator> = {
         max: 10,
       },
     },
+    variant: {
+      control: { type: 'select' },
+      options: Object.values(Variant),
+      defaultValue: Variant.Default,
+    },
   },
 };
 

packages/gallery-indicator/src/GalleryIndicator/GalleryIndicator.styles.ts

@@ -1,7 +1,9 @@
 import { css, cx } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
-import { color, spacing, transitionDuration } from '@leafygreen-ui/tokens';
+import { spacing, transitionDuration } from '@leafygreen-ui/tokens';
+
+import { Variant } from './GalleryIndicator.types';
 
 const TRANSITION_DURATION_SLOW = transitionDuration.slower;
 const TRANSITION_DURATION_DEFAULT = transitionDuration.default;
@@ -25,23 +27,48 @@ export const getGalleryIndicatorStyles = ({
     className,
   );
 
+const baseColorSet: Record<Theme, Record<Variant, string>> = {
+  [Theme.Light]: {
+    [Variant.Default]: palette.gray.light2,
+    [Variant.BaseGreen]: palette.green.dark2,
+  },
+  [Theme.Dark]: {
+    [Variant.Default]: palette.gray.dark2,
+    [Variant.BaseGreen]: palette.green.light3,
+  },
+};
+
+const activeColorSet: Record<Theme, Record<Variant, string>> = {
+  [Theme.Light]: {
+    [Variant.Default]: palette.gray.base,
+    [Variant.BaseGreen]: palette.green.base,
+  },
+  [Theme.Dark]: {
+    [Variant.Default]: palette.gray.base,
+    [Variant.BaseGreen]: palette.green.base,
+  },
+};
+
 export const getIndicatorStyles = ({
   theme,
   isActive,
+  variant,
 }: {
   theme: Theme;
   isActive: boolean;
-}) =>
-  cx(
+  variant: Variant;
+}) => {
+  const baseColor = baseColorSet[theme][variant];
+  const activeColor = activeColorSet[theme][variant];
+
+  return cx(
     css`
       &::after {
         content: '';
         display: block;
         width: ${DOT_SIZE}px;
         height: ${DOT_SIZE}px;
-        background-color: ${theme === Theme.Light
-          ? palette.gray.light2
-          : palette.gray.dark2};
+        background-color: ${baseColor};
         border-radius: 50%;
         transition-property: background-color, width, border-radius;
         transition-duration: ${TRANSITION_DURATION_SLOW}ms,
@@ -54,8 +81,9 @@ export const getIndicatorStyles = ({
         &::after {
           width: ${ACTIVE_DOT_SIZE}px;
           border-radius: 100px;
-          background-color: ${color[theme].icon.secondary.default};
+          background-color: ${activeColor};
         }
       `]: isActive,
     },
   );
+};

packages/gallery-indicator/src/GalleryIndicator/GalleryIndicator.tsx

@@ -8,8 +8,11 @@ import {
   getGalleryIndicatorStyles,
   getIndicatorStyles,
 } from './GalleryIndicator.styles';
-import { GalleryIndicatorProps } from './GalleryIndicator.types';
+import { GalleryIndicatorProps, Variant } from './GalleryIndicator.types';
 
+/**
+ * GalleryIndicator is a component that displays a series of dots to indicate the current active index in a gallery.
+ */
 export const GalleryIndicator = React.forwardRef<
   HTMLUListElement,
   GalleryIndicatorProps
@@ -20,6 +23,7 @@ export const GalleryIndicator = React.forwardRef<
       length,
       activeIndex,
       className,
+      variant = Variant.Default,
       'data-lgid': dataLgId,
       ...rest
     }: GalleryIndicatorProps,
@@ -43,7 +47,7 @@ export const GalleryIndicator = React.forwardRef<
               key={i}
               data-testid={lgIds.indicator}
               data-lgid={lgIds.indicator}
-              className={getIndicatorStyles({ theme, isActive })}
+              className={getIndicatorStyles({ theme, isActive, variant })}
               data-active={isActive}
             />
           );

packages/gallery-indicator/src/GalleryIndicator/GalleryIndicator.types.ts

@@ -15,4 +15,17 @@ export interface GalleryIndicatorProps
    * The index of the active dot`
    */
   activeIndex: number;
+
+  /**
+   * The GalleryIndicator's style variant
+   *
+   * @default 'default'
+   */
+  variant?: Variant;
 }
+
+export const Variant = {
+  Default: 'default',
+  BaseGreen: 'baseGreen',
+} as const;
+export type Variant = (typeof Variant)[keyof typeof Variant];

packages/gallery-indicator/src/GalleryIndicator/index.ts

@@ -1,2 +1,2 @@
 export { GalleryIndicator } from './GalleryIndicator';
-export { type GalleryIndicatorProps } from './GalleryIndicator.types';
+export { type GalleryIndicatorProps, Variant } from './GalleryIndicator.types';

packages/gallery-indicator/src/index.ts

@@ -1,5 +1,6 @@
+export { GalleryIndicator } from './GalleryIndicator';
 export {
-  GalleryIndicator,
   type GalleryIndicatorProps,
-} from './GalleryIndicator';
+  Variant,
+} from './GalleryIndicator/GalleryIndicator.types';
 export { DEFAULT_LGID_ROOT, getLgIds } from './utils';