@redhat-cloud-services/frontend-components-utilities 5.0.3 → 6.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/TestingUtils/CypressUtils/TableUtils.js +1 -1
  2. package/TestingUtils/CypressUtils/selectors.d.ts +8 -8
  3. package/TestingUtils/CypressUtils/selectors.js +8 -8
  4. package/esm/TestingUtils/CypressUtils/TableUtils.js +1 -1
  5. package/esm/TestingUtils/CypressUtils/selectors.d.ts +8 -8
  6. package/esm/TestingUtils/CypressUtils/selectors.js +8 -8
  7. package/esm/styles/_variables.scss +19 -19
  8. package/package.json +4 -4
  9. package/styles/_variables.scss +19 -19
package/TestingUtils/CypressUtils/TableUtils.js CHANGED
@@ -26,7 +26,7 @@ function columnName2UrlParam(name) {
26
26
  return name.toLowerCase().replace(/ /g, '_');
27
27
  }
28
28
  function tableIsSortedBy(columnTitle) {
29
- return cy.get('table').find("th[data-label=\"".concat(columnTitle, "\"]")).should('have.class', 'pf-v5-c-table__sort pf-m-selected');
29
+ return cy.get('table').find("th[data-label=\"".concat(columnTitle, "\"]")).should('have.class', 'pf-v6-c-table__sort pf-m-selected');
30
30
  }
31
31
  function checkEmptyState(title, checkIcon) {
32
32
  if (checkIcon === void 0) { checkIcon = false; }
package/TestingUtils/CypressUtils/selectors.d.ts CHANGED
@@ -23,16 +23,16 @@ export const BREADCRUMB: "[data-ouia-component-type=\"PF5/Breadcrumb\"]";
23
23
  export const TAB_CONTENT: "[data-ouia-component-type=\"PF5/TabContent\"]";
24
24
  export const TAB_BUTTON: "[data-ouia-component-type=\"PF5/TabButton\"]";
25
25
  export const ALERT: "[data-ouia-component-type=\"PF5/Alert\"]";
26
- export const MENU_TOGGLE: ".pf-v5-c-menu-toggle";
27
- export const MENU_LIST: ".pf-v5-c-menu__list";
28
- export const MENU_TOGGLE_TEXT: ".pf-v5-c-menu-toggle__text";
29
- export const MENU_ITEM: ".pf-v5-c-menu__list-item";
30
- export const SELECT_MENU_ITEM: ".pf-v5-c-select__menu-item";
26
+ export const MENU_TOGGLE: ".pf-v6-c-menu-toggle";
27
+ export const MENU_LIST: ".pf-v6-c-menu__list";
28
+ export const MENU_TOGGLE_TEXT: ".pf-v6-c-menu-toggle__text";
29
+ export const MENU_ITEM: ".pf-v6-c-menu__list-item";
30
+ export const SELECT_MENU_ITEM: ".pf-v6-c-select__menu-item";
31
31
  export const PAGINATION_TOP: "[data-ouia-component-type=\"PF5/Pagination\"]:not(.pf-m-bottom)";
32
32
  export const PAGINATION_BOTTOM: "[data-ouia-component-type=\"PF5/Pagination\"].pf-m-bottom";
33
- export const EMPTY_STATE_TITLE: ".pf-v5-c-empty-state__title";
34
- export const EMPTY_STATE_ICON: ".pf-v5-c-empty-state__icon";
35
- export const CARD_TITLE: ".pf-v5-c-card__title";
33
+ export const EMPTY_STATE_TITLE: ".pf-v6-c-empty-state__title";
34
+ export const EMPTY_STATE_ICON: ".pf-v6-c-empty-state__icon";
35
+ export const CARD_TITLE: ".pf-v6-c-card__title";
36
36
  export const PAGINATION_NEXT: "button[aria-label=\"Go to next page\"]";
37
37
  export const PAGINATION_PREV: "button[aria-label=\"Go to previous page\"]";
38
38
  export const PAGINATION_LAST: "button[aria-label=\"Go to last page\"]";
package/TestingUtils/CypressUtils/selectors.js CHANGED
@@ -28,16 +28,16 @@ exports.BREADCRUMB = '[data-ouia-component-type="PF5/Breadcrumb"]';
28
28
  exports.TAB_CONTENT = '[data-ouia-component-type="PF5/TabContent"]';
29
29
  exports.TAB_BUTTON = '[data-ouia-component-type="PF5/TabButton"]';
30
30
  exports.ALERT = '[data-ouia-component-type="PF5/Alert"]';
31
- exports.MENU_TOGGLE = '.pf-v5-c-menu-toggle';
32
- exports.MENU_LIST = '.pf-v5-c-menu__list';
33
- exports.MENU_TOGGLE_TEXT = '.pf-v5-c-menu-toggle__text';
34
- exports.MENU_ITEM = '.pf-v5-c-menu__list-item';
35
- exports.SELECT_MENU_ITEM = '.pf-v5-c-select__menu-item';
31
+ exports.MENU_TOGGLE = '.pf-v6-c-menu-toggle';
32
+ exports.MENU_LIST = '.pf-v6-c-menu__list';
33
+ exports.MENU_TOGGLE_TEXT = '.pf-v6-c-menu-toggle__text';
34
+ exports.MENU_ITEM = '.pf-v6-c-menu__list-item';
35
+ exports.SELECT_MENU_ITEM = '.pf-v6-c-select__menu-item';
36
36
  exports.PAGINATION_TOP = "".concat(exports.PAGINATION, ":not(.pf-m-bottom)");
37
37
  exports.PAGINATION_BOTTOM = "".concat(exports.PAGINATION, ".pf-m-bottom");
38
- exports.EMPTY_STATE_TITLE = '.pf-v5-c-empty-state__title';
39
- exports.EMPTY_STATE_ICON = '.pf-v5-c-empty-state__icon';
40
- exports.CARD_TITLE = '.pf-v5-c-card__title';
38
+ exports.EMPTY_STATE_TITLE = '.pf-v6-c-empty-state__title';
39
+ exports.EMPTY_STATE_ICON = '.pf-v6-c-empty-state__icon';
40
+ exports.CARD_TITLE = '.pf-v6-c-card__title';
41
41
  exports.PAGINATION_NEXT = 'button[aria-label="Go to next page"]';
42
42
  exports.PAGINATION_PREV = 'button[aria-label="Go to previous page"]';
43
43
  exports.PAGINATION_LAST = 'button[aria-label="Go to last page"]';
package/esm/TestingUtils/CypressUtils/TableUtils.js CHANGED
@@ -15,7 +15,7 @@ export function columnName2UrlParam(name) {
15
15
  return name.toLowerCase().replace(/ /g, '_');
16
16
  }
17
17
  export function tableIsSortedBy(columnTitle) {
18
- return cy.get('table').find("th[data-label=\"".concat(columnTitle, "\"]")).should('have.class', 'pf-v5-c-table__sort pf-m-selected');
18
+ return cy.get('table').find("th[data-label=\"".concat(columnTitle, "\"]")).should('have.class', 'pf-v6-c-table__sort pf-m-selected');
19
19
  }
20
20
  export function checkEmptyState(title, checkIcon) {
21
21
  if (checkIcon === void 0) { checkIcon = false; }
package/esm/TestingUtils/CypressUtils/selectors.d.ts CHANGED
@@ -23,16 +23,16 @@ export const BREADCRUMB: "[data-ouia-component-type=\"PF5/Breadcrumb\"]";
23
23
  export const TAB_CONTENT: "[data-ouia-component-type=\"PF5/TabContent\"]";
24
24
  export const TAB_BUTTON: "[data-ouia-component-type=\"PF5/TabButton\"]";
25
25
  export const ALERT: "[data-ouia-component-type=\"PF5/Alert\"]";
26
- export const MENU_TOGGLE: ".pf-v5-c-menu-toggle";
27
- export const MENU_LIST: ".pf-v5-c-menu__list";
28
- export const MENU_TOGGLE_TEXT: ".pf-v5-c-menu-toggle__text";
29
- export const MENU_ITEM: ".pf-v5-c-menu__list-item";
30
- export const SELECT_MENU_ITEM: ".pf-v5-c-select__menu-item";
26
+ export const MENU_TOGGLE: ".pf-v6-c-menu-toggle";
27
+ export const MENU_LIST: ".pf-v6-c-menu__list";
28
+ export const MENU_TOGGLE_TEXT: ".pf-v6-c-menu-toggle__text";
29
+ export const MENU_ITEM: ".pf-v6-c-menu__list-item";
30
+ export const SELECT_MENU_ITEM: ".pf-v6-c-select__menu-item";
31
31
  export const PAGINATION_TOP: "[data-ouia-component-type=\"PF5/Pagination\"]:not(.pf-m-bottom)";
32
32
  export const PAGINATION_BOTTOM: "[data-ouia-component-type=\"PF5/Pagination\"].pf-m-bottom";
33
- export const EMPTY_STATE_TITLE: ".pf-v5-c-empty-state__title";
34
- export const EMPTY_STATE_ICON: ".pf-v5-c-empty-state__icon";
35
- export const CARD_TITLE: ".pf-v5-c-card__title";
33
+ export const EMPTY_STATE_TITLE: ".pf-v6-c-empty-state__title";
34
+ export const EMPTY_STATE_ICON: ".pf-v6-c-empty-state__icon";
35
+ export const CARD_TITLE: ".pf-v6-c-card__title";
36
36
  export const PAGINATION_NEXT: "button[aria-label=\"Go to next page\"]";
37
37
  export const PAGINATION_PREV: "button[aria-label=\"Go to previous page\"]";
38
38
  export const PAGINATION_LAST: "button[aria-label=\"Go to last page\"]";
package/esm/TestingUtils/CypressUtils/selectors.js CHANGED
@@ -23,16 +23,16 @@ export var BREADCRUMB = '[data-ouia-component-type="PF5/Breadcrumb"]';
23
23
  export var TAB_CONTENT = '[data-ouia-component-type="PF5/TabContent"]';
24
24
  export var TAB_BUTTON = '[data-ouia-component-type="PF5/TabButton"]';
25
25
  export var ALERT = '[data-ouia-component-type="PF5/Alert"]';
26
- export var MENU_TOGGLE = '.pf-v5-c-menu-toggle';
27
- export var MENU_LIST = '.pf-v5-c-menu__list';
28
- export var MENU_TOGGLE_TEXT = '.pf-v5-c-menu-toggle__text';
29
- export var MENU_ITEM = '.pf-v5-c-menu__list-item';
30
- export var SELECT_MENU_ITEM = '.pf-v5-c-select__menu-item';
26
+ export var MENU_TOGGLE = '.pf-v6-c-menu-toggle';
27
+ export var MENU_LIST = '.pf-v6-c-menu__list';
28
+ export var MENU_TOGGLE_TEXT = '.pf-v6-c-menu-toggle__text';
29
+ export var MENU_ITEM = '.pf-v6-c-menu__list-item';
30
+ export var SELECT_MENU_ITEM = '.pf-v6-c-select__menu-item';
31
31
  export var PAGINATION_TOP = "".concat(PAGINATION, ":not(.pf-m-bottom)");
32
32
  export var PAGINATION_BOTTOM = "".concat(PAGINATION, ".pf-m-bottom");
33
- export var EMPTY_STATE_TITLE = '.pf-v5-c-empty-state__title';
34
- export var EMPTY_STATE_ICON = '.pf-v5-c-empty-state__icon';
35
- export var CARD_TITLE = '.pf-v5-c-card__title';
33
+ export var EMPTY_STATE_TITLE = '.pf-v6-c-empty-state__title';
34
+ export var EMPTY_STATE_ICON = '.pf-v6-c-empty-state__icon';
35
+ export var CARD_TITLE = '.pf-v6-c-card__title';
36
36
  export var PAGINATION_NEXT = 'button[aria-label="Go to next page"]';
37
37
  export var PAGINATION_PREV = 'button[aria-label="Go to previous page"]';
38
38
  export var PAGINATION_LAST = 'button[aria-label="Go to last page"]';
package/esm/styles/_variables.scss CHANGED
@@ -3,40 +3,40 @@
3
3
  }
4
4
 
5
5
  // Spacing
6
- $ins-padding: var(--pf-v5-global--spacer--lg);
7
- $ins-margin: var(--pf-v5-global--spacer--xl);
8
- $ins-gutter: var(--pf-v5-global--gutter);
6
+ $ins-padding: var(--pf-t--global--spacer--lg);
7
+ $ins-margin: var(--pf-t--global--spacer--xl);
8
+ $ins-gutter: var(--pf-t--global--spacer--md);
9
9
 
10
10
  // Font Size
11
- $ins-fontSize: var(--pf-v5-global--FontSize--md);
12
- $ins-fontSize--sm: var(--pf-v5-global--FontSize--sm);
13
- $ins-fontSize--lg: var(--pf-v5-global--FontSize--lg);
14
- $ins-fontSize--xl: var(--pf-v5-global--FontSize--xl);
11
+ $ins-fontSize: var(--pf-t--global--font--size--md);
12
+ $ins-fontSize--sm: var(--pf-t--global--font--size--sm);
13
+ $ins-fontSize--lg: var(--pf-t--global--font--size--lg);
14
+ $ins-fontSize--xl: var(--pf-t--global--font--size--xl);
15
15
 
16
16
  // Borders
17
- $ins-borderRadius: var(--pf-v5-global--BorderRadius--sm);
18
- $ins-borderRadius--round: var(--pf-v5-global--BorderRadius--lg);
17
+ $ins-borderRadius: var(--pf-t--global--border--radius--small);
18
+ $ins-borderRadius--round: var(--pf-t--global--border--radius--large);
19
19
 
20
20
  // Grid breakpoints
21
- $ins-break--xs: var(--pf-v5-global--breakpoint--xs);
22
- $ins-break--sm: var(--pf-v5-global--breakpoint--sm);
23
- $ins-break--md: var(--pf-v5-global--breakpoint--md);
24
- $ins-break--lg: var(--pf-v5-global--breakpoint--lg);
25
- $ins-break--xl: var(--pf-v5-global--breakpoint--xl);
21
+ $ins-break--xs: var(--pf-t--global--breakpoint--xs);
22
+ $ins-break--sm: var(--pf-t--global--breakpoint--sm);
23
+ $ins-break--md: var(--pf-t--global--breakpoint--md);
24
+ $ins-break--lg: var(--pf-t--global--breakpoint--lg);
25
+ $ins-break--xl: var(--pf-t--global--breakpoint--xl);
26
26
 
27
27
  // Colors
28
- $ins-color--red: var(--pf-v5-global--danger-color--100);
28
+ $ins-color--red: var(--pf-t--global--color--status--danger--default);
29
29
  $ins-color--critical: $ins-color--red;
30
30
 
31
31
  $ins-color--orange: var(--ins-color--orange);
32
32
  $ins-color--high: $ins-color--orange;
33
33
 
34
- $ins-color--yellow: var(--pf-v5-global--warning-color--100);
34
+ $ins-color--yellow: var(--pf-t--global--color--status--warning--default);
35
35
  $ins-color--medium: $ins-color--yellow;
36
36
 
37
- $ins-color--green: var(--pf-v5-global--success-color--100);
37
+ $ins-color--green: var(--pf-t--global--color--status--success--default);
38
38
  $ins-color--low: $ins-color--green;
39
39
 
40
- $ins-color--blue: var(--pf-v5-global--info-color--100);
40
+ $ins-color--blue: var(--pf-t--global--color--status--info--default);
41
41
 
42
- $ins-color--gray: var(--pf-v5-global--disabled-color--200);
42
+ $ins-color--gray: var(--pf-t--global--text--color--disabled);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redhat-cloud-services/frontend-components-utilities",
3
- "version": "5.0.3",
3
+ "version": "6.0.0-beta.0",
4
4
  "description": "Util functions for RedHat Cloud Services project.",
5
5
  "main": "index.js",
6
6
  "module": "esm/index.js",
@@ -19,8 +19,8 @@
19
19
  },
20
20
  "homepage": "https://github.com/RedHatInsights/frontend-components/tree/master/packages/utils#readme",
21
21
  "peerDependencies": {
22
- "@patternfly/react-core": "^5.0.0",
23
- "@patternfly/react-table": "^5.0.0",
22
+ "@patternfly/react-core": "^6.0.0",
23
+ "@patternfly/react-table": "^6.0.0",
24
24
  "react": "^18.2.0",
25
25
  "react-dom": "^18.2.0",
26
26
  "react-redux": "^7.0.0",
@@ -28,7 +28,7 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@redhat-cloud-services/rbac-client": "^1.0.111 || 2.x",
31
- "@redhat-cloud-services/types": "^1.0.9",
31
+ "@redhat-cloud-services/types": "2.0.0-beta.0",
32
32
  "@sentry/browser": "^7.119.1",
33
33
  "awesome-debounce-promise": "^2.1.0",
34
34
  "axios": "^0.28.1 || ^1.7.0",
package/styles/_variables.scss CHANGED
@@ -3,40 +3,40 @@
3
3
  }
4
4
 
5
5
  // Spacing
6
- $ins-padding: var(--pf-v5-global--spacer--lg);
7
- $ins-margin: var(--pf-v5-global--spacer--xl);
8
- $ins-gutter: var(--pf-v5-global--gutter);
6
+ $ins-padding: var(--pf-t--global--spacer--lg);
7
+ $ins-margin: var(--pf-t--global--spacer--xl);
8
+ $ins-gutter: var(--pf-t--global--spacer--md);
9
9
 
10
10
  // Font Size
11
- $ins-fontSize: var(--pf-v5-global--FontSize--md);
12
- $ins-fontSize--sm: var(--pf-v5-global--FontSize--sm);
13
- $ins-fontSize--lg: var(--pf-v5-global--FontSize--lg);
14
- $ins-fontSize--xl: var(--pf-v5-global--FontSize--xl);
11
+ $ins-fontSize: var(--pf-t--global--font--size--md);
12
+ $ins-fontSize--sm: var(--pf-t--global--font--size--sm);
13
+ $ins-fontSize--lg: var(--pf-t--global--font--size--lg);
14
+ $ins-fontSize--xl: var(--pf-t--global--font--size--xl);
15
15
 
16
16
  // Borders
17
- $ins-borderRadius: var(--pf-v5-global--BorderRadius--sm);
18
- $ins-borderRadius--round: var(--pf-v5-global--BorderRadius--lg);
17
+ $ins-borderRadius: var(--pf-t--global--border--radius--small);
18
+ $ins-borderRadius--round: var(--pf-t--global--border--radius--large);
19
19
 
20
20
  // Grid breakpoints
21
- $ins-break--xs: var(--pf-v5-global--breakpoint--xs);
22
- $ins-break--sm: var(--pf-v5-global--breakpoint--sm);
23
- $ins-break--md: var(--pf-v5-global--breakpoint--md);
24
- $ins-break--lg: var(--pf-v5-global--breakpoint--lg);
25
- $ins-break--xl: var(--pf-v5-global--breakpoint--xl);
21
+ $ins-break--xs: var(--pf-t--global--breakpoint--xs);
22
+ $ins-break--sm: var(--pf-t--global--breakpoint--sm);
23
+ $ins-break--md: var(--pf-t--global--breakpoint--md);
24
+ $ins-break--lg: var(--pf-t--global--breakpoint--lg);
25
+ $ins-break--xl: var(--pf-t--global--breakpoint--xl);
26
26
 
27
27
  // Colors
28
- $ins-color--red: var(--pf-v5-global--danger-color--100);
28
+ $ins-color--red: var(--pf-t--global--color--status--danger--default);
29
29
  $ins-color--critical: $ins-color--red;
30
30
 
31
31
  $ins-color--orange: var(--ins-color--orange);
32
32
  $ins-color--high: $ins-color--orange;
33
33
 
34
- $ins-color--yellow: var(--pf-v5-global--warning-color--100);
34
+ $ins-color--yellow: var(--pf-t--global--color--status--warning--default);
35
35
  $ins-color--medium: $ins-color--yellow;
36
36
 
37
- $ins-color--green: var(--pf-v5-global--success-color--100);
37
+ $ins-color--green: var(--pf-t--global--color--status--success--default);
38
38
  $ins-color--low: $ins-color--green;
39
39
 
40
- $ins-color--blue: var(--pf-v5-global--info-color--100);
40
+ $ins-color--blue: var(--pf-t--global--color--status--info--default);
41
41
 
42
- $ins-color--gray: var(--pf-v5-global--disabled-color--200);
42
+ $ins-color--gray: var(--pf-t--global--text--color--disabled);