From cb3c6e4e63c51eb582594f8d6090f1a6d2fb69dc Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 18 Oct 2023 09:10:59 -0400 Subject: [PATCH 1/2] feat(tagCount): Added tag count component Updated tests and docs. Updated with review comments. Update packages/module/src/TagCount/index.ts Co-authored-by: Filip Hlavac <50696716+fhlavac@users.noreply.github.com> Update packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Update packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Update packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Update packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Update packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Update packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Updated with review comments. Updated with review comments. --- .../examples/TagCount/TagCount.md | 36 +++ .../TagCount/TagCountDisabledExample.tsx | 4 + .../examples/TagCount/TagCountExample.tsx | 4 + .../module/src/TagCount/TagCount.test.tsx | 14 + packages/module/src/TagCount/TagCount.tsx | 42 +++ .../__snapshots__/TagCount.test.tsx.snap | 269 ++++++++++++++++++ packages/module/src/TagCount/index.ts | 2 + packages/module/src/index.ts | 3 + 8 files changed, 374 insertions(+) create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx create mode 100644 packages/module/src/TagCount/TagCount.test.tsx create mode 100644 packages/module/src/TagCount/TagCount.tsx create mode 100644 packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap create mode 100644 packages/module/src/TagCount/index.ts diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md new file mode 100644 index 00000000..e5b51e54 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md @@ -0,0 +1,36 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: extensions +subsection: Component groups +# Sidenav secondary level section +# should be the same for all markdown files +id: Tag count +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +source: react +# If you use typescript, the name of the interface to display props for +# These are found through the sourceProps function provided in patternfly-docs.source.js +propComponents: ['TagCount'] +--- +import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount'; + +The **tag count** component generates a tag icon that displays a number, which represents a count value. +display as disable with no value. + +## Examples + +### Basic tag count + +A basic tag count uses the `count` property to display the number of tagged items. + +```js file="./TagCountExample.tsx" + +``` + +### Disabled tag count + +When no value is provided to a tag count component, it will be styled as disabled. + +```js file="./TagCountDisabledExample.tsx" + +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx new file mode 100644 index 00000000..3ee38dcc --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount'; + +export const TagCountDisabledExample: React.FunctionComponent = () => diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx new file mode 100644 index 00000000..92507e4e --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount'; + +export const TagCountDisabledExample: React.FunctionComponent = () => diff --git a/packages/module/src/TagCount/TagCount.test.tsx b/packages/module/src/TagCount/TagCount.test.tsx new file mode 100644 index 00000000..055c39c0 --- /dev/null +++ b/packages/module/src/TagCount/TagCount.test.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import TagCount from './TagCount'; + +describe('TagCount component', () => { + it('should render a disabled tag count with no value', () => { + expect(render()).toMatchSnapshot(); + }); + + + it('should render a tag count of 11', () => { + expect(render()).toMatchSnapshot(); + }); +}); diff --git a/packages/module/src/TagCount/TagCount.tsx b/packages/module/src/TagCount/TagCount.tsx new file mode 100644 index 00000000..c0f09757 --- /dev/null +++ b/packages/module/src/TagCount/TagCount.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import clsx from 'clsx'; +import { Button, ButtonProps, Icon } from '@patternfly/react-core'; +import { TagIcon } from '@patternfly/react-icons'; +import { createUseStyles } from 'react-jss' + +const useStyles = createUseStyles({ + buttonTagCount: { + color: 'var(--pf-v5-global--icon--Color--light)', + display: 'flex', + alignItems: 'center' + }, + + tagText: { + marginLeft: 10 + } +}); + +export interface TagCountProps extends ButtonProps { + /** Count to display in tag count component */ + count?: number; + /** Additional classes added to the tag count component */ + className?: string; +} + +const TagCount: React.FunctionComponent = ( + { count, + className, + ...props }: TagCountProps) => { + const classes = useStyles(); + const tagClasses = clsx(classes.buttonTagCount, className); + return ( + + ); +}; + +export default TagCount; diff --git a/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap b/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap new file mode 100644 index 00000000..481232f9 --- /dev/null +++ b/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap @@ -0,0 +1,269 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TagCount component should render a disabled tag count with no value 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ +
+ , + "container":
+ +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`TagCount component should render a tag count of 11 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ +
+ , + "container":
+ +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; diff --git a/packages/module/src/TagCount/index.ts b/packages/module/src/TagCount/index.ts new file mode 100644 index 00000000..c1db7068 --- /dev/null +++ b/packages/module/src/TagCount/index.ts @@ -0,0 +1,2 @@ +export { default } from './TagCount'; +export * from './TagCount'; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index f21ce65d..437bd712 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -27,5 +27,8 @@ export * from './HorizontalNav'; export { default as NotAuthorized } from './NotAuthorized'; export * from './NotAuthorized'; +export { default as TagCount } from './TagCount'; +export * from './TagCount'; + export { default as UnavailableContent } from './UnavailableContent'; export * from './UnavailableContent'; From 17922636ff4259d9c766f072241fe160cdfd62a8 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 18 Oct 2023 09:22:10 -0400 Subject: [PATCH 2/2] Update packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../extensions/component-groups/examples/TagCount/TagCount.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md index e5b51e54..8110e6f0 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md @@ -15,7 +15,6 @@ propComponents: ['TagCount'] import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount'; The **tag count** component generates a tag icon that displays a number, which represents a count value. -display as disable with no value. ## Examples