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

package/Skeleton/skeleton.scss

@@ -1,18 +1,18 @@
 .ins-c-skeleton {
-    &__xs { width: 16% !important; }
-    &__sm { width: 33% !important; }
-    &__md { width: 66% !important; }
-    &__lg { width: 100% !important; }
-    &.ins-m-dark {
-        --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
-        --pf-c-skeleton--after--LinearGradientColorStop1: var(
-          --pf-global--palette--black-600
-        );
-        --pf-c-skeleton--after--LinearGradientColorStop2: var(
-          --pf-global--palette--black-500
-        );
-        --pf-c-skeleton--after--LinearGradientColorStop3: var(
-          --pf-global--palette--black-600
-        );
-    }
+  &__xs { width: 16% !important; }
+  &__sm { width: 33% !important; }
+  &__md { width: 66% !important; }
+  &__lg { width: 100% !important; }
+  &.ins-m-dark {
+    --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
+    --pf-c-skeleton--after--LinearGradientColorStop1: var(
+      --pf-global--palette--black-600
+    );
+    --pf-c-skeleton--after--LinearGradientColorStop2: var(
+      --pf-global--palette--black-500
+    );
+    --pf-c-skeleton--after--LinearGradientColorStop3: var(
+      --pf-global--palette--black-600
+    );
+  }
 }

package/SkeletonTable/SkeletonTable.scss

@@ -1,3 +1,3 @@
 .ins-c-skeleton-table__dark {
-    background-color: #1b1d21 !important;
+  background-color: #1b1d21 !important;
 }

package/Spinner/spinner.scss

@@ -1,24 +1,22 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
 
 @keyframes spinner {
-    to { transform: rotate(360deg); }
+  to { transform: rotate(360deg); }
 }
    
 .ins-c-spinner {
-    display: inline-flex;
-    
-    &.ins-m-center {
-        display: flex;
-        justify-content: center;
-    }
-
-    &:before {
-        content: '';
-        @include rem('width', 30px);
-        @include rem('height', 30px);
-        border-radius: 50%;
-        border: 3px solid var(--pf-global--active-color--200);
-        border-top-color: var(--pf-global--active-color--100);
-        animation: spinner 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-    }
+  display: inline-flex;
+  &.ins-m-center {
+    display: flex;
+    justify-content: center;
+  }
+  &:before {
+    content: '';
+    @include rem('width', 30px);
+    @include rem('height', 30px);
+    border-radius: 50%;
+    border: 3px solid var(--pf-global--active-color--200);
+    border-top-color: var(--pf-global--active-color--100);
+    animation: spinner 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
 }

package/TableToolbar/TableToolbar.scss

@@ -6,9 +6,9 @@
 }
 
 .ins-c-table__toolbar, .ins-c-table__toolbar-results {
-    background: var(--pf-global--Color--light-100);
-    border-bottom: 1px solid var(--pf-global--BorderColor--light-200);
-    padding: var(--ins-c-table-toolbar--PaddingVertical) var(--ins-c-table-toolbar--PaddingHorizontal);
+  background: var(--pf-global--Color--light-100);
+  border-bottom: 1px solid var(--pf-global--BorderColor--light-200);
+  padding: var(--ins-c-table-toolbar--PaddingVertical) var(--ins-c-table-toolbar--PaddingHorizontal);
 }
 
 .ins-c-table__toolbar.ins-m-footer { border-top: 1px solid var(--pf-global--BorderColor--light-200); }
@@ -16,13 +16,13 @@
 .ins-c-table__toolbar-results { color: var(--pf-global--Color--200); }
 
 .ins-c-table__toolbar-results-count + .ins-c-table__toolbar-results-selected {
-    @include rem('margin-left', 15px);
-    @include rem('padding-left', 15px);
-    border-left: 2px solid var(--pf-global--BorderColor--light);
+  @include rem('margin-left', 15px);
+  @include rem('padding-left', 15px);
+  border-left: 2px solid var(--pf-global--BorderColor--light);
 }
 
 @media only screen and (max-width: 768px) {
-    .ins-c-table__toolbar, .ins-c-table__toolbar-results {
-        padding: 0 0;
-    }
+  .ins-c-table__toolbar, .ins-c-table__toolbar-results {
+    padding: 0 0;
+  }
 }

package/TagCount/tagCount.scss

@@ -1,9 +1,9 @@
 button.ins-c-tag-count {
-    color: var(--pf-global--icon--Color--light);
-    display: flex;
-    align-content: center;
+  color: var(--pf-global--icon--Color--light);
+  display: flex;
+  align-content: center;
 }
 
 .ins-c-tag__text {
-    margin-left: 10px;
+  margin-left: 10px;
 }

package/TagModal/tagModal.scss

@@ -1,3 +1,3 @@
 .ins-c-tag-modal {
-    height: calc(var(--pf-global--spacer--4xl) + var(--pf-global--breakpoint--md));
+  height: calc(var(--pf-global--spacer--4xl) + var(--pf-global--breakpoint--md));
 }

package/Unavailable/Unavailable.scss

@@ -1,3 +1,3 @@
 .ins-c-empty-state__unavailable {
-    svg { color: var(--pf-global--danger-color--100); }
+  svg { color: var(--pf-global--danger-color--100); }
 }

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.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: 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;
+  &.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.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);
-        }}
+  }
+}