Merge pull request #225 from patternfly/allow-special-attrs-titles

allow special asciidoc attrs in titles

Author: jschuler

package.json

@@ -5,7 +5,9 @@
   "description": "This library provides the quickstarts module",
   "license": "MIT",
   "workspaces": [
-    "packages/*"
+    "packages/dev",
+    "packages/module",
+    "packages/transform-adoc"
   ],
   "scripts": {
     "build": "yarn workspace @patternfly/quickstarts build && yarn build:adoc",
@@ -25,7 +27,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "devDependencies": {
-    "@patternfly/patternfly-a11y": "4.2.1",
+    "@patternfly/patternfly-a11y": "^4.3.1",
     "@percy/script": "^1.1.0",
     "@types/jest": "^26.0.14",
     "@typescript-eslint/eslint-plugin": "2.11.0",

packages/dev/package.json

@@ -9,10 +9,10 @@
     "serve": "serve public"
   },
   "dependencies": {
-    "@patternfly/patternfly": "4.183.1",
+    "@patternfly/patternfly": "^4.222.4",
     "@patternfly/quickstarts": "2.3.2",
     "@patternfly/transform-adoc": "*",
-    "@patternfly/react-core": "^4.135.0",
+    "@patternfly/react-core": "^4.267.6",
     "asciidoctor": "^2.2.1",
     "i18next": "^19.8.3",
     "i18next-browser-languagedetector": "^6.0.1",

packages/dev/src/quickstarts-data/asciidoc/getting-started-service-registry/README.adoc

@@ -9,7 +9,7 @@ WARNING: This content is generated by running npm --prefix .build run generate:a
 :product-version: 1
 :product-long: Application Services
 :product: App Services
-:registry-product-long: Red Hat OpenShift Service Registry
+:registry-product-long: Red Hat OpenShift{nbsp}Service Registry
 :registry: Service Registry
 // Placeholder URL, when we get a HOST UI for the service we can put it here properly
 :service-url: https://console.redhat.com/application-services/streams/
@@ -72,7 +72,7 @@ ifdef::qs[]
 Learn how to create and set up your first {registry} instance in {registry-product-long}.
 
 [#introduction]
-Welcome to the quick start for {registry-product-long}. In this quick start, you'll learn how to create and view a {registry} instance, create a schema in this instance, and create a service account to connect an application or service to this instance.
+Welcome to the quick{nbsp}start for {registry-product-long}. In this quick start, you'll learn how to create and view a {registry} instance, create a schema in this instance, and create a service account to connect an application or service to this instance.
 endif::[]
 
 [id="proc-creating-service-registry-instance_{context}"]

packages/module/package.json

@@ -47,17 +47,18 @@
     "showdown": ">=1.8.6"
   },
   "dependencies": {
-    "@patternfly/react-catalog-view-extension": "4.12.15",
+    "@patternfly/react-catalog-view-extension": "^4.93.15",
     "dompurify": "^2.2.6",
     "history": "^5.0.0",
     "showdown": "1.8.6"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.122.2",
-    "@patternfly/react-core": "4.135.15",
-    "@patternfly/react-icons": "4.11.4",
-    "@patternfly/react-styles": "4.11.4",
-    "@patternfly/react-tokens": "4.12.5",
+    "@patternfly/documentation-framework": "1.0.2",
+    "@patternfly/patternfly": "^4.222.4",
+    "@patternfly/react-core": "^4.267.6",
+    "@patternfly/react-icons": "4.93.6",
+    "@patternfly/react-styles": "4.92.6",
+    "@patternfly/react-tokens": "4.94.6",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",
@@ -71,10 +72,10 @@
     "@types/react-dom": "^16.8.0",
     "clean-css-cli": "^4.3.0",
     "concat-files": "^0.1.1",
+    "dart-sass": "^1.25.0",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
-    "node-sass": "^6.0.1",
     "node-sass-glob-importer": "^5.3.2",
     "prettier": "^2.1.2",
     "purgecss": "^4.0.0",
@@ -92,7 +93,6 @@
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-visualizer": "^5.5.0",
     "sass": "^1.35.2",
-    "tslib": "^2.0.3",
-    "@patternfly/documentation-framework": "1.0.2"
+    "tslib": "^2.0.3"
   }
 }

packages/module/rollup.config.js

@@ -25,7 +25,7 @@ const commonPlugins = [
 const includePaths = ['node_modules/', '../../node_modules/'];
 const commonScssOptions = {
   includePaths,
-  sass: require('node-sass'),
+  sass: require('sass'),
   importer: globImporter(),
 };
 

packages/module/src/ConsoleInternal/components/catalog/_catalog.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 // frontend/public/style/_vars.scss
 $font-size-base: 14px;
 $pfext-m-catalog-tile-height: 100%;
@@ -104,11 +106,11 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
   border: 1px solid var(--pf-global--BorderColor--300);
   display: flex;
   flex: 1;
-  padding-top: ($grid-gutter-width / 2);
+  padding-top: math.div($grid-gutter-width, 2);
 
   &--with-sidebar {
-    margin: 0 ($grid-gutter-width / 2);
-    padding-bottom: ($grid-gutter-width / 2);
+    margin: 0 math.div($grid-gutter-width, 2);
+    padding-bottom: math.div($grid-gutter-width, 2);
   }
 
   &__btn-group__group-by {
@@ -123,7 +125,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
 
   &__description {
     margin-top: -10px;
-    padding: 0 ($grid-gutter-width / 2) 10px;
+    padding: 0 math.div($grid-gutter-width, 2) 10px;
     @media (min-width: $grid-float-breakpoint) {
       padding-left: $grid-gutter-width;
       padding-right: $grid-gutter-width;
@@ -296,7 +298,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
 
   &__tabs {
     flex: 0 0 220px;
-    margin: 0 ($grid-gutter-width / 2) 0 0;
+    margin: 0 math.div($grid-gutter-width, 2) 0 0;
   }
 }
 

packages/module/src/QuickStartPanelContent.tsx

@@ -15,6 +15,8 @@ import QuickStartController from './QuickStartController';
 import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
 import { QuickStart } from './utils/quick-start-types';
 import { camelize } from './utils/quick-start-utils';
+import { removeParagraphWrap } from './QuickStartMarkdownView';
+import { markdownConvert } from './ConsoleInternal/components/markdown-view';
 
 type HandleClose = () => void;
 
@@ -112,7 +114,11 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
               className="pfext-quick-start-panel-content__name"
               style={{ marginRight: 'var(--pf-global--spacer--md)' }}
             >
-              {quickStart?.spec.displayName}{' '}
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: removeParagraphWrap(markdownConvert(quickStart?.spec.displayName)),
+                }}
+              />{' '}
               <small className="pfext-quick-start-panel-content__duration">
                 {quickStart?.spec.durationMinutes
                   ? getResource(

packages/module/src/catalog/QuickStartTileHeader.tsx

@@ -5,6 +5,7 @@ import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-cl
 import { StatusIcon } from '@console/shared';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
 import { QuickStartStatus, QuickStartType } from '../utils/quick-start-types';
+import QuickStartMarkdownView from '../QuickStartMarkdownView';
 
 type QuickStartTileHeaderProps = {
   status: string;
@@ -38,7 +39,7 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
   return (
     <div className="pfext-quick-start-tile-header">
       <Title headingLevel="h3" data-test="title" id={quickStartId}>
-        {name}
+        <QuickStartMarkdownView content={name} />
       </Title>
       <div className="pfext-quick-start-tile-header__status">
         {type && (

packages/module/src/styles/legacy-bootstrap/_code.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 //
 // Code (inline and block)
 // --------------------------------------------------
@@ -21,8 +23,8 @@ code {
 // Blocks of code
 pre {
   display: block;
-  padding: (($line-height-computed - 1) / 2);
-  margin: 0 0 ($line-height-computed / 2);
+  padding: math.div($line-height-computed - 1, 2);
+  margin: 0 0 math.div($line-height-computed, 2);
   font-size: ($font-size-base - 1); // 14px to 13px
   line-height: $line-height-base;
   color: $pre-color;

packages/module/src/styles/legacy-bootstrap/_type.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 //
 // Typography
 // --------------------------------------------------
@@ -18,13 +20,13 @@ h1, .h1,
 h2, .h2,
 h3, .h3 {
   margin-top: $line-height-computed;
-  margin-bottom: ($line-height-computed / 2);
+  margin-bottom: math.div($line-height-computed, 2);
 }
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-  margin-top: ($line-height-computed / 2);
-  margin-bottom: ($line-height-computed / 2);
+  margin-top: math.div($line-height-computed, 2);
+  margin-bottom: math.div($line-height-computed, 2);
 }
 
 h1, .h1 { font-size: $font-size-h1; }
@@ -39,7 +41,7 @@ h6, .h6 { font-size: $font-size-h6; }
 // -------------------------
 
 p {
-  margin: 0 0 ($line-height-computed / 2);
+  margin: 0 0 math.div($line-height-computed, 2);
 }
 
 
@@ -50,7 +52,7 @@ p {
 ul,
 ol {
   margin-top: 0;
-  margin-bottom: ($line-height-computed / 2);
+  margin-bottom: math.div($line-height-computed, 2);
   ul,
   ol {
     margin-bottom: 0;
@@ -75,7 +77,7 @@ dd {
 
 // Blockquotes
 blockquote {
-  padding: ($line-height-computed / 2) $line-height-computed;
+  padding: math.div($line-height-computed, 2) $line-height-computed;
   margin: 0 0 $line-height-computed;
   font-size: $blockquote-font-size;
   border-left: 5px solid $blockquote-border-color;