Skip to content

Commit 695905d

Browse files
fhlavacfhlavac
authored
Merge pull request #54 from dlabaj/tagComponent
2 parents 4a2bfb5 + 1792263 commit 695905d

8 files changed

Lines changed: 373 additions & 0 deletions

File tree

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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+
import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount';
16+
17+
The **tag count** component generates a tag icon that displays a number, which represents a count value.
18+
19+
## Examples
20+
21+
### Basic tag count
22+
23+
A basic tag count uses the `count` property to display the number of tagged items.
24+
25+
```js file="./TagCountExample.tsx"
26+
27+
```
28+
29+
### Disabled tag count
30+
31+
When no value is provided to a tag count component, it will be styled as disabled.
32+
33+
```js file="./TagCountDisabledExample.tsx"
34+
35+
```

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

‎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
@@ -27,5 +27,8 @@ export * from './HorizontalNav';
2727
export { default as NotAuthorized } from './NotAuthorized';
2828
export * from './NotAuthorized';
2929

30+
export { default as TagCount } from './TagCount';
31+
export * from './TagCount';
32+
3033
export { default as UnavailableContent } from './UnavailableContent';
3134
export * from './UnavailableContent';

0 commit comments

Comments
 (0)