refactor: [M3-7575] CircleProgress and ColorPalette storybook v7 migrations

packages/manager/src/components/CircleProgress/CircleProgress.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { CircleProgress } from './CircleProgress';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof CircleProgress>;
+
+export const Default: Story = {
+  render: (args) => <CircleProgress {...args} />,
+};
+
+const meta: Meta<typeof CircleProgress> = {
+  component: CircleProgress,
+  title: 'Components/Loading States/Circle Progress',
+};
+
+export default meta;

packages/manager/src/components/CircleProgress/CircleProgress.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { CircleProgress } from './CircleProgress';
+
+const CONTENT_LOADING = 'Content is loading';
+
+describe('CircleProgress', () => {
+  it('renders a CircleProgress properly', () => {
+    const screen = renderWithTheme(<CircleProgress />);
+
+    const circleProgress = screen.getByLabelText(CONTENT_LOADING);
+    expect(circleProgress).toBeVisible();
+    const circle = screen.getByTestId('circle-progress');
+    expect(circle).toBeInTheDocument();
+    expect(circle).toHaveStyle('width: 124px; height: 124px;');
+    const innerCircle = screen.getByTestId('inner-circle-progress');
+    expect(innerCircle).toBeInTheDocument();
+  });
+
+  it('renders a mini CircleProgress', () => {
+    const screen = renderWithTheme(<CircleProgress mini />);
+
+    const circleProgress = screen.getByLabelText(CONTENT_LOADING);
+    expect(circleProgress).toBeVisible();
+    expect(circleProgress).toHaveStyle('width: 40px; height: 40px;');
+  });
+
+  it('sets a mini CircleProgress with no padding', () => {
+    const screen = renderWithTheme(<CircleProgress mini noPadding />);
+
+    const circleProgress = screen.getByLabelText(CONTENT_LOADING);
+    expect(circleProgress).toBeVisible();
+    expect(circleProgress).toHaveStyle('width: 22px; height: 22px;');
+  });
+
+  it('sets a mini CircleProgress with a custom size', () => {
+    const screen = renderWithTheme(<CircleProgress mini size={25} />);
+
+    const circleProgress = screen.getByLabelText(CONTENT_LOADING);
+    expect(circleProgress).toBeVisible();
+    expect(circleProgress).toHaveStyle('width: 25px; height: 25px;');
+  });
+
+  it('renders a CircleProgress without the inner circle', () => {
+    const screen = renderWithTheme(<CircleProgress noInner />);
+
+    const circleProgress = screen.getByLabelText(CONTENT_LOADING);
+    expect(circleProgress).toBeVisible();
+    const innerCircle = screen.queryByTestId('inner-circle-progress');
+    expect(innerCircle).not.toBeInTheDocument();
+  });
+});

packages/manager/src/components/CircleProgress/CircleProgress.tsx

@@ -9,26 +9,37 @@ import {
 import { omittedProps } from 'src/utilities/omittedProps';
 
 interface CircleProgressProps extends CircularProgressProps {
+  /**
+   * Additional child elements to pass in
+   */
   children?: JSX.Element;
-  className?: string;
+  /**
+   * Displays a smaller version of the circle progress.
+   */
   mini?: boolean;
+  /**
+   * If true, will not show an inner circle beneath the spinning circle
+   */
   noInner?: boolean;
+  /**
+   * Removes the padding for `mini` circle progresses only.
+   */
   noPadding?: boolean;
+  /**
+   * To be primarily used with mini and noPadding. Set spinner to a custom size.
+   */
   size?: number;
+  /**
+   * Additional styles to apply to the root element.
+   */
   sx?: SxProps;
 }
 
+/**
+ * Use for short, indeterminate activities requiring user attention.
+ */
 const CircleProgress = (props: CircleProgressProps) => {
-  const {
-    children,
-    className,
-    mini,
-    noInner,
-    noPadding,
-    size,
-    sx,
-    ...rest
-  } = props;
+  const { children, mini, noInner, noPadding, size, sx, ...rest } = props;
 
   const variant =
     typeof props.value === 'number' ? 'determinate' : 'indeterminate';
@@ -48,16 +59,12 @@ const CircleProgress = (props: CircleProgressProps) => {
   }
 
   return (
-    <StyledRootDiv
-      aria-label="Content is loading"
-      className={className}
-      sx={sx}
-    >
+    <StyledRootDiv aria-label="Content is loading" sx={sx}>
       {children !== undefined && (
         <Box sx={{ marginTop: 4, position: 'absolute' }}>{children}</Box>
       )}
       {noInner !== true && (
-        <StyledTopWrapperDiv>
+        <StyledTopWrapperDiv data-testid="inner-circle-progress">
           <StyledTopDiv />
         </StyledTopWrapperDiv>
       )}

packages/manager/src/components/ColorPalette/ColorPalette.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { ColorPalette } from './ColorPalette';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+export const Default: StoryObj<typeof ColorPalette> = {
+  render: () => <ColorPalette />,
+};
+
+const meta: Meta<typeof ColorPalette> = {
+  component: ColorPalette,
+  title: 'Design System/Color Palette',
+};
+
+export default meta;

packages/manager/src/components/ColorPalette/ColorPalette.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { ColorPalette } from './ColorPalette';
+
+describe('Color Palette', () => {
+  it('renders the Color Palette', () => {
+    const { container, getByText } = renderWithTheme(<ColorPalette />);
+
+    getByText('Primary Colors');
+    getByText('Etc.');
+    getByText('Background Colors');
+    getByText('Typography Colors');
+    getByText('Border Colors');
+
+    // there are 55 individual colors in our Color Palette currently
+    const colors = container.querySelectorAll('[class="css-n6e2zj-swatch"]');
+    expect(colors.length).toBe(55);
+  });
+});

packages/manager/src/components/ColorPalette/ColorPalette.tsx

@@ -42,6 +42,16 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
 }));
 
+/**
+ * Add a new color to the palette, especially another tint of gray or blue, only after exhausting the option of using an existing color.
+ *
+ * - Colors used in light mode are located in `foundations/light.ts
+ * - Colors used in dark mode are located in `foundations/dark.ts`
+ *
+ * If a color does not exist in the current palette and is only used once, consider applying the color conditionally:
+ *
+ * `theme.name === 'light' ? '#fff' : '#000'`
+ */
 export const ColorPalette = () => {
   const { classes } = useStyles();
   const theme = useTheme();