Skip to content

Commit fb94978

Browse files
jschulerHyperkid123
jschuler
and
Hyperkid123
authored
Some post-PF5 fixes: Make cards clickable, fix card styling, open links in new tab (#289)
* fix(quickstart tile): opening quickstarts on click event * some other fixes * better bookmarking example * small css fix --------- Co-authored-by: Martin Marosi <[email protected]>
1 parent f1a59fb commit fb94978

File tree

6 files changed

+139
-56
lines changed

6 files changed

+139
-56
lines changed

‎packages/dev/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
"serve": "serve public"
1010
},
1111
"dependencies": {
12-
"@patternfly/patternfly": "^5.0.0",
12+
"@patternfly/patternfly": "^5.2.1",
1313
"@patternfly/quickstarts": "*",
1414
"@patternfly/transform-adoc": "*",
15-
"@patternfly/react-core": "^5.0.0",
15+
"@patternfly/react-core": "^5.2.1",
1616
"asciidoctor": "^2.2.6",
1717
"i18next": "^19.8.3",
1818
"i18next-browser-languagedetector": "^6.0.1",

‎packages/dev/src/CustomCatalog.tsx‎

Lines changed: 64 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -82,28 +82,65 @@ export const CustomCatalog: React.FC = () => {
8282
setFilteredQuickStarts(result);
8383
};
8484

85-
const [bookmarked, setBookmarked] = React.useState<string[]>([])
85+
const [bookmarked, setBookmarked] = React.useState<string[]>([]);
8686

8787
const CatalogWithSections = React.useMemo(
8888
() => (
8989
<>
90+
{bookmarked.length > 0 && (
91+
<QuickStartCatalogSection>
92+
<TextContent>
93+
<Text component="h2">Bookmarked</Text>
94+
<Text component="p" className="catalog-sub">
95+
Bookmarked examples
96+
</Text>
97+
</TextContent>
98+
<Gallery className="pfext-quick-start-catalog__gallery" hasGutter>
99+
{allQuickStarts
100+
.filter((quickStart: QuickStart) => bookmarked.includes(quickStart.metadata.name))
101+
.map((quickStart: QuickStart) => {
102+
const {
103+
metadata: { name: id },
104+
} = quickStart;
105+
106+
return (
107+
<GalleryItem key={id} className="pfext-quick-start-catalog__gallery-item">
108+
<QuickStartTile
109+
action={{
110+
onClick: (e: React.SyntheticEvent) => {
111+
e.preventDefault();
112+
e.stopPropagation();
113+
setBookmarked((prev) => {
114+
if (prev.includes(id)) {
115+
return prev.filter((bookmark) => bookmark !== id);
116+
}
117+
118+
return [...prev, id];
119+
});
120+
},
121+
icon: bookmarked.includes(id) ? BookmarkIcon : OutlinedBookmarkIcon,
122+
'aria-label': 'bookmark',
123+
}}
124+
quickStart={quickStart}
125+
isActive={id === activeQuickStartID}
126+
status={getQuickStartStatus(allQuickStartStates, id)}
127+
/>
128+
</GalleryItem>
129+
);
130+
})}
131+
</Gallery>
132+
</QuickStartCatalogSection>
133+
)}
90134
<QuickStartCatalogSection>
91135
<TextContent>
92-
<Text component="h2">Bookmarkable</Text>
136+
<Text component="h2">Instructional</Text>
93137
<Text component="p" className="catalog-sub">
94-
Bookmarkable examples
138+
Instructional examples
95139
</Text>
96140
</TextContent>
97141
<Gallery className="pfext-quick-start-catalog__gallery" hasGutter>
98142
{allQuickStarts
99143
.filter((quickStart: QuickStart) => quickStart.metadata.instructional)
100-
.map((quickStart: QuickStart) => ({
101-
...quickStart,
102-
metadata: {
103-
...quickStart.metadata,
104-
id: `${quickStart.metadata.name}-bookmar`
105-
}
106-
}))
107144
.map((quickStart: QuickStart) => {
108145
const {
109146
metadata: { name: id },
@@ -118,14 +155,14 @@ export const CustomCatalog: React.FC = () => {
118155
e.stopPropagation();
119156
setBookmarked((prev) => {
120157
if (prev.includes(id)) {
121-
return prev.filter((bookmark) => bookmark !== id)
158+
return prev.filter((bookmark) => bookmark !== id);
122159
}
123160

124161
return [...prev, id];
125162
});
126163
},
127164
icon: bookmarked.includes(id) ? BookmarkIcon : OutlinedBookmarkIcon,
128-
'aria-label': 'bookmark'
165+
'aria-label': 'bookmark',
129166
}}
130167
quickStart={quickStart}
131168
isActive={id === activeQuickStartID}
@@ -136,33 +173,6 @@ export const CustomCatalog: React.FC = () => {
136173
})}
137174
</Gallery>
138175
</QuickStartCatalogSection>
139-
<QuickStartCatalogSection>
140-
<TextContent>
141-
<Text component="h2">Instructional</Text>
142-
<Text component="p" className="catalog-sub">
143-
Instructional examples
144-
</Text>
145-
</TextContent>
146-
<Gallery className="pfext-quick-start-catalog__gallery" hasGutter>
147-
{allQuickStarts
148-
.filter((quickStart: QuickStart) => quickStart.metadata.instructional)
149-
.map((quickStart: QuickStart) => {
150-
const {
151-
metadata: { name: id },
152-
} = quickStart;
153-
154-
return (
155-
<GalleryItem key={id} className="pfext-quick-start-catalog__gallery-item">
156-
<QuickStartTile
157-
quickStart={quickStart}
158-
isActive={id === activeQuickStartID}
159-
status={getQuickStartStatus(allQuickStartStates, id)}
160-
/>
161-
</GalleryItem>
162-
);
163-
})}
164-
</Gallery>
165-
</QuickStartCatalogSection>
166176
<QuickStartCatalogSection>
167177
<TextContent>
168178
<Text component="h2">Real-world examples</Text>
@@ -181,6 +191,21 @@ export const CustomCatalog: React.FC = () => {
181191
return (
182192
<GalleryItem key={id} className="pfext-quick-start-catalog__gallery-item">
183193
<QuickStartTile
194+
action={{
195+
onClick: (e: React.SyntheticEvent) => {
196+
e.preventDefault();
197+
e.stopPropagation();
198+
setBookmarked((prev) => {
199+
if (prev.includes(id)) {
200+
return prev.filter((bookmark) => bookmark !== id);
201+
}
202+
203+
return [...prev, id];
204+
});
205+
},
206+
icon: bookmarked.includes(id) ? BookmarkIcon : OutlinedBookmarkIcon,
207+
'aria-label': 'bookmark',
208+
}}
184209
quickStart={quickStart}
185210
isActive={id === activeQuickStartID}
186211
status={getQuickStartStatus(allQuickStartStates, id)}

‎packages/module/src/catalog/QuickStartTile.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,10 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
2929
action,
3030
}) => {
3131
const {
32-
metadata: { name, id: metaId },
32+
metadata: { name: id },
3333
spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type },
3434
} = quickStart;
3535

36-
const id = metaId || name;
3736
const { setActiveQuickStart, footer } =
3837
React.useContext<QuickStartContextValues>(QuickStartContext);
3938

@@ -69,15 +68,21 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
6968
e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>,
7069
) => {
7170
if (ref.current?.contains(e.target as Node)) {
72-
if (link) {
73-
window.open(link.href);
74-
} else {
71+
if (!link) {
7572
setActiveQuickStart(id, tasks?.length);
7673
}
7774
onClick();
7875
}
7976
};
8077

78+
const linkProps = link
79+
? {
80+
href: link.href,
81+
target: '_blank',
82+
rel: 'noreferrer',
83+
}
84+
: {};
85+
8186
return (
8287
<div ref={ref} onClick={handleClick}>
8388
<CatalogTile
@@ -106,13 +111,16 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
106111
}
107112
}}
108113
// https://github.com/patternfly/patternfly-react/issues/7039
109-
href={link?.href}
114+
{...linkProps}
110115
data-test={`tile ${id}`}
111116
description={
112117
<QuickStartTileDescription description={description} prerequisites={prerequisites} />
113118
}
114119
footer={footerComponent}
115120
tabIndex={0}
121+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
122+
// @ts-ignore-next-line
123+
isSelectableRaised
116124
/>
117125
</div>
118126
);

‎packages/module/src/catalog/QuickStartTileHeader.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,8 @@
99
& .pf-v5-c-badge:not(:last-of-type) {
1010
margin-right: var(--pf-v5-global--spacer--sm);
1111
}
12+
13+
h3 {
14+
flex: 1;
15+
}
1216
}

‎packages/module/src/catalog/QuickStartTileHeader.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -54,17 +54,19 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
5454

5555
return (
5656
<div className="pfext-quick-start-tile-header">
57-
<Flex justifyContent={{ default: 'justifyContentCenter' }} flexWrap={{ default: 'nowrap' }}>
58-
<Title headingLevel="h3" data-test="title" id={quickStartId}>
57+
<Flex flexWrap={{ default: 'nowrap' }}>
58+
<Title headingLevel="h3" data-test="title" id={quickStartId}>
5959
<QuickStartMarkdownView content={name} />
6060
</Title>
61-
{action && <Button
62-
aria-label={action['aria-label']}
63-
icon={<ActionIcon />}
64-
variant='plain'
65-
onClick={action.onClick}
66-
{...action.buttonProps}
67-
/>}
61+
{action && (
62+
<Button
63+
aria-label={action['aria-label']}
64+
icon={<ActionIcon />}
65+
variant="plain"
66+
onClick={action.onClick}
67+
{...action.buttonProps}
68+
/>
69+
)}
6870
</Flex>
6971
<div className="pfext-quick-start-tile-header__status">
7072
{type && (

‎yarn.lock‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1756,6 +1756,11 @@
17561756
resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.0.2.tgz#f5daf2c98ccb85e6466d42fd61d39ba3c10ed532"
17571757
integrity sha512-PB8+MLdYVgF1hIOxGmnVsZG+YHUX3RePe5W1oMS4gS00EmSgw1cobr1Qbpy/BqqS8/R9DRN4hZ2FKDT0d5tkFQ==
17581758

1759+
"@patternfly/patternfly@^5.2.1":
1760+
version "5.2.1"
1761+
resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.2.1.tgz#7ca014a1fdb45c8ac88abf7b57fccb8731e27542"
1762+
integrity sha512-n5xFjyj1J4eIFZ7XeU6K44POKRAuDlO5yALPbn084y+jPy1j861AaQ+zIUbzCi4IzBlHrvoXVKij7p1zy7Ditg==
1763+
17591764
"@patternfly/react-catalog-view-extension@^5.0.0":
17601765
version "5.0.0"
17611766
resolved "https://registry.yarnpkg.com/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-5.0.0.tgz#a3892debd5987e15e9d7cabf9ed4ed3b25f48b0f"
@@ -1787,16 +1792,38 @@
17871792
react-dropzone "^14.2.3"
17881793
tslib "^2.5.0"
17891794

1795+
"@patternfly/react-core@^5.2.1":
1796+
version "5.2.1"
1797+
resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-5.2.1.tgz#e2fb0a4ce3418674378f80d0c2416e94cf20fd86"
1798+
integrity sha512-SWQHALhcjxjmwcIJ6V3tG6V7a2M0WkkUbc6F8mSPk6l9q6j3f+WvZ9HqgzVA+h+Q12UbtIrlQvgUx7pAxZekkg==
1799+
dependencies:
1800+
"@patternfly/react-icons" "^5.2.1"
1801+
"@patternfly/react-styles" "^5.2.1"
1802+
"@patternfly/react-tokens" "^5.2.1"
1803+
focus-trap "7.5.2"
1804+
react-dropzone "^14.2.3"
1805+
tslib "^2.5.0"
1806+
17901807
"@patternfly/react-icons@^5.0.0":
17911808
version "5.0.0"
17921809
resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-5.0.0.tgz#bb56ead97425f1b3ab886ee291ba6b6af4088e9d"
17931810
integrity sha512-GG5Y/UYl0h346MyDU9U650Csaq4Mxk8S6U8XC7ERk/xIrRr2RF67O2uY7zKBDMTNLYdBvPzgc2s3OMV1+d2/mg==
17941811

1812+
"@patternfly/react-icons@^5.2.1":
1813+
version "5.2.1"
1814+
resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-5.2.1.tgz#c29e9fbecd13c33e772abe6089e31bb86b1ab2a8"
1815+
integrity sha512-aeJ0X+U2NDe8UmI5eQiT0iuR/wmUq97UkDtx3HoZcpRb9T6eUBfysllxjRqHS8rOOspdU8OWq+CUhQ/E2ZDibg==
1816+
17951817
"@patternfly/react-styles@^5.0.0":
17961818
version "5.0.0"
17971819
resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-5.0.0.tgz#63705ad498ff271fd056e92bd07b2c720ef3491a"
17981820
integrity sha512-xbSCgjx+fPrXbIzUznwTFWtJEbzVS0Wn4zrejdKJYQTY+4YcuPlFkeq2tl3syzwGsaYMpHiFwQiTaKyTvlwtuw==
17991821

1822+
"@patternfly/react-styles@^5.2.1":
1823+
version "5.2.1"
1824+
resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-5.2.1.tgz#a6f8c750bd65572702ea94c0a6b58f6c0d4361fb"
1825+
integrity sha512-GT96hzI1QenBhq6Pfc51kxnj9aVLjL1zSLukKZXcYVe0HPOy0BFm90bT1Fo4e/z7V9cDYw4SqSX1XLc3O4jsTw==
1826+
18001827
"@patternfly/react-table@^5.0.0":
18011828
version "5.0.0"
18021829
resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-5.0.0.tgz#2808f22d01818c31e6ddc69cc3a07c9381dc6d84"
@@ -1814,6 +1841,11 @@
18141841
resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-5.0.0.tgz#8e2698d32d5353359e713312687a6b08ead0080b"
18151842
integrity sha512-to2CXIZ6WTuzBcjLZ+nXi5LhnYkSIDu3RBMRZwrplmECOoUWv87CC+2T0EVxtASRtpQfikjD2PDKMsif5i0BxQ==
18161843

1844+
"@patternfly/react-tokens@^5.2.1":
1845+
version "5.2.1"
1846+
resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-5.2.1.tgz#fca7decaa7039dcd93fd215f3f533eff9d070b22"
1847+
integrity sha512-8GYz/jnJTGAWUJt5eRAW5dtyiHPKETeFJBPGHaUQnvi/t1ZAkoy8i4Kd/RlHsDC7ktiu813SKCmlzwBwldAHKg==
1848+
18171849
"@percy/agent@~0":
18181850
version "0.28.6"
18191851
resolved "https://registry.yarnpkg.com/@percy/agent/-/agent-0.28.6.tgz#b220fab6ddcf63ae4e6c343108ba6955a772ce1c"
@@ -7439,6 +7471,13 @@ [email protected]:
74397471
dependencies:
74407472
tabbable "^6.1.2"
74417473

7474+
[email protected]:
7475+
version "7.5.2"
7476+
resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.5.2.tgz#e5ee678d10a18651f2591ffb66c949fb098d57cf"
7477+
integrity sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==
7478+
dependencies:
7479+
tabbable "^6.2.0"
7480+
74427481
[email protected]:
74437482
version "1.12.1"
74447483
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.12.1.tgz#de54a6205311b93d60398ebc01cf7015682312b6"
@@ -15210,6 +15249,11 @@ tabbable@^6.1.2:
1521015249
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.2.tgz#b0d3ca81d582d48a80f71b267d1434b1469a3703"
1521115250
integrity sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ==
1521215251

15252+
tabbable@^6.2.0:
15253+
version "6.2.0"
15254+
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
15255+
integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
15256+
1521315257
table-layout@^0.4.3, table-layout@~0.4.0:
1521415258
version "0.4.5"
1521515259
resolved "https://registry.yarnpkg.com/table-layout/-/table-layout-0.4.5.tgz#d906de6a25fa09c0c90d1d08ecd833ecedcb7378"

0 commit comments

Comments
 (0)