[BpkSwapButton] Luna 1092 patch (#3196)

[BpkSwapButton] Luna 1092 patch

---------

Co-authored-by: Jenna <[email protected]>

Author: Jennahowieson

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

@@ -17,8 +17,8 @@
  */
 /* @flow strict */
 
-import BpkSwapButton from '../../packages/bpk-component-swap-button';
-import { action } from '../bpk-storybook-utils';
+import BpkSwapButton, { SWAPBUTTON_STYLES } from '../../packages/bpk-component-swap-button';
+import { action, BpkDarkExampleWrapper} from '../bpk-storybook-utils';
 
 const DefaultExample = () => (
 
@@ -27,4 +27,19 @@ const DefaultExample = () => (
   </div>
 );
 
-export default DefaultExample ;
+const CanvasDefaultExample = () => (
+
+  <BpkDarkExampleWrapper padded style={{padding:'2rem'}} >
+  <BpkSwapButton swapButtonStyle={SWAPBUTTON_STYLES.canvasDefault} ariaLiveTextProp='Swapped' onClick={action('Button clicked')}/>
+  </BpkDarkExampleWrapper>
+);
+const CanvasContrastExample = () => (
+  <div>
+  <BpkDarkExampleWrapper padded style={{padding:'2rem'}}>
+    <BpkSwapButton swapButtonStyle={SWAPBUTTON_STYLES.canvasContrast} ariaLiveTextProp='Swapped' onClick={action('Button clicked')}/>
+  </BpkDarkExampleWrapper>
+  </div>
+
+);
+
+export {DefaultExample, CanvasDefaultExample, CanvasContrastExample} ;

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

@@ -18,7 +18,7 @@
 
 import BpkSwapButton from '../../packages/bpk-component-swap-button/src/BpkSwapButton';
 
-import DefaultExample from './examples'
+import { DefaultExample, CanvasDefaultExample, CanvasContrastExample } from './examples'
 
 export default {
   title: 'bpk-component-swap-button',
@@ -27,4 +27,8 @@ export default {
 
 export const Default = DefaultExample;
 
+export const CanvasDefault = CanvasDefaultExample;
+
+export const CanvasContrast = CanvasContrastExample;
+
 export const VisualTest = DefaultExample;

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)}}@layer bpk-component{.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__icon{max-width:1rem;max-height:1rem}}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@layer bpk-component{.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}}

packages/bpk-component-swap-button/src/BpkSwapButton.module.scss

@@ -52,6 +52,15 @@
       @include bpk-hover {
         background-color: $bpk-surface-highlight-day;
       }
+
+      &--canvas-default {
+        border: $bpk-border-size-xl solid $bpk-canvas-day;
+        background-color: $bpk-canvas-contrast-day;
+      }
+
+      &--canvas-contrast {
+        border: $bpk-border-size-xl solid $bpk-canvas-contrast-day;
+      }
     }
 
     &__icon {

packages/bpk-component-swap-button/src/BpkSwapButton.tsx

@@ -19,20 +19,27 @@
 import { useState } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
-import BpkAriaLive from '../../bpk-component-aria-live'
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import SwapVertical from '../../bpk-component-icon/sm/swap--vertical';
 
 import STYLES from './BpkSwapButton.module.scss';
 
 const getClassName = cssModules(STYLES);
 
+export const SWAPBUTTON_STYLES = {
+  surfaceContrast: 'surface-contrast',
+  canvasDefault: 'canvas-default',
+  canvasContrast: 'canvas-contrast',
+};
+export type SwapButtonStyle = (typeof SWAPBUTTON_STYLES)[keyof typeof SWAPBUTTON_STYLES]
+
 export type Props = {
   onClick: () => void,
   ariaLabel: string,
+  swapButtonStyle?: SwapButtonStyle,
 }
 const BpkSwapButton = ( props: Props ) => {
-  const { ariaLabel, onClick } = props;
+  const { ariaLabel, onClick, swapButtonStyle = SWAPBUTTON_STYLES.surfaceContrast } = props;
 
   const [rotationDegree, setRotationDegree] = useState(0);
 
@@ -48,7 +55,7 @@ const BpkSwapButton = ( props: Props ) => {
     <div className={getClassName('bpk-swap-button')}>
       <button
         type="button"
-        className={getClassName('bpk-swap-button__button')}
+        className={getClassName('bpk-swap-button__button',`bpk-swap-button__button--${swapButtonStyle}`)}
         style={{ transform: `rotate(${rotationDegree}deg)` }}
         aria-label={ariaLabel}
         onClick={() => {

packages/bpk-component-swap-button/src/__snapshots__/BpkSwapButton-test.tsx.snap

@@ -7,7 +7,7 @@ exports[`BpkSwapButton should render correctly 1`] = `
   >
     <button
       aria-label="Swap Button"
-      class="bpk-swap-button__button"
+      class="bpk-swap-button__button bpk-swap-button__button--surface-contrast"
       style="transform: rotate(0deg);"
       type="button"
     >