@patternfly/quickstarts 2.2.3 → 2.2.4

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;
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+// PF4 overrides
+$font-size-base: 14px;
+$font-size-h1: var(--pf-global--FontSize--2xl);
+$font-size-h2: 20px; // must be literal value because of calculation in patternfly/dist/sass/patternfly/_list-view.scss
+$font-size-h3: var(--pf-global--FontSize--lg);
+$font-size-h4: var(--pf-global--FontSize--md);
+$font-size-h5: var(--pf-global--FontSize--md);
+$font-size-h6: var(--pf-global--FontSize--md);
+$grid-gutter-width: 30px;
+$headings-font-family: var(--pf-global--FontFamily--heading--sans-serif);
+$headings-font-weight: var(--pf-global--FontWeight--normal);
+
+// PF3 variables
+$color-pf-black:                 #030303 !default;
+$color-pf-black-600:             #72767b !default;
+$color-pf-white:                 #fff !default;
+$color-pf-black-150:             #f5f5f5 !default;
+$color-pf-blue-600:              #004368 !default;
+$color-pf-blue-50:               #def3ff !default;
+$color-pf-black-100:             #fafafa !default;
+
+// PF3 bootstrap overrides
+$line-height-base:                                                  1.66666667 !default; // 20/12
+$line-height-computed:                                              floor(($font-size-base * $line-height-base)) !default;
+$gray-light:                                                        lighten($color-pf-black, 60%) !default;   // #999
+$gray-lighter:                                                      lighten($color-pf-black, 93.5%) !default; // #eee
+$gray-dark:                                                         lighten($color-pf-black, 20%) !default;   // #333
+$font-family-monospace:                                             Menlo, Monaco, Consolas, monospace !default;
+$code-color:                                                        $color-pf-blue-600 !default;
+$code-bg:                                                           $color-pf-blue-50 !default;
+$pre-bg:                                                            $color-pf-black-100 !default;
+$border-radius-base:                                                1px !default;
+$table-cell-padding:                                                10px !default;
+
+// bootstrap variables
+$screen-sm:                  768px !default;
+$screen-sm-min:              $screen-sm !default;
+$grid-float-breakpoint:     $screen-sm-min !default;
+$screen-md:                  992px !default;
+$headings-line-height:    1.1 !default;
+$headings-color:          inherit !default;
+$gray-base:              #000 !default;
+$blockquote-font-size:        ($font-size-base * 1.25) !default;
+$blockquote-border-color:     $gray-lighter !default;
+$pre-color:                   $gray-dark !default;
+$pre-border-color:            #ccc !default;
+$table-bg:                      transparent !default;
+$text-muted:                  $gray-light !default;

package/src/styles/legacy-bootstrap.scss

@@ -0,0 +1,5 @@
+.pfext-markdown-view {
+  @import './legacy-bootstrap/type';
+  @import './legacy-bootstrap/code';
+  @import './legacy-bootstrap/tables';
+}

package/src/styles/patternfly-global-entry.ts

@@ -0,0 +1 @@
+import './patternfly-global.scss';

package/src/styles/patternfly-global.scss

@@ -0,0 +1,28 @@
+// pulls in the patternfly drawer styles, in case the consumer does not have them
+// which can happen when they're not using PatternFly, or a different (older) version
+// some global styles that quickstarts uses (Drawer, Popover, Modal, Backdrop, Bullseye)
+
+// TODO: Investigate if we can remove and/or nest these within patternfly-nested.css
+// what do we really need to expose globally?
+// here are the classes that exist outside the scope of .pfext-quick-start__base:
+// class="pf-c-popover pfext-quick-start__base pf-m-right"
+// class="pf-c-modal-box pfext-modal pfext-quick-start-drawer__modal pfext-quick-start__base pf-m-sm"
+// class="pf-c-backdrop__open"
+// class="pf-c-backdrop"
+// class="pf-l-bullseye"
+// class="pf-c-tooltip pf-m-top pfext-quick-start__base"
+
+@import '@patternfly/patternfly/sass-utilities/all';
+// gets added globally to :root
+@import '@patternfly/patternfly/base/variables';
+
+@import '@patternfly/patternfly/components/Drawer/drawer.scss';
+@import '@patternfly/patternfly/components/Popover/popover.scss';
+
+// for the 'Leave quick start?` modal
+@import '@patternfly/patternfly/components/ModalBox/modal-box.scss';
+@import '@patternfly/patternfly/components/Backdrop/backdrop.scss';
+@import '@patternfly/patternfly/layouts/Bullseye/bullseye.scss';
+
+// for the markdown extension that lets users copy text to clipboard
+@import '@patternfly/patternfly/components/Tooltip/tooltip.scss';

package/src/styles/patternfly-nested-entry.ts

@@ -0,0 +1 @@
+import './patternfly-nested.scss';

package/src/styles/patternfly-nested.scss

@@ -0,0 +1,18 @@
+// pulls in the patternfly styles, in case the consumer does not have them
+// which can happen when they're not using PatternFly, or a different (older) version
+// that could be incompatible with the version of PatternFly that we're using
+
+@import '@patternfly/patternfly/sass-utilities/all';
+
+.pfext-quick-start__base {
+    $pf-global--enable-reset: false;
+    @import '@patternfly/patternfly/base/common';
+    @import '@patternfly/patternfly/utilities/Accessibility/accessibility.scss';
+
+    // it's okay that we include everything since we'll purge the unused styles
+    @import '@patternfly/patternfly/components/all';
+    @import '@patternfly/patternfly/layouts/all';
+
+    // some apps globally set text-align: center
+    text-align: left;
+}

package/src/styles/quickstarts-standalone-entry.ts

@@ -0,0 +1 @@
+import './quickstarts-standalone.scss';

package/src/styles/quickstarts-standalone.scss

@@ -0,0 +1,7 @@
+.pfext-quick-start__base {
+    @import './style.scss';
+    @import '../*.scss';
+    @import '../catalog/**/*.scss';
+    @import '../controller/**/*.scss';
+    @import './vendor.scss';
+}

package/src/styles/style.scss

@@ -0,0 +1,12 @@
+@import '@patternfly/patternfly/sass-utilities/all';
+@import './legacy-bootstrap/variables';
+
+@import './base';
+@import './dark-custom-override';
+
+// React Components
+@import '../ConsoleInternal/**/*.scss';
+@import '../ConsoleShared/**/*.scss';
+
+// legacy bootstrap typography styles for markdown content
+@import './legacy-bootstrap.scss';

package/src/styles/vendor-entry.ts

@@ -0,0 +1 @@
+import './vendor.scss';

package/src/styles/vendor.scss

@@ -0,0 +1,7 @@
+// be careful about adding additional stylesheets here, they are bundled into the quickstarts.css
+
+@import '@patternfly/patternfly/sass-utilities/all';
+
+@import '@patternfly/react-catalog-view-extension/dist/sass/react-catalog-view-extension.scss';
+@import '@patternfly/patternfly/components/ClipboardCopy/clipboard-copy.scss';
+@import '@patternfly/patternfly/components/CodeBlock/code-block.scss';