@patternfly/quickstarts 2.2.2 → 2.3.0

package/dist/utils/asciidoc-procedure-parser.d.ts

@@ -0,0 +1,12 @@
+import { QuickStart, QuickStartTask } from './quick-start-types';
+export declare const ProcQuickStartParser: (quickStart: QuickStart & {
+    spec: {
+        tasks: QuickStartTask[] | string[];
+    };
+}, environmentVariables?: {
+    [name: string]: string;
+}) => QuickStart & {
+    spec: {
+        tasks: QuickStartTask[] | string[];
+    };
+};

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "PatternFly quick starts",
   "files": [
+    "src",
     "dist"
   ],
   "main": "dist/index.js",
@@ -20,7 +21,7 @@
   "scripts": {
     "clean": "rm -rf dist",
     "prebuild": "yarn clean",
-    "build": "rollup -c && yarn purge-css && yarn combine && yarn min-css && yarn min-css-standalone",
+    "build": "rollup -c && yarn purge-css && yarn combine && yarn min-css && yarn min-css-standalone && yarn docs:copy",
     "watch": "rollup -w --config rollup-quick.config.js",
     "quick": "rollup --config rollup-quick.config.js",
     "combine": "node ./combineCss.js",
@@ -32,7 +33,12 @@
     "post-css": "yarn purge-css && yarn min-css && yarn min-css-standalone",
     "purge-css": "purgecss --config ./purgecss.config.js",
     "min-css": "cleancss dist/quickstarts.css -o dist/quickstarts.min.css",
-    "min-css-standalone": "cleancss -o dist/quickstarts-standalone.min.css dist/patternfly-nested.css dist/quickstarts-standalone.css"
+    "min-css-standalone": "cleancss -o dist/quickstarts-standalone.min.css dist/patternfly-nested.css dist/quickstarts-standalone.css",
+    "docs:develop": "pf-docs-framework start",
+    "docs:build": "pf-docs-framework build all --output public",
+    "docs:serve": "pf-docs-framework serve public --port 5000",
+    "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
+    "docs:copy": "mkdir -p dist/patternfly-docs && cp -R patternfly-docs/content/extensions/quick-starts dist/patternfly-docs"
   },
   "peerDependencies": {
     "@patternfly/react-core": ">=4.115.2",
@@ -86,6 +92,7 @@
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-visualizer": "^5.5.0",
     "sass": "^1.35.2",
-    "tslib": "^2.0.3"
+    "tslib": "^2.0.3",
+    "@patternfly/documentation-framework": "1.0.2"
   }
 }

package/src/ConsoleInternal/components/_icon-and-text.scss

@@ -0,0 +1,14 @@
+.pfext-icon-and-text {
+  align-items: baseline;
+  display: flex;
+
+  // fix bug where concurrent .pf-c-label are misaligned vertically
+  .pf-c-label__icon & {
+    display: block;
+  }
+}
+
+.pfext-icon-and-text__icon {
+  flex-shrink: 0;
+  margin-right: 5px;
+}

package/src/ConsoleInternal/components/_markdown-view.scss

@@ -0,0 +1,19 @@
+.pfext-markdown-view {
+  &.is-empty {
+    color: #999;
+  }
+  table {
+    display: block;
+    margin-bottom: 11.5px;
+    overflow-x: auto;
+  }
+  td,
+  th {
+    border-bottom: 1px solid #ededed;
+    padding: 10px;
+    vertical-align: top;
+  }
+  th {
+    padding-top: 0;
+  }
+}

package/src/ConsoleInternal/components/catalog/_catalog.scss

@@ -0,0 +1,390 @@
+// frontend/public/style/_vars.scss
+$font-size-base: 14px;
+$pfext-m-catalog-tile-height: 100%;
+$pfext-m-catalog-tile-width: 260px;
+
+$catalog-capability-level-icon-left: -20px;
+$catalog-capability-level-icon-top: 4px;
+$catalog-capability-level-inactive-color: var(--pf-global--Color--400);
+$catalog-item-icon-size-lg: 40px;
+$catalog-item-icon-size-sm: 24px;
+$pfext-modal-ignore-warning-icon-width: 30px;
+$catalog-tile-width: $pfext-m-catalog-tile-width;
+
+// reset font size back to 13px since console h5 font size is 14px
+.catalog-item-header-pf-subtitle {
+  font-size: 13px;
+}
+
+.catalog-tile-pf-body .catalog-tile-pf-subtitle {
+  font-size: ($font-size-base - 1);
+}
+
+.pfext-catalog {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  min-width: 515px; // in order to accommodate filters and tiles at mobile
+}
+
+.pfext-catalog-tile-view {
+  display: flex;
+  flex-wrap: wrap;
+  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, 260px) !important;
+}
+
+.pfext-catalog__body {
+  min-width: 575px; // Minimum shrinkable width of .pfext-catalog child elements => 15 + ((220 + 15) + (30 + 250 + 30)) + 15
+  @media (min-width: $screen-sm-min) {
+    min-width: 590px; // Left margin 30 instead of 15
+  }
+}
+
+.pfext-catalog-item-details {
+  display: flex;
+  margin: 0 0 10px;
+
+  &__description {
+    white-space: pre-wrap;
+  }
+
+  &__kind-label {
+    font-weight: var(--pf-global--FontWeight--bold);
+  }
+
+  &__name {
+    margin-bottom: 10px;
+  }
+
+  &__provider,
+  &__tags {
+    margin-bottom: 5px;
+  }
+
+  &__tag {
+    color: $color-pf-black-600;
+    font-size: ($font-size-base - 1);
+    margin-right: 5px;
+    text-transform: uppercase;
+  }
+}
+
+.pfext-catalog-item-icon {
+  padding-right: 10px;
+
+  &__icon {
+    font-size: $catalog-item-icon-size-sm;
+
+    &--large {
+      font-size: $catalog-item-icon-size-lg;
+    }
+  }
+
+  &__img {
+    max-height: $catalog-item-icon-size-sm;
+    max-width: $catalog-item-icon-size-sm;
+
+    &[src$='.svg'] {
+      width: $catalog-item-icon-size-sm;
+    }
+
+    &--large {
+      max-height: $catalog-item-icon-size-lg;
+      max-width: $catalog-item-icon-size-lg;
+
+      &[src$='.svg'] {
+        width: $catalog-item-icon-size-lg;
+      }
+    }
+  }
+}
+
+.pfext-catalog-page {
+  background: $color-pf-white;
+  border: 1px solid var(--pf-global--BorderColor--300);
+  display: flex;
+  flex: 1;
+  padding-top: ($grid-gutter-width / 2);
+
+  &--with-sidebar {
+    margin: 0 ($grid-gutter-width / 2);
+    padding-bottom: ($grid-gutter-width / 2);
+  }
+
+  &__btn-group__group-by {
+    display: inline;
+    margin-left: var(--pf-global--spacer--md);
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    overflow: hidden;
+  }
+
+  &__description {
+    margin-top: -10px;
+    padding: 0 ($grid-gutter-width / 2) 10px;
+    @media (min-width: $grid-float-breakpoint) {
+      padding-left: $grid-gutter-width;
+      padding-right: $grid-gutter-width;
+    }
+  }
+
+  &__filter {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__filter-toggle {
+    margin-top: 5px;
+  }
+
+  &__grid {
+    background-color: $color-pf-black-150;
+  }
+
+  &__grouped-items {
+    margin-bottom: var(--pf-global--spacer--md);
+  }
+
+  &__group-title {
+    margin-bottom: var(--pf-global--spacer--sm);
+  }
+
+  &__header {
+    margin: 0 $grid-gutter-width 0 0;
+  }
+
+  &__heading {
+    font-size: 16px;
+    margin: 0 0 20px 30px;
+  }
+
+  &__hint {
+    margin: 0 0 var(--pf-global--spacer--md) 0;
+  }
+
+  &__input {
+    display: inline-flex !important;
+    margin: 0 0 20px 30px;
+    width: auto !important;
+  }
+
+  &__sort {
+    display: inline;
+    margin-left: var(--pf-global--spacer--md);
+  }
+
+  &__num-items {
+    font-weight: var(--pf-global--FontWeight--bold);
+    padding: 0 0 20px;
+  }
+
+  &__info-icon {
+    vertical-align: middle;
+    color: #6a6e73;
+    &:hover {
+      color: #151515;
+    }
+  }
+
+  // Enable scrolling on the modal
+  &__overlay {
+    border: 0 !important; // Collapse default PF4 modal border-width
+
+    .modal-body .pfext-hint-block {
+      margin-bottom: 10px;
+    }
+
+    .properties-side-panel-pf {
+      flex: 0 0 auto;
+    }
+  }
+
+  &__overlay--right {
+    bottom: 0;
+    padding: 0 !important;
+    right: 0;
+    top: 4.75rem; // --pf-c-page__header--MinHeight
+
+    .pf-c-modal-box__body {
+      // Required to position scroll shadows correctly on Chrome
+      display: flex;
+      flex-direction: column;
+      margin: 0 !important;
+      padding: 0;
+    }
+
+    .modal-body-inner-shadow-covers {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+
+    h1 {
+      white-space: normal;
+    }
+  }
+
+  &__overlay-action {
+    align-items: baseline;
+    display: inline-flex !important;
+    margin: var(--pf-global--spacer--sm) var(--pf-global--spacer--sm) 0 0;
+    overflow-x: hidden;
+  }
+
+  &__overlay-action-icon {
+    flex-shrink: 0;
+    font-size: $font-size-base;
+    margin-left: 6px;
+  }
+
+  &__overlay-action-label {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__overlay-actions {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: var(--pf-global--spacer--md);
+    white-space: normal;
+  }
+
+  &__overlay-header {
+    margin-bottom: var(--pf-global--spacer--md);
+  }
+
+  &__overlay-body {
+    margin: 0;
+    padding-left: var(--pf-global--spacer--lg);
+    padding-right: var(--pf-global--spacer--lg);
+    padding-top: var(--pf-global--spacer--md);
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+    }
+  }
+
+  &__overlay-description {
+    margin: 20px 0 0;
+    white-space: pre-wrap;
+    // TODO: find fix for urls that don't wrap
+    // fix below causes undesirable wrapping on non-urls
+    // word-break: break-all;
+    h1,
+    h2,
+    h3 {
+      color: #333; // same color as styles hardcoded in markdown text component
+    }
+
+    h2 {
+      font-size: 20px;
+    }
+
+    p,
+    li,
+    ol {
+      color: #333; // same color as styles hardcoded in markdown text component
+      font-size: $font-size-base !important;
+    }
+
+    @media (min-width: $screen-sm-min) {
+      flex: 1 1 auto;
+      margin-left: 20px;
+      margin-top: 0;
+    }
+  }
+
+  &__tabs {
+    flex: 0 0 220px;
+    margin: 0 ($grid-gutter-width / 2) 0 0;
+  }
+}
+
+@media screen and (min-width: $screen-sm) {
+  .pf-c-modal-box.pfext-catalog-page__overlay {
+    width: 600px;
+  }
+}
+
+@media screen and (min-width: $screen-md) {
+  .pf-c-modal-box.pfext-catalog-page__overlay {
+    width: 900px;
+  }
+}
+
+.pfext-catalog-tab__empty {
+  color: $color-pf-black-600;
+}
+
+.pfext-modal-ignore-warning {
+  height: initial;
+
+  &__checkbox.checkbox {
+    margin-bottom: 0;
+    padding-top: 15px;
+  }
+  &__content {
+    display: flex;
+  }
+  &__icon {
+    font-size: $pfext-modal-ignore-warning-icon-width;
+    margin-right: 15px;
+    // Avoid the dialog shifting when the icon loads.
+    min-width: $pfext-modal-ignore-warning-icon-width;
+  }
+  &__link {
+    display: block;
+    margin: 10px 0;
+  }
+}
+
+.properties-side-panel-pf-property-label {
+  font-size: ($font-size-base - 1);
+}
+
+.properties-side-panel-pf-property-value__capability-level {
+  color: $catalog-capability-level-inactive-color;
+  margin-bottom: 5px;
+  position: relative;
+
+  &--active {
+    color: inherit;
+
+    &::before {
+      display: none; // hide empty circle since icon is present
+    }
+  }
+
+  &::before {
+    // empty circle
+    border: 1px solid $catalog-capability-level-inactive-color;
+    border-radius: 10px;
+    content: '';
+    height: 14px;
+    left: $catalog-capability-level-icon-left;
+    position: absolute;
+    top: $catalog-capability-level-icon-top;
+    width: 14px;
+  }
+
+  &:not(:last-child)::after {
+    // pipe after circle
+    background: $catalog-capability-level-inactive-color;
+    content: '';
+    height: 6px;
+    left: -13px;
+    position: absolute;
+    top: 21px;
+    width: 1px;
+  }
+}
+
+.properties-side-panel-pf-property-value__capability-level-icon {
+  left: $catalog-capability-level-icon-left;
+  position: absolute;
+  top: $catalog-capability-level-icon-top;
+}
+
+.properties-side-panel-pf-property-value__capability-levels {
+  list-style: none;
+}