-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #54 from dlabaj/tagComponent
- Loading branch information
Showing
8 changed files
with
373 additions
and
0 deletions.
There are no files selected for viewing
35 changes: 35 additions & 0 deletions
35
...tternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| --- | ||
| # 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. | ||
|
|
||
| ## 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" | ||
|
|
||
| ``` |
4 changes: 4 additions & 0 deletions
4
...ly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import React from 'react'; | ||
| import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount'; | ||
|
|
||
| export const TagCountDisabledExample: React.FunctionComponent = () => <TagCount /> |
4 changes: 4 additions & 0 deletions
4
...patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import React from 'react'; | ||
| import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount'; | ||
|
|
||
| export const TagCountDisabledExample: React.FunctionComponent = () => <TagCount count={10} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(<TagCount />)).toMatchSnapshot(); | ||
| }); | ||
|
|
||
|
|
||
| it('should render a tag count of 11', () => { | ||
| expect(render(<TagCount count={11} />)).toMatchSnapshot(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<TagCountProps> = ( | ||
| { count, | ||
| className, | ||
| ...props }: TagCountProps) => { | ||
| const classes = useStyles(); | ||
| const tagClasses = clsx(classes.buttonTagCount, className); | ||
| return ( | ||
| <Button aria-label="Tag count" {...props} variant="plain" isDisabled={!count} className={tagClasses}> | ||
| <Icon size="md"> | ||
| <TagIcon/> | ||
| </Icon> | ||
| <span className={classes.tagText}>{count}</span> | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| export default TagCount; |
269 changes: 269 additions & 0 deletions
269
packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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": <body> | ||
| <div> | ||
| <button | ||
| aria-disabled="true" | ||
| aria-label="Tag count" | ||
| class="pf-v5-c-button pf-m-plain pf-m-disabled buttonTagCount-0-2-1" | ||
| data-ouia-component-id="OUIA-Generated-Button-plain-1" | ||
| data-ouia-component-type="PF5/Button" | ||
| data-ouia-safe="true" | ||
| disabled="" | ||
| type="button" | ||
| > | ||
| <span | ||
| class="pf-v5-c-icon pf-m-md" | ||
| > | ||
| <span | ||
| class="pf-v5-c-icon__content" | ||
| > | ||
| <svg | ||
| aria-hidden="true" | ||
| class="pf-v5-svg" | ||
| fill="currentColor" | ||
| height="1em" | ||
| role="img" | ||
| viewBox="0 0 512 512" | ||
| width="1em" | ||
| > | ||
| <path | ||
| d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </span> | ||
| <span | ||
| class="tagText-0-2-2" | ||
| /> | ||
| </button> | ||
| </div> | ||
| </body>, | ||
| "container": <div> | ||
| <button | ||
| aria-disabled="true" | ||
| aria-label="Tag count" | ||
| class="pf-v5-c-button pf-m-plain pf-m-disabled buttonTagCount-0-2-1" | ||
| data-ouia-component-id="OUIA-Generated-Button-plain-1" | ||
| data-ouia-component-type="PF5/Button" | ||
| data-ouia-safe="true" | ||
| disabled="" | ||
| type="button" | ||
| > | ||
| <span | ||
| class="pf-v5-c-icon pf-m-md" | ||
| > | ||
| <span | ||
| class="pf-v5-c-icon__content" | ||
| > | ||
| <svg | ||
| aria-hidden="true" | ||
| class="pf-v5-svg" | ||
| fill="currentColor" | ||
| height="1em" | ||
| role="img" | ||
| viewBox="0 0 512 512" | ||
| width="1em" | ||
| > | ||
| <path | ||
| d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </span> | ||
| <span | ||
| class="tagText-0-2-2" | ||
| /> | ||
| </button> | ||
| </div>, | ||
| "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": <body> | ||
| <div> | ||
| <button | ||
| aria-disabled="false" | ||
| aria-label="Tag count" | ||
| class="pf-v5-c-button pf-m-plain buttonTagCount-0-2-1" | ||
| data-ouia-component-id="OUIA-Generated-Button-plain-2" | ||
| data-ouia-component-type="PF5/Button" | ||
| data-ouia-safe="true" | ||
| type="button" | ||
| > | ||
| <span | ||
| class="pf-v5-c-icon pf-m-md" | ||
| > | ||
| <span | ||
| class="pf-v5-c-icon__content" | ||
| > | ||
| <svg | ||
| aria-hidden="true" | ||
| class="pf-v5-svg" | ||
| fill="currentColor" | ||
| height="1em" | ||
| role="img" | ||
| viewBox="0 0 512 512" | ||
| width="1em" | ||
| > | ||
| <path | ||
| d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </span> | ||
| <span | ||
| class="tagText-0-2-2" | ||
| > | ||
| 11 | ||
| </span> | ||
| </button> | ||
| </div> | ||
| </body>, | ||
| "container": <div> | ||
| <button | ||
| aria-disabled="false" | ||
| aria-label="Tag count" | ||
| class="pf-v5-c-button pf-m-plain buttonTagCount-0-2-1" | ||
| data-ouia-component-id="OUIA-Generated-Button-plain-2" | ||
| data-ouia-component-type="PF5/Button" | ||
| data-ouia-safe="true" | ||
| type="button" | ||
| > | ||
| <span | ||
| class="pf-v5-c-icon pf-m-md" | ||
| > | ||
| <span | ||
| class="pf-v5-c-icon__content" | ||
| > | ||
| <svg | ||
| aria-hidden="true" | ||
| class="pf-v5-svg" | ||
| fill="currentColor" | ||
| height="1em" | ||
| role="img" | ||
| viewBox="0 0 512 512" | ||
| width="1em" | ||
| > | ||
| <path | ||
| d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </span> | ||
| <span | ||
| class="tagText-0-2-2" | ||
| > | ||
| 11 | ||
| </span> | ||
| </button> | ||
| </div>, | ||
| "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], | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { default } from './TagCount'; | ||
| export * from './TagCount'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters