Refactor: [M3-6522-selection-card] Selection Card: named exports and v7 story

packages/manager/.changeset/pr-9327-tech-stories-1687891798862.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MUI v5 Migration - Components > SelectionCard ([#9327](https://github.com/linode/manager/pull/9327))

packages/manager/src/components/SelectionCard/CardBase.styles.ts

@@ -0,0 +1,85 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import { styled } from '@mui/material/styles';
+import type { CardBaseProps } from './CardBase';
+
+export const CardBaseGrid = styled(Grid, {
+  label: 'CardBaseGrid',
+})<Partial<CardBaseProps>>(({ theme, ...props }) => ({
+  alignItems: 'center',
+  backgroundColor: props.checked ? theme.bg.lightBlue2 : theme.bg.offWhite,
+  border: `1px solid ${theme.bg.main}`,
+  borderColor: props.checked ? theme.palette.primary.main : undefined,
+  height: '100%',
+  margin: 0,
+  minHeight: 60,
+  padding: `0 ${theme.spacing(1)} !important`,
+  position: 'relative',
+  transition:
+    'background-color 225ms ease-in-out, border-color 225ms ease-in-out',
+  width: '100%',
+
+  '&:hover': {
+    backgroundColor: props.checked ? theme.bg.lightBlue2 : theme.bg.main,
+    borderColor: props.checked
+      ? theme.palette.primary.main
+      : theme.color.border2,
+  },
+
+  '&:before': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: 5,
+    height: '100%',
+    backgroundColor: 'transparent',
+    transition: theme.transitions.create('backgroundColor'),
+  },
+}));
+
+export const CardBaseIcon = styled(Grid, {
+  label: 'CardBaseIcon',
+})(() => ({
+  display: 'flex',
+  alignItems: 'flex-end',
+  justifyContent: 'flex-end',
+  '& svg, & span': {
+    fontSize: 32,
+    color: '#939598',
+  },
+  '& img': {
+    maxHeight: 32,
+    maxWidth: 32,
+  },
+}));
+
+export const CardBaseHeadings = styled(Grid, {
+  label: 'CardBaseHeadings',
+})(() => ({
+  flex: 1,
+  flexDirection: 'column',
+  justifyContent: 'space-around',
+  '& > div': {
+    lineHeight: 1.3,
+  },
+}));
+
+export const CardBaseHeading = styled('div', {
+  label: 'CardBaseHeading',
+})(({ theme }) => ({
+  fontFamily: theme.font.bold,
+  fontSize: '1rem',
+  color: theme.color.headline,
+  wordBreak: 'break-word',
+  display: 'flex',
+  alignItems: 'center',
+  columnGap: theme.spacing(2),
+}));
+
+export const CardBaseSubheading = styled('div', {
+  label: 'CardBaseSubheading',
+})(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontSize: '0.875rem',
+}));

packages/manager/src/components/SelectionCard/CardBase.test.tsx

@@ -1,7 +1,6 @@
-import { renderWithTheme } from 'src/utilities/testHelpers';
 import * as React from 'react';
-
-import CardBase from './index';
+import { CardBase } from './CardBase';
+import { renderWithTheme } from 'src/utilities/testHelpers';
 
 describe('CardBase component', () => {
   it('should render header decorations when supplied', () => {

packages/manager/src/components/SelectionCard/CardBase.tsx

@@ -1,91 +1,14 @@
 import * as React from 'react';
-import Grid from '@mui/material/Unstable_Grid2';
-import { styled } from '@mui/material/styles';
-import { SxProps } from '@mui/system';
-
-const CardBaseGrid = styled(Grid, {
-  label: 'CardBaseGrid',
-})<Partial<Props>>(({ theme, ...props }) => ({
-  alignItems: 'center',
-  backgroundColor: props.checked ? theme.bg.lightBlue2 : theme.bg.offWhite,
-  border: `1px solid ${theme.bg.main}`,
-  borderColor: props.checked ? theme.palette.primary.main : undefined,
-  height: '100%',
-  margin: 0,
-  minHeight: 60,
-  padding: `0 ${theme.spacing(1)} !important`,
-  position: 'relative',
-  transition:
-    'background-color 225ms ease-in-out, border-color 225ms ease-in-out',
-  width: '100%',
-
-  '&:hover': {
-    backgroundColor: props.checked ? theme.bg.lightBlue2 : theme.bg.main,
-    borderColor: props.checked
-      ? theme.palette.primary.main
-      : theme.color.border2,
-  },
-
-  '&:before': {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: 5,
-    height: '100%',
-    backgroundColor: 'transparent',
-    transition: theme.transitions.create('backgroundColor'),
-  },
-}));
-
-const CardBaseIcon = styled(Grid, {
-  label: 'CardBaseIcon',
-})(() => ({
-  display: 'flex',
-  alignItems: 'flex-end',
-  justifyContent: 'flex-end',
-  '& svg, & span': {
-    fontSize: 32,
-    color: '#939598',
-  },
-  '& img': {
-    maxHeight: 32,
-    maxWidth: 32,
-  },
-}));
-
-const CardBaseHeadings = styled(Grid, {
-  label: 'CardBaseHeadings',
-})(() => ({
-  flex: 1,
-  flexDirection: 'column',
-  justifyContent: 'space-around',
-  '& > div': {
-    lineHeight: 1.3,
-  },
-}));
-
-const CardBaseHeading = styled('div', {
-  label: 'CardBaseHeading',
-})(({ theme }) => ({
-  fontFamily: theme.font.bold,
-  fontSize: '1rem',
-  color: theme.color.headline,
-  wordBreak: 'break-word',
-  display: 'flex',
-  alignItems: 'center',
-  columnGap: theme.spacing(2),
-}));
-
-const CardBaseSubheading = styled('div', {
-  label: 'CardBaseSubheading',
-})(({ theme }) => ({
-  color: theme.palette.text.primary,
-  fontSize: '0.875rem',
-}));
-
-interface Props {
+import {
+  CardBaseGrid,
+  CardBaseHeadings,
+  CardBaseHeading,
+  CardBaseIcon,
+  CardBaseSubheading,
+} from './CardBase.styles';
+import type { SxProps } from '@mui/system';
+
+export interface CardBaseProps {
   checked?: boolean;
   heading: string | JSX.Element;
   headingDecoration?: JSX.Element;
@@ -97,8 +20,7 @@ interface Props {
   sxIcon?: SxProps;
   sxSubheading?: SxProps;
 }
-
-const CardBase = (props: Props) => {
+export const CardBase = (props: CardBaseProps) => {
   const {
     checked,
     heading,
@@ -138,5 +60,3 @@ const CardBase = (props: Props) => {
     </CardBaseGrid>
   );
 };
-
-export default CardBase;

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Alarm from '@mui/icons-material/Alarm';
+import InsertPhoto from '@mui/icons-material/InsertPhoto';
+import DE from 'flag-icons/flags/4x3/de.svg';
+import US from 'flag-icons/flags/4x3/us.svg';
+import { Chip } from 'src/components/core/Chip';
+import { SelectionCard } from './SelectionCard';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { SelectionCardProps } from './SelectionCard';
+
+const iconOptions = {
+  None: () => null,
+  Photo: () => <InsertPhoto />,
+  Alarm: () => <Alarm />,
+  'DE Flag': () => <DE width="32" height="24" viewBox="0 0 640 480" />,
+  'US Flag': () => <US width="32" height="24" viewBox="0 0 720 480" />,
+  'Arch Linux': () => <span className="fl-archlinux" />,
+  Debian: () => <span className="fl-debian" />,
+};
+
+const variantOptions = {
+  None: () => null,
+  Chip: () => <Chip label="DEFAULT" component="span" />,
+};
+
+export const Default: StoryObj<SelectionCardProps> = {
+  render: (args) => <SelectionCard {...args} />,
+};
+
+const meta: Meta<SelectionCardProps> = {
+  title: 'Components/SelectionCard',
+  component: SelectionCard,
+  args: {
+    heading: 'Photos',
+    subheadings: ['Use a photo', 'Select up to 3'],
+    checked: false,
+    disabled: false,
+    renderIcon: iconOptions.Photo,
+    renderVariant: variantOptions.Chip,
+    tooltip: '',
+  },
+  argTypes: {
+    renderIcon: {
+      control: { type: 'select' },
+      options: iconOptions,
+    },
+    renderVariant: {
+      control: { type: 'select' },
+      options: variantOptions,
+    },
+  },
+};
+
+export default meta;