@redhat-cloud-services/frontend-components 3.9.2 → 3.9.5

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/primary-toolbar.scss

@@ -1,64 +1,53 @@
 .ins-c-primary-toolbar {
+  .pf-c-toolbar__item.ins-c-primary-toolbar__first-action {
+    display: initial;
+  }
+  .ins-c-primary-toolbar__first-action {
+    display: none;
+  }
+  .ins-c-primary-toolbar__pagination {
+    margin-left: auto;
+  }
+  .ins-c-primary-toolbar__sort-by {
+    display: initial
+  }
+  .ins-c-primary-toolbar__overflow-actions, .ins-c-primary-toolbar__overflow-actions-separator {
+    display: none;
+  }
+  .ins-m-actions--empty {
+    display: none;
+  }
+  .ins-c-primary-toolbar__group-filter {
+    flex-grow: initial;
+    .ins-c-primary-toolbar__filter {
+      flex: initial;
+    }
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .ins-c-primary-toolbar {
     .pf-c-toolbar__item.ins-c-primary-toolbar__first-action {
-        display: initial;
+      display: none;
     }
-
     .ins-c-primary-toolbar__first-action {
-        display: none;
-    }
-
-    .ins-c-primary-toolbar__pagination {
-        margin-left: auto;
+      display: block;
     }
-
     .ins-c-primary-toolbar__sort-by {
-        display: initial
+      display: none
     }
-
     .ins-c-primary-toolbar__overflow-actions, .ins-c-primary-toolbar__overflow-actions-separator {
-        display: none;
-    }
-
-    .ins-m-actions--empty {
-        display: none;
+      display: block;
     }
-
     .ins-c-primary-toolbar__group-filter {
-        flex-grow: initial;
-        .ins-c-primary-toolbar__filter {
-            flex: initial;
-        }
+      margin-right: 0;
+      flex-grow: 1;
+      .ins-c-primary-toolbar__filter {
+        flex: 1;
+      }
     }
-}
-
-@media only screen and (max-width: 768px) {
-    .ins-c-primary-toolbar {
-        .pf-c-toolbar__item.ins-c-primary-toolbar__first-action {
-            display: none;
-        }
-
-        .ins-c-primary-toolbar__first-action {
-            display: block;
-        }
-
-        .ins-c-primary-toolbar__sort-by {
-            display: none
-        }
-
-        .ins-c-primary-toolbar__overflow-actions, .ins-c-primary-toolbar__overflow-actions-separator {
-            display: block;
-        }
-
-        .ins-c-primary-toolbar__group-filter {
-            margin-right: 0;
-            flex-grow: 1;
-            .ins-c-primary-toolbar__filter {
-                flex: 1;
-            }
-        }
-
-        .ins-m-actions--empty {
-            display: block;
-        }
+    .ins-m-actions--empty {
+      display: block;
     }
+  }
 }

package/esm/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/esm/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/esm/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/esm/SkeletonTable/SkeletonTable.scss

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

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/index.css

@@ -82,7 +82,7 @@ i.ins-battery svg {
   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/usePendoFeedback/usePendoFeedback.js

@@ -1,15 +1,11 @@
 import useChrome from '../useChrome';
 var usePendoFeedback = function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
     var usePendoFeedbackInternal = useChrome().usePendoFeedback;
     if (typeof usePendoFeedbackInternal !== 'function') {
         console.warn('The "usePendoFeedback" hook is not available in this enviroment. Default feedback form will be used. Wait for chrome updates.');
         return;
     }
-    return usePendoFeedbackInternal.apply(void 0, args);
+    return usePendoFeedbackInternal();
 };
 export default usePendoFeedback;
 //# sourceMappingURL=usePendoFeedback.js.map

package/index.css

@@ -82,7 +82,7 @@ i.ins-battery svg {
   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/index.d.ts

@@ -1,11 +1,3 @@
-import { ChromeAPI } from '@redhat-cloud-services/types';
-declare global {
-    interface Window {
-        insights: {
-            chrome: ChromeAPI;
-        };
-    }
-}
 export * from './LongTextTooltip';
 export * from './Section';
 export * from './Ansible';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redhat-cloud-services/frontend-components",
-    "version": "3.9.2",
+    "version": "3.9.5",
     "description": "Common components for RedHat Cloud Services project.",
     "main": "index.js",
     "module": "esm/index.js",
@@ -19,6 +19,7 @@
         "start": "concurrently \"npm run build:esm -- --watch\" \"npm run build:js -- --watch\" \"npm run build:css -- --watch\" \"npm run build:packages\"",
         "build:esm": "tsc --module es2015 --target es5",
         "build:js": "tsc -p tsconfig.cjs.json",
+        "test:ct": "cypress run-ct",
         "transform:css": "node ../../scripts/transform-scss.js"
     },
     "repository": {
@@ -49,11 +50,18 @@
         "sanitize-html": "^2.3.2",
         "@scalprum/core": "^0.1.1",
         "@scalprum/react-core": "^0.1.7",
-        "@redhat-cloud-services/types": "0.0.1"
+        "@redhat-cloud-services/types": "^0.0.5"
     },
     "devDependencies": {
         "@patternfly/patternfly": ">=4.102.2",
         "node-sass-package-importer": "^5.3.2",
-        "@types/react": "^16.9.34"
+        "@types/react": "^16.9.34",
+        "@cypress/react": "^5.12.4",
+        "@cypress/webpack-dev-server": "^1.8.4",
+        "css-loader": "^6.7.1",
+        "cypress": "^9.6.0",
+        "eslint-plugin-cypress": "^2.12.1",
+        "sass-loader": "^12.6.0",
+        "style-loader": "^3.3.1"
     }
 }

package/useChrome/useChrome.d.ts

@@ -1,4 +1,4 @@
 import { ChromeAPI } from '@redhat-cloud-services/types';
 export declare type UseChromeSelector<T = any> = (chromeState: ChromeAPI) => T;
-declare const useChrome: (selector?: UseChromeSelector<any> | undefined) => any;
+declare const useChrome: <T = ChromeAPI>(selector?: UseChromeSelector<T> | undefined) => ChromeAPI | T;
 export default useChrome;

package/usePendoFeedback/usePendoFeedback.d.ts

@@ -1,2 +1,2 @@
-declare const usePendoFeedback: (...args: any[]) => any;
+declare const usePendoFeedback: () => void;
 export default usePendoFeedback;

package/usePendoFeedback/usePendoFeedback.js

@@ -5,16 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var useChrome_1 = __importDefault(require("../useChrome"));
 var usePendoFeedback = function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
     var usePendoFeedbackInternal = (0, useChrome_1.default)().usePendoFeedback;
     if (typeof usePendoFeedbackInternal !== 'function') {
         console.warn('The "usePendoFeedback" hook is not available in this enviroment. Default feedback form will be used. Wait for chrome updates.');
         return;
     }
-    return usePendoFeedbackInternal.apply(void 0, args);
+    return usePendoFeedbackInternal();
 };
 exports.default = usePendoFeedback;
 //# sourceMappingURL=usePendoFeedback.js.map