@patternfly/quickstarts 6.0.0-alpha.2 → 6.0.0-alpha.3

package/src/ConsoleInternal/components/markdown-view.tsx

@@ -3,7 +3,6 @@ import { css } from '@patternfly/react-styles';
 import { Converter } from 'showdown';
 import { useForceRender } from '@console/shared';
 import { QuickStartContext, QuickStartContextValues } from '../../utils/quick-start-context';
-import './_markdown-view.scss';
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const DOMPurify = require('dompurify');
@@ -37,13 +36,34 @@ export const markdownConvert = (markdown, extensions?: ShowdownExtension[]) => {
       return node;
     }
 
-    // add PF class to ul and ol lists
-    if (
-      node.nodeType === 1 &&
-      (node.nodeName.toLowerCase() === 'ul' || node.nodeName.toLowerCase() === 'ol')
-    ) {
-      node.setAttribute('class', 'pf-v6-c-list');
-      return node;
+    // add PF content classes
+    if (node.nodeType === 1) {
+      const contentElements = [
+        'ul',
+        'ol',
+        'p',
+        'li',
+        'hr',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'blockquote',
+        'pre',
+        'dl',
+        'dt',
+        'dd',
+        'table',
+      ];
+      if (contentElements.includes(node.nodeName.toLowerCase())) {
+        // don't overwrite elements already being styled by PatternFly
+        if (!node.getAttribute('class')?.includes('pf-v6-c-')) {
+          node.setAttribute('class', `pf-v6-c-content--${node.nodeName.toLowerCase()}`);
+          return node;
+        }
+      }
     }
   });
 
@@ -166,7 +186,7 @@ const InlineMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
 }) => {
   const id = React.useMemo(() => uniqueId('markdown'), []);
   return (
-    <div className={css('pfext-markdown-view', { 'is-empty': isEmpty }, className)} id={id}>
+    <div className={css({ 'is-empty': isEmpty } as any, className)} id={id}>
       <div dangerouslySetInnerHTML={{ __html: markup }} />
       {renderExtension && (
         <RenderExtension renderExtension={renderExtension} selector={`#${id}`} markup={markup} />

package/src/ConsoleShared/src/components/markdown-extensions/accordion-extension.tsx

@@ -8,7 +8,6 @@ import {
 import { renderToStaticMarkup } from 'react-dom/server';
 import { removeTemplateWhitespace } from './utils';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
-import './showdown-extension.scss';
 
 const useAccordionShowdownExtension = () =>
   React.useMemo(
@@ -26,22 +25,16 @@ const useAccordionShowdownExtension = () =>
         return removeTemplateWhitespace(
           renderToStaticMarkup(
             <>
-            <Accordion asDefinitionList>
-              <AccordionItem isExpanded={false}>
-                <AccordionToggle
-                  
-                  id={`${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}`}
-                >
-                  {accordionHeading}
-                </AccordionToggle>
-                <AccordionContent
-                  id={`${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`}
-                  
-                >
-                  {accordionContent}
-                </AccordionContent>
-              </AccordionItem>
-            </Accordion>
+              <Accordion asDefinitionList>
+                <AccordionItem isExpanded={false}>
+                  <AccordionToggle id={`${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}`}>
+                    {accordionHeading}
+                  </AccordionToggle>
+                  <AccordionContent id={`${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`}>
+                    {accordionContent}
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
             </>,
           ),
         );

package/src/ConsoleShared/src/components/markdown-extensions/admonition-extension.tsx

@@ -4,7 +4,6 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { Alert } from '@patternfly/react-core';
 import LightbulbIcon from '@patternfly/react-icons/dist/js/icons/lightbulb-icon';
 import FireIcon from '@patternfly/react-icons/dist/js/icons/fire-icon';
-import './showdown-extension.scss';
 import QuickStartMarkdownView from '../../../../QuickStartMarkdownView';
 
 enum AdmonitionType {
@@ -17,15 +16,15 @@ enum AdmonitionType {
 
 const admonitionToAlertVariantMap = {
   [AdmonitionType.NOTE]: { variant: 'info' },
-  [AdmonitionType.TIP]: { variant: 'default', customIcon: <LightbulbIcon /> },
+  [AdmonitionType.TIP]: { variant: 'custom', customIcon: <LightbulbIcon /> },
   [AdmonitionType.IMPORTANT]: { variant: 'danger' },
   [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: <FireIcon /> },
   [AdmonitionType.WARNING]: { variant: 'warning' },
 };
 
-const useAdmonitionShowdownExtension = () => 
+const useAdmonitionShowdownExtension = () =>
   // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-   React.useMemo(
+  React.useMemo(
     () => ({
       type: 'lang',
       regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,
@@ -42,17 +41,14 @@ const useAdmonitionShowdownExtension = () =>
         admonitionType = admonitionType.toUpperCase();
 
         const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
-        const style =
-          admonitionType === AdmonitionType.CAUTION ? { backgroundColor: '#ec7a0915' } : {};
         const mdContent = <QuickStartMarkdownView content={content} />;
         const pfAlert = (
           <Alert
             variant={variant}
-            customIcon={customIcon && customIcon}
+            {...(customIcon && { customIcon })}
             isInline
             title={admonitionType}
             className="pfext-markdown-admonition"
-            style={style}
           >
             {mdContent}
           </Alert>
@@ -61,7 +57,5 @@ const useAdmonitionShowdownExtension = () =>
       },
     }),
     [],
-  )
-;
-
+  );
 export default useAdmonitionShowdownExtension;

package/src/ConsoleShared/src/components/markdown-extensions/code-extension.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { removeTemplateWhitespace } from './utils';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { CodeBlock } from '@patternfly/react-core';
-import './showdown-extension.scss';
 
-const useCodeShowdownExtension = () => React.useMemo(
+const useCodeShowdownExtension = () =>
+  React.useMemo(
     () => ({
       type: 'output',
       regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,

package/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx

@@ -4,7 +4,6 @@ import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
 import { removeTemplateWhitespace } from './utils';
 import { renderToStaticMarkup } from 'react-dom/server';
 import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
-import './showdown-extension.scss';
 
 const useInlineCopyClipboardShowdownExtension = () => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);

package/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx

@@ -1,11 +1,10 @@
+/* eslint-disable max-len */
 import * as React from 'react';
 import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
 import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
 import { renderToStaticMarkup } from 'react-dom/server';
 import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
 
-import './showdown-extension.scss';
-
 const useMultilineCopyClipboardShowdownExtension = () => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
   return React.useMemo(
@@ -29,10 +28,7 @@ const useMultilineCopyClipboardShowdownExtension = () => {
                 </div>
               </div>
               <div class="pf-v6-c-code-block__content">
-                <pre class="pf-v6-c-code-block__pre pfext-code-block__pre">
-                  <code class="pf-v6-c-code-block__code" 
-                    ${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code>
-                </pre>
+                <pre class="pf-v6-c-code-block__pre pfext-code-block__pre"><code class="pf-v6-c-code-block__code"${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code></pre>
               </div>
             </div>`;
       },

package/src/ConsoleShared/src/components/markdown-extensions/utils.ts

@@ -1 +1,2 @@
-export const removeTemplateWhitespace = (template: string): string => template.replace(/>(?:\s|\n)+</g, '><');
+export const removeTemplateWhitespace = (template: string): string =>
+  template.replace(/>(?:\s|\n)+</g, '><');

package/src/ConsoleShared/src/components/modal/Modal.tsx

@@ -1,6 +1,5 @@
-import './Modal.scss';
 import * as React from 'react';
-import { Modal as PfModal, ModalProps as PfModalProps } from '@patternfly/react-core';
+import { Modal as PfModal, ModalProps as PfModalProps } from '@patternfly/react-core/deprecated';
 import { css } from '@patternfly/react-styles';
 
 type ModalProps = {

package/src/ConsoleShared/src/components/popper/SimplePopper.tsx

@@ -66,9 +66,12 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     initialize();
   }, [initialize]);
 
-  React.useEffect(() => () => {
+  React.useEffect(
+    () => () => {
       destroy();
-    }, [destroy]);
+    },
+    [destroy],
+  );
 
   React.useEffect(() => {
     if (!isOpen) {

package/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx

@@ -1,4 +1,3 @@
-import './spotlight.scss';
 import * as React from 'react';
 import { Portal, SimplePopper } from '../popper';
 

package/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx

@@ -1,4 +1,3 @@
-import './spotlight.scss';
 import * as React from 'react';
 import { useBoundingClientRect } from '../../hooks';
 import Portal from '../popper/Portal';

package/src/ConsoleShared/src/components/status/icons.tsx

@@ -6,11 +6,7 @@ import { Icon } from '@patternfly/react-core';
 
 export const GreenCheckCircleIcon: React.FC<ColoredIconProps> = ({ className, title, size }) => (
   <Icon size={size} status="success">
-    <CheckCircleIcon
-      data-test="success-icon"
-      className={className}
-      title={title}
-    />
+    <CheckCircleIcon data-test="success-icon" className={className} title={title} />
   </Icon>
 );
 

package/src/HelpTopicDrawer.tsx

@@ -1,4 +1,3 @@
-import './QuickStartDrawer.scss';
 import * as React from 'react';
 import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 import HelpTopicPanelContent from './HelpTopicPanelContent';
@@ -103,9 +102,7 @@ export const HelpTopicDrawer: React.FC<HelpTopicDrawerProps> = ({ children, ...p
       <Drawer isExpanded={!!activeHelpTopic} isInline {...props}>
         {children ? (
           <DrawerContent panelContent={panelContent}>
-            <DrawerContentBody className="pfext-quick-start-drawer__body">
-              {children}
-            </DrawerContentBody>
+            <DrawerContentBody>{children}</DrawerContentBody>
           </DrawerContent>
         ) : (
           <div className="pf-v6-c-drawer__main">{panelContent}</div>

package/src/HelpTopicPanelContent.tsx

@@ -21,7 +21,6 @@ import { HelpTopic } from './utils/help-topic-types';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
-import './QuickStartPanelContent.scss';
 import { HelpTopicContext, HelpTopicContextValues } from './utils/help-topic-context';
 
 interface HelpTopicPanelContentProps {
@@ -95,10 +94,10 @@ const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps> = ({
   );
 
   const content = (
-    <DrawerPanelContent isResizable={isResizable} className="pfext-quick-start__base" {...props}>
+    <DrawerPanelContent isResizable={isResizable} {...props}>
       <div>
         <DrawerHead>
-          <div className="pfext-quick-start-panel-content__title">
+          <div>
             {helpTopicOptions && (
               <Select
                 isPlain
@@ -126,7 +125,6 @@ const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps> = ({
             <Title
               headingLevel="h1"
               size="xl"
-              className="pfext-quick-start-panel-content__name"
               style={{ marginRight: 'var(--pf-t--global--spacer--md)' }}
             >
               {activeHelpTopic?.title}
@@ -134,22 +132,12 @@ const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps> = ({
           </div>
           {
             <DrawerActions>
-              <DrawerCloseButton
-                onClick={onClose}
-                className="pfext-quick-start-panel-content__close-button"
-                data-testid="qs-drawer-close"
-              />
+              <DrawerCloseButton onClick={onClose} data-testid="qs-drawer-close" />
             </DrawerActions>
           }
         </DrawerHead>
         <Divider />
-        <DrawerPanelBody
-          hasNoPadding
-          className="pfext-quick-start-panel-content__body"
-          data-test="content"
-        >
-          {panelBodyItems}
-        </DrawerPanelBody>
+        <DrawerPanelBody data-test="content">{panelBodyItems}</DrawerPanelBody>
       </div>
     </DrawerPanelContent>
   );

package/src/QuickStartCatalogPage.tsx

@@ -3,10 +3,11 @@ import {
   Button,
   Divider,
   EmptyState,
+  EmptyStateActions,
   EmptyStateBody,
-  Text,
   EmptyStateFooter,
-  EmptyStateActions,
+  PageSection,
+  Content,
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { EmptyBox, LoadingBox, clearFilterParams } from '@console/internal/components/utils';
@@ -28,7 +29,11 @@ export interface QuickStartCatalogPageProps {
 export const QuickStartCatalogEmptyState = ({ clearFilters }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
   return (
-    <EmptyState  headingLevel="h4" icon={SearchIcon}  titleText={<>{getResource('No results found')}</>}>
+    <EmptyState
+      headingLevel="h4"
+      icon={SearchIcon}
+      titleText={<>{getResource('No results found')}</>}
+    >
       <EmptyStateBody>
         {getResource(
           'No results match the filter criteria. Remove filters or clear all filters to show results.',
@@ -156,33 +161,37 @@ export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
   }
 
   return (
-    <div className="pfext-quick-start__base">
-      {showTitle && (
-        <div className="pfext-page-layout__header">
-          <Text component="h1" className="pfext-page-layout__title" data-test="page-title">
-            {title || getResource('Quick Starts')}
-          </Text>
-          {hint && <div className="pfext-page-layout__hint">{hint}</div>}
-        </div>
-      )}
-      {showTitle && <Divider component="div" />}
-      {showFilter && (
-        <>
-          <QuickStartCatalogFilter
-            quickStartsCount={filteredQuickStarts.length}
-            onSearchInputChange={onSearchInputChange}
-            onStatusChange={onStatusChange}
-          />
-          <Divider component="div" />
-        </>
+    <>
+      {(showTitle || showFilter) && (
+        <PageSection hasBodyWrapper={false}>
+          {showTitle && (
+            <>
+              <Content component="h1" data-test="page-title">
+                {title || getResource('Quick Starts')}
+              </Content>
+              {hint && <div>{hint}</div>}
+            </>
+          )}
+          {showTitle && <Divider component="div" />}
+          {showFilter && (
+            <>
+              <QuickStartCatalogFilter
+                quickStartsCount={filteredQuickStarts.length}
+                onSearchInputChange={onSearchInputChange}
+                onStatusChange={onStatusChange}
+              />
+              <Divider component="div" />
+            </>
+          )}
+        </PageSection>
       )}
-      <>
+      <PageSection hasBodyWrapper={false}>
         {filteredQuickStarts.length === 0 ? (
           <QuickStartCatalogEmptyState clearFilters={clearFilters} />
         ) : (
           <QuickStartCatalog quickStarts={filteredQuickStarts} />
         )}
-      </>
-    </div>
+      </PageSection>
+    </>
   );
 };

package/src/QuickStartCloseModal.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, Flex, FlexItem, ModalVariant } from '@patternfly/react-core';
+import { Button, Flex, FlexItem } from '@patternfly/react-core';
+import { ModalVariant } from '@patternfly/react-core/deprecated';
 import { Modal } from '@console/shared';
 import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
 
@@ -17,7 +18,6 @@ const QuickStartCloseModal: React.FC<QuickStartCloseModalProps> = ({
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
   return (
     <Modal
-      className="pfext-quick-start-drawer__modal pfext-quick-start__base"
       isOpen={isOpen}
       variant={ModalVariant.small}
       showClose={false}

package/src/QuickStartController.tsx

@@ -101,7 +101,7 @@ const QuickStartController: React.FC<QuickStartControllerProps> = ({
         totalTasks={totalTasks}
         onNext={handleNext}
         onBack={handleBack}
-        footerClass={footerClass}
+        className={footerClass}
         quickStartId={quickStart.metadata.name}
       />
     </>

package/src/QuickStartDrawer.tsx

@@ -1,4 +1,3 @@
-import './QuickStartDrawer.scss';
 import * as React from 'react';
 import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 import QuickStartCloseModal from './QuickStartCloseModal';
@@ -163,7 +162,6 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
     activeQuickStartState,
     allQuickStartStates,
     setAllQuickStartStates,
-    useLegacyHeaderColors,
   } = React.useContext<QuickStartContextValues>(QuickStartContext);
   const combinedQuickStarts = allQuickStarts.concat(quickStarts);
   React.useEffect(() => {
@@ -237,7 +235,6 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
       activeQuickStartID={activeQuickStartID}
       appendTo={appendTo}
       isResizable={!fullWidth}
-      headerVariant={useLegacyHeaderColors ? '' : 'blue-white'}
       {...fullWidthPanelStyle}
     />
   );
@@ -247,12 +244,10 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
       <Drawer isExpanded={!!activeQuickStartID} isInline {...props}>
         {children ? (
           <DrawerContent panelContent={panelContent} {...fullWidthBodyStyle}>
-            <DrawerContentBody className="pfext-quick-start-drawer__body">
-              {children}
-            </DrawerContentBody>
+            <DrawerContentBody>{children}</DrawerContentBody>
           </DrawerContent>
         ) : (
-          <div className="pf-v6-c-drawer__main">{panelContent}</div>
+          <div>{panelContent}</div>
         )}
       </Drawer>
       <QuickStartCloseModal

package/src/QuickStartPanelContent.scss

@@ -1,46 +1,14 @@
 .pfext-quick-start-panel-content {
-  &__header {
-    position: sticky;
-    top: 0px;
-    background: inherit;
-    z-index: var(--pf-t--global--z-index--xs);
-    &__shadow {
-      box-shadow: var(--pf-t--global--box-shadow--sm--bottom);
-    }
-    &--blue-white {
-      background-color: var(--pf-t--global--color--brand--default);
-      .pfext-quick-start-panel-content__title {
-        color: var(--pf-t--global--text--color--on-brand--default);
-      }
-      .pfext-quick-start-panel-content__duration {
-        color: var(--pf-t--global--text--color--on-brand--default);
-      }
-      .pfext-quick-start-panel-content__close-button {
-        button {
-          color: var(--pf-t--global--text--color--on-brand--default) !important;
-        }
-      }
-    }
-  }
+  background-color: var(--pf-t--global--color--brand--default);
+  color: var(--pf-t--global--text--color--inverse);
+  padding: var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg);
+
   &__body {
     display: flex;
     flex-direction: column;
   }
-  &__title {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-  &__duration {
-    display: inline-block;
-    font-size: var(--pf-t--global--font--size--body--default);
-    font-weight: var(--pf-t--global--font--weight--body);
-    line-height: 1;
-    color: var(--pf-t--global--text--color--subtle);
-  }
-  &__footer {
-    &__shadow {
-      box-shadow: var(--pf-t--global--box-shadow--sm--top);
-    }
+
+  &__close-button button.pf-v6-c-button {
+    --pf-v6-c-button--Color: var(--pf-t--global--text--color--inverse);
   }
 }