docs(design-guidelines): Updated quickstarts guidelines. (#327)

* docs(design-guidelines): Updated quickstarts guidelines. * fix lint issues and some a11y issues * fix unit and a11y tests --------- Co-authored-by: nicolethoen <[email protected]>
patternfly · Sep 20, 2024 · 77f2412 · 77f2412
1 parent 536095d
commit 77f2412
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 96 deletions.
diff --git a/packages/dev/package.json b/packages/dev/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@patternfly/patternfly": "6.0.0-alpha.205",
-    "@patternfly/quickstarts": "^6.0.0-alpha.4",
+    "@patternfly/quickstarts": "^6.0.0-alpha.0",
     "@patternfly/react-core": "6.0.0-alpha.100",
     "i18next": "^19.8.3",
     "i18next-browser-languagedetector": "^8.0.0",

diff --git a/packages/dev/src/CustomCatalog.tsx b/packages/dev/src/CustomCatalog.tsx
@@ -133,7 +133,7 @@ export const CustomCatalog: React.FC = () => {
         <Content component="p" className="catalog-sub">
           Instructional examples
         </Content>
-        <Gallery hasGutter>
+        <Gallery hasGutter className="pfext-quick-start-catalog__gallery" >
           {allQuickStarts
             .filter((quickStart: QuickStart) => quickStart.metadata.instructional)
             .map((quickStart: QuickStart, index: number) => {
@@ -172,7 +172,7 @@ export const CustomCatalog: React.FC = () => {
         <Content component="p" className="catalog-sub">
           Additional examples
         </Content>
-        <Gallery hasGutter>
+        <Gallery hasGutter className="pfext-quick-start-catalog__gallery" >
           {allQuickStarts
             .filter((quickStart: QuickStart) => !quickStart.metadata.instructional)
             .map((quickStart: QuickStart, index: number) => {

diff --git a/packages/module/package.json b/packages/module/package.json
@@ -55,7 +55,7 @@
     "history": "^5.0.0"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "6.0.0-alpha.64",
+    "@patternfly/documentation-framework": "6.0.0-alpha.79",
     "@patternfly/patternfly": "6.0.0-alpha.205",
     "@patternfly/react-icons": "6.0.0-alpha.35",
     "@patternfly/react-styles": "6.0.0-alpha.34",

diff --git a/...fly-docs/content/extensions/quick-starts/design-guidelines/design-guidelines.md b/...fly-docs/content/extensions/quick-starts/design-guidelines/design-guidelines.md
diff --git a/packages/module/release.config.js b/packages/module/release.config.js
@@ -24,5 +24,5 @@ module.exports = {
     '@semantic-release/npm',
   ],
   tagFormat: 'prerelease-v${version}',
-  "dryRun": true,
+  dryRun: true,
 };
diff --git a/packages/module/src/catalog/QuickStartCatalog.tsx b/packages/module/src/catalog/QuickStartCatalog.tsx
@@ -15,7 +15,7 @@ const QuickStartCatalog: React.FC<QuickStartCatalogProps> = ({ quickStarts }) =>
 
   return (
     <div>
-      <Gallery hasGutter>
+      <Gallery hasGutter className="pfext-quick-start-catalog__gallery" >
         {quickStarts.map((quickStart, index) => {
           const {
             metadata: { name: id },

diff --git a/packages/module/src/catalog/QuickStartTile.tsx b/packages/module/src/catalog/QuickStartTile.tsx
@@ -20,7 +20,7 @@ import {
   ButtonProps,
   Flex,
   Stack,
-  Label
+  Label,
 } from '@patternfly/react-core';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
 import { StatusIcon } from '@console/shared';
@@ -65,7 +65,6 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
   const { setActiveQuickStart, footer, getResource } =
     React.useContext<QuickStartContextValues>(QuickStartContext);
 
-
   const statusColorMap = {
     [QuickStartStatus.COMPLETE]: 'green',
     [QuickStartStatus.IN_PROGRESS]: 'purple',
@@ -153,11 +152,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
         {quickStartIcon}
       </CardHeader>
       <CardTitle>
-        <QuickStartTileHeader
-          name={displayName}
-          onSelect={onSelect}
-          quickStartId={id}
-        />
+        <QuickStartTileHeader name={displayName} onSelect={onSelect} quickStartId={id} />
       </CardTitle>
       <CardBody>
         <Stack hasGutter>
@@ -174,7 +169,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
             {status !== QuickStartStatus.NOT_STARTED && (
               <Label
                 variant="outline"
-                color={statusColorMap[status] as "green" | "purple" | "grey"}
+                color={statusColorMap[status] as 'green' | 'purple' | 'grey'}
                 icon={<StatusIcon status={status} />}
                 data-test="status"
               >

diff --git a/packages/module/src/catalog/QuickStartTileHeader.tsx b/packages/module/src/catalog/QuickStartTileHeader.tsx
@@ -12,17 +12,14 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
   name,
   quickStartId,
   onSelect,
-}) => {
-
-  return (
-    <Flex flexWrap={{ default: 'nowrap' }}>
-      <Title headingLevel="h3" data-test="title" id={quickStartId}>
-        <Button variant="link" isInline onClick={onSelect}>
-          <QuickStartMarkdownView content={name} />
-        </Button>
-      </Title>
-    </Flex>
-  );
-};
+}) => (
+  <Flex flexWrap={{ default: 'nowrap' }}>
+    <Title headingLevel="h3" data-test="title" id={quickStartId}>
+      <Button variant="link" isInline onClick={onSelect}>
+        <QuickStartMarkdownView content={name} />
+      </Button>
+    </Title>
+  </Flex>
+);
 
 export default QuickStartTileHeader;
diff --git a/packages/module/src/catalog/__tests__/QuickStartTile.spec.tsx b/packages/module/src/catalog/__tests__/QuickStartTile.spec.tsx
@@ -19,7 +19,6 @@ describe('QuickStartTile', () => {
     );
     const catalogTile = wrapper.find(Card);
     expect(catalogTile.exists()).toBeTruthy();
-    expect(catalogTile.prop('isSelected')).toBe(false);
   });
 
   it('should load proper catalog tile with featured property', () => {

diff --git a/packages/module/src/controller/QuickStartFooter.tsx b/packages/module/src/controller/QuickStartFooter.tsx
@@ -76,6 +76,7 @@ const QuickStartFooter: React.FC<QuickStartFooterProps> = ({
     () => (
       <Button
         variant="primary"
+        className="pfext-quick-start-footer__actionbtn"
         onClick={onNext}
         data-testid={`qs-drawer-${camelize(getPrimaryButtonText)}`}
         data-test={`${getPrimaryButtonText} button`}

diff --git a/packages/module/src/controller/QuickStartTaskHeaderList.tsx b/packages/module/src/controller/QuickStartTaskHeaderList.tsx
@@ -14,7 +14,7 @@ const QuickStartTaskHeaderList: React.FC<QuickStartTaskHeaderListProps> = ({
   onTaskSelect,
 }) =>
   tasks?.length > 0 ? (
-    <div className="pf-v6-c-wizard__nav-list">
+    <ul className="pf-v6-c-wizard__nav-list">
       {tasks.map((task, index) => (
         <TaskHeader
           key={task.title}
@@ -25,7 +25,7 @@ const QuickStartTaskHeaderList: React.FC<QuickStartTaskHeaderListProps> = ({
           onTaskSelect={onTaskSelect}
         />
       ))}
-    </div>
+    </ul>
   ) : null;
 
 export default QuickStartTaskHeaderList;
diff --git a/yarn.lock b/yarn.lock
@@ -1375,27 +1375,27 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@patternfly/ast-helpers@^1.4.0-alpha.53":
-  version "1.4.0-alpha.68"
-  resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.4.0-alpha.68.tgz#1c72af9e85467a96f56bee5b2ef26be3a6127dbf"
-  integrity sha512-2AblXsXLVuLpYtbNUCozuwTmk3SRCaGNWn9MHcajV48r/ivlJpb25M6Rd3hH3tNs0XiQVxB9JMfzSbroq3Ojew==
+"@patternfly/ast-helpers@^1.4.0-alpha.68":
+  version "1.4.0-alpha.88"
+  resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.4.0-alpha.88.tgz#8fa65d400b0cd6bd8cbee37cdb147091e2541a12"
+  integrity sha512-t7mLrMwYWGRWH41cX4nDcHp8Ki0uycjbEg60/nGbHliSlvd+mEtLqUTsKAwHwljBiAhqVg2wYt9gnFKFGOiwTg==
   dependencies:
     acorn "^8.4.1"
     acorn-class-fields "^1.0.0"
     acorn-jsx "^5.3.2"
     acorn-static-class-features "^1.0.0"
     astring "^1.7.5"
 
-"@patternfly/[email protected].64":
-  version "6.0.0-alpha.64"
-  resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-6.0.0-alpha.64.tgz#5c30de59c20971b4e9bbeb4b3638aaf38ac218d8"
-  integrity sha512-pXgdbC/bcqivt+AOkhklS+kzeANRXDa+cGjKAMyVj4SeAOqfBbyK80xugpyT+lGbhEKMOlfujxmuNr1OlGsBmA==
+"@patternfly/[email protected].79":
+  version "6.0.0-alpha.79"
+  resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-6.0.0-alpha.79.tgz#799f53fbb1fbb530444838fadc62fc1a6a25ce51"
+  integrity sha512-akgy6DdSeAYyBG2k9wB4eSZqYdqrfmLs0s9cnGoPYle9bpGtc8Tvc8HX9+fXNEV3Di7gaiMYsKhHiQo319bcNA==
   dependencies:
     "@babel/core" "^7.24.3"
     "@babel/preset-env" "^7.24.3"
     "@babel/preset-react" "^7.24.1"
     "@mdx-js/util" "1.6.16"
-    "@patternfly/ast-helpers" "^1.4.0-alpha.53"
+    "@patternfly/ast-helpers" "^1.4.0-alpha.68"
     "@reach/router" "npm:@gatsbyjs/[email protected]"
     autoprefixer "9.8.6"
     babel-loader "^9.1.3"
@@ -1473,14 +1473,6 @@
   resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.205.tgz#9974f712ee69b28ec6851c6240e52c2d99969f9c"
   integrity sha512-rzatApP3YpiYOHamDm+RhQpnep2AAhVodVRr3lyg6X5naiSSbPXXGWm7ShhUfftzwW4G1le1Uy0ZlM05rtQHWg==
 
-"@patternfly/quickstarts@^6.0.0-alpha.4":
-  version "6.0.0-alpha.4"
-  resolved "https://registry.yarnpkg.com/@patternfly/quickstarts/-/quickstarts-6.0.0-alpha.4.tgz#000483770d31042bd1c476aba3d98eae0ad6a9e2"
-  integrity sha512-mG0H+AbzQ+2MOZ74Yckqi+UnpfO/9q2rKQ7I65zzbgkfRv/Nu56GeJ4EWSdT38zxAMSXr2x++sUGR2g31WDjLA==
-  dependencies:
-    dompurify "^2.4.9"
-    history "^5.0.0"
-
 "@patternfly/[email protected]":
   version "6.0.0-alpha.100"
   resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-6.0.0-alpha.100.tgz#519f04de8c68d99c9ab92b7a5ba98d58841a99b2"