Merge branch 'main' into KOA_4914_add_bpkbottomnav_in_compose

docs/src/components/DocsPageWrapper/DocsPageWrapper.js

@@ -37,7 +37,6 @@ import { cssModules } from 'backpack/packages/bpk-react-utils';
 import BpkHorizontalNav, {
   BpkHorizontalNavItem,
 } from 'backpack/packages/bpk-component-horizontal-nav';
-import BpkContentContainer from 'backpack/packages/bpk-component-content-container';
 
 const getClassName = cssModules(STYLES);
 
@@ -219,7 +218,7 @@ const DocsPageWrapper = props => {
   };
 
   return (
-    <BpkContentContainer className={getClassName('bpkdocs-page-wrapper')}>
+    <div className={getClassName('bpkdocs-page-wrapper')}>
       <Helmet title={props.title} />
       <div className={getClassName('bpkdocs-page-wrapper__inner')}>
         <Heading level="h1">{title}</Heading>
@@ -245,7 +244,7 @@ const DocsPageWrapper = props => {
         />
         {initiallyRenderedSubpage}
       </div>
-    </BpkContentContainer>
+    </div>
   );
 };
 

docs/src/components/MarkdownPage/MarkdownPage.js

@@ -30,7 +30,6 @@ import AdditionalLinks, { type PlatformType } from './AdditionalLinks';
 
 import STYLES from './MarkdownPage.scss';
 
-import BpkContentContainer from 'backpack/packages/bpk-component-content-container';
 import { cssModules } from 'backpack/packages/bpk-react-utils';
 
 const getClassName = cssModules(STYLES);
@@ -94,9 +93,7 @@ const MarkdownPage = (props: Props) => {
     <>
       <SEOElements title={title} subtitle={subtitle} />
       {includePageHeader && <PageHead title={title} subtitle={subtitle} />}
-      <BpkContentContainer
-        className={getClassName('bpkdocs-markdown-page__content')}
-      >
+      <div className={getClassName('bpkdocs-markdown-page__content')}>
         <AdditionalLinks
           platform={platform}
           documentationId={documentationId}
@@ -105,7 +102,7 @@ const MarkdownPage = (props: Props) => {
           sassdocId={sassdocId}
         />
         <MDXContent Content={content} fileName={fileName} />
-      </BpkContentContainer>
+      </div>
     </>
   );
 };

docs/src/helpers/logo-helper.js

@@ -24,7 +24,6 @@ import BackpackLogoPride from '../static/backpack-logo-pride.svg';
 import BackpackLogoPrideGrey from '../static/backpack-logo-pride-sky-grey.svg';
 import BackpackLogoSpooky from '../static/backpack-logo-spooky.svg';
 import BackpackLogoChristmas from '../static/backpack-logo-christmas.svg';
-import BackpackLogoChristmasGrey from '../static/backpack-logo-christmas-sky-grey.svg';
 
 export const getBackpackLogo = (overImage = false) => {
   const companyUpdateLogo = false;
@@ -45,7 +44,7 @@ export const getBackpackLogo = (overImage = false) => {
       return BackpackLogoSpooky;
     }
     if (isChristmas) {
-      return BackpackLogoChristmasGrey;
+      return BackpackLogoChristmas;
     }
     if (companyUpdateLogo) {
       return BackpackLogoPinkGrey;

docs/src/pages/components/Overlay/WebOverlay.mdx

@@ -8,45 +8,58 @@ githubPath: bpk-component-overlay
 import PresentationBlock from 'components/PresentationBlock';
 
 import {
-  WithBpkImageExample,
-  WithBpkImageNoTintExample,
-  WithBpkImageRoundedExample,
-  TextOverlaidOnImageExample
+  SolidExamples,
+  TopExamples,
+  BottomExamples,
+  LeftExamples,
+  RightExamples,
+  VignetteExample,
+  WithForegroundContentExample,
 } from 'backpack/examples/bpk-component-overlay/examples';
 import Readme from 'backpack/packages/bpk-component-overlay/README.md';
 
 ## Table of contents
 
-## Default
-
-Overlays apply a dark tint to their content.
+## Solid
 
 <PresentationBlock>
-  <WithBpkImageExample />
+  <SolidExamples />
 </PresentationBlock>
 
-## Disabled tint
+## Top
 
-The tint can be switched off, causing the content within to be displayed at full brightness.
+<PresentationBlock>
+  <TopExamples />
+</PresentationBlock>
+
+## Bottom
 
 <PresentationBlock>
-  <WithBpkImageNoTintExample />
+  <BottomExamples />
 </PresentationBlock>
 
-## Rounded corners
+## Left
+
+<PresentationBlock>
+  <LeftExamples />
+</PresentationBlock>
 
-The overlay can have rounded corners. Apply this when the content inside has rounded corners, to stop the overlay from covering them up.
+## Right
 
 <PresentationBlock>
-  <WithBpkImageRoundedExample />
+  <RightExamples />
 </PresentationBlock>
 
-## Foreground content
+## Vignette
+
+<PresentationBlock>
+  <VignetteExample />
+</PresentationBlock>
 
-Use foreground content to display things on top of the overlay.
+## With foreground content
 
 <PresentationBlock>
-  <TextOverlaidOnImageExample />
+  <WithForegroundContentExample />
 </PresentationBlock>
 
 ## Implementation