@patternfly/quickstarts 2.2.3 → 2.3.1

package/src/data/mocks/yamls/sample-application-quickstart.yaml

@@ -0,0 +1,97 @@
+apiVersion: console.openshift.io/v1
+kind: ConsoleQuickStart
+metadata:
+  name: sample-application
+spec:
+  version: 4.7
+  displayName: Getting started with a sample
+  durationMinutes: 10
+  icon: ''
+  description: Is this the first time you’ve used OpenShift? Let's start with a simple
+    sample app to learn the basics.
+  prerequisites: ['']
+  introduction: '### This Quick Start shows you how to deploy a sample application
+    to OpenShift.'
+  tasks:
+    - title: Creating a sample application
+      description: |-
+        ### To create a sample application:
+        1. Using the perspective switcher at the top of the navigation, go to **</> Developer**.
+        2. Go to the **+Add** page in the navigation.
+        3. Using the project drop-down list, select the project you would like to create the sample application in. You can also create a new one if you’d like.
+        4. Click **Samples** to create an application from a code sample.
+        5. Click on the **Node.js** card.
+        6. Scroll down and click **Create**.
+
+        The **Topology** view will load with your new sample application. The application is represented by the light grey area with the white border. The deployment is a white circle.
+      review:
+        instructions: |-
+          #### To verify the application was successfully created:
+          1. Do you see a **sample-app** application?
+          2. Do you see a **nodejs-sample** deployment?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have created a sample application!
+        failed: Try the steps again.
+    - title: Viewing build status
+      description: |-
+        ### To view the build status of the sample application:
+        1. Hover over the icon on the bottom left quadrant of the **nodejs-sample** deployment to see the build status in a tooltip.
+        2. Click on the icon for quick access to the build log.
+
+        You should be able to see the log stream of the **nodejs-sample-1** build on the **Build Details** page.
+      review:
+        instructions: |-
+          #### To verify the build is complete:
+          Wait for the build to complete. It may take a few minutes.  Do you see a **Completed** badge on the page header?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: Your sample app is now built!
+        failed: Try the steps again.
+    - title: Viewing the associated Git repo
+      description: |
+        ### To view the associated code:
+        1. If you aren't already there, go to the **Topology** page in the navigation.
+        2. The icon on the bottom right quadrant of the **nodejs-sample** deployment represents the Git repo of the associated code.  The icon shown can be for Bitbucket, GitHub, GitLab or generic Git. Click on it to navigate to the associated Git repository.
+      review:
+        instructions: |-
+          #### Verify you can see the code associated with the sample app:
+          Was a new browser tab opened with https://github.com/sclorg/nodejs-ex?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have viewed the associated Git repo.
+        failed: Try the steps again.
+    - title: Viewing the pod status
+      description: |-
+        ### To view the pod status:
+        1. Click on the browser tab with OpenShift.  Notice that the **nodejs-sample** deployment has a pod donut imposed on the circle, representing the pod status
+        2. Hover over the pod donut.
+
+        You should now see the pod status in a tooltip.
+      review:
+        instructions: |-
+          #### To verify you see the pod status:
+          Do you see the number of associated pods and their statuses?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have viewed the pod status for your app!
+        failed: Try the steps again.
+    - title: Running the sample application
+      description: |-
+        ### To run the sample application:
+        1. The icon on the top right quadrant of the **nodejs-sample** deployment represents the route URL. Click on it to open the URL and run the application.
+
+        The application will be run in a new tab.
+      review:
+        instructions: |-
+          #### To verify your sample application is running:
+          1. Make sure you are in the new tab.
+          2. Does the page have a **Welcome to your Node.js application on OpenShift** title?
+        failedTaskHelp: This task isn’t verified yet. Try the task again.
+      summary:
+        success: You have run your sample app!
+        failed: Try the steps again.
+  conclusion: Your sample application is deployed and ready! To add health checks
+    to your sample app, take the **Adding health checks to your sample application**
+    quick start
+  nextQuickStart: [add-healthchecks]

package/src/data/mocks/yamls/serverless-application-quickstart.yaml

@@ -0,0 +1,141 @@
+apiVersion: console.openshift.io/v1
+kind: ConsoleQuickStart
+metadata:
+  name: serverless-application
+spec:
+  version: 4.7
+  displayName: Exploring Serverless applications
+  icon: data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2UwMzQwMDt9LmNscy0ye2ZpbGw6I2NlMmUwMDt9LmNscy0ze2ZpbGw6bm9uZTt9LmNscy00e2ZpbGw6I2ZmZjt9LmNscy01e2ZpbGw6I2RjZGNkYzt9LmNscy02e2ZpbGw6I2FhYTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlJlZF9IYXQtT3BlbnNoaWZ0NC1DYXRhbG9nX0ljb25zLVNlcnZlcmxlc3M8L3RpdGxlPjxjaXJjbGUgY2xhc3M9ImNscy0xIiBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik04NS4zNiwxNC42NEE1MCw1MCwwLDAsMSwxNC42NCw4NS4zNloiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik00MC41Nyw0Ny40MmEzLjg5LDMuODksMCwxLDAsMy44OCwzLjg4QTMuODksMy44OSwwLDAsMCw0MC41Nyw0Ny40MloiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0yMS40Miw0Ny40MkEzLjg5LDMuODksMCwxLDAsMjUuMyw1MS4zLDMuODksMy44OSwwLDAsMCwyMS40Miw0Ny40MloiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik01MC4wOSw0OC44NmgtLjE4YTQuMTEsNC4xMSwwLDAsMS0zLjI2LTEuNjMsNy42OSw3LjY5LDAsMCwwLTEyLjE2LDAsNC4xMyw0LjEzLDAsMCwxLTMuMjYsMS42M0gzMWE0LjA5LDQuMDksMCwwLDEtMy4yNS0xLjYzQTcuNjksNy42OSwwLDAsMCwxNCw1MS45M2gwVjY0LjZhMi43OSwyLjc5LDAsMCwwLDIuNzksMi43OWgxNS44TDUxLjM0LDQ4LjY2QTQsNCwwLDAsMSw1MC4wOSw0OC44NloiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik03OC4wNSw0NC4yNWE3LjY1LDcuNjUsMCwwLDAtNS44NSwzQTQuMSw0LjEsMCwwLDEsNjksNDguODZoLS4xOWE0LjEzLDQuMTMsMCwwLDEtMy4yNi0xLjYzLDcuNjksNy42OSwwLDAsMC0xMi4xNiwwLDQuMTYsNC4xNiwwLDAsMS0yLDEuNDNMMzIuNjEsNjcuMzlIODMuMTlBMi43OSwyLjc5LDAsMCwwLDg2LDY0LjZWNTIuMDdBNy43Nyw3Ljc3LDAsMCwwLDc4LjA1LDQ0LjI1WiIvPjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0iTTIxLjEsNjNoMTBhMS44MywxLjgzLDAsMSwwLDAtMy42NmgtMTBhMS44MywxLjgzLDAsMCwwLDAsMy42NloiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjQwLjU3IiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjQwLjU3IiBjeT0iMjguMjMiIHI9IjEuMzUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjU5LjcyIiBjeT0iMjguMjMiIHI9IjEuMzUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjIxLjQyIiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjUwIiBjeT0iNDMuNDUiIHI9IjIuOTMiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjY4Ljg5IiBjeT0iNDMuNDUiIHI9IjIuOTMiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjMxLjA5IiBjeT0iNDMuNDUiIHI9IjIuOTMiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNiIgY3g9Ijc3Ljk0IiBjeT0iNTQuMzEiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNiIgY3g9IjY4LjkxIiBjeT0iNTQuMzEiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9Ijc3Ljk0IiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjU5LjcyIiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjUwIiBjeT0iMzMuMSIgcj0iMy4wMSIvPjxjaXJjbGUgY2xhc3M9ImNscy00IiBjeD0iMzEuMDkiIGN5PSIzMy4xIiByPSIzLjAxIi8+PGNpcmNsZSBjbGFzcz0iY2xzLTQiIGN4PSI2OC44OSIgY3k9IjMzLjEiIHI9IjMuMDEiLz48L3N2Zz4=
+  durationMinutes: 15
+  description: Learn how to create a Serverless application.
+  prerequisites: ['']
+  introduction: This quick start guides you through creating and using a serverless application.
+  tasks:
+    - title: Creating a serverless application
+      description: |-
+        ### To create a serverless application:
+        1. From the **Developer** perspective, in the navigation menu, click [+Add](/add).
+        2. At the top of the page, in the **Projects** list, select a project to create the application in.
+        3. Click **From Git**.
+        4. In the **Git Repo URL** field, type `https://github.com/sclorg/django-ex.git`.
+        5. Under Resources, select **Knative Service**.
+        6. At the end of the page, click **Create**.
+
+        The **Topology** view displays your new Serverless application. The application is represented by the light gray area with the white border. The Knative Service is the darker gray area with the dotted border. The Pod ring in the middle represents the revision.
+      review:
+        instructions: |-
+          #### To verify the application was successfully created:
+          From the **Topology** view, look for your new application. Wait for the build to complete. It may take a few minutes.
+
+          After the build completes, a green checkmark appears in the lower-left corner of the service. Your application will say  “No Revisions” in the center.
+
+          Do you see the completed application and build?
+        failedTaskHelp:
+          This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/serverless/serving-creating-managing-apps.html#creating-serverless-applications-using-the-openshift-container-platform-web-console)
+          about this topic.
+      summary:
+        success: You just created a Serverless app!
+        failed: Try the steps again.
+    - title: Demoing scalability
+      description: |
+        ### To see your application scale:
+        1. From the **Display Options** list at the top of the **Topology** view, click **Pod Count**.
+        2. Wait for the Pod count to scale down to zero Pods. Scaling down may take a few minutes.
+        3. Click the **Route URL** icon in the upper-right corner of the Knative Service panel. The application opens in a new tab.
+        4. Close the new browser tab and return to the **Topology** view.
+
+        In the **Topology** view, you can see that your application scaled up to one Pod to accommodate your request.  After a few minutes, your application scales back down to zero Pods.
+      review:
+        instructions: |-
+          #### To verify the application scaled down:
+          1. Click the revision inside your service. The badges under the Pod ring and at the top of the side panel should be (REV).
+          2. Click the **Details** tab in the side panel.
+
+          Is the Pod ring autoscaled to zero?
+        failedTaskHelp:
+          This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/applications/application_life_cycle_management/odc-viewing-application-composition-using-topology-view.html#odc-scaling-application-pods-and-checking-builds-and-routes_viewing-application-composition-using-topology-view)
+          about this topic.
+      summary:
+        success: You just scaled up your application to accomodate a traffic request!
+        failed: Try the steps again.
+    - title: Connecting an event source to your Knative Service
+      description: |-
+        ### To connect an event source to your Knative Service:
+        1. On the **Topology** View, hover over your service with your cursor. You should see a blue arrow.
+        2. Click and drag the blue arrow, then drop it anywhere outside the service.
+        3. In the list that appears, click **Event Source**.
+        4. Under the **Type** field, click **PingSource**.
+        5. In the **Data** field, type `This message is from PingSource`. This message is posted when the service is called.
+        6. In the **Schedule** field, type `* * * * *`.  This means that the PingSource will make a call every minute.
+        7. In the **Application** field, select **Sample Serverless App**.
+        8. Click **Create**.
+      review:
+        instructions: |-
+          #### To verify that the event connected to your Knative service:
+
+          Go to the **Topology** view.
+
+          Do you see a PingSource connected by a gray line to the side of your application?
+        failedTaskHelp:
+          This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/serverless/event_sources/knative-event-sources.html)
+          about this topic.
+      summary:
+        success: You just wired an Event Source to your Knative Service!
+        failed: Try the steps again.
+    - title: Forcing a new revision and set traffic distribution
+      description: |-
+        ### To force a revision and set traffic distribution:
+
+        1. In **Topology**, click on the revision inside your service to view its details. The badges under the Pod ring and at the top of the detail panel should be (REV).
+        2. In the side panel, click on the **Resources** tab.
+        3. Scroll down and click on the configuration associated with your service.
+        4. Go to the resource’s **YAML** tab.
+        5. Scroll all the way down until you see `timeoutSeconds`.
+        6. Change the value from `300` to `30` and click **Save**.
+        7. Go back to the **Topology** view.
+        8. Click on your service. The badge at the top of the side panel should be (KSVC).
+        9. In the side panel, click on the **Resources** tab.
+        10. Next to **Revisions**, click **Set Traffic Distribution**.
+        11. Click **Add Revision**.
+        12. In the **Revision** dropdown, select the new revision.
+        13. In the **Split** column, set both revisions to **50**.
+        14. Click **Save**.
+
+        You should now be able to watch as the Pod rings for each revision scale up and down each time the application is pinged.
+      review:
+        instructions: |-
+          #### To verify that you forced a new revision and set traffic distribution:
+
+          Make sure you are still in **Topology** view.
+
+          Do you see two revisions in your Knative Service?
+        failedTaskHelp:
+          This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/serverless/knative_serving/splitting-traffic-between-revisions.html)
+          about this topic.
+      summary:
+        success: You just set a traffic distribution for your Serverless app!
+        failed: Try the steps again.
+    - title: Deleting your application
+      description: |-
+        ### To delete the application you just created:
+
+        1. Click your application’s name. The badge at the top of the side panel should be (A).
+        2. At the top of the resource details panel, click on the **Actions** list.
+        3. Click **Delete application**.
+        4. To confirm deletion, type the application’s name in the **Name** field, and then click **Delete**.
+      review:
+        instructions: |-
+          #### To verify you deleted your application:          :
+
+          Make sure you are still in **Topology** view.
+
+          Has the Sample Serverless App been removed?
+        failedTaskHelp:
+          This task is not verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/applications/application_life_cycle_management/odc-deleting-applications.html)
+          about this topic.
+      summary:
+        success: You just deleted your Serverless app!
+        failed: Try the steps again.
+  conclusion: You just learned how to use Serverless applications in your cluster!
+    To learn more about building Serverless apps, take a look at our [Knative Cookbook](https://redhat-developer-demos.github.io/knative-tutorial/knative-tutorial/index.html).
+  nextQuickStart: ['']

package/src/data/quick-start-test-data.ts

@@ -0,0 +1,10 @@
+import { QuickStart } from '@patternfly/quickstarts';
+import { explorePipelinesQuickStart } from './mocks/json/explore-pipeline-quickstart';
+import { exploreServerlessQuickStart } from './mocks/json/explore-serverless-quickstart';
+import { monitorSampleAppQuickStart } from './mocks/json/monitor-sampleapp-quickstart';
+
+export const allQuickStarts: QuickStart[] = [
+  explorePipelinesQuickStart,
+  exploreServerlessQuickStart,
+  monitorSampleAppQuickStart,
+];

package/src/data/test-utils.ts

@@ -0,0 +1,11 @@
+import { QuickStart } from '@patternfly/quickstarts';
+import { allQuickStarts } from './quick-start-test-data';
+
+export const getQuickStarts = (): QuickStart[] => allQuickStarts;
+
+export const contextValues = {
+  allQuickStarts,
+  activeQuickStartID: '',
+  startQuickStart: () => {},
+  restartQuickStart: () => {},
+};

package/src/declaration.d.ts

@@ -0,0 +1,2 @@
+declare module '*.scss';
+declare module '*.json';

package/src/index.ts

@@ -0,0 +1,17 @@
+import './styles/style.scss';
+
+export * from './QuickStartCatalogPage';
+export * from './catalog';
+export * from './ConsoleInternal/components/utils';
+export * from './QuickStartDrawer';
+export * from './HelpTopicDrawer';
+export * from './utils/const';
+export * from './utils/quick-start-context';
+export * from './utils/quick-start-types';
+export * from './utils/help-topic-context';
+export * from './utils/help-topic-types';
+export * from './utils/quick-start-utils';
+export * from './utils/useLocalStorage';
+export * from './utils/asciidoc-procedure-parser';
+export { default as QuickStartPanelContent } from './QuickStartPanelContent';
+export { default as QuickStartCloseModal } from './QuickStartCloseModal';

package/src/locales/en/quickstart.json

@@ -0,0 +1,46 @@
+{
+  "No results found": "No results found",
+  "No results match the filter criteria. Remove filters or clear all filters to show results.": "No results match the filter criteria. Remove filters or clear all filters to show results.",
+  "Clear all filters": "Clear all filters",
+  "Quick Starts": "Quick Starts",
+  "Complete ({{statusCount, number}})": "Complete ({{statusCount, number}})",
+  "In progress ({{statusCount, number}})": "In progress ({{statusCount, number}})",
+  "Not started ({{statusCount, number}})": "Not started ({{statusCount, number}})",
+  "Filter by keyword...": "Filter by keyword...",
+  "Select filter": "Select filter",
+  "Status": "Status",
+  "{{count, number}} item": "{{count, number}} item",
+  "{{count, number}} item_plural": "{{count, number}} items",
+  "Prerequisites ({{totalPrereqs}})": "Prerequisites ({{totalPrereqs}})",
+  "View Prerequisites ({{totalPrereqs}})": "View Prerequisites ({{totalPrereqs}})",
+  "Prerequisites": "Prerequisites",
+  "Show prerequisites": "Show prerequisites",
+  "Complete": "Complete",
+  "In progress": "In progress",
+  "Not started": "Not started",
+  "{{duration, number}} minutes": "{{duration, number}} minutes",
+  "One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.": "One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.",
+  "Start {{nextQSDisplayName}} quick start": "Start {{nextQSDisplayName}} quick start",
+  "Start": "Start",
+  "Continue": "Continue",
+  "Next": "Next",
+  "Close": "Close",
+  "Back": "Back",
+  "Restart": "Restart",
+  "In this quick start, you will complete {{count, number}} task": "In this quick start, you will complete {{count, number}} task",
+  "In this quick start, you will complete {{count, number}} task_plural": "In this quick start, you will complete {{count, number}} tasks",
+  "{{taskIndex, number}}": "{{taskIndex, number}}",
+  "Check your work": "Check your work",
+  "Yes": "Yes",
+  "No": "No",
+  "{{index, number}} of {{tasks, number}}": "{{index, number}} of {{tasks, number}}",
+  "Leave quick start?": "Leave quick start?",
+  "Cancel": "Cancel",
+  "Leave": "Leave",
+  "Your progress will be saved.": "Your progress will be saved.",
+  "Not available": "Not available",
+  "Copy to clipboard": "Copy to clipboard",
+  "Successfully copied to clipboard!": "Successfully copied to clipboard!",
+  "Type": "Quick start",
+  "{{type}} • {{duration, number}} minutes": "{{type}} • {{duration, number}} minutes"
+}

package/src/styles/_base.scss

@@ -0,0 +1,54 @@
+// Base element styles.
+// Please DO NOT add rules of this type.
+.pfext-quick-start-panel-content__body {
+  dl {
+    margin: 0px; }
+
+  // match pf4 styling / table col head styling
+  dt {
+    font-weight: var(--pf-global--FontWeight--bold); }
+
+  dd {
+    margin-bottom: 20px; }
+
+  dd:last-child {
+    margin-bottom: 0px; }
+
+  input[type="number"] {
+    -webkit-appearance: textfield;
+    appearance: textfield;
+    max-width: 100px;
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+    }
+  }
+
+  input[type="radio"] {
+    margin-right: 7px;
+  }
+
+  .pf-c-list {
+    --pf-c-list--PaddingLeft: 20px;
+  }
+}
+
+// drawer
+.pfext-quick-start-panel-content__header,
+.pfext-quick-start-panel-content__body,
+// catalog gallery wrapper
+.pfext-page-layout__content,
+// catalog item prereq popover
+.pfext-popover__base {
+  --pf-global--FontSize--md: 14px;
+  --pf-global--FontSize--sm: 13px;
+
+  ul {
+      list-style-type: disc;
+  }
+
+  input[type='radio'],
+  input[type='checkbox'] {
+    margin-top: 1px !important;
+  }
+}

package/src/styles/_dark-custom-override.scss

@@ -0,0 +1,62 @@
+.pf-theme-dark {
+  .pfext-catalog-item-icon__img--large {
+    // Not perfect, but gives a better result for colors than just inverting
+    // by inverts to switch b/w, then rotates to get colors approximately back
+    filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4);
+  }
+
+  // duration color was gray on white but on the blue header, only white text works
+  .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration {
+    color: var(--pf-global--Color--light-100);
+  }
+
+  .pfext-quick-start-task-header__subtitle {
+    color: var(--pf-global--palette--black-200) !important;
+  }
+
+  .pfext-quick-start-task-header__task-icon-init {
+    background-color: var(--pf-global--primary-color--300);
+  }
+
+  .pfext-quick-start-task-header__tryagain {
+    color: var(--pf-global--palette--black-200) !important;
+  }
+
+  .pfext-markdown-view pre {
+    background-color: var(--pf-global--BackgroundColor--100);
+    border-color: var(--pf-global--BorderColor--100);
+  }
+
+  .pfext-markdown-view code {
+    color: var(--pf-global--Color--100);
+    background-color: var(--pf-global--palette--black-600);
+  }
+
+  .pfext-markdown-view .pf-c-code-block,
+  .pfext-markdown-view .pf-c-code-block code {
+    background-color: var(--pf-global--BackgroundColor--400);
+  }
+
+  :where(.pfext-markdown-view) .pf-c-clipboard-copy.pf-m-inline {
+    --pf-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  }
+
+  // Make the cards light on dark background. It would be better to use pf-c-page__main-section variable but we aren't using a page section here.
+  .pfext-page-layout__content {
+    background-color: var(--pf-global--BackgroundColor--200);
+  }
+
+  .pfext-quick-start-catalog__gallery-item .pf-c-card {
+    --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  }
+
+  // Alerts currently has the wrong background in the PF dark stylesheet. This can be removed once that is fixed.
+  .pf-c-alert {
+    --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-700);
+    --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--black-700);
+    --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--black-700);
+    --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--black-700);
+    --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--black-700);
+    --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-700);
+  }
+}

package/src/styles/legacy-bootstrap/README.md

@@ -0,0 +1,21 @@
+Contains a number of bootstrap styles that were implicitly in use within the markdown sections.
+
+Before we had a dependency on bootstrap-sass and pulled in several of their styles.
+
+"bootstrap-sass": "^3.3.7",
+
+```
+.pfext-markdown-view {
+  @import './ConsoleInternal/style/vars';
+  @import 'patternfly/dist/sass/patternfly/variables';
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/variables';
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/mixins';
+  @import 'patternfly/dist/sass/patternfly/bootstrap-mixin-overrides';
+
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/type';
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/code';
+  @import 'bootstrap-sass/assets/stylesheets/bootstrap/tables';
+}
+```
+
+Now we try to contain to a smaller subset and copy it in directly.

package/src/styles/legacy-bootstrap/_code.scss

@@ -0,0 +1,44 @@
+//
+// Code (inline and block)
+// --------------------------------------------------
+
+
+// Inline and block code styles
+code,
+pre {
+  font-family: $font-family-monospace;
+}
+
+// Inline code
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: $code-color;
+  background-color: $code-bg;
+  border-radius: $border-radius-base;
+}
+
+// Blocks of code
+pre {
+  display: block;
+  padding: (($line-height-computed - 1) / 2);
+  margin: 0 0 ($line-height-computed / 2);
+  font-size: ($font-size-base - 1); // 14px to 13px
+  line-height: $line-height-base;
+  color: $pre-color;
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: $pre-bg;
+  border: 1px solid $pre-border-color;
+  border-radius: $border-radius-base;
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    white-space: pre-wrap;
+    background-color: transparent;
+    border-radius: 0;
+  }
+}

package/src/styles/legacy-bootstrap/_tables.scss

@@ -0,0 +1,38 @@
+//
+// Tables
+// --------------------------------------------------
+
+
+table {
+  background-color: $table-bg;
+
+  // Table cell sizing
+  //
+  // Reset default table behavior
+
+  col[class*="col-"] {
+    position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
+    display: table-column;
+    float: none;
+  }
+
+  td,
+  th {
+    &[class*="col-"] {
+      position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
+      display: table-cell;
+      float: none;
+    }
+  }
+}
+
+caption {
+  padding-top: $table-cell-padding;
+  padding-bottom: $table-cell-padding;
+  color: $text-muted;
+  text-align: left;
+}
+
+th {
+  text-align: left;
+}

package/src/styles/legacy-bootstrap/_type.scss

@@ -0,0 +1,90 @@
+//
+// Typography
+// --------------------------------------------------
+
+
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-family: $headings-font-family;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+  color: $headings-color;
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3 {
+  margin-top: $line-height-computed;
+  margin-bottom: ($line-height-computed / 2);
+}
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  margin-top: ($line-height-computed / 2);
+  margin-bottom: ($line-height-computed / 2);
+}
+
+h1, .h1 { font-size: $font-size-h1; }
+h2, .h2 { font-size: $font-size-h2; }
+h3, .h3 { font-size: $font-size-h3; }
+h4, .h4 { font-size: $font-size-h4; }
+h5, .h5 { font-size: $font-size-h5; }
+h6, .h6 { font-size: $font-size-h6; }
+
+
+// Body text
+// -------------------------
+
+p {
+  margin: 0 0 ($line-height-computed / 2);
+}
+
+
+// Lists
+// -------------------------
+
+// Unordered and Ordered lists
+ul,
+ol {
+  margin-top: 0;
+  margin-bottom: ($line-height-computed / 2);
+  ul,
+  ol {
+    margin-bottom: 0;
+  }
+}
+
+// Description Lists
+dl {
+  margin-top: 0; // Remove browser default
+  margin-bottom: $line-height-computed;
+}
+dt,
+dd {
+  line-height: $line-height-base;
+}
+dt {
+  font-weight: 700;
+}
+dd {
+  margin-left: 0; // Undo browser default
+}
+
+// Blockquotes
+blockquote {
+  padding: ($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;
+
+  p,
+  ul,
+  ol {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}