LOOM-1221: Add fullWidth prop to BpkButton (#3248)

Curently microsites are overriding the BpkButton styles via classname prop. This adds the functionality to the component removing the need to use the undesirable classname prop to achieve this
Skyscanner · Feb 22, 2024 · cecc83b · cecc83b
1 parent 04514c6
commit cecc83b
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 2 deletions.
diff --git a/examples/bpk-component-button/examples.js b/examples/bpk-component-button/examples.js
@@ -175,6 +175,10 @@ const LinkOnDarkExample = (props: {}) => (
   </BpkDarkExampleWrapper>
 );
 
+const FullWidthExample = (props: {}) => (
+  <BpkButtonV2 fullWidth {...props}>Full Width Button</BpkButtonV2>
+);
+
 const MixedExample = () => (
   <>
     <PrimaryExample />
@@ -186,6 +190,7 @@ const MixedExample = () => (
     <LinkExample />
     <LinkOnDarkExample />
     <FeaturedExample />
+    <FullWidthExample />
   </>
 );
 
@@ -215,4 +220,5 @@ export {
   LinkOnDarkExample,
   MixedExample,
   AnchorTagsExample,
+  FullWidthExample,
 };
diff --git a/examples/bpk-component-button/stories.js b/examples/bpk-component-button/stories.js
@@ -30,6 +30,7 @@ import {
   LinkOnDarkExample,
   MixedExample,
   AnchorTagsExample,
+  FullWidthExample,
 } from './examples';
 
 export default {
@@ -62,4 +63,6 @@ export const VisualTest = () => <MixedExample />;
 export const VisualTestWithZoom = VisualTest.bind({});
 VisualTestWithZoom.args = {
   zoomEnabled: true
-};
+};
+
+export const FullWidth = () => <FullWidthExample />;
diff --git a/packages/bpk-component-button/README.md b/packages/bpk-component-button/README.md
@@ -29,6 +29,7 @@ export default () => (
       <AlignedArrowIcon />
       <span className="visually-hidden">Search</span>
     </BpkButtonV2>
+    <BpkButtonV2 fullWidth>Full Width</BpkButtonV2>
   </div>
 );
 ```

diff --git a/packages/bpk-component-button/src/BpkButtonV2/BpkButton-test.tsx b/packages/bpk-component-button/src/BpkButtonV2/BpkButton-test.tsx
@@ -122,4 +122,14 @@ describe('BpkButtonV2', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render with a class name if full width is added', () => {
+    const { container } = render(
+      <BpkButtonV2 fullWidth>
+        My button
+      </BpkButtonV2>,
+    );
+
+    expect(container?.firstElementChild?.classList?.contains('bpk-button--full-width')).toEqual(true);
+  });
 });
diff --git a/packages/bpk-component-button/src/BpkButtonV2/BpkButton.d.ts b/packages/bpk-component-button/src/BpkButtonV2/BpkButton.d.ts
@@ -18,4 +18,4 @@
 
 /// <reference types="react" />
 import type { Props } from './common-types';
-export declare const BpkButtonV2: ({ blank, children, className, disabled, href, iconOnly, onClick, rel: propRel, size, submit, type, ...rest }: Props) => JSX.Element;
+export declare const BpkButtonV2: ({ blank, children, className, disabled, fullWidth, href, iconOnly, onClick, rel: propRel, size, submit, type, ...rest }: Props) => JSX.Element;
diff --git a/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss b/packages/bpk-component-button/src/BpkButtonV2/BpkButton.module.scss
@@ -71,6 +71,10 @@
     @include buttons.bpk-button--secondary-on-dark;
   }
 
+  &--full-width {
+    @include buttons.bpk-button--full-width;
+  }
+
   /* stylelint-disable selector-max-compound-selectors */
   span > svg {
     display: block;

diff --git a/packages/bpk-component-button/src/BpkButtonV2/BpkButton.tsx b/packages/bpk-component-button/src/BpkButtonV2/BpkButton.tsx
@@ -29,6 +29,7 @@ export const BpkButtonV2 = ({
   children,
   className = null,
   disabled = false,
+  fullWidth = false,
   href = null,
   iconOnly = false,
   onClick = () => {},
@@ -44,6 +45,7 @@ export const BpkButtonV2 = ({
     iconOnly && 'bpk-button--icon-only',
     iconOnly && size === SIZE_TYPES.large && 'bpk-button--large-icon-only',
     `bpk-button--${type}`,
+    fullWidth && 'bpk-button--full-width',
     className,
   );
 

diff --git a/packages/bpk-component-button/src/BpkButtonV2/common-types.d.ts b/packages/bpk-component-button/src/BpkButtonV2/common-types.d.ts
@@ -41,6 +41,7 @@ export type Props = {
   size?: SizeType;
   className?: string | null;
   disabled?: boolean;
+  fullWidth?: boolean;
   iconOnly?: boolean;
   onClick?: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void;
   rel?: string | undefined;

diff --git a/packages/bpk-component-button/src/BpkButtonV2/common-types.tsx b/packages/bpk-component-button/src/BpkButtonV2/common-types.tsx
@@ -44,6 +44,7 @@ export type Props = {
   size?: SizeType;
   className?: string | null;
   disabled?: boolean;
+  fullWidth?: boolean;
   iconOnly?: boolean;
   onClick?: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void;
   rel?: string | undefined;

diff --git a/packages/bpk-mixins/_buttons.scss b/packages/bpk-mixins/_buttons.scss
@@ -566,3 +566,18 @@
     color: $bpk-text-disabled-day;
   }
 }
+
+/// Full width button. Modifies the bpk-button to horizontally fill its container
+///
+/// @require {mixin} bpk-button
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--full-width();
+///   }
+
+@mixin bpk-button--full-width {
+  display: block;
+  width: 100%;
+}