Merge branch 'main' into remove-vitepress

.github/workflows/e2e-tests.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Load Yarn cache
         uses: actions/cache@v2

.github/workflows/template-test.yml

@@ -0,0 +1,66 @@
+name: Template Tests
+
+on: [push]
+
+jobs:
+  template-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get Yarn cache path
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Checkout branch
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+
+      - name: Load Yarn cache
+        uses: actions/cache@v2
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Remove Postinstall Script
+        run: npm pkg set scripts.postinstall="echo no-postinstall"
+
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+        env:
+          CI: true
+
+      - name: Create component with template
+        run: yarn new:component --name ComponentName
+
+      - name: Re-link Dependencies
+        run: yarn install --frozen-lockfile
+        env:
+          CI: true
+
+      - name: Build Component for Vue
+        run: yarn turbo run build --filter=@cypress-design/vue-componentname...
+
+      - name: Build Component for React
+        run: yarn turbo run build --filter=@cypress-design/vue-componentname...
+
+      - name: Lint all files
+        run: yarn eslint .
+
+      # run cypress component tests
+      - name: Cypress run CT
+        uses: cypress-io/github-action@v5
+        with:
+          component: true
+          record: true
+          browser: chrome
+          spec: components/ComponentName/**/*
+        env:
+          # Recommended: pass the GitHub token lets this action correctly
+          # determine the unique run id necessary to re-run the checks
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

.github/workflows/test.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Load Yarn cache
         uses: actions/cache@v2
@@ -52,11 +52,14 @@ jobs:
       - name: Build Components
         run: yarn run build:components
 
-      - name: Check global types
-        run: |
-          yarn vue-tsc --noEmit -p . 
-          yarn tsc --noEmit --project ./tsconfig.react.json
-          yarn vue-tsc --noEmit --project ./tsconfig.vue.json
+      - name: Types docs
+        run: yarn vue-tsc --noEmit -p .
+
+      - name: Types Vue
+        run: yarn vue-tsc --noEmit --project ./tsconfig.vue.json
+
+      - name: Types React
+        run: yarn tsc --noEmit --project ./tsconfig.react.json
 
       # run cypress component tests
       - name: Cypress run CT

.nvmrc

@@ -1 +1 @@
-16.18.0
+18.17.1

ReadMe.md

@@ -100,9 +100,9 @@ Once added, the svg attributes should be tweaked so as to integrate with the ico
 - Add `class="icon-light"` to paths that are light, generally the fills
 - Remove the `width` and `height` attributes of the SVG
 
-To verify that the icon is properly hooked up, run `yarn start` and navigate to the `icons` page. Search for your icon and tweak the colors. If you need to adjust the attributes you can run `yarn build:icons` and storybook will update with the latest changes.
+To verify that the icon is properly hooked up, run `yarn && yarn start` and navigate to the `icons` page. Search for your icon and tweak the colors.
 
-When an icon is added or updated, the changeset for both the '@cypress-design/react-icon' and '@cypress-design/vue-icon' packages should include a minor version bump.
+When an icon is added or updated, the changeset for both the '@cypress-design/react-icon' and '@cypress-design/vue-icon' packages should include a minor version bump. This can be done by running `yarn changeset`.
 
 ### Updating the component generator
 

_templates/component/new/components_ComponentName_react_ComponentNameReact.cy.tsx.ejs.t

@@ -5,12 +5,14 @@ to: components/<%= h.inflection.camelize(name, false) %>/react/<%= h.inflection.
 
 import * as React from 'react'
 import { mount } from 'cypress/react18'
-import <%= h.inflection.camelize(name, false) %>Story from './<%= h.inflection.camelize(name, false) %>.rootstory'
+import <%= h.inflection.camelize(name, false) %> from './<%= h.inflection.camelize(name, false) %>'
 import assertions from '../assertions'
 
 describe('<%= h.inflection.camelize(name, false) %>', () => {
-  function mountStory(options: Parameters<typeof <%= h.inflection.camelize(name, false) %>Story>[0] = {}) {
-    mount(<<%= h.inflection.camelize(name, false) %>Story {...options} />)
+  function mountStory(
+    options: Parameters<typeof <%= h.inflection.camelize(name, false) %>>[0] = { id: '1' },
+  ) {
+    mount(<<%= h.inflection.camelize(name, false) %> {...options} />)
   }
   assertions(mountStory)
 })

_templates/component/new/components_ComponentName_vue_ComponentName.vue.ejs.t

@@ -2,9 +2,10 @@
 to: components/<%= h.inflection.camelize(name, false) %>/vue/<%= h.inflection.camelize(name, false) %>.vue
 ---
 <template>
-  <div :id="id" class="bg-jade-100" :class="class">
+  <div :id="id" class="bg-jade-100">
     <label>{{ label }}</label>
     Template for <%= h.inflection.camelize(name, false) %>
+    <p>{{ SharedSettings.foo }}</p>
   </div>
 </template>
 
@@ -15,11 +16,9 @@ withDefaults(
   defineProps<{
     id: string
     label?: string
-    class?: string
   }>(),
   {
     label: undefined,
-    class: undefined,
-  }
+  },
 )
 </script>

_templates/component/new/components_ComponentName_vue_ComponentNameVue.cy.tsx.ejs.t

@@ -3,12 +3,15 @@ to: components/<%= h.inflection.camelize(name, false) %>/vue/<%= h.inflection.ca
 ---
 /// <reference types="cypress" />
 import { mount } from 'cypress/vue'
+import type { ComponentProps } from '../../vue-utils'
 import assertions from '../assertions'
-import <%= h.inflection.camelize(name, false) %>Story from './<%= h.inflection.camelize(name, false) %>.rootstory'
+import <%= h.inflection.camelize(name, false) %> from './<%= h.inflection.camelize(name, false) %>.vue'
 
 describe('<<%= h.inflection.camelize(name, false) %>/>', () => {
-  function mountStory(options: Parameters<typeof <%= h.inflection.camelize(name, false) %>Story>[0] = {}) {
-    mount(() => <<%= h.inflection.camelize(name, false) %>Story {...options} />)
+  function mountStory(
+    options: ComponentProps<typeof <%= h.inflection.camelize(name, false) %>> = { id: '1' },
+  ) {
+    mount(() => <<%= h.inflection.camelize(name, false) %> {...options} />)
   }
   assertions(mountStory)
 })

_templates/component/new/components_ComponentName_vue_tsconfig.build.json.ejs.t

@@ -2,7 +2,7 @@
 to: components/<%= h.inflection.camelize(name, false) %>/vue/tsconfig.build.json
 ---
 {
-  "extends": "../../../tsconfig.vue.json",
+  "extends": "../../../tsconfig.vue.build.json",
   "include": ["./*.vue", "./index.ts"],
   "compilerOptions": {
     "outDir": "dist",

components/Alert/react/package.json

@@ -27,9 +27,9 @@
   },
   "devDependencies": {
     "@cypress-design/rollup-plugin-tailwind-keep": "*",
-    "postcss": "^8.4.28",
+    "postcss": "^8.4.31",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.66.1"
+    "sass": "^1.69.5"
   },
   "license": "MIT"
 }

components/Button/vue/ButtonVue.cy.tsx

@@ -4,7 +4,6 @@ import { mount } from 'cypress/vue'
 import assertions from '../assertions'
 import Button from './Button.vue'
 import ButtonStory from './Button.rootstory'
-import { cyDeviceLaptopX24 } from '@cypress-design/icon-registry'
 
 describe('<Button />', { viewportHeight: 600, viewportWidth: 1000 }, () => {
   function mountStory(options: Parameters<typeof ButtonStory>[0] = {}) {
@@ -30,7 +29,7 @@ describe('<Button />', { viewportHeight: 600, viewportWidth: 1000 }, () => {
   })
 
   it('responsively handles `disabled` changes', () => {
-    const disabled = ref(true)
+    const disabled = ref(false)
 
     mount({
       render: () => (
@@ -52,18 +51,14 @@ describe('<Button />', { viewportHeight: 600, viewportWidth: 1000 }, () => {
       ),
     })
 
-    // HTML & DS Buttons start off disabled
-    cy.findByTestId('html-button').should('be.disabled')
-    cy.findByTestId('ds-button').should('be.disabled')
+    cy.findByTestId('html-button').should('not.be.disabled')
+    cy.findByTestId('ds-button').should('not.be.disabled')
 
     // Click toggle button to update `ref` for `disabled` state
     cy.findByTestId('toggle').click()
 
-    // Base HTML button properly enables
-    cy.findByTestId('html-button').should('not.be.disabled')
-
-    // FAILS - DS Button stays disabled
-    cy.findByTestId('ds-button').should('not.be.disabled')
+    cy.findByTestId('html-button').should('be.disabled')
+    cy.findByTestId('ds-button').should('be.disabled')
   })
 
   it('responsively handles attributes changes', () => {

components/Icon/react/CHANGELOG.md

@@ -1,5 +1,80 @@
 # @cypress-design/react-icon
 
+## 0.30.1
+
+### Patch Changes
+
+- [#343](https://github.com/cypress-io/cypress-design/pull/343) [`2868018`](https://github.com/cypress-io/cypress-design/commit/28680187b2c0b0184360b6439b9811b420ddb2eb) Thanks [@ryanjwilke](https://github.com/ryanjwilke)! - Added more IconActionDelete sizes and fixed the colors for the IconCheckmarkSolid
+
+- Updated dependencies [[`2868018`](https://github.com/cypress-io/cypress-design/commit/28680187b2c0b0184360b6439b9811b420ddb2eb)]:
+  - @cypress-design/icon-registry@0.33.1
+
+## 0.30.0
+
+### Minor Changes
+
+- [#337](https://github.com/cypress-io/cypress-design/pull/337) [`17ce6d9`](https://github.com/cypress-io/cypress-design/commit/17ce6d9421ea37235058e5ca26b4e244d5d5b335) Thanks [@cbfrance](https://github.com/cbfrance)! - Add icon-shield-check
+
+### Patch Changes
+
+- Updated dependencies [[`17ce6d9`](https://github.com/cypress-io/cypress-design/commit/17ce6d9421ea37235058e5ca26b4e244d5d5b335)]:
+  - @cypress-design/icon-registry@0.33.0
+
+## 0.29.0
+
+### Minor Changes
+
+- [#335](https://github.com/cypress-io/cypress-design/pull/335) [`24d343f`](https://github.com/cypress-io/cypress-design/commit/24d343f8c7c4acce6192b357df16c639ec316a44) Thanks [@ryanjwilke](https://github.com/ryanjwilke)! - Added the Device TV icon
+
+### Patch Changes
+
+- Updated dependencies [[`24d343f`](https://github.com/cypress-io/cypress-design/commit/24d343f8c7c4acce6192b357df16c639ec316a44)]:
+  - @cypress-design/icon-registry@0.32.0
+
+## 0.28.0
+
+### Minor Changes
+
+- [#332](https://github.com/cypress-io/cypress-design/pull/332) [`a182e57`](https://github.com/cypress-io/cypress-design/commit/a182e57e1da4e33b693d0bf2b05fa0f2d4599940) Thanks [@ryanjwilke](https://github.com/ryanjwilke)! - Fixed the large x16 bug icon
+
+### Patch Changes
+
+- Updated dependencies [[`a182e57`](https://github.com/cypress-io/cypress-design/commit/a182e57e1da4e33b693d0bf2b05fa0f2d4599940)]:
+  - @cypress-design/icon-registry@0.31.0
+
+## 0.27.0
+
+### Minor Changes
+
+- [#330](https://github.com/cypress-io/cypress-design/pull/330) [`a8dce48`](https://github.com/cypress-io/cypress-design/commit/a8dce4886ea285157b20c7a64a8919817d6429dc) Thanks [@ryanjwilke](https://github.com/ryanjwilke)! - Add large and small x16 bug icons
+
+### Patch Changes
+
+- Updated dependencies [[`a8dce48`](https://github.com/cypress-io/cypress-design/commit/a8dce4886ea285157b20c7a64a8919817d6429dc)]:
+  - @cypress-design/icon-registry@0.30.0
+
+## 0.26.0
+
+### Minor Changes
+
+- [#326](https://github.com/cypress-io/cypress-design/pull/326) [`464b91a`](https://github.com/cypress-io/cypress-design/commit/464b91a61b62ca4621a4f6db28e12e61ab1b4b9e) Thanks [@ryanjwilke](https://github.com/ryanjwilke)! - Add the x16 bug icon
+
+### Patch Changes
+
+- Updated dependencies [[`464b91a`](https://github.com/cypress-io/cypress-design/commit/464b91a61b62ca4621a4f6db28e12e61ab1b4b9e)]:
+  - @cypress-design/icon-registry@0.29.0
+
+## 0.25.0
+
+### Minor Changes
+
+- [#319](https://github.com/cypress-io/cypress-design/pull/319) [`d8692bc`](https://github.com/cypress-io/cypress-design/commit/d8692bcf16f779417c202a8c2050b0e424576501) Thanks [@emilmilanov](https://github.com/emilmilanov)! - Added clock icon
+
+### Patch Changes
+
+- Updated dependencies [[`d8692bc`](https://github.com/cypress-io/cypress-design/commit/d8692bcf16f779417c202a8c2050b0e424576501)]:
+  - @cypress-design/icon-registry@0.28.0
+
 ## 0.24.0
 
 ### Minor Changes

components/Icon/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cypress-design/react-icon",
-  "version": "0.24.0",
+  "version": "0.30.1",
   "files": [
     "*"
   ],
@@ -21,12 +21,12 @@
     "build:types": "tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
-    "@cypress-design/icon-registry": "^0.27.0",
+    "@cypress-design/icon-registry": "^0.33.1",
     "clsx": "*"
   },
   "devDependencies": {
     "@cypress-design/rollup-plugin-tailwind-keep": "*",
-    "@types/lodash": "^4.14.197",
+    "@types/lodash": "^4.14.200",
     "lodash": "^4.17.21",
     "dedent": "^1.5.1"
   },