@patternfly/react-core 6.5.0-prerelease.9 → 6.5.0

package/src/components/LoginPage/LoginPage.tsx

@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import { css } from '@patternfly/react-styles';
 
 import { BackgroundImage } from '../BackgroundImage';
-import { Brand } from '../Brand';
+import { Brand, BrandProps } from '../Brand';
 import { List, ListVariant } from '../List';
 
 import { Login } from './Login';
@@ -21,6 +21,8 @@ export interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {
   brandImgSrc?: string;
   /** Attribute that specifies the alt text of the brand image for the login page */
   brandImgAlt?: string;
+  /** Additional props for the brand image for the login page */
+  brandImgProps?: BrandProps;
   /** Attribute that specifies the URL of the background image for the login page */
   backgroundImgSrc?: string;
   /** Content rendered inside of the text component of the login page */
@@ -50,6 +52,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
   className = '',
   brandImgSrc = '',
   brandImgAlt = '',
+  brandImgProps,
   backgroundImgSrc = '',
   footerListItems = null,
   textContent = '',
@@ -65,7 +68,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
 }: LoginPageProps) => {
   const HeaderBrand = (
     <Fragment>
-      <Brand src={brandImgSrc} alt={brandImgAlt} />
+      {(brandImgSrc || brandImgProps?.src) && <Brand src={brandImgSrc} alt={brandImgAlt} {...brandImgProps} />}
     </Fragment>
   );
   const Header = <LoginHeader headerBrand={HeaderBrand} />;

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

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { LoginPage } from '../LoginPage';
 import { ListVariant } from '../../List';
@@ -26,3 +26,40 @@ test('check loginpage example against snapshot', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('brand is absent without brandImgSrc and brandImgProps.src', () => {
+  const { asFragment } = render(<LoginPage loginTitle="Log into your account" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('brand is present with brandImgSrc prop', () => {
+  const { asFragment } = render(<LoginPage brandImgSrc="Brand src" loginTitle="Log into your account" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('brandImgProps successfully renders brand with props', () => {
+  render(
+    <LoginPage
+      brandImgProps={{ src: 'Brand src', alt: 'Pf-logo', 'aria-label': 'PatternFly logo', className: 'custom-class' }}
+      loginTitle="Log into your account"
+    />
+  );
+  const brandImg = screen.getByRole('img', { name: 'PatternFly logo' });
+  expect(brandImg).toHaveAttribute('src', 'Brand src');
+  expect(brandImg).toHaveAttribute('alt', 'Pf-logo');
+  expect(brandImg).toHaveAttribute('aria-label', 'PatternFly logo');
+  expect(brandImg).toHaveClass('custom-class');
+});
+
+test('Brand is rendered correctly with both brandImgSrc and brandImgProps, prioritizing brandImgProps.src', () => {
+  render(
+    <LoginPage
+      brandImgSrc="Brand-src-that-should-be-ignored"
+      brandImgProps={{ src: 'Brand-src-from-props', alt: 'Pf-logo from props' }}
+      loginTitle="Log into your account"
+    />
+  );
+  const brandImg = screen.getByRole('img', { name: 'Pf-logo from props' });
+  expect(brandImg).toHaveAttribute('src', 'Brand-src-from-props');
+  expect(brandImg).toHaveAttribute('alt', 'Pf-logo from props');
+});

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -38,7 +38,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-9"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:r17:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-username-id"
@@ -69,7 +69,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -82,7 +82,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:r1a:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-password-id"
@@ -106,7 +106,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
           <input
             aria-invalid="false"
             class="pf-v6-c-check__input"
-            data-ouia-component-id="OUIA-Generated-Checkbox-4"
+            data-ouia-component-id="OUIA-Generated-Checkbox-:r1d:"
             data-ouia-component-type="PF6/Checkbox"
             data-ouia-safe="true"
             id="pf-login-remember-me-id"
@@ -132,7 +132,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-primary pf-m-block"
-            data-ouia-component-id="OUIA-Generated-Button-primary-5"
+            data-ouia-component-id="OUIA-Generated-Button-primary-:r1e:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="submit"
@@ -175,7 +175,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -188,7 +188,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-11"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:r1h:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-username-id"
@@ -219,7 +219,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -238,7 +238,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             >
               <input
                 aria-invalid="false"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-12"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-:r1k:"
                 data-ouia-component-type="PF6/TextInput"
                 data-ouia-safe="true"
                 id="pf-login-password-id"
@@ -255,7 +255,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             <button
               aria-label="Show password"
               class="pf-v6-c-button pf-m-control"
-              data-ouia-component-id="OUIA-Generated-Button-control-1"
+              data-ouia-component-id="OUIA-Generated-Button-control-:r1l:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               type="button"
@@ -269,12 +269,24 @@ exports[`LoginForm LoginForm with show password 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
-                  viewBox="0 0 576 512"
                   width="1em"
                 >
-                  <path
-                    d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
-                  />
+                  <svg
+                    class="pf-v6-icon-default"
+                    viewBox="0 0 576 512"
+                  >
+                    <path
+                      d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
+                    />
+                  </svg>
+                  <svg
+                    class="pf-v6-icon-rh-ui"
+                    viewBox="0 0 32 32"
+                  >
+                    <path
+                      d="M16 10c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6Zm0 10c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4Zm14.79-4.665C30.009 13.776 25.625 6 16 6S1.991 13.776 1.209 15.336a1.472 1.472 0 0 0 0 1.328c.781 1.559 5.165 9.335 14.79 9.335s14.009-7.776 14.791-9.336a1.474 1.474 0 0 0 0-1.329ZM16 24c-8.049 0-11.937-6.222-12.882-8C4.064 14.222 7.951 8 16 8s11.938 6.224 12.882 8c-.946 1.778-4.833 8-12.882 8Z"
+                    />
+                  </svg>
                 </svg>
               </span>
             </button>
@@ -293,7 +305,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-primary pf-m-block"
-            data-ouia-component-id="OUIA-Generated-Button-primary-6"
+            data-ouia-component-id="OUIA-Generated-Button-primary-:r1m:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="submit"
@@ -336,7 +348,7 @@ exports[`LoginForm should render Login form 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -349,7 +361,7 @@ exports[`LoginForm should render Login form 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:r2:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-username-id"
@@ -380,7 +392,7 @@ exports[`LoginForm should render Login form 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -393,7 +405,7 @@ exports[`LoginForm should render Login form 1`] = `
         >
           <input
             aria-invalid="false"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             id="pf-login-password-id"
@@ -416,7 +428,7 @@ exports[`LoginForm should render Login form 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-primary pf-m-block"
-            data-ouia-component-id="OUIA-Generated-Button-primary-1"
+            data-ouia-component-id="OUIA-Generated-Button-primary-:r6:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="submit"

package/src/components/LoginPage/__tests__/__snapshots__/LoginMainHeader.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`LoginMainHeader title and subtitle are rendered correctly 1`] = `
   >
     <h2
       class="pf-v6-c-title pf-m-3xl"
-      data-ouia-component-id="OUIA-Generated-Title-1"
+      data-ouia-component-id="OUIA-Generated-Title-:r0:"
       data-ouia-component-type="PF6/Title"
       data-ouia-safe="true"
     >

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

@@ -1,5 +1,97 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`brand is absent without brandImgSrc and brandImgProps.src 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-login"
+  >
+    <div
+      class="pf-v6-c-login__container"
+    >
+      <header
+        class="pf-v6-c-login__header"
+      />
+      <main
+        class="pf-v6-c-login__main"
+      >
+        <div
+          class="pf-v6-c-login__main-header"
+        >
+          <h2
+            class="pf-v6-c-title pf-m-3xl"
+            data-ouia-component-id="OUIA-Generated-Title-:r1:"
+            data-ouia-component-type="PF6/Title"
+            data-ouia-safe="true"
+          >
+            Log into your account
+          </h2>
+        </div>
+        <div
+          class="pf-v6-c-login__main-body"
+        />
+      </main>
+      <footer
+        class="pf-v6-c-login__footer"
+      >
+        <p />
+        <ul
+          class="pf-v6-c-list"
+        />
+      </footer>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`brand is present with brandImgSrc prop 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-login"
+  >
+    <div
+      class="pf-v6-c-login__container"
+    >
+      <header
+        class="pf-v6-c-login__header"
+      >
+        <img
+          alt=""
+          class="pf-v6-c-brand"
+          src="Brand src"
+        />
+      </header>
+      <main
+        class="pf-v6-c-login__main"
+      >
+        <div
+          class="pf-v6-c-login__main-header"
+        >
+          <h2
+            class="pf-v6-c-title pf-m-3xl"
+            data-ouia-component-id="OUIA-Generated-Title-:r2:"
+            data-ouia-component-type="PF6/Title"
+            data-ouia-safe="true"
+          >
+            Log into your account
+          </h2>
+        </div>
+        <div
+          class="pf-v6-c-login__main-body"
+        />
+      </main>
+      <footer
+        class="pf-v6-c-login__footer"
+      >
+        <p />
+        <ul
+          class="pf-v6-c-list"
+        />
+      </footer>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`check loginpage example against snapshot 1`] = `
 <DocumentFragment>
   <div
@@ -29,7 +121,7 @@ exports[`check loginpage example against snapshot 1`] = `
         >
           <h2
             class="pf-v6-c-title pf-m-3xl"
-            data-ouia-component-id="OUIA-Generated-Title-1"
+            data-ouia-component-id="OUIA-Generated-Title-:r0:"
             data-ouia-component-type="PF6/Title"
             data-ouia-safe="true"
           >

package/src/components/LoginPage/examples/LoginPage.md

@@ -20,7 +20,7 @@ propComponents:
 
 import { Fragment, useState } from 'react';
 import brandImg from '../../assets/PF-IconLogo.svg';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';
@@ -32,6 +32,8 @@ import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 ### Basic
 
 By default, a login page requires users to enter both a username and a password into their respective fields. The username must always be a required field, but you can make the password optional by passing the `isPasswordRequired` property to the `<LoginForm>`.
+
+This example uses `brandImgProps` to pass the brand image source, alt text, and an extra class, which will be preferred over `brandImgSrc` when both are provided.
 ```ts file='./LoginPageBasic.tsx' isFullscreen
 
 ```

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -10,7 +10,7 @@ import {
   ListVariant,
   Button
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';
@@ -94,7 +94,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
     <LoginForm
       showHelperText={showHelperText}
       helperText="Invalid login credentials."
-      helperTextIcon={<ExclamationCircleIcon />}
+      helperTextIcon={<RhUiErrorFillIcon />}
       usernameLabel="Username"
       usernameValue={username}
       onChangeUsername={handleUsernameChange}
@@ -114,8 +114,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
-      brandImgSrc={brandImg}
-      brandImgAlt="PatternFly logo"
+      brandImgProps={{ src: brandImg, alt: 'PatternFly logo' }}
       backgroundImgSrc="/assets/images/pf-background.svg"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -15,7 +15,7 @@ import {
   SelectOption,
   Button
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';
@@ -167,7 +167,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
     <LoginForm
       showHelperText={showHelperText}
       helperText="Invalid login credentials."
-      helperTextIcon={<ExclamationCircleIcon />}
+      helperTextIcon={<RhUiErrorFillIcon />}
       usernameLabel="Username"
       usernameValue={username}
       onChangeUsername={handleUsernameChange}

package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx

@@ -10,7 +10,7 @@ import {
   ListVariant,
   Button
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';
@@ -94,7 +94,7 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
     <LoginForm
       showHelperText={showHelperText}
       helperText="Invalid login credentials."
-      helperTextIcon={<ExclamationCircleIcon />}
+      helperTextIcon={<RhUiErrorFillIcon />}
       usernameLabel="Username"
       usernameValue={username}
       onChangeUsername={handleUsernameChange}

package/src/components/Masthead/Masthead.tsx

@@ -27,6 +27,8 @@ export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<H
     xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
     '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
   };
+  /** @beta Indicates the variant of the masthead */
+  variant?: 'default' | 'docked';
 }
 
 export const Masthead: React.FunctionComponent<MastheadProps> = ({
@@ -36,6 +38,7 @@ export const Masthead: React.FunctionComponent<MastheadProps> = ({
     md: 'inline'
   },
   inset,
+  variant = 'default',
   ...props
 }: MastheadProps) => {
   const { width, getBreakpoint } = useContext(PageContext);
@@ -43,6 +46,7 @@ export const Masthead: React.FunctionComponent<MastheadProps> = ({
     <header
       className={css(
         styles.masthead,
+        variant === 'docked' && styles.modifiers.docked,
         formatBreakpointMods(display, styles, 'display-', getBreakpoint(width)),
         formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
         className

package/src/components/Masthead/MastheadLogo.tsx

@@ -1,20 +1,25 @@
 import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
 import { css } from '@patternfly/react-styles';
 
-export interface MastheadLogoProps
-  extends React.DetailedHTMLProps<React.HTMLProps<HTMLAnchorElement>, HTMLAnchorElement> {
+export interface MastheadLogoProps extends React.DetailedHTMLProps<
+  React.HTMLProps<HTMLAnchorElement>,
+  HTMLAnchorElement
+> {
   /** Content rendered inside of the masthead logo. */
   children?: React.ReactNode;
   /** Additional classes added to the masthead logo. */
   className?: string;
   /** Component type of the masthead logo. */
   component?: React.ElementType<any> | React.ComponentType<any>;
+  /** @beta Flag indicating the logo is a compact variant. Used in docked layouts. */
+  isCompact?: boolean;
 }
 
 export const MastheadLogo: React.FunctionComponent<MastheadLogoProps> = ({
   children,
   className,
   component,
+  isCompact = false,
   ...props
 }: MastheadLogoProps) => {
   let Component = component as any;
@@ -26,7 +31,11 @@ export const MastheadLogo: React.FunctionComponent<MastheadLogoProps> = ({
     }
   }
   return (
-    <Component className={css(styles.mastheadLogo, className)} {...(Component === 'a' && { tabIndex: 0 })} {...props}>
+    <Component
+      className={css(styles.mastheadLogo, isCompact && styles.modifiers.compact, className)}
+      {...(Component === 'a' && { tabIndex: 0 })}
+      {...props}
+    >
       {children}
     </Component>
   );

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

@@ -1,5 +1,6 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Masthead, MastheadMain, MastheadLogo, MastheadContent, MastheadBrand, MastheadToggle } from '../index';
+import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
 describe('Masthead', () => {
   test('verify basic', () => {
@@ -71,6 +72,29 @@ describe('Masthead', () => {
       expect(asFragment()).toMatchSnapshot();
     });
   });
+
+  test(`Renders with ${styles.modifiers.docked} class when variant is docked`, () => {
+    render(
+      <Masthead variant="docked" data-testid="masthead">
+        test
+      </Masthead>
+    );
+    expect(screen.getByTestId('masthead')).toHaveClass(styles.modifiers.docked);
+  });
+
+  test(`Does not render with ${styles.modifiers.docked} class when variant is default`, () => {
+    render(
+      <Masthead variant="default" data-testid="masthead">
+        test
+      </Masthead>
+    );
+    expect(screen.getByTestId('masthead')).not.toHaveClass(styles.modifiers.docked);
+  });
+
+  test(`Does not render with ${styles.modifiers.docked} class when variant is not passed`, () => {
+    render(<Masthead data-testid="masthead">test</Masthead>);
+    expect(screen.getByTestId('masthead')).not.toHaveClass(styles.modifiers.docked);
+  });
 });
 
 describe('MastheadLogo', () => {
@@ -103,6 +127,29 @@ describe('MastheadLogo', () => {
 
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test(`Renders with ${styles.modifiers.compact} class when isCompact is true`, () => {
+    render(
+      <MastheadLogo isCompact data-testid="compact-logo">
+        test
+      </MastheadLogo>
+    );
+    expect(screen.getByTestId('compact-logo')).toHaveClass(styles.modifiers.compact);
+  });
+
+  test(`Does not render with ${styles.modifiers.compact} class when isCompact is false`, () => {
+    render(
+      <MastheadLogo isCompact={false} data-testid="logo">
+        test
+      </MastheadLogo>
+    );
+    expect(screen.getByTestId('logo')).not.toHaveClass(styles.modifiers.compact);
+  });
+
+  test(`Does not render with ${styles.modifiers.compact} class when isCompact is not passed`, () => {
+    render(<MastheadLogo data-testid="logo">test</MastheadLogo>);
+    expect(screen.getByTestId('logo')).not.toHaveClass(styles.modifiers.compact);
+  });
 });
 
 describe('MastheadContent', () => {