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]>

Author: edonehoo

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",

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) => {

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",

packages/module/patternfly-docs/content/extensions/quick-starts/design-guidelines/design-guidelines.md

@@ -24,5 +24,5 @@ module.exports = {
     '@semantic-release/npm',
   ],
   tagFormat: 'prerelease-v${version}',
-  "dryRun": true,
+  dryRun: true,
 };

packages/module/release.config.js

@@ -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 },

packages/module/src/catalog/QuickStartCatalog.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"
               >

packages/module/src/catalog/QuickStartTile.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;

packages/module/src/catalog/QuickStartTileHeader.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', () => {

packages/module/src/catalog/__tests__/QuickStartTile.spec.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`}