Skip to content

Commit e872aa1

Browse files
dlabajdlabaj
authored
Merge pull request #65 from dlabaj/hover-issue
fix(bug): Updated code to use actionable card.
2 parents 22bae3a + 86b939f commit e872aa1

File tree

3 files changed

+101
-29
lines changed

3 files changed

+101
-29
lines changed

‎package.json‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"eslint-plugin-markdown": "^1.0.2",
3131
"eslint-config-standard-with-typescript": "^23.0.0",
3232
"eslint-plugin-n": "^15.0.0",
33-
"eslint-plugin-patternfly-react":"^4.80.5-alpha.0",
33+
"eslint-plugin-patternfly-react": "^4.80.5-alpha.0",
3434
"eslint-plugin-import": "^2.25.2",
3535
"eslint-plugin-promise": "^6.0.0",
3636
"eslint-config-prettier": "8.5.0",
@@ -40,19 +40,20 @@
4040
"@typescript-eslint/eslint-plugin": "^5.42.0",
4141
"@typescript-eslint/parser": "^5.42.0",
4242
"prettier": "2.7.1",
43-
"jest":"^29.2.2",
44-
"babel-jest":"^29.2.2",
43+
"jest": "^29.2.2",
44+
"babel-jest": "^29.2.2",
4545
"@babel/core": "^7.19.6",
4646
"@babel/preset-env": "^7.19.4",
47-
"@babel/preset-react":"^7.18.6",
47+
"@babel/preset-react": "^7.18.6",
4848
"@babel/preset-flow": "^7.18.6",
4949
"@babel/preset-typescript": "^7.18.6",
50-
"@testing-library/react":"^13.4.0",
50+
"@testing-library/react": "^13.4.0",
5151
"@testing-library/user-event": "14.4.3",
52-
"@testing-library/jest-dom":"5.16.5",
52+
"@testing-library/jest-dom": "5.16.5",
5353
"@testing-library/dom": "9.0.0",
5454
"jest-environment-jsdom": "^29.2.2",
5555
"jest-transform-stub": "^2.0.0",
5656
"serve": "^14.1.2"
57-
}
57+
},
58+
"packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
5859
}

‎packages/module/src/components/CatalogTile/CatalogTile.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@ export class CatalogTile extends React.Component<CatalogTileProps> {
6565

6666
if (!href) {
6767
e.preventDefault();
68+
} else {
69+
window.open(href, '_blank');
6870
}
6971
if (onClick) {
7072
onClick(e);
@@ -109,19 +111,16 @@ export class CatalogTile extends React.Component<CatalogTileProps> {
109111

110112
return (
111113
<Card
112-
component={href ? 'a' : 'div'}
113114
id={id || this.generatedId}
114-
href={href || '#'}
115115
className={css('catalog-tile-pf', { featured }, className)}
116116
variant={featured ? 'secondary' : 'default'}
117-
isClickable={!!onClick}
117+
isClickable={(onClick || href) ? true : false}
118118
{...props}
119119
>
120-
{(badges.length > 0 || iconImg || iconClass || icon || onClick) && (
120+
{(badges.length > 0 || iconImg || iconClass || icon || onClick || href) && (
121121
<CardHeader
122122
actions={{ actions: badges.length > 0 && this.renderBadges(badges), hasNoOffset: true }}
123-
selectableActions={
124-
onClick && {
123+
selectableActions={ (onClick || href) && {
125124
selectableActionId: id + '-input',
126125
onClickAction: (e) => this.handleClick(e),
127126
selectableActionAriaLabelledby: id

‎packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap‎

Lines changed: 88 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,46 @@
22

33
exports[`CatalogTile href renders properly 1`] = `
44
<DocumentFragment>
5-
<a
6-
class="pf-v6-c-card pf-m-secondary catalog-tile-pf featured"
5+
<div
6+
class="pf-v6-c-card pf-m-secondary pf-m-clickable catalog-tile-pf featured"
77
data-ouia-component-id="OUIA-Generated-Card-6"
88
data-ouia-component-type="PF6/Card"
99
data-ouia-safe="true"
10-
href="http://patternfly.org"
1110
id="test-href"
1211
>
12+
<div
13+
class="pf-v6-c-card__header"
14+
>
15+
<div
16+
class="pf-v6-c-card__actions pf-m-no-offset"
17+
>
18+
<div
19+
class="pf-v6-c-card__selectable-actions"
20+
>
21+
<div
22+
class="pf-v6-c-radio pf-m-standalone"
23+
>
24+
<input
25+
aria-invalid="false"
26+
aria-labelledby="test-href"
27+
class="pf-v6-c-radio__input pf-v6-screen-reader"
28+
data-ouia-component-id="OUIA-Generated-Radio-3"
29+
data-ouia-component-type="PF6/Radio"
30+
data-ouia-safe="true"
31+
id="test-href-input"
32+
type="radio"
33+
/>
34+
<label
35+
class="pf-v6-c-radio__label"
36+
for="test-href-input"
37+
/>
38+
</div>
39+
</div>
40+
</div>
41+
<div
42+
class="pf-v6-c-card__header-main"
43+
/>
44+
</div>
1345
<div
1446
class="pf-v6-c-card__title"
1547
>
@@ -42,7 +74,7 @@ exports[`CatalogTile href renders properly 1`] = `
4274
</span>
4375
</div>
4476
</div>
45-
</a>
77+
</div>
4678
</DocumentFragment>
4779
`;
4880

@@ -54,7 +86,6 @@ exports[`CatalogTile renders properly 1`] = `
5486
data-ouia-component-id="OUIA-Generated-Card-1"
5587
data-ouia-component-type="PF6/Card"
5688
data-ouia-safe="true"
57-
href="#"
5889
id="single-badge-test"
5990
>
6091
<div
@@ -164,7 +195,6 @@ exports[`CatalogTile renders properly 1`] = `
164195
data-ouia-component-id="OUIA-Generated-Card-2"
165196
data-ouia-component-type="PF6/Card"
166197
data-ouia-safe="true"
167-
href="#"
168198
id="multi-badge-test"
169199
>
170200
<div
@@ -276,7 +306,6 @@ exports[`CatalogTile renders properly 1`] = `
276306
data-ouia-component-id="OUIA-Generated-Card-3"
277307
data-ouia-component-type="PF6/Card"
278308
data-ouia-safe="true"
279-
href="#"
280309
id="test-iconClass"
281310
>
282311
<div
@@ -359,12 +388,11 @@ exports[`CatalogTile renders properly 1`] = `
359388
</div>
360389
</div>
361390
</div>
362-
<a
363-
class="pf-v6-c-card pf-m-secondary catalog-tile-pf featured"
391+
<div
392+
class="pf-v6-c-card pf-m-secondary pf-m-clickable catalog-tile-pf featured"
364393
data-ouia-component-id="OUIA-Generated-Card-4"
365394
data-ouia-component-type="PF6/Card"
366395
data-ouia-safe="true"
367-
href="https://github.com/patternfly/patternfly-react"
368396
id="tile-footer-test"
369397
>
370398
<div
@@ -405,6 +433,28 @@ exports[`CatalogTile renders properly 1`] = `
405433
</div>
406434
</span>
407435
</div>
436+
<div
437+
class="pf-v6-c-card__selectable-actions"
438+
>
439+
<div
440+
class="pf-v6-c-radio pf-m-standalone"
441+
>
442+
<input
443+
aria-invalid="false"
444+
aria-labelledby="tile-footer-test"
445+
class="pf-v6-c-radio__input pf-v6-screen-reader"
446+
data-ouia-component-id="OUIA-Generated-Radio-1"
447+
data-ouia-component-type="PF6/Radio"
448+
data-ouia-safe="true"
449+
id="tile-footer-test-input"
450+
type="radio"
451+
/>
452+
<label
453+
class="pf-v6-c-radio__label"
454+
for="tile-footer-test-input"
455+
/>
456+
</div>
457+
</div>
408458
</div>
409459
<div
410460
class="pf-v6-c-card__header-main"
@@ -462,21 +512,43 @@ exports[`CatalogTile renders properly 1`] = `
462512
Enabled
463513
</span>
464514
</div>
465-
</a>
466-
<a
467-
class="pf-v6-c-card pf-m-secondary catalog-tile-pf featured"
515+
</div>
516+
<div
517+
class="pf-v6-c-card pf-m-secondary pf-m-clickable catalog-tile-pf featured"
468518
data-ouia-component-id="OUIA-Generated-Card-5"
469519
data-ouia-component-type="PF6/Card"
470520
data-ouia-safe="true"
471-
href="https://github.com/patternfly/patternfly-react"
472521
id="custom-icon-svg-test"
473522
>
474523
<div
475524
class="pf-v6-c-card__header"
476525
>
477526
<div
478527
class="pf-v6-c-card__actions pf-m-no-offset"
479-
/>
528+
>
529+
<div
530+
class="pf-v6-c-card__selectable-actions"
531+
>
532+
<div
533+
class="pf-v6-c-radio pf-m-standalone"
534+
>
535+
<input
536+
aria-invalid="false"
537+
aria-labelledby="custom-icon-svg-test"
538+
class="pf-v6-c-radio__input pf-v6-screen-reader"
539+
data-ouia-component-id="OUIA-Generated-Radio-2"
540+
data-ouia-component-type="PF6/Radio"
541+
data-ouia-safe="true"
542+
id="custom-icon-svg-test-input"
543+
type="radio"
544+
/>
545+
<label
546+
class="pf-v6-c-radio__label"
547+
for="custom-icon-svg-test-input"
548+
/>
549+
</div>
550+
</div>
551+
</div>
480552
<div
481553
class="pf-v6-c-card__header-main"
482554
>
@@ -513,7 +585,7 @@ exports[`CatalogTile renders properly 1`] = `
513585
</div>
514586
</div>
515587
</div>
516-
</a>
588+
</div>
517589
</div>
518590
</div>
519591
`;

0 commit comments

Comments
 (0)