Skip to content

Commit

Permalink
Merge pull request #65 from dlabaj/hover-issue
Browse files Browse the repository at this point in the history 
fix(bug): Updated code to use actionable card.
  • Loading branch information
@dlabaj
dlabaj authored Jul 26, 2024
2 parents 22bae3a + 86b939f commit e872aa1
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 29 deletions.
15 changes: 8 additions & 7 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"eslint-plugin-markdown": "^1.0.2",
"eslint-config-standard-with-typescript": "^23.0.0",
"eslint-plugin-n": "^15.0.0",
"eslint-plugin-patternfly-react":"^4.80.5-alpha.0",
"eslint-plugin-patternfly-react": "^4.80.5-alpha.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-promise": "^6.0.0",
"eslint-config-prettier": "8.5.0",
Expand All @@ -40,19 +40,20 @@
"@typescript-eslint/eslint-plugin": "^5.42.0",
"@typescript-eslint/parser": "^5.42.0",
"prettier": "2.7.1",
"jest":"^29.2.2",
"babel-jest":"^29.2.2",
"jest": "^29.2.2",
"babel-jest": "^29.2.2",
"@babel/core": "^7.19.6",
"@babel/preset-env": "^7.19.4",
"@babel/preset-react":"^7.18.6",
"@babel/preset-react": "^7.18.6",
"@babel/preset-flow": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@testing-library/react":"^13.4.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "14.4.3",
"@testing-library/jest-dom":"5.16.5",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/dom": "9.0.0",
"jest-environment-jsdom": "^29.2.2",
"jest-transform-stub": "^2.0.0",
"serve": "^14.1.2"
}
},
"packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}
11 changes: 5 additions & 6 deletions packages/module/src/components/CatalogTile/CatalogTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ export class CatalogTile extends React.Component<CatalogTileProps> {

if (!href) {
e.preventDefault();
} else {
window.open(href, '_blank');
}
if (onClick) {
onClick(e);
Expand Down Expand Up @@ -109,19 +111,16 @@ export class CatalogTile extends React.Component<CatalogTileProps> {

return (
<Card
component={href ? 'a' : 'div'}
id={id || this.generatedId}
href={href || '#'}
className={css('catalog-tile-pf', { featured }, className)}
variant={featured ? 'secondary' : 'default'}
isClickable={!!onClick}
isClickable={(onClick || href) ? true : false}
{...props}
>
{(badges.length > 0 || iconImg || iconClass || icon || onClick) && (
{(badges.length > 0 || iconImg || iconClass || icon || onClick || href) && (
<CardHeader
actions={{ actions: badges.length > 0 && this.renderBadges(badges), hasNoOffset: true }}
selectableActions={
onClick && {
selectableActions={ (onClick || href) && {
selectableActionId: id + '-input',
onClickAction: (e) => this.handleClick(e),
selectableActionAriaLabelledby: id
Expand Down
104 changes: 88 additions & 16 deletions packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,46 @@

exports[`CatalogTile href renders properly 1`] = `
<DocumentFragment>
<a
class="pf-v6-c-card pf-m-secondary catalog-tile-pf featured"
<div
class="pf-v6-c-card pf-m-secondary pf-m-clickable catalog-tile-pf featured"
data-ouia-component-id="OUIA-Generated-Card-6"
data-ouia-component-type="PF6/Card"
data-ouia-safe="true"
href="http://patternfly.org"
id="test-href"
>
<div
class="pf-v6-c-card__header"
>
<div
class="pf-v6-c-card__actions pf-m-no-offset"
>
<div
class="pf-v6-c-card__selectable-actions"
>
<div
class="pf-v6-c-radio pf-m-standalone"
>
<input
aria-invalid="false"
aria-labelledby="test-href"
class="pf-v6-c-radio__input pf-v6-screen-reader"
data-ouia-component-id="OUIA-Generated-Radio-3"
data-ouia-component-type="PF6/Radio"
data-ouia-safe="true"
id="test-href-input"
type="radio"
/>
<label
class="pf-v6-c-radio__label"
for="test-href-input"
/>
</div>
</div>
</div>
<div
class="pf-v6-c-card__header-main"
/>
</div>
<div
class="pf-v6-c-card__title"
>
Expand Down Expand Up @@ -42,7 +74,7 @@ exports[`CatalogTile href renders properly 1`] = `
</span>
</div>
</div>
</a>
</div>
</DocumentFragment>
`;

Expand All @@ -54,7 +86,6 @@ exports[`CatalogTile renders properly 1`] = `
data-ouia-component-id="OUIA-Generated-Card-1"
data-ouia-component-type="PF6/Card"
data-ouia-safe="true"
href="#"
id="single-badge-test"
>
<div
Expand Down Expand Up @@ -164,7 +195,6 @@ exports[`CatalogTile renders properly 1`] = `
data-ouia-component-id="OUIA-Generated-Card-2"
data-ouia-component-type="PF6/Card"
data-ouia-safe="true"
href="#"
id="multi-badge-test"
>
<div
Expand Down Expand Up @@ -276,7 +306,6 @@ exports[`CatalogTile renders properly 1`] = `
data-ouia-component-id="OUIA-Generated-Card-3"
data-ouia-component-type="PF6/Card"
data-ouia-safe="true"
href="#"
id="test-iconClass"
>
<div
Expand Down Expand Up @@ -359,12 +388,11 @@ exports[`CatalogTile renders properly 1`] = `
</div>
</div>
</div>
<a
class="pf-v6-c-card pf-m-secondary catalog-tile-pf featured"
<div
class="pf-v6-c-card pf-m-secondary pf-m-clickable catalog-tile-pf featured"
data-ouia-component-id="OUIA-Generated-Card-4"
data-ouia-component-type="PF6/Card"
data-ouia-safe="true"
href="https://github.com/patternfly/patternfly-react"
id="tile-footer-test"
>
<div
Expand Down Expand Up @@ -405,6 +433,28 @@ exports[`CatalogTile renders properly 1`] = `
</div>
</span>
</div>
<div
class="pf-v6-c-card__selectable-actions"
>
<div
class="pf-v6-c-radio pf-m-standalone"
>
<input
aria-invalid="false"
aria-labelledby="tile-footer-test"
class="pf-v6-c-radio__input pf-v6-screen-reader"
data-ouia-component-id="OUIA-Generated-Radio-1"
data-ouia-component-type="PF6/Radio"
data-ouia-safe="true"
id="tile-footer-test-input"
type="radio"
/>
<label
class="pf-v6-c-radio__label"
for="tile-footer-test-input"
/>
</div>
</div>
</div>
<div
class="pf-v6-c-card__header-main"
Expand Down Expand Up @@ -462,21 +512,43 @@ exports[`CatalogTile renders properly 1`] = `
Enabled
</span>
</div>
</a>
<a
class="pf-v6-c-card pf-m-secondary catalog-tile-pf featured"
</div>
<div
class="pf-v6-c-card pf-m-secondary pf-m-clickable catalog-tile-pf featured"
data-ouia-component-id="OUIA-Generated-Card-5"
data-ouia-component-type="PF6/Card"
data-ouia-safe="true"
href="https://github.com/patternfly/patternfly-react"
id="custom-icon-svg-test"
>
<div
class="pf-v6-c-card__header"
>
<div
class="pf-v6-c-card__actions pf-m-no-offset"
/>
>
<div
class="pf-v6-c-card__selectable-actions"
>
<div
class="pf-v6-c-radio pf-m-standalone"
>
<input
aria-invalid="false"
aria-labelledby="custom-icon-svg-test"
class="pf-v6-c-radio__input pf-v6-screen-reader"
data-ouia-component-id="OUIA-Generated-Radio-2"
data-ouia-component-type="PF6/Radio"
data-ouia-safe="true"
id="custom-icon-svg-test-input"
type="radio"
/>
<label
class="pf-v6-c-radio__label"
for="custom-icon-svg-test-input"
/>
</div>
</div>
</div>
<div
class="pf-v6-c-card__header-main"
>
Expand Down Expand Up @@ -513,7 +585,7 @@ exports[`CatalogTile renders properly 1`] = `
</div>
</div>
</div>
</a>
</div>
</div>
</div>
`;

0 comments on commit e872aa1

Please sign in to comment.