@redhat-cloud-services/frontend-components 3.9.1 → 3.9.4

package/cypress/cypress.webpack.config.js

@@ -0,0 +1,37 @@
+const path = require('path');
+
+module.exports = {
+  entry: '../src/index.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: 'babel-loader',
+      },
+      {
+        test: /\.s?[ac]ss$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.(jpe?g|png|gif|svg|woff2?)$/i, 
+        use: 'file-loader',
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js']
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  stats: {
+    errorDetails: true
+  }
+};

package/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/cypress/plugins/index.js

@@ -0,0 +1,30 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  if (config.testingType === 'component') {
+    const { startDevServer } = require('@cypress/webpack-dev-server');
+
+    // Your project's Webpack configuration
+    const webpackConfig = require('../cypress.webpack.config.js')
+
+    on('dev-server:start', (options) => startDevServer({options, webpackConfig}));
+  }
+}

package/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

package/cypress/support/index.js

@@ -0,0 +1,21 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+import '@patternfly/patternfly/patternfly.css';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/cypress.json

@@ -0,0 +1,9 @@
+{
+  "component": {
+    "componentFolder": "src/",
+    "testFiles": "**/*.spec.ct.{js,ts,jsx,tsx}",
+    "viewportHeight": 660,
+    "viewportWidth": 1000
+  },
+  "video": false
+}

package/esm/BulkSelect/bulk-select.scss

@@ -1,19 +1,19 @@
 .ins-c-bulk-select {
-    .pf-c-dropdown__toggle-check span.pf-c-dropdown__toggle-text {
-        display: initial;
-    }
-    .ins-c-bulk-select__selected {
-        display: none;
-    }
+  .pf-c-dropdown__toggle-check span.pf-c-dropdown__toggle-text {
+    display: initial;
+  }
+  .ins-c-bulk-select__selected {
+    display: none;
+  }
 }
 
 @media only screen and (max-width: 768px) {
-    .ins-c-bulk-select {
-        .pf-c-dropdown__toggle-check span.pf-c-dropdown__toggle-text {
-            display: none;
-        }
-        .ins-c-bulk-select__selected {
-            display: initial;
-        }
+  .ins-c-bulk-select {
+    .pf-c-dropdown__toggle-check span.pf-c-dropdown__toggle-text {
+      display: none;
+    }
+    .ins-c-bulk-select__selected {
+      display: initial;
     }
+  }
 }

package/esm/ConditionalFilter/conditional-filter.css

@@ -11,7 +11,7 @@
   max-width: 9.375rem;
 }
 .ins-c-conditional-filter .ins-c-conditional-filter__group .pf-c-dropdown__toggle-text {
-  width: 102px;
+  width: auto;
   text-align: left;
 }
 .ins-c-conditional-filter .ins-c-conditional-filter__group .pf-c-dropdown__toggle-text > svg {

package/esm/ConditionalFilter/conditional-filter.scss

@@ -1,110 +1,101 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
 
 .ins-c-conditional-filter {
-    &.mobile {
-        display: none !important;
-        visibility: hidden !important;
-    }
-    .pf-c-select__toggle-wrapper .pf-c-select__toggle-text {
-        @include rem('max-width', 150px);
-    }
-
-    .ins-c-conditional-filter__group {
-        .pf-c-dropdown__toggle-text {
-            width: 102px;
-            text-align: left;
-
-            & > svg {
-                margin-right: var(--pf-global--spacer--xs);
-            }
-        }
-
-        .ins-c-conditional-filter__no-label .pf-c-dropdown__toggle-text  {
-            width: auto;
+  &.mobile {
+    display: none !important;
+    visibility: hidden !important;
+  }
+  .pf-c-select__toggle-wrapper .pf-c-select__toggle-text {
+    @include rem('max-width', 150px);
+  }
+  .ins-c-conditional-filter__group {
+    .pf-c-dropdown__toggle-text {
+      width: auto;
+      text-align: left;
+        & > svg {
+          margin-right: var(--pf-global--spacer--xs);
         }
+      }
+    .ins-c-conditional-filter__no-label .pf-c-dropdown__toggle-text  {
+      width: auto;
     }
+  }
 
-    .pf-l-split__item {
-        .pf-c-select__menu-group {
-            .pf-c-select__menu-group-title:empty {
-                display: none;
-            }
-
-            padding: 0;
-        }
-        
-        .pf-c-select__option-button {
-            padding: 0;
-        }
-
-        .pf-c-select__menu-item-icon {
-            display: none;
-        }
-    }
-
-    input.ins-c-conditional-filter[type="text"] {
-        @include rem('padding-right', 35px);
-        @include rem('margin-right', -23px);
-
-        & + svg {
-            position: relative;
-            @include rem('left', -5px);
-            @include rem('top', 2px);
-        }
+  .pf-l-split__item {
+    .pf-c-select__menu-group {
+      .pf-c-select__menu-group-title:empty {
+        display: none;
+      }
+      padding: 0;
     }
-
-    .pf-c-select__toggle-text {
-        margin-right: 0;
+    .pf-c-select__option-button {
+      padding: 0;
     }
-    .pf-c-select__toggle-badge {
-        display: none;
+    .pf-c-select__menu-item-icon {
+      display: none;
     }
+  }
+  input.ins-c-conditional-filter[type="text"] {
+    @include rem('padding-right', 35px);
+    @include rem('margin-right', -23px);
 
-    .pf-c-menu-toggle {
-        .pf-c-menu-toggle__text {
-            flex: 1;
-            input { border: none; }
-        }
+    & + svg {
+      position: relative;
+      @include rem('left', -5px);
+      @include rem('top', 2px);
+    }
+  }
+  .pf-c-select__toggle-text {
+    margin-right: 0;
+  }
+  .pf-c-select__toggle-badge {
+    display: none;
+  }
+  .pf-c-menu-toggle {
+    .pf-c-menu-toggle__text {
+      flex: 1;
+      input { border: none; }
     }
+  }
 }
 
 .pf-c-menu {
-    &.ins-c-menu__scrollable {
-        max-height: 416px;
-        overflow-y: auto;
-        min-width: initial;
-    }
-    .ins-c-menu__show--more {
-        background: none;
-        .pf-c-menu__item-text{ color: var(--pf-global--active-color--100); }
-    }
+  &.ins-c-menu__scrollable {
+    max-height: 416px;
+    overflow-y: auto;
+    min-width: initial;
+  }
+  .ins-c-menu__show--more {
+    background: none;
+    .pf-c-menu__item-text{ color: var(--pf-global--active-color--100); }
+  }
 }
 
 @media only screen and (max-width: 768px) {
-    .ins-c-conditional-filter {
-        &.mobile {
-            visibility: visible !important;
-            display: grid !important;
-        }
-        &.desktop {
-            visibility: hidden;
-            display: none;
-        }
+  .ins-c-conditional-filter {
+    &.mobile {
+      visibility: visible !important;
+      display: grid !important;
+    }
+    &.desktop {
+      visibility: hidden;
+      display: none;
     }
+  }
 }
 
 @media only screen and (max-width: 884px) {
-    .ins-c-conditional-filter {
-        .ins-c-conditional-filter__group {
-            .pf-c-dropdown__toggle-text {
-                width: auto;
-            }
-            .ins-c-conditional-filter__value-selector {
-                display: none;
-            }
-            .ins-c-conditional-filter__group {
-                width: initial;
-            }
-        }
+  .ins-c-conditional-filter {
+    .ins-c-conditional-filter__group {
+      .pf-c-dropdown__toggle-text {
+        width: auto;
+      }
+      .ins-c-conditional-filter__value-selector {
+        display: none;
+      }
+      .ins-c-conditional-filter__group {
+        width: initial;
+      }
     }
+  }
 }

package/esm/CullingInfo/CullingInformation.scss

@@ -3,8 +3,8 @@
 .ins-c-inventory__culling-danger { color: var(--pf-global--danger-color--100); }
 
 .ins-c-inventory__culling-danger, .ins-c-inventory__culling-warning {
-    font-weight: var(--pf-global--FontWeight--bold);
-    svg {
-        margin-right: var(--pf-global--spacer--sm);
-    }
+  font-weight: var(--pf-global--FontWeight--bold);
+  svg {
+    margin-right: var(--pf-global--spacer--sm);
+  }
 }

package/esm/DownloadButton/DownloadButton.js

@@ -40,7 +40,7 @@ var DownloadButton = function (_a) {
     var conditionallyTooltip = function (children) {
         return React.createElement(React.Fragment, null, tooltipText ? React.createElement(Tooltip, { content: tooltipText }, children) : children);
     };
-    return (React.createElement(React.Fragment, null, conditionallyTooltip(React.createElement(Dropdown, __assign({}, props, { isPlain: true, onSelect: internalOnSelect, toggle: React.createElement(DropdownToggle, { "aria-label": "Export", toggleIndicator: null, onToggle: onToggle, isDisabled: isDisabled, ouiaId: "Export" },
+    return (React.createElement(React.Fragment, null, conditionallyTooltip(React.createElement(Dropdown, __assign({ isPlain: true }, props, { onSelect: internalOnSelect, toggle: React.createElement(DropdownToggle, { "aria-label": "Export", toggleIndicator: null, onToggle: onToggle, isDisabled: isDisabled, ouiaId: "Export" },
             React.createElement(ExportIcon, { size: "sm" })), isOpen: isOpen, ouiaId: "Export", dropdownItems: __spreadArray([
             React.createElement(DropdownItem, { key: "download-csv", ouiaId: "DownloadCSV", component: "button", onClick: function (event) { return onSelect(event, 'csv'); }, isDisabled: isDisabled }, "Export to CSV"),
             React.createElement(DropdownItem, { key: "download-json", ouiaId: "DownloadJSON", component: "button", onClick: function (event) { return onSelect(event, 'json'); }, isDisabled: isDisabled }, "Export to JSON")

package/esm/DownloadButton/DownloadButton.spec.ct.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from '@cypress/react';
+import { DownloadButton } from '..';
+describe('DownloadButton component', function () {
+    beforeEach(function () {
+        mount(React.createElement(DownloadButton, null));
+    });
+    it('renders the dropdown', function () {
+        cy.get('.pf-c-dropdown');
+    });
+    it('on download callback fired', function () {
+        var onSelectSpy = cy.spy().as('onSelectSpy');
+        mount(React.createElement(DownloadButton, { onSelect: onSelectSpy }));
+        cy.get('div[data-ouia-component-id="Export"] > button').click();
+        cy.get('div[data-ouia-component-id="Export"] > ul > li > button[data-ouia-component-id="DownloadCSV"]').click();
+        cy.get('@onSelectSpy').should('have.been.called.with', 'csv');
+    });
+});
+//# sourceMappingURL=DownloadButton.spec.ct.js.map

package/esm/EmptyTable/EmptyTable.scss

@@ -1,11 +1,11 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
 
 .ins-c-table__empty {
-    background: var(--pf-global--Color--light-100);
-    border-bottom: 1px solid var(--pf-global--BorderColor--light-200);
-    @include rem('padding', 20px);
-    &.is-centered {
-        display: flex;
-        justify-content: center;
-    }
+  background: var(--pf-global--Color--light-100);
+  border-bottom: 1px solid var(--pf-global--BorderColor--light-200);
+  @include rem('padding', 20px);
+  &.is-centered {
+    display: flex;
+    justify-content: center;
+  }
 }

package/esm/ErrorState/error-state.scss

@@ -1,5 +1,5 @@
 .ins-c-error-state.pf-c-empty-state {
-    .pf-c-empty-state__icon {
-        fill: var(--pf-global--danger-color--100);
-    }
+  .pf-c-empty-state__icon {
+    fill: var(--pf-global--danger-color--100);
+  }
 }

package/esm/FilterChips/filter-chips.scss

@@ -1,15 +1,14 @@
 .ins-c-chip-filters .ins-c-chip-group__plain.pf-m-toolbar > li:not(.pf-m-overflow) {
-    background: none;
-    padding: 0;
-    background-color: initial;
-
-    h4 {
-        display: none;
-    }
+  background: none;
+  padding: 0;
+  background-color: initial;
+  h4 {
+    display: none;
+  }
 }
 
 .ins-c-chip-filters {
-    .pf-c-chip-group:not(:last-child) {
-        margin-right: var(--pf-global--spacer--sm);
-    }
+  .pf-c-chip-group:not(:last-child) {
+    margin-right: var(--pf-global--spacer--sm);
+  }
 }

package/esm/FilterHooks/tagFilterHook.scss

@@ -1,21 +1,20 @@
 .ins-c-tagfilter {
-    .ins-c-tagfilter__option label {
-        display: flex;
-        width: 100%;
-
-        .ins-c-tagfilter__option-value {
-            max-width: 12.5rem;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .pf-c-badge {
-            margin-left: auto;
-            padding-top: 0.2;
-        }
+  .ins-c-tagfilter__option label {
+    display: flex;
+    width: 100%;
+    .ins-c-tagfilter__option-value {
+      max-width: 12.5rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .pf-c-badge {
+      margin-left: auto;
+      padding-top: 0.2;
     }
-    .pf-c-select__menu-group-title:empty { display: none; }
+  }
+  .pf-c-select__menu-group-title:empty { display: none; }
 
-    .pf-c-select__menu > div { padding-top: 0; }
+  .pf-c-select__menu > div { padding-top: 0; }
 
-    &.pf-m-expanded { width: 18.75rem !important; }
+  &.pf-m-expanded { width: 18.75rem !important; }
 }

package/esm/InsightsLabel/labels.scss

@@ -1,19 +1,21 @@
 .pf-c-label {
-    --ins-c-label--gold-bg:             #fdf7e7;
-    --inc-c-label--content-gold:        var(--pf-global--palette--gold-700);
-    --inc-c-label--icon-gold:           #F4C145;
-    --inc-c-label--border-gold:         var(--pf-global--palette--gold-100)
+  --ins-c-label--gold-bg: #fdf7e7;
+  --inc-c-label--content-gold: var(--pf-global--palette--gold-700);
+  --inc-c-label--icon-gold: #F4C145;
+  --inc-c-label--border-gold: var(--pf-global--palette--gold-100)
 }
 
 .ins-c-label-2.pf-c-label {
-    background-color: var(--ins-c-label--gold-bg);
-    .pf-c-label__content {
-        color: var(--inc-c-label--content-gold);
-        .pf-c-label__icon {
-            color: var(--inc-c-label--icon-gold);
-        }
+  background-color: var(--ins-c-label--gold-bg);
+  .pf-c-label__content {
+    color: var(--inc-c-label--content-gold);
+    .pf-c-label__icon {
+      color: var(--inc-c-label--icon-gold);
     }
+  }
 }
-.ins-c-label-2.pf-c-label {.pf-c-label__content::before {
+.ins-c-label-2.pf-c-label {
+  .pf-c-label__content::before {
     border: 1px solid var(--inc-c-label--border-gold);
-        }}
+  }
+}

package/esm/InvalidObject/icon-404.scss

@@ -1,11 +1,7 @@
 .Icon404 {
-    height: 150px;
-
-    .cls-1 { fill:#fff; }
-
-    .cls-1,.cls-3{ fill-rule:evenodd;}
-    
-    .cls-2{ opacity:0.5;}
-    
-    .cls-4{ mask:url(#mask); }
+  height: 150px;
+  .cls-1 { fill:#fff; }
+  .cls-1,.cls-3{ fill-rule:evenodd;} 
+  .cls-2{ opacity:0.5;}
+  .cls-4{ mask:url(#mask); }
 }

package/esm/LongTextTooltip/index.js

@@ -1,4 +1,4 @@
 export { default } from './LongTextTooltip';
-export { default as LongTextTooltip } from './LongTextTooltip.js';
+export { default as LongTextTooltip } from './LongTextTooltip';
 export * from './LongTextTooltip';
 //# sourceMappingURL=index.js.map

package/esm/Main/main.scss

@@ -1,3 +1,3 @@
 .pf-l-page__main .pf-l-page__main-section.pf-m-dark:not(:first-child) {
-    background: var(--pf-global--BackgroundColor--dark-transparent-100);
+  background: var(--pf-global--BackgroundColor--dark-transparent-100);
 }

package/esm/Maintenance/maintenance.scss

@@ -1,7 +1,7 @@
 .ins-c-empty-state__maintenance {
-    .pf-c-empty-state__body {
-        color: var(--pf-global--Color--100);
-    }
-    .pf-c-empty-state__icon { fill: #EE0000; } // This is Red Hat's red, not Patternfly's red.
-    .pf-c-title { font-weight: 500; }
+  .pf-c-empty-state__body {
+    color: var(--pf-global--Color--100);
+  }
+  .pf-c-empty-state__icon { fill: #EE0000; } // This is Red Hat's red, not Patternfly's red.
+  .pf-c-title { font-weight: 500; }
 }

package/esm/NotAuthorized/NotAuthorized.scss

@@ -1,7 +1,7 @@
 .ins-c-not-authorized {
-    .pf-c-title {
-        max-width: 540px;
-        margin-left: auto;
-        margin-right: auto;
-    }
+  .pf-c-title {
+    max-width: 540px;
+    margin-left: auto;
+    margin-right: auto;
+  }
 }

package/esm/PageHeader/page-header.scss

@@ -1,12 +1,12 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
 
 .pf-l-page__main-section.pf-l-page-header.pf-m-dark-200 {
-    h1.pf-c-title.pf-m-2xl, * { color: #fff; }
+  h1.pf-c-title.pf-m-2xl, * { color: #fff; }
 }
 
 .pf-l-page__main-section.pf-l-page-header {
-    .pf-c-breadcrumb {
-        display: block;
-        @include rem('margin-bottom', 15px);
-    }
+  .pf-c-breadcrumb {
+    display: block;
+    @include rem('margin-bottom', 15px);
+  }
 }

package/esm/Pagination/pagination.scss

@@ -3,13 +3,12 @@
 @import '~@patternfly/patternfly/components/OptionsMenu/options-menu.scss';
 
 .ins-c-pagination-next .pf-c-options-menu {
-    .pf-c-dropdown__menu .pf-c-dropdown__menu-item {
-        display: flex;
-
-        .pf-c-options-menu__menu-item-icon {
-            padding-left: 0;
-        }
+  .pf-c-dropdown__menu .pf-c-dropdown__menu-item {
+    display: flex;
+    .pf-c-options-menu__menu-item-icon {
+      padding-left: 0;
     }
+  }
 }
 
 .pf-c-pagination .pf-c-pagination__nav .pf-c-pagination__nav-page-select input { width: 75px; } 

package/esm/PrimaryToolbar/PrimaryToolbar.js

@@ -43,7 +43,7 @@ function isPrimaryToolbarExpandAllObject(node) {
     return !React.isValidElement(node);
 }
 var PrimaryToolbar = function (_a) {
-    var id = _a.id, className = _a.className, toggleIsExpanded = _a.toggleIsExpanded, bulkSelect = _a.bulkSelect, filterConfig = _a.filterConfig, dedicatedAction = _a.dedicatedAction, actionsConfig = _a.actionsConfig, sortByConfig = _a.sortByConfig, pagination = _a.pagination, activeFiltersConfig = _a.activeFiltersConfig, children = _a.children, exportConfig = _a.exportConfig, expandAll = _a.expandAll, useMobileLayout = _a.useMobileLayout, props = __rest(_a, ["id", "className", "toggleIsExpanded", "bulkSelect", "filterConfig", "dedicatedAction", "actionsConfig", "sortByConfig", "pagination", "activeFiltersConfig", "children", "exportConfig", "expandAll", "useMobileLayout"]);
+    var id = _a.id, className = _a.className, _b = _a.toggleIsExpanded, toggleIsExpanded = _b === void 0 ? function () { return undefined; } : _b, bulkSelect = _a.bulkSelect, filterConfig = _a.filterConfig, dedicatedAction = _a.dedicatedAction, actionsConfig = _a.actionsConfig, sortByConfig = _a.sortByConfig, pagination = _a.pagination, activeFiltersConfig = _a.activeFiltersConfig, children = _a.children, exportConfig = _a.exportConfig, expandAll = _a.expandAll, useMobileLayout = _a.useMobileLayout, props = __rest(_a, ["id", "className", "toggleIsExpanded", "bulkSelect", "filterConfig", "dedicatedAction", "actionsConfig", "sortByConfig", "pagination", "activeFiltersConfig", "children", "exportConfig", "expandAll", "useMobileLayout"]);
     var overflowActions = __spreadArray([], (sortByConfig
         ? [
             {