change: [M3-6522] - Tag Component v7 story & cleanup (#9840)

* Tag v7 story & cleanup

* cleanup

* Added changeset: Tag Component v7 Story

* Feedback

packages/manager/.changeset/pr-9840-tech-stories-1698181491257.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Tag Component v7 Story ([#9840](https://github.com/linode/manager/pull/9840))

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

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Tag } from './Tag';
+
+import type { TagProps } from './Tag';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export const Default: StoryObj<TagProps> = {
+  render: (args: TagProps) => <Tag {...args} />,
+};
+
+export const WithMaxLength: StoryObj<TagProps> = {
+  render: (args: TagProps) => (
+    <Tag {...args} label="Long Label" maxLength={5} />
+  ),
+};
+
+const meta: Meta<TagProps> = {
+  args: {
+    colorVariant: 'lightBlue',
+    label: 'Tag',
+  },
+  component: Tag,
+  title: 'Components/Chip/Tag',
+};
+export default meta;

packages/manager/src/components/Tag/Tag.styles.ts

@@ -0,0 +1,101 @@
+import { styled } from '@mui/material/styles';
+
+import { Chip } from 'src/components/Chip';
+import { omittedProps } from 'src/utilities/omittedProps';
+
+import { StyledLinkButton } from '../Button/StyledLinkButton';
+
+import type { TagProps } from './Tag';
+
+export const StyledChip = styled(Chip, {
+  shouldForwardProp: omittedProps(['colorVariant', 'closeMenu', 'maxLength']),
+})<TagProps>(({ theme, ...props }) => ({
+  '& .MuiChip-label': {
+    '&:hover': {
+      borderBottomRightRadius: props.onDelete && 0,
+      borderTopRightRadius: props.onDelete && 0,
+    },
+    borderRadius: 4,
+    color: theme.name === 'light' ? '#3a3f46' : '#fff',
+    fontWeight: 'normal',
+    maxWidth: 350,
+    padding: '7px 10px',
+  },
+  // Targets first span (tag label)
+  '& > span': {
+    borderBottomRightRadius: 0,
+    borderRadius: 3,
+    borderTopRightRadius: 0,
+    padding: '7px 10px',
+  },
+  '&:focus': {
+    ['& .StyledDeleteButton']: {
+      color: theme.color.tagIcon,
+    },
+    backgroundColor: theme.color.tagButton,
+  },
+  // Overrides MUI chip default styles so these appear as separate elements.
+  '&:hover': {
+    ['& .StyledDeleteButton']: {
+      color: theme.color.tagIcon,
+    },
+    backgroundColor: theme.color.tagButton,
+  },
+  fontSize: '0.875rem',
+  height: 30,
+  padding: 0,
+  ...(props.colorVariant === 'blue' && {
+    '& > span': {
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+      },
+      color: 'white',
+    },
+
+    backgroundColor: theme.palette.primary.main,
+  }),
+  ...(props.colorVariant === 'lightBlue' && {
+    '& > span': {
+      '&:focus': {
+        backgroundColor: theme.color.tagButton,
+        color: theme.color.black,
+      },
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+      },
+    },
+    backgroundColor: theme.color.tagButton,
+  }),
+}));
+
+export const StyledDeleteButton = styled(StyledLinkButton, {
+  label: 'StyledDeleteButton',
+})(({ theme }) => ({
+  '& svg': {
+    borderRadius: 0,
+    color: theme.color.tagIcon,
+    height: 15,
+    width: 15,
+  },
+  '&:focus': {
+    backgroundColor: theme.bg.lightBlue1,
+    color: theme.color.black,
+  },
+  '&:hover': {
+    '& svg': {
+      color: 'white',
+    },
+    backgroundColor: theme.palette.primary.main,
+    color: 'white',
+  },
+  borderBottomRightRadius: 3,
+  borderLeft: `1px solid ${theme.name === 'light' ? '#fff' : '#2e3238'}`,
+  borderRadius: 0,
+  borderTopRightRadius: 3,
+  height: 30,
+  margin: 0,
+  minWidth: 30,
+  padding: theme.spacing(),
+}));

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

@@ -0,0 +1,46 @@
+import { fireEvent } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { Tag, TagProps } from './Tag';
+
+describe('Tag Component', () => {
+  const defaultProps: TagProps = {
+    colorVariant: 'lightBlue',
+    label: 'Test Label',
+  };
+
+  it('renders correctly with required props', () => {
+    const { getByRole, getByText } = renderWithTheme(<Tag {...defaultProps} />);
+    const tagElement = getByText('Test Label');
+    const searchButton = getByRole('button');
+
+    expect(tagElement).toBeInTheDocument();
+    expect(searchButton).toHaveAttribute(
+      'aria-label',
+      `Search for Tag 'Test Label'`
+    );
+  });
+
+  it('truncates the label if maxLength is provided', () => {
+    const { getByText } = renderWithTheme(
+      <Tag {...defaultProps} label="Long Label" maxLength={5} />
+    );
+    const tagElement = getByText('Lo...');
+    expect(tagElement).toBeInTheDocument();
+  });
+
+  it('calls closeMenu when clicked', () => {
+    const closeMenuMock = jest.fn();
+
+    const { getByText } = renderWithTheme(
+      <Tag {...defaultProps} closeMenu={closeMenuMock} />
+    );
+
+    const tagElement = getByText('Test Label');
+    fireEvent.click(tagElement);
+
+    expect(closeMenuMock).toHaveBeenCalled();
+  });
+});