NO-JIRA: Added submit to loading button props (#3574)

* added submit to loading button props

* linting

* added examples for submit buttons

* moved loading button example

* moved submit button

---------

Co-authored-by: Amber Shand <amber.shand@skyscanner.net>

examples/bpk-component-button/examples.tsx

@@ -176,6 +176,12 @@ const FullWidthExample = (props: any) => (
   </BpkButtonV2>
 );
 
+const SubmitButtonExample = (props: any) => (
+  <BpkButtonV2 submit {...props}>
+    Submit Button
+  </BpkButtonV2>
+);
+
 const MixedExample = () => (
   <>
     <PrimaryExample />
@@ -188,6 +194,7 @@ const MixedExample = () => (
     <LinkOnDarkExample />
     <FeaturedExample />
     <FullWidthExample />
+    <SubmitButtonExample />
   </>
 );
 
@@ -218,4 +225,5 @@ export {
   MixedExample,
   AnchorTagsExample,
   FullWidthExample,
+  SubmitButtonExample,
 };

examples/bpk-component-button/stories.tsx

@@ -31,6 +31,7 @@ import {
   MixedExample,
   AnchorTagsExample,
   FullWidthExample,
+  SubmitButtonExample,
 } from './examples';
 import { MixedExample as MixedExampleV1 } from './examplesv1';
 
@@ -75,5 +76,5 @@ export const VisualTestV1WithZoom = {
     zoomEnabled: true,
   },
 };
-
+export const SubmitButton = () => <SubmitButtonExample />;
 export const FullWidth = () => <FullWidthExample />;

examples/bpk-component-loading-button/examples.js

@@ -395,6 +395,9 @@ const VisualExample = () => (
     </div>
   </div>
 );
+const SubmitExample = () => (
+  <LoadingButtonStory submit wrapped={BpkLoadingButton} />
+);
 
 export {
   DocsPrimaryExample,
@@ -411,4 +414,5 @@ export {
   AnchorTagsExample,
   CustomIconExample,
   VisualExample,
+  SubmitExample,
 };

examples/bpk-component-loading-button/stories.js

@@ -34,6 +34,7 @@ import {
   AnchorTagsExample,
   CustomIconExample,
   VisualExample,
+  SubmitExample,
 } from './examples';
 
 export default {
@@ -61,6 +62,7 @@ export const Mixture = MixtureExample;
 export const AnchorTags = AnchorTagsExample;
 
 export const CustomIcon = CustomIconExample;
+export const Submit = SubmitExample;
 export const VisualTest = VisualExample;
 export const VisualTestWithZoom = VisualTest.bind({});
 VisualTestWithZoom.args = {

packages/bpk-component-loading-button/src/BpkLoadingButton.tsx

@@ -30,6 +30,8 @@ import ArrowIconSm from '../../bpk-component-icon/sm/long-arrow-right';
 import { BpkSpinner, BpkLargeSpinner } from '../../bpk-component-spinner';
 import { cssModules } from '../../bpk-react-utils';
 
+import type { Props as ButtonProps } from '../../bpk-component-button/src/BpkButtonV2/common-types';
+
 import STYLES from './BpkLoadingButton.module.scss';
 
 const getClassName = cssModules(STYLES);
@@ -83,7 +85,7 @@ type LoadingProps = {
   iconPosition: string,
   iconDisabled?: ReactElement<any>,
   iconLoading?: ReactElement<any>,
-};
+} & ButtonProps;
 
 const BpkLoadingButton = (props: LoadingProps) => {
   const {