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

package/Reboot/reboot.scss

@@ -1,12 +1,12 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
 
 .ins-c-reboot {
-    span {
-        // 4px because the battery icon is 1px bigger than the reboot icon
-        @include rem('margin-left', 4px);
-    }
+  span {
+    // 4px because the battery icon is 1px bigger than the reboot icon
+    @include rem('margin-left', 4px);
+  }
 
-    &.ins-m-red {
-        span, svg { color: var(--pf-global--danger-color--100); }
-    }
+  &.ins-m-red {
+    span, svg { color: var(--pf-global--danger-color--100); }
+  }
 }

package/SimpleTableFilter/simple-table-filter.scss

@@ -5,14 +5,14 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
 
 .pf-c-input-group.ins-c-filter {
-    &.ins-u-no-title input {
-        @include rem('padding-right', 35px);
-        @include rem('margin-right', -23px);
-    }
-    .ins-c-search-icon {
-        color: var(--pf-global--secondary-color--100);
-        position: relative;
-        @include rem('left', -5px);
-        @include rem('top', 8px);
-    }
+  &.ins-u-no-title input {
+    @include rem('padding-right', 35px);
+    @include rem('margin-right', -23px);
+  }
+  .ins-c-search-icon {
+    color: var(--pf-global--secondary-color--100);
+    position: relative;
+    @include rem('left', -5px);
+    @include rem('top', 8px);
+  }
 }

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/BulkSelect.js

@@ -29,9 +29,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import React, { useState, useRef, Fragment } from 'react';
+import React, { Fragment, useRef, useState } from 'react';
 import classnames from 'classnames';
-import { Dropdown, DropdownItem, DropdownToggle, DropdownToggleCheckbox, Checkbox, } from '@patternfly/react-core';
+import { Checkbox, Dropdown, DropdownItem, DropdownToggle, DropdownToggleCheckbox, } from '@patternfly/react-core';
 import { getDefaultOUIAId } from '@patternfly/react-core/';
 import '../BulkSelect/bulk-select.css';
 var BulkSelect = function (_a) {

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/CheckboxFilter.js

@@ -29,7 +29,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import React, { Fragment, useEffect, useState, useRef } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 import isEqual from 'lodash/isEqual';
 import omit from 'lodash/omit';

package/esm/ConditionalFilter/ConditionalFilter.js

@@ -9,10 +9,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { Fragment, useEffect, useState, useRef } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import globalBreakpointMd from '@patternfly/react-tokens/dist/js/global_breakpoint_md';
-import { Dropdown, DropdownItem, DropdownToggle, SplitItem, Split, ToolbarItem, ToolbarGroup, ToolbarToggleGroup } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle, Split, SplitItem, ToolbarGroup, ToolbarItem, ToolbarToggleGroup } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
 import TextFilter from './TextFilter';
 import { conditionalFilterType, typeMapper } from './conditionalFilterConstants';

package/esm/ConditionalFilter/GroupFilter.js

@@ -9,10 +9,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { TextInput, MenuList, MenuItem, MenuGroup, Checkbox, Button, MenuToggle, Menu, MenuContent, Popper, Radio, TreeView, } from '@patternfly/react-core';
-import { isChecked, calculateSelected, getGroupMenuItems, getMenuItems, convertTreeItem, mapTree, onTreeCheck } from './groupFilterConstants';
+import { Button, Checkbox, Menu, MenuContent, MenuGroup, MenuItem, MenuList, MenuToggle, Popper, Radio, TextInput, TreeView, } from '@patternfly/react-core';
+import { calculateSelected, convertTreeItem, getGroupMenuItems, getMenuItems, isChecked, mapTree, onTreeCheck } from './groupFilterConstants';
 import groupType from './groupType';
 import '../ConditionalFilter/group-filter.css';
 var GroupFilter = function (_a) {

package/esm/ConditionalFilter/RadioFilter.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { Fragment, useState } from 'react';
-import { Select, SelectOption, SelectVariant, Radio } from '@patternfly/react-core';
+import { Radio, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 import TextFilter, { isFilterValue } from './TextFilter';
 var RadioFilter = function (_a) {
     var _b = _a.items, items = _b === void 0 ? [] : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return undefined; } : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, props = __rest(_a, ["items", "onChange", "isDisabled"]);

package/esm/ConditionalFilter/TextFilter.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState, Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import '../ConditionalFilter/conditional-filter.css';

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