feat: dsw-000-buttonoverflow integration (#227)

* feat: dsw-000-buttonoverflow * feat: DSW-0 updated button tests * feat: DSW-0 adding new button variants and upgrading deps * fix: DSW-0 resolutions for rimraf and glob pkgs --------- Co-authored-by: Ashley Watson-Nolan <[email protected]>
justeattakeaway · Dec 3, 2024 · 9acfca3 · 9acfca3
1 parent bd53472
commit 9acfca3
Show file tree

Hide file tree

Showing 10 changed files with 1,565 additions and 2,025 deletions.
diff --git a/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs b/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,3 +1,9 @@
+cacheFolder: ./.yarn/cache
+
 nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
 yarnPath: .yarn/releases/yarn-3.5.0.cjs
-cacheFolder: ./.yarn/cache
diff --git a/nextjs-app-v14/package.json b/nextjs-app-v14/package.json
@@ -14,24 +14,24 @@
     "upgrade-pie-packages": "npx npm-check-updates \"@justeattakeaway/pie-*\" -u"
   },
   "dependencies": {
-    "@justeattakeaway/pie-css": "0.13.0",
-    "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.53",
+    "@justeattakeaway/pie-css": "0.13.1",
+    "@justeattakeaway/pie-icons-webc": "1.1.0",
+    "@justeattakeaway/pie-webc": "0.5.56",
     "@lit-labs/nextjs": "0.2.0",
-    "@lit/react": "1.0.5",
-    "next": "14.2.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "sass": "1.69.5"
+    "@lit/react": "1.0.6",
+    "next": "14.2.18",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "sass": "1.81.0"
   },
   "devDependencies": {
-    "@types/node": "20.9.1",
-    "@types/react": "18.2.47",
-    "@types/react-dom": "18.2.7",
+    "@types/node": "20.17.9",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
     "deepmerge": "4.3.1",
-    "eslint": "8.48.0",
-    "eslint-config-next": "13.4.19",
-    "typescript": "5.2.2"
+    "eslint": "8.57.1",
+    "eslint-config-next": "13.5.7",
+    "typescript": "5.7.2"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"

diff --git a/nextjs-app-v14/src/app/components/button/button.tsx b/nextjs-app-v14/src/app/components/button/button.tsx
@@ -12,12 +12,28 @@ export default function Button() {
     return (
         <NavigationLayout title="Button">
         <PieButton onClick={() => setCounter(counter + 1)}>Counter: {counter}</PieButton>
+
         <PieDivider />
+
         <h2>PIE Button - with Icon and text</h2>
         <PieButton>
             <IconSearch slot="icon"></IconSearch>
             Search
         </PieButton>
+
+        <PieDivider />
+
+        <h2>PIE Button - multi-line content</h2>
+        <PieButton>
+            This button has a long text that will wrap to the next line. It‘s very long
+        </PieButton>
+
+        <PieDivider />
+
+        <h2>PIE Button - truncated content</h2>
+        <PieButton isFullWidth>
+            Thisisawordthatdoesntactuallyexistsothatwecanseehowthecontentistruncated
+        </PieButton>
         </NavigationLayout>
     );
 }
diff --git a/nuxt-app/package.json b/nuxt-app/package.json
@@ -15,15 +15,15 @@
   },
   "devDependencies": {
     "deepmerge": "4.3.1",
-    "nuxt": "3.13.2",
-    "sass": "1.70.0"
+    "nuxt": "3.14.1592",
+    "sass": "1.81.0"
   },
   "dependencies": {
-    "@justeattakeaway/pie-css": "0.13.0",
-    "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.53",
+    "@justeattakeaway/pie-css": "0.13.1",
+    "@justeattakeaway/pie-icons-webc": "1.1.0",
+    "@justeattakeaway/pie-webc": "0.5.56",
     "just-kebab-case": "4.2.0",
-    "nuxt-ssr-lit": "1.6.16"
+    "nuxt-ssr-lit": "1.6.27"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"

diff --git a/nuxt-app/pages/components/button.vue b/nuxt-app/pages/components/button.vue
@@ -3,13 +3,37 @@
     <pie-button @click="setCounter">
       Counter: {{ counter }}
     </pie-button>
+
+    <pie-divider></pie-divider>
+
+    <h2>PIE Button - with Icon and text</h2>
+    <pie-button>
+        <icon-search slot="icon"></icon-search>
+        Search
+    </pie-button>
+
+    <pie-divider></pie-divider>
+
+    <h2>PIE Button - multi-line content</h2>
+    <pie-button>
+        This button has a long text that will wrap to the next line. It‘s very long
+    </pie-button>
+
+    <pie-divider></pie-divider>
+
+    <h2>PIE Button - truncated content</h2>
+    <pie-button isFullWidth>
+        Thisisawordthatdoesntactuallyexistsothatwecanseehowthecontentistruncated
+    </pie-button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { definePageMeta } from '#imports';
 import '@justeattakeaway/pie-webc/components/button.js';
+import '@justeattakeaway/pie-webc/components/divider.js';
+import '@justeattakeaway/pie-icons-webc/dist/IconSearch.js';
 
 definePageMeta({
     title: 'Button',

diff --git a/package.json b/package.json
@@ -19,8 +19,8 @@
     "upgrade-pie-packages": "turbo run upgrade-pie-packages && yarn"
   },
   "dependencies": {
-    "commitizen": "4.3.0",
-    "cz-customizable": "7.0.0"
+    "commitizen": "4.3.1",
+    "cz-customizable": "7.2.1"
   },
   "config": {
     "commitizen": {
@@ -31,29 +31,33 @@
     }
   },
   "devDependencies": {
-    "@percy/cli": "1.28.0",
-    "@percy/selenium-webdriver": "2.0.2",
-    "@playwright/test": "1.41.1",
+    "@percy/cli": "1.30.4",
+    "@percy/selenium-webdriver": "2.1.0",
+    "@playwright/test": "1.49.0",
     "@types/follow-redirects": "1.14.4",
-    "@types/node": "20.11.13",
-    "@wdio/browserstack-service": "8.24.1",
-    "@wdio/cli": "8.19.0",
-    "@wdio/local-runner": "8.19.0",
-    "@wdio/mocha-framework": "8.19.0",
-    "@wdio/spec-reporter": "8.19.0",
+    "@types/node": "20.17.9",
+    "@wdio/browserstack-service": "8.40.6",
+    "@wdio/cli": "8.40.6",
+    "@wdio/local-runner": "8.40.6",
+    "@wdio/mocha-framework": "8.40.6",
+    "@wdio/spec-reporter": "8.40.6",
     "cross-env": "7.0.3",
-    "follow-redirects": "1.15.6",
+    "follow-redirects": "1.15.9",
     "playwright-merge-html-reports": "0.2.8",
-    "selenium-webdriver": "4.14.0",
-    "turbo": "1.12.2"
+    "selenium-webdriver": "4.27.0",
+    "turbo": "1.13.4"
+  },
+  "resolutions": {
+    "rimraf": "3.0.2",
+    "glob": "10.4.5"
   },
   "workspaces": [
     "nextjs-app-v14",
     "nuxt-app",
     "vanilla-app"
   ],
   "volta": {
-    "node": "20.9.0",
+    "node": "20.18.1",
     "yarn": "3.5.0"
   }
 }
diff --git a/vanilla-app/js/button.js b/vanilla-app/js/button.js
@@ -5,11 +5,27 @@ import './shared.js';
 
 document.querySelector('#app').innerHTML = `
     <pie-button id="counter" type="button"></pie-button>
+
     <pie-divider></pie-divider>
+
     <h2>PIE Button – with icon and text</h2>
     <pie-button>
         <icon-search slot="icon"></icon-search>
         Search
+    </pie-button>
+
+    <pie-divider></pie-divider>
+
+    <h2>PIE Button - multi-line content</h2>
+    <pie-button>
+        This button has a long text that will wrap to the next line. It‘s very long
+    </pie-button>
+
+    <pie-divider></pie-divider>
+
+    <h2>PIE Button - truncated content</h2>
+    <pie-button isFullWidth>
+        Thisisawordthatdoesntactuallyexistsothatwecanseehowthecontentistruncated
     </pie-button>`;
 
 setupCounter(document.querySelector('#counter'));

diff --git a/vanilla-app/package.json b/vanilla-app/package.json
@@ -14,13 +14,13 @@
   },
   "devDependencies": {
     "deepmerge": "4.3.1",
-    "vite": "4.5.3",
+    "vite": "4.5.5",
     "vite-plugin-html-inject": "1.1.2"
   },
   "dependencies": {
-    "@justeattakeaway/pie-css": "0.13.0",
-    "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-webc": "0.5.53"
+    "@justeattakeaway/pie-css": "0.13.1",
+    "@justeattakeaway/pie-icons-webc": "1.1.0",
+    "@justeattakeaway/pie-webc": "0.5.56"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"