Skip to content

feat(tagCount): Added tag count component. #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fhlavac merged 2 commits into from
Oct 18, 2023
Merged

feat(tagCount): Added tag count component. #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb3c6e4
feat(tagCount): Added tag count component
dlabaj Oct 18, 2023
1792263
Update packages/module/patternfly-docs/content/extensions/component-g…
dlabaj Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions ...tternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md
View file
Open in desktop
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 ...ly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx
View file
Open in desktop
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 ...patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx
View file
Open in desktop
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} />
14 changes: 14 additions & 0 deletions packages/module/src/TagCount/TagCount.test.tsx
View file
Open in desktop
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();
});
});
42 changes: 42 additions & 0 deletions packages/module/src/TagCount/TagCount.tsx
View file
Open in desktop
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 packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap
View file
Open in desktop
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],
}
`;
2 changes: 2 additions & 0 deletions packages/module/src/TagCount/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { default } from './TagCount';
export * from './TagCount';
3 changes: 3 additions & 0 deletions packages/module/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';