fix: Improve printability

whitespace-se · Oct 3, 2023 · 08bc813 · 08bc813
1 parent f7299db
commit 08bc813
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/packages/gatsby-theme-wordpress-basic/package.json b/packages/gatsby-theme-wordpress-basic/package.json
@@ -84,8 +84,8 @@
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@gatsbyjs/reach-router": "^1.3.6",
-    "@wsui/algolia": "^0.10.0",
-    "@wsui/base": "^0.10.0",
+    "@wsui/algolia": "^0.10.5",
+    "@wsui/base": "^0.10.5",
     "gatsby": "^3.14.3",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
@@ -102,8 +102,8 @@
     "@storybook/react-vite": "^7.0.12",
     "@storybook/testing-library": "^0.1.0",
     "@whitespace/storybook-addon-html": "^5.1.1",
-    "@wsui/algolia": "^0.10.0",
-    "@wsui/base": "^0.10.0",
+    "@wsui/algolia": "^0.10.5",
+    "@wsui/base": "^0.10.5",
     "gatsby": "^3.14.3",
     "prettier": "^2.4.1",
     "react": "^17.0.0",

diff --git a/packages/gatsby-theme-wordpress-basic/src/wsui/components/Footer.jsx b/packages/gatsby-theme-wordpress-basic/src/wsui/components/Footer.jsx
@@ -10,6 +10,7 @@ import {
   handleComponentsProp,
   useThemeProps,
 } from "@wsui/base";
+import clsx from "clsx";
 
 import { useMenu } from "../../hooks/menus";
 import useFooterBlocks from "../../hooks/useFooterBlocks";
@@ -39,6 +40,7 @@ export default function Footer(inProps) {
     bannerBorderColor = "white",
     components,
     legalMenu = "LEGAL",
+    className,
     ...restProps
   } = useThemeProps({
     props: inProps,
@@ -58,6 +60,7 @@ export default function Footer(inProps) {
         background: ${theme.getColor(color)};
         color: ${theme.getColor([color, "text"])};
       `}
+      className={clsx("wsui-screen-only", className)}
       {...restProps}
     >
       <PageGrid

diff --git a/packages/gatsby-theme-wordpress-basic/src/wsui/components/Header.jsx b/packages/gatsby-theme-wordpress-basic/src/wsui/components/Header.jsx
@@ -9,6 +9,7 @@ import {
   handleComponentsProp,
   useThemeProps,
 } from "@wsui/base";
+import clsx from "clsx";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -82,6 +83,7 @@ export default function Header(props) {
             />
             <MainMenu
               aria-label={t("mainMenu")}
+              className={clsx("wsui-screen-only")}
               css={css`
                 align-self: stretch;
                 display: grid;
@@ -106,6 +108,7 @@ export default function Header(props) {
                 aria-label={t("menu")}
                 aria-expanded={String(hamburgerOpen)}
                 aria-controls={"header-hamburger-menu"}
+                className={clsx("wsui-screen-only")}
                 css={css`
                   grid-area: flyout;
                   cursor: pointer;

diff --git a/packages/gatsby-theme-wordpress-basic/src/wsui/components/SiteLayout.jsx b/packages/gatsby-theme-wordpress-basic/src/wsui/components/SiteLayout.jsx
@@ -1,5 +1,6 @@
 import { css, useTheme } from "@emotion/react";
 import { Section, handleComponentsProp, useThemeProps } from "@wsui/base";
+import clsx from "clsx";
 import React from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
@@ -30,7 +31,7 @@ export default function SiteLayout(props) {
     >
       <Helmet htmlAttributes={{ lang: i18n.language }} />
       <div>
-        <AlertBanner />
+        <AlertBanner className={clsx("wsui-screen-only")} />
         <Header
           css={css`
             margin-bottom: ${theme.getLength(headerMargin)};