Skip to content

Commit 66d0dcb

Browse files
dlabajedonehoo
dlabaj
and
edonehoo
committed
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 <[email protected]> Update packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md Co-authored-by: Erin Donehoo <[email protected]> Update packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md Co-authored-by: Erin Donehoo <[email protected]> Update packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md Co-authored-by: Erin Donehoo <[email protected]> Update packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md Co-authored-by: Erin Donehoo <[email protected]> Update packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md Co-authored-by: Erin Donehoo <[email protected]> Update packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md Co-authored-by: Erin Donehoo <[email protected]>
1 parent 4a2bfb5 commit 66d0dcb

File tree

8 files changed

+372
-0
lines changed

8 files changed

+372
-0
lines changed

‎packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
# Sidenav top-level section
3+
# should be the same for all markdown files
4+
section: extensions
5+
subsection: Component groups
6+
# Sidenav secondary level section
7+
# should be the same for all markdown files
8+
id: Tag count
9+
# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
10+
source: react
11+
# If you use typescript, the name of the interface to display props for
12+
# These are found through the sourceProps function provided in patternfly-docs.source.js
13+
propComponents: ['TagCount']
14+
---
15+
16+
import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount';
17+
18+
The **tag count** component generates a tag icon that displays a number, which represents a count value.
19+
display as disable with no value.
20+
21+
## Examples
22+
23+
### Basic tag count
24+
A basic tag count uses the `count` property to display the number of tagged items.
25+
26+
27+
```js file="./TagCountExample.tsx"
28+
29+
```
30+
31+
### Disabled tag count
32+
33+
When no value is provided to a tag count component, it will be styled as disabled.
34+
35+
36+
```js file="./TagCountDisabledExample.tsx"
37+
38+
```

‎packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react';
2+
import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount';
3+
4+
export const TagCountDisabledExample: React.FunctionComponent = () => <TagCount />

‎packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react';
2+
import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount';
3+
4+
export const TagCountDisabledExample: React.FunctionComponent = () => <TagCount count={10} />

‎packages/module/src/TagCount/TagCount.test.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import TagCount from './TagCount';
4+
5+
describe('TagCount component', () => {
6+
it('should render a disabled tag count with no value', () => {
7+
expect(render(<TagCount />)).toMatchSnapshot();
8+
});
9+
10+
11+
it('should render a tag count of 11', () => {
12+
expect(render(<TagCount count={11} />)).toMatchSnapshot();
13+
});
14+
});

‎packages/module/src/TagCount/TagCount.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import { Button, ButtonProps, Icon } from '@patternfly/react-core';
4+
import { TagIcon } from '@patternfly/react-icons';
5+
import { createUseStyles } from 'react-jss'
6+
7+
const useStyles = createUseStyles({
8+
buttonTagCount: {
9+
color: 'var(--pf-v5-global--icon--Color--light)',
10+
display: 'flex',
11+
alignItems: 'center'
12+
},
13+
14+
tagText: {
15+
marginLeft: 10
16+
}
17+
});
18+
19+
export interface TagCountProps extends ButtonProps {
20+
/** Count to display in tag count component */
21+
count?: number;
22+
/** Additional classes added to the tag count component */
23+
className?: string;
24+
}
25+
26+
const TagCount: React.FunctionComponent<TagCountProps> = (
27+
{ count,
28+
className,
29+
...props }: TagCountProps) => {
30+
const classes = useStyles();
31+
const tagClasses = clsx(classes.buttonTagCount, className);
32+
return (
33+
<Button aria-label="Tag count" {...props} variant="plain" isDisabled={!count} className={tagClasses}>
34+
<Icon size="md">
35+
<TagIcon/>
36+
</Icon>
37+
<span className={classes.tagText}>{count}</span>
38+
</Button>
39+
);
40+
};
41+
42+
export default TagCount;

‎packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`TagCount component should render a disabled tag count with no value 1`] = `
4+
{
5+
"asFragment": [Function],
6+
"baseElement": <body>
7+
<div>
8+
<button
9+
aria-disabled="true"
10+
class="pf-v5-c-button pf-m-plain pf-m-disabled buttonTagCount-0-2-1"
11+
data-ouia-component-id="OUIA-Generated-Button-plain-1"
12+
data-ouia-component-type="PF5/Button"
13+
data-ouia-safe="true"
14+
disabled=""
15+
type="button"
16+
>
17+
<span
18+
class="pf-v5-c-icon pf-m-md"
19+
>
20+
<span
21+
class="pf-v5-c-icon__content"
22+
>
23+
<svg
24+
aria-hidden="true"
25+
class="pf-v5-svg"
26+
fill="currentColor"
27+
height="1em"
28+
role="img"
29+
viewBox="0 0 512 512"
30+
width="1em"
31+
>
32+
<path
33+
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"
34+
/>
35+
</svg>
36+
</span>
37+
</span>
38+
<span
39+
class="tagText-0-2-2"
40+
/>
41+
</button>
42+
</div>
43+
</body>,
44+
"container": <div>
45+
<button
46+
aria-disabled="true"
47+
class="pf-v5-c-button pf-m-plain pf-m-disabled buttonTagCount-0-2-1"
48+
data-ouia-component-id="OUIA-Generated-Button-plain-1"
49+
data-ouia-component-type="PF5/Button"
50+
data-ouia-safe="true"
51+
disabled=""
52+
type="button"
53+
>
54+
<span
55+
class="pf-v5-c-icon pf-m-md"
56+
>
57+
<span
58+
class="pf-v5-c-icon__content"
59+
>
60+
<svg
61+
aria-hidden="true"
62+
class="pf-v5-svg"
63+
fill="currentColor"
64+
height="1em"
65+
role="img"
66+
viewBox="0 0 512 512"
67+
width="1em"
68+
>
69+
<path
70+
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"
71+
/>
72+
</svg>
73+
</span>
74+
</span>
75+
<span
76+
class="tagText-0-2-2"
77+
/>
78+
</button>
79+
</div>,
80+
"debug": [Function],
81+
"findAllByAltText": [Function],
82+
"findAllByDisplayValue": [Function],
83+
"findAllByLabelText": [Function],
84+
"findAllByPlaceholderText": [Function],
85+
"findAllByRole": [Function],
86+
"findAllByTestId": [Function],
87+
"findAllByText": [Function],
88+
"findAllByTitle": [Function],
89+
"findByAltText": [Function],
90+
"findByDisplayValue": [Function],
91+
"findByLabelText": [Function],
92+
"findByPlaceholderText": [Function],
93+
"findByRole": [Function],
94+
"findByTestId": [Function],
95+
"findByText": [Function],
96+
"findByTitle": [Function],
97+
"getAllByAltText": [Function],
98+
"getAllByDisplayValue": [Function],
99+
"getAllByLabelText": [Function],
100+
"getAllByPlaceholderText": [Function],
101+
"getAllByRole": [Function],
102+
"getAllByTestId": [Function],
103+
"getAllByText": [Function],
104+
"getAllByTitle": [Function],
105+
"getByAltText": [Function],
106+
"getByDisplayValue": [Function],
107+
"getByLabelText": [Function],
108+
"getByPlaceholderText": [Function],
109+
"getByRole": [Function],
110+
"getByTestId": [Function],
111+
"getByText": [Function],
112+
"getByTitle": [Function],
113+
"queryAllByAltText": [Function],
114+
"queryAllByDisplayValue": [Function],
115+
"queryAllByLabelText": [Function],
116+
"queryAllByPlaceholderText": [Function],
117+
"queryAllByRole": [Function],
118+
"queryAllByTestId": [Function],
119+
"queryAllByText": [Function],
120+
"queryAllByTitle": [Function],
121+
"queryByAltText": [Function],
122+
"queryByDisplayValue": [Function],
123+
"queryByLabelText": [Function],
124+
"queryByPlaceholderText": [Function],
125+
"queryByRole": [Function],
126+
"queryByTestId": [Function],
127+
"queryByText": [Function],
128+
"queryByTitle": [Function],
129+
"rerender": [Function],
130+
"unmount": [Function],
131+
}
132+
`;
133+
134+
exports[`TagCount component should render a tag count of 11 1`] = `
135+
{
136+
"asFragment": [Function],
137+
"baseElement": <body>
138+
<div>
139+
<button
140+
aria-disabled="false"
141+
class="pf-v5-c-button pf-m-plain buttonTagCount-0-2-1"
142+
data-ouia-component-id="OUIA-Generated-Button-plain-2"
143+
data-ouia-component-type="PF5/Button"
144+
data-ouia-safe="true"
145+
type="button"
146+
>
147+
<span
148+
class="pf-v5-c-icon pf-m-md"
149+
>
150+
<span
151+
class="pf-v5-c-icon__content"
152+
>
153+
<svg
154+
aria-hidden="true"
155+
class="pf-v5-svg"
156+
fill="currentColor"
157+
height="1em"
158+
role="img"
159+
viewBox="0 0 512 512"
160+
width="1em"
161+
>
162+
<path
163+
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"
164+
/>
165+
</svg>
166+
</span>
167+
</span>
168+
<span
169+
class="tagText-0-2-2"
170+
>
171+
11
172+
</span>
173+
</button>
174+
</div>
175+
</body>,
176+
"container": <div>
177+
<button
178+
aria-disabled="false"
179+
class="pf-v5-c-button pf-m-plain buttonTagCount-0-2-1"
180+
data-ouia-component-id="OUIA-Generated-Button-plain-2"
181+
data-ouia-component-type="PF5/Button"
182+
data-ouia-safe="true"
183+
type="button"
184+
>
185+
<span
186+
class="pf-v5-c-icon pf-m-md"
187+
>
188+
<span
189+
class="pf-v5-c-icon__content"
190+
>
191+
<svg
192+
aria-hidden="true"
193+
class="pf-v5-svg"
194+
fill="currentColor"
195+
height="1em"
196+
role="img"
197+
viewBox="0 0 512 512"
198+
width="1em"
199+
>
200+
<path
201+
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"
202+
/>
203+
</svg>
204+
</span>
205+
</span>
206+
<span
207+
class="tagText-0-2-2"
208+
>
209+
11
210+
</span>
211+
</button>
212+
</div>,
213+
"debug": [Function],
214+
"findAllByAltText": [Function],
215+
"findAllByDisplayValue": [Function],
216+
"findAllByLabelText": [Function],
217+
"findAllByPlaceholderText": [Function],
218+
"findAllByRole": [Function],
219+
"findAllByTestId": [Function],
220+
"findAllByText": [Function],
221+
"findAllByTitle": [Function],
222+
"findByAltText": [Function],
223+
"findByDisplayValue": [Function],
224+
"findByLabelText": [Function],
225+
"findByPlaceholderText": [Function],
226+
"findByRole": [Function],
227+
"findByTestId": [Function],
228+
"findByText": [Function],
229+
"findByTitle": [Function],
230+
"getAllByAltText": [Function],
231+
"getAllByDisplayValue": [Function],
232+
"getAllByLabelText": [Function],
233+
"getAllByPlaceholderText": [Function],
234+
"getAllByRole": [Function],
235+
"getAllByTestId": [Function],
236+
"getAllByText": [Function],
237+
"getAllByTitle": [Function],
238+
"getByAltText": [Function],
239+
"getByDisplayValue": [Function],
240+
"getByLabelText": [Function],
241+
"getByPlaceholderText": [Function],
242+
"getByRole": [Function],
243+
"getByTestId": [Function],
244+
"getByText": [Function],
245+
"getByTitle": [Function],
246+
"queryAllByAltText": [Function],
247+
"queryAllByDisplayValue": [Function],
248+
"queryAllByLabelText": [Function],
249+
"queryAllByPlaceholderText": [Function],
250+
"queryAllByRole": [Function],
251+
"queryAllByTestId": [Function],
252+
"queryAllByText": [Function],
253+
"queryAllByTitle": [Function],
254+
"queryByAltText": [Function],
255+
"queryByDisplayValue": [Function],
256+
"queryByLabelText": [Function],
257+
"queryByPlaceholderText": [Function],
258+
"queryByRole": [Function],
259+
"queryByTestId": [Function],
260+
"queryByText": [Function],
261+
"queryByTitle": [Function],
262+
"rerender": [Function],
263+
"unmount": [Function],
264+
}
265+
`;

‎packages/module/src/TagCount/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './TagCount';
2+
export * from './TagCount';

‎packages/module/src/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,6 @@ export * from './NotAuthorized';
2929

3030
export { default as UnavailableContent } from './UnavailableContent';
3131
export * from './UnavailableContent';
32+
33+
export { default as TagCount } from './TagCount';
34+
export * from './TagCount';

0 commit comments

Comments
 (0)