diff --git a/examples/bpk-component-swap-button/examples.js b/examples/bpk-component-swap-button/examples.js
index 99b9b3ba0f..bab0d8d919 100644
--- a/examples/bpk-component-swap-button/examples.js
+++ b/examples/bpk-component-swap-button/examples.js
@@ -18,24 +18,29 @@
/* @flow strict */
import BpkSwapButton, { SWAPBUTTON_STYLES } from '../../packages/bpk-component-swap-button';
-import { action, BpkDarkExampleWrapper} from '../bpk-storybook-utils';
+import { action, BpkDarkExampleWrapper } from '../bpk-storybook-utils';
-const DefaultExample = () => (
+const wrapperStyles = {
+ height: '100px',
+ width: '100px',
+ padding: '2rem'
+}
-
+const DefaultExample = () => (
+
);
const CanvasDefaultExample = () => (
-
+
);
const CanvasContrastExample = () => (
-
+
diff --git a/packages/bpk-component-swap-button/src/BpkSwapButton.module.css b/packages/bpk-component-swap-button/src/BpkSwapButton.module.css
index 2bf98c53bd..63441aebae 100644
--- a/packages/bpk-component-swap-button/src/BpkSwapButton.module.css
+++ b/packages/bpk-component-swap-button/src/BpkSwapButton.module.css
@@ -15,4 +15,4 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-swap-button{width:2.5rem;height:2.5rem;transform:translateY(-50%) rotate(90deg)}@media (max-width: 48rem){.bpk-swap-button{transform:rotate(0deg)}}.bpk-swap-button :focus-visible{box-shadow:0 0 0 0.125rem #fff,0 0 0 0.25rem #0062e3}.bpk-swap-button__button{display:flex;width:100%;height:100%;justify-content:center;align-items:center;transition:transform 400ms;border:3px solid #05203c;border-radius:50%;background-color:#fff}@media (max-width: 48rem){.bpk-swap-button__button{border:2px solid #05203c}}.bpk-no-touch-support .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}:global(.bpk-no-touch-support) .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}.bpk-swap-button__button--canvas-default{border:3px solid #fff;background-color:#eff1f2}.bpk-swap-button__button--canvas-contrast{border:3px solid #eff1f2}.bpk-swap-button__icon{max-width:1rem;max-height:1rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-swap-button{transform:translateY(-50%) rotate(90deg)}@media (max-width: 48rem){.bpk-swap-button{transform:rotate(0deg)}}.bpk-swap-button :focus-visible{box-shadow:0 0 0 0.125rem #fff,0 0 0 0.25rem #0062e3}.bpk-swap-button__button{display:flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;transition:transform 400ms;border:3px solid #05203c;border-radius:50%;background-color:#fff}@media (max-width: 48rem){.bpk-swap-button__button{border:2px solid #05203c}}.bpk-no-touch-support .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}:global(.bpk-no-touch-support) .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}.bpk-swap-button__button span{display:inline-flex;line-height:1rem}.bpk-swap-button__button--canvas-default{border:3px solid #fff;background-color:#eff1f2}.bpk-swap-button__button--canvas-contrast{border:3px solid #eff1f2}
diff --git a/packages/bpk-component-swap-button/src/BpkSwapButton.module.scss b/packages/bpk-component-swap-button/src/BpkSwapButton.module.scss
index ae3f7715d4..f413febb15 100644
--- a/packages/bpk-component-swap-button/src/BpkSwapButton.module.scss
+++ b/packages/bpk-component-swap-button/src/BpkSwapButton.module.scss
@@ -19,8 +19,6 @@
@import '../../bpk-mixins/index.scss';
.bpk-swap-button {
- width: bpk-spacing-xxl();
- height: bpk-spacing-xxl();
transform: translateY(-50%) rotate(90deg);
@include bpk-breakpoint-small-tablet {
@@ -35,8 +33,8 @@
&__button {
display: flex;
- width: 100%;
- height: 100%;
+ width: bpk-spacing-xxl();
+ height: bpk-spacing-xxl();
justify-content: center;
align-items: center;
transition: transform $bpk-duration-base;
@@ -52,6 +50,11 @@
background-color: $bpk-surface-highlight-day;
}
+ span {
+ display: inline-flex;
+ line-height: $bpk-line-height-xs;
+ }
+
&--canvas-default {
border: $bpk-border-size-xl solid $bpk-canvas-day;
background-color: $bpk-canvas-contrast-day;
@@ -61,9 +64,4 @@
border: $bpk-border-size-xl solid $bpk-canvas-contrast-day;
}
}
-
- &__icon {
- max-width: bpk-spacing-base();
- max-height: bpk-spacing-base();
- }
}
diff --git a/packages/bpk-component-swap-button/src/BpkSwapButton.tsx b/packages/bpk-component-swap-button/src/BpkSwapButton.tsx
index f28014555c..af4341afca 100644
--- a/packages/bpk-component-swap-button/src/BpkSwapButton.tsx
+++ b/packages/bpk-component-swap-button/src/BpkSwapButton.tsx
@@ -63,10 +63,11 @@ const BpkSwapButton = ( props: Props ) => {
handleRotation();
}}
>
-
+
+
+
);
};
export default BpkSwapButton;
-
diff --git a/packages/bpk-component-swap-button/src/__snapshots__/BpkSwapButton-test.tsx.snap b/packages/bpk-component-swap-button/src/__snapshots__/BpkSwapButton-test.tsx.snap
index 7dcb24952a..5f52159f4f 100644
--- a/packages/bpk-component-swap-button/src/__snapshots__/BpkSwapButton-test.tsx.snap
+++ b/packages/bpk-component-swap-button/src/__snapshots__/BpkSwapButton-test.tsx.snap
@@ -11,17 +11,18 @@ exports[`BpkSwapButton should render correctly 1`] = `
style="transform: rotate(0deg);"
type="button"
>
-
+
+
+