diff --git a/src/components/Tags/Tags.stories.tsx b/src/components/Tags/Tags.stories.tsx index 10c55e3e..5cffe75c 100644 --- a/src/components/Tags/Tags.stories.tsx +++ b/src/components/Tags/Tags.stories.tsx @@ -1,7 +1,7 @@ import type { Meta } from '@storybook/react'; import { useState } from 'react'; -import TagsList, { Tags, TagsListProps } from './Tags'; +import TagsList, { Tag, TagsListProps } from './Tags'; const meta = { title: 'Components/Tags', @@ -68,14 +68,14 @@ export const Playground = ({ playgroundWidth, ...args }: StoryProps) => { }} > {tagsList.map((item) => ( - { setTagsList(tagsList.filter((item) => item.label !== tag)); }} - > + > ))} diff --git a/src/components/Tags/Tags.test.tsx b/src/components/Tags/Tags.test.tsx index 3c1a74fd..0ae551c2 100644 --- a/src/components/Tags/Tags.test.tsx +++ b/src/components/Tags/Tags.test.tsx @@ -2,9 +2,9 @@ import { useState } from 'react'; import { render, screen, renderHook } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { runCommonTests } from '../../utils/testUtils'; -import TagsList, { Tags, TagsProps } from './Tags'; +import TagsList, { Tag, TagProps } from './Tags'; -const useMockState = (tagsList: TagsProps[]) => { +const useMockState = (tagsList: TagProps[]) => { const [mockState, setMockState] = useState(tagsList); return { mockState, @@ -71,7 +71,7 @@ describe('Tags', () => { render( {tagsListExample.map((item) => ( - + ))} , ); @@ -90,7 +90,7 @@ describe('Tags', () => { render( setMockState([])}> {mockState.map((item) => ( - + ))} , ); @@ -103,14 +103,14 @@ describe('Tags', () => { render( {mockState.map((item) => ( - { setMockState(mockState.filter((item) => item.label !== tag)); }} - > + > ))} , ); @@ -131,7 +131,7 @@ describe('Tags', () => { render( setMockState([])}> {mockState.map((item) => ( - + ))} , ); @@ -146,14 +146,14 @@ describe('Tags', () => { render( {mockState.map((item) => ( - { setMockState(mockState.filter((item) => item.label !== tag)); }} - > + > ))} , ); diff --git a/src/components/Tags/Tags.tsx b/src/components/Tags/Tags.tsx index a9093321..21adca1a 100644 --- a/src/components/Tags/Tags.tsx +++ b/src/components/Tags/Tags.tsx @@ -24,10 +24,6 @@ export interface TagsListProps { * Child element pass in to display as item content. */ children?: React.ReactNode; - /** - * Individual Tag class - */ - tagClassName?: string; /** * `onRemove` callback provides the tag that is to be removed as a string */ @@ -38,7 +34,7 @@ export interface TagsListProps { clearAllLabel?: string; } -export interface TagsProps { +export interface TagProps { /** * Unique id for component testing */ @@ -57,7 +53,7 @@ export interface TagsProps { label: string; } -export const Tags = ({ id, className, onRemove, label }: TagsProps) => { +export const Tag = ({ id, className, onRemove, label }: TagProps) => { return (
{label}
@@ -70,14 +66,16 @@ export const Tags = ({ id, className, onRemove, label }: TagsProps) => { ); }; -const TagsList = ({ - className, - children, - tagClassName, - clearAllLabel = 'Clear All', - onClear, - ...props -}: TagsListProps) => { +/** + * ## Overview + * + * Overview of Tags component + * + * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=11648-3225&node-type=canvas&m=dev) + * + * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-tags--overview) + */ +const TagsList = ({ className, children, clearAllLabel = 'Clear All', onClear, ...props }: TagsListProps) => { const type = 'tags-list'; const { className: baseClassName, ...commonProps } = getCommonProps(props, 'TagsList'); const { id } = props; diff --git a/src/components/Tags/_tags.scss b/src/components/Tags/_tags.scss index 87121e48..d5673d73 100644 --- a/src/components/Tags/_tags.scss +++ b/src/components/Tags/_tags.scss @@ -1,6 +1,7 @@ @use '#scss/allPartials' as *; .#{$px}-tags-list { + align-items: center; display: flex; flex-flow: row wrap; gap: $spacing-sm;