@patternfly/react-core 4.258.4 → 4.258.5

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.258.5 (2022-11-04)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.258.4 (2022-11-01)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/esm/components/Button/__mocks__/Button.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ButtonProps } from '../';
+export declare const Button: ({ children, variant, isInline, onClick, iconPosition, icon, ...props }: ButtonProps) => JSX.Element;
+export declare const ButtonVariant: {
+    plain: string;
+    link: string;
+};
+//# sourceMappingURL=Button.d.ts.map

package/dist/esm/components/Button/__mocks__/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/Button.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAElC,eAAO,MAAM,MAAM,2EAA4E,WAAW,gBAWzG,CAAC;AAEF,eAAO,MAAM,aAAa;;;CAAmC,CAAC"}

package/dist/esm/components/Button/__mocks__/Button.js

@@ -0,0 +1,14 @@
+import { __rest } from "tslib";
+import React from 'react';
+export const Button = (_a) => {
+    var { children, variant, isInline, onClick, iconPosition, icon } = _a, props = __rest(_a, ["children", "variant", "isInline", "onClick", "iconPosition", "icon"]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", Object.assign({ onClick: onClick }, props), children),
+        React.createElement("p", null, `variant: ${variant}`),
+        React.createElement("p", { id: "labelling-id" }, "Test label"),
+        React.createElement("p", null, `isInline: ${isInline}`),
+        React.createElement("p", null, `iconPosition: ${iconPosition}`),
+        React.createElement("div", { "data-testid": "icon" }, icon)));
+};
+export const ButtonVariant = { plain: 'plain', link: 'link' };
+//# sourceMappingURL=Button.js.map

package/dist/esm/components/Button/__mocks__/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAmF,EAAE,EAAE;QAAvF,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,OAAyB,EAApB,KAAK,cAApE,sEAAsE,CAAF;IAAoB,OAAA,CAC7G;QACE,8CAAQ,OAAO,EAAE,OAAO,IAAM,KAAK,GAChC,QAAQ,CACF;QACT,+BAAI,YAAY,OAAO,EAAE,CAAK;QAC9B,2BAAG,EAAE,EAAC,cAAc,iBAAe;QACnC,+BAAI,aAAa,QAAQ,EAAE,CAAK;QAChC,+BAAI,iBAAiB,YAAY,EAAE,CAAK;QACxC,4CAAiB,MAAM,IAAE,IAAI,CAAO,CACnC,CACJ,CAAA;CAAA,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC"}

package/dist/esm/components/Button/__mocks__/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Button/__mocks__/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/esm/components/Button/__mocks__/index.js

@@ -0,0 +1,2 @@
+export * from './Button';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Button/__mocks__/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/js/components/Button/__mocks__/Button.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ButtonProps } from '../';
+export declare const Button: ({ children, variant, isInline, onClick, iconPosition, icon, ...props }: ButtonProps) => JSX.Element;
+export declare const ButtonVariant: {
+    plain: string;
+    link: string;
+};
+//# sourceMappingURL=Button.d.ts.map

package/dist/js/components/Button/__mocks__/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/Button.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAElC,eAAO,MAAM,MAAM,2EAA4E,WAAW,gBAWzG,CAAC;AAEF,eAAO,MAAM,aAAa;;;CAAmC,CAAC"}

package/dist/js/components/Button/__mocks__/Button.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonVariant = exports.Button = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Button = (_a) => {
+    var { children, variant, isInline, onClick, iconPosition, icon } = _a, props = tslib_1.__rest(_a, ["children", "variant", "isInline", "onClick", "iconPosition", "icon"]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("button", Object.assign({ onClick: onClick }, props), children),
+        react_1.default.createElement("p", null, `variant: ${variant}`),
+        react_1.default.createElement("p", { id: "labelling-id" }, "Test label"),
+        react_1.default.createElement("p", null, `isInline: ${isInline}`),
+        react_1.default.createElement("p", null, `iconPosition: ${iconPosition}`),
+        react_1.default.createElement("div", { "data-testid": "icon" }, icon)));
+};
+exports.Button = Button;
+exports.ButtonVariant = { plain: 'plain', link: 'link' };
+//# sourceMappingURL=Button.js.map

package/dist/js/components/Button/__mocks__/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/Button.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAGnB,MAAM,MAAM,GAAG,CAAC,EAAmF,EAAE,EAAE;QAAvF,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,OAAyB,EAApB,KAAK,sBAApE,sEAAsE,CAAF;IAAoB,OAAA,CAC7G;QACE,wDAAQ,OAAO,EAAE,OAAO,IAAM,KAAK,GAChC,QAAQ,CACF;QACT,yCAAI,YAAY,OAAO,EAAE,CAAK;QAC9B,qCAAG,EAAE,EAAC,cAAc,iBAAe;QACnC,yCAAI,aAAa,QAAQ,EAAE,CAAK;QAChC,yCAAI,iBAAiB,YAAY,EAAE,CAAK;QACxC,sDAAiB,MAAM,IAAE,IAAI,CAAO,CACnC,CACJ,CAAA;CAAA,CAAC;AAXW,QAAA,MAAM,UAWjB;AAEW,QAAA,aAAa,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC"}

package/dist/js/components/Button/__mocks__/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/js/components/Button/__mocks__/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/js/components/Button/__mocks__/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Button"), exports);
+//# sourceMappingURL=index.js.map

package/dist/js/components/Button/__mocks__/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Button/__mocks__/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyB"}

package/dist/umd/react-core.min.css

@@ -1862,6 +1862,70 @@ textarea.pf-c-form-control {
   color: var(--pf-global--palette--black-900);
 }
 
+.pf-c-brand {
+  --pf-c-brand--Width: auto;
+  --pf-c-brand--Height: auto;
+  width: var(--pf-c-brand--Width--base);
+  height: var(--pf-c-brand--Height--base);
+  --pf-c-brand--Width--base: var(--pf-c-brand--Width);
+  --pf-c-brand--Height--base: var(--pf-c-brand--Height);
+}
+
+@media (min-width: 576px) {
+  .pf-c-brand {
+    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-brand {
+    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-brand {
+    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-brand {
+    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-brand {
+    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-2xl, var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-brand {
+    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-brand {
+    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-brand {
+    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-brand {
+    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-brand {
+    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-2xl, var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))))));
+  }
+}
+.pf-c-brand.pf-m-picture {
+  display: inline-flex;
+  max-width: 100%;
+}
+
 .pf-c-breadcrumb {
   --pf-c-breadcrumb__item--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-breadcrumb__item--LineHeight: var(--pf-global--LineHeight--sm);
@@ -1969,70 +2033,6 @@ button.pf-c-breadcrumb__link {
   --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--100);
 }
 
-.pf-c-brand {
-  --pf-c-brand--Width: auto;
-  --pf-c-brand--Height: auto;
-  width: var(--pf-c-brand--Width--base);
-  height: var(--pf-c-brand--Height--base);
-  --pf-c-brand--Width--base: var(--pf-c-brand--Width);
-  --pf-c-brand--Height--base: var(--pf-c-brand--Height);
-}
-
-@media (min-width: 576px) {
-  .pf-c-brand {
-    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width));
-  }
-}
-@media (min-width: 768px) {
-  .pf-c-brand {
-    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-c-brand {
-    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-c-brand {
-    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-c-brand {
-    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-2xl, var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))))));
-  }
-}
-@media (min-width: 576px) {
-  .pf-c-brand {
-    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height));
-  }
-}
-@media (min-width: 768px) {
-  .pf-c-brand {
-    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-c-brand {
-    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-c-brand {
-    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-c-brand {
-    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-2xl, var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))))));
-  }
-}
-.pf-c-brand.pf-m-picture {
-  display: inline-flex;
-  max-width: 100%;
-}
-
 .pf-c-button {
   --pf-c-button--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-button--PaddingRight: var(--pf-global--spacer--md);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.258.4",
+  "version": "4.258.5",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "1fa474ac5bfe3fdcd5a1b5c48b0c9d4ca809b79a"
+  "gitHead": "bc0ffb995ba53ffe29765ddc745f88c57806ad64"
 }

package/src/components/Alert/__tests__/AlertActionCloseButton.test.tsx

@@ -5,18 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { AlertActionCloseButton } from '../AlertActionCloseButton';
 import { AlertContext } from '../AlertContext';
 
-jest.mock('../../Button', () => ({
-  Button: ({ children, variant, isInline, onClick, ...props }) => (
-    <>
-      <button onClick={onClick} {...props}>
-        {children}
-      </button>
-      <p>{`variant: ${variant}`}</p>
-      <p id="labelling-id">Test label</p>
-    </>
-  ),
-  ButtonVariant: { plain: 'plain' }
-}));
+jest.mock('../../Button');
 
 test('Renders without children', () => {
   render(
@@ -98,7 +87,7 @@ test('Renders with an aria label composed with the title and variantLabel provid
 test('Renders with an aria label composed with the title provided via a context and variantLabel provided via prop', () => {
   render(
     <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
-      <AlertActionCloseButton variantLabel='variant label prop'/>
+      <AlertActionCloseButton variantLabel="variant label prop" />
     </AlertContext.Provider>
   );
 
@@ -106,14 +95,14 @@ test('Renders with an aria label composed with the title provided via a context
 });
 
 test('Renders with the aria label provided via prop when one is provided', () => {
-    render(
-      <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
-        <AlertActionCloseButton aria-label='Aria label prop'/>
-      </AlertContext.Provider>
-    );
-  
-    expect(screen.getByRole('button')).toHaveAccessibleName('Aria label prop');
-  });
+  render(
+    <AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
+      <AlertActionCloseButton aria-label="Aria label prop" />
+    </AlertContext.Provider>
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Aria label prop');
+});
 
 test('Matches the snapshot', () => {
   const { asFragment } = render(

package/src/components/Alert/__tests__/AlertActionLink.test.tsx

@@ -2,16 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { AlertActionLink } from '../AlertActionLink';
 
-jest.mock('../../Button', () => ({
-  Button: ({ children, variant, isInline, ...props }) => (
-    <>
-      <button {...props}>{children}</button>
-      <p>{`variant: ${variant}`}</p>
-      <p>{`isInline: ${isInline}`}</p>
-    </>
-  ),
-  ButtonVariant: { link: 'link' }
-}));
+jest.mock('../../Button');
 
 test('Renders without children', () => {
   render(

package/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx

@@ -5,18 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { AlertToggleExpandButton } from '../AlertToggleExpandButton';
 import { AlertContext } from '../AlertContext';
 
-jest.mock('../../Button', () => ({
-  Button: ({ children, variant, isInline, onClick, ...props }) => (
-    <>
-      <button onClick={onClick} {...props}>
-        {children}
-      </button>
-      <p>{`variant: ${variant}`}</p>
-      <p id="labelling-id">Test label</p>
-    </>
-  ),
-  ButtonVariant: { plain: 'plain' }
-}));
+jest.mock('../../Button');
 
 jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
 

package/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -27,5 +27,14 @@ exports[`Matches the snapshot 1`] = `
   >
     Test label
   </p>
+  <p>
+    isInline: undefined
+  </p>
+  <p>
+    iconPosition: undefined
+  </p>
+  <div
+    data-testid="icon"
+  />
 </DocumentFragment>
 `;

package/src/components/Alert/__tests__/__snapshots__/AlertActionLink.test.tsx.snap

@@ -10,8 +10,19 @@ exports[`Matches the snapshot 1`] = `
   <p>
     variant: link
   </p>
+  <p
+    id="labelling-id"
+  >
+    Test label
+  </p>
   <p>
     isInline: true
   </p>
+  <p>
+    iconPosition: undefined
+  </p>
+  <div
+    data-testid="icon"
+  />
 </DocumentFragment>
 `;

package/src/components/Alert/__tests__/__snapshots__/AlertToggleExpandButton.test.tsx.snap

@@ -20,5 +20,14 @@ exports[`Matches snapshot 1`] = `
   >
     Test label
   </p>
+  <p>
+    isInline: undefined
+  </p>
+  <p>
+    iconPosition: undefined
+  </p>
+  <div
+    data-testid="icon"
+  />
 </DocumentFragment>
 `;

package/src/components/BackToTop/__tests__/BackToTop.test.tsx

@@ -3,16 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { BackToTop } from '../BackToTop';
 import userEvent from '@testing-library/user-event';
 
-jest.mock('../../Button', () => ({
-  Button: ({ variant, iconPosition, children, icon }) => (
-    <>
-      <button>{children}</button>
-      <p>{variant}</p>
-      <p>{iconPosition}</p>
-      <div data-testid="icon">{icon}</div>
-    </>
-  )
-}));
+jest.mock('../../Button');
 
 test('Renders BackToTop', () => {
   render(
@@ -138,13 +129,13 @@ test('Passes correct text content to button child component', () => {
 test('Passes correct variant to button child component', () => {
   render(<BackToTop title="Back to the future" />);
 
-  expect(screen.getByText('primary')).toBeVisible();
+  expect(screen.getByText('variant: primary')).toBeVisible();
 });
 
 test('Passes correct iconPosition to button child component', () => {
   render(<BackToTop />);
 
-  expect(screen.getByText('right')).toBeVisible();
+  expect(screen.getByText('iconPosition: right')).toBeVisible();
 });
 
 test('Passes correct icon to button child component', () => {

package/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap

@@ -9,10 +9,18 @@ exports[`Matches the snapshot 1`] = `
       Back to top
     </button>
     <p>
-      primary
+      variant: primary
+    </p>
+    <p
+      id="labelling-id"
+    >
+      Test label
+    </p>
+    <p>
+      isInline: undefined
     </p>
     <p>
-      right
+      iconPosition: right
     </p>
     <div
       data-testid="icon"

package/src/components/Backdrop/__tests__/Backdrop.test.tsx

@@ -1,8 +1,42 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Backdrop } from '../Backdrop';
 
-test('Backdrop Test', () => {
+test('Renders without children', () => {
+  render(
+    <div data-testid="backdrop">
+      <Backdrop />
+    </div>
+  );
+  expect(screen.getByTestId('backdrop').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Backdrop>Test</Backdrop>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the pf-c-backdrop', () => {
+  render(<Backdrop>Test</Backdrop>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-backdrop');
+});
+
+test('Renders with only the class pf-c-backdrop by default', () => {
+  render(<Backdrop>Test</Backdrop>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-backdrop', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<Backdrop className="test-class">Test</Backdrop>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<Backdrop aria-label="this is a simple backdrop">Test</Backdrop>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple backdrop');
+});
+
+test('Matches the snapshot', () => {
   const { asFragment } = render(<Backdrop>Backdrop</Backdrop>);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Backdrop/__tests__/__snapshots__/Backdrop.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Backdrop Test 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-backdrop"

package/src/components/Button/__mocks__/Button.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ButtonProps } from '../';
+
+export const Button = ({ children, variant, isInline, onClick, iconPosition, icon, ...props }: ButtonProps) => (
+  <>
+    <button onClick={onClick} {...props}>
+      {children}
+    </button>
+    <p>{`variant: ${variant}`}</p>
+    <p id="labelling-id">Test label</p>
+    <p>{`isInline: ${isInline}`}</p>
+    <p>{`iconPosition: ${iconPosition}`}</p>
+    <div data-testid="icon">{icon}</div>
+  </>
+);
+
+export const ButtonVariant = { plain: 'plain', link: 'link' };

package/src/components/Button/__mocks__/index.ts

@@ -0,0 +1 @@
+export * from './Button';