format(pie-button): DSW-000 formatting updates for PR comments

justeattakeaway · Jul 24, 2024 · a67b7e9 · a67b7e9
1 parent 2fa062f
commit a67b7e9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/packages/components/pie-button/src/button.scss b/packages/components/pie-button/src/button.scss
@@ -6,7 +6,7 @@
 * Takes in the the particular settings for the wide breakpoint.
 */
 @mixin responsive-wide {
-    &.is-responsive {
+    &.o-btn--responsive {
         @include media('>md') {
             @content;
         }
@@ -112,8 +112,8 @@
 
         // This is to handle the background colour change getting overridden above, but then being put in responsive mode
         // can't use :not for this unfortunately, as then the smaller narrow state would lose its background colour too
-        &.o-btn--xsmall.is-responsive.o-btn--expressive,
-        &.o-btn--small-productive.is-responsive {
+        &.o-btn--xsmall.o-btn--expressive,
+        &.o-btn--small-productive {
             @include responsive-wide {
                 --btn-bg-color: var(--dt-color-interactive-brand);
 

diff --git a/packages/components/pie-button/src/index.ts b/packages/components/pie-button/src/index.ts
@@ -1,7 +1,7 @@
 import {
     LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
 } from 'lit';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { validPropertyValues, defineCustomElement, FormControlMixin } from '@justeattakeaway/pie-webc-core';
 import {
@@ -229,8 +229,8 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
         const classes = {
             'o-btn': true,
             'o-btn--fullWidth': isFullWidth,
-            'is-responsive': isResponsive,
-            [`o-btn--${responsiveSize}`]: ((isResponsive && responsiveSize) || false),
+            'o-btn--responsive': isResponsive,
+            [`o-btn--${responsiveSize}`]: Boolean(isResponsive && responsiveSize),
             [`o-btn--${variant}`]: true,
             [`o-btn--${size}`]: true,
             'is-loading': isLoading,

diff --git a/packages/components/pie-button/test/component/pie-button.spec.ts b/packages/components/pie-button/test/component/pie-button.spec.ts
@@ -555,7 +555,7 @@ test.describe('props', () => {
                 );
 
                 await expect(component.locator('button'))
-                    .not.toHaveAttribute('isResponsive', ''); // TODO: Remove the empty argument once we upgrade Playwright to 1.39 or above
+                    .not.toHaveClass(/o-btn--responsive/);
             });
         });
         test.describe('when set to true', () => {
@@ -577,7 +577,7 @@ test.describe('props', () => {
                 );
 
                 await expect(component.locator('button'))
-                    .toHaveAttribute('isResponsive', ''); // TODO: Remove the empty argument once we upgrade Playwright to 1.39 or above
+                    .toHaveClass(/o-btn--responsive/);
             });
 
             sizes.forEach(({ sizeName, responsiveSize }) => {
@@ -617,7 +617,7 @@ test.describe('props', () => {
                 );
 
                 await expect(component.locator('button'))
-                    .not.toHaveAttribute('responsiveSize', ''); // TODO: Remove the empty argument once we upgrade Playwright to 1.39 or above
+                    .not.toHaveClass([/o-btn--productive/, /o-btn--expressive/]);
             });
         });
 
@@ -642,7 +642,7 @@ test.describe('props', () => {
                     );
 
                     await expect(component.locator('button'))
-                        .toHaveAttribute('responsiveSize', 'expressive');
+                        .toHaveClass([/o-btn--expressive/]);
                 });
             });
         });
@@ -667,7 +667,7 @@ test.describe('props', () => {
                 );
 
                 await expect(component.locator('button'))
-                    .toHaveAttribute('responsiveSize', 'productive');
+                    .toHaveClass(/o-btn--productive/);
             });
         });
     });