@pnx-mixtape/mxds 0.0.20 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +18 -6
  2. package/package.json +5 -16
  3. package/src/Atom/Icon/Icon.tsx +1 -1
  4. package/src/Component/Pagination/Pagination.tsx +6 -2
  5. package/src/Component/Steps/__snapshots__/Steps.stories.ts.snap +12 -12
  6. package/src/Component/Steps/step-item.twig +1 -1
  7. package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +2 -2
  8. package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +2 -2
package/README.md CHANGED
@@ -7,7 +7,7 @@
7
7
  > Refer to that repo if you need to make changes the original packages. This repo is dedicated to
8
8
  > the `@pnx-mixtape/mxds` package.
9
9
 
10
- ### The PreviousNext Design System: [mixtape.pnx.io](https://mixtape.pnx.io/)
10
+ ### The PreviousNext Design System: [mxds.pnx.io](https://mxds.pnx.io/)
11
11
 
12
12
  A design system helps align teams around how products are designed and built.
13
13
 
@@ -184,7 +184,7 @@ customElements.define("mx-fancy-accordion", FancyAccordion)
184
184
  **[pnx-project](https://github.com/previousnext/pnx-project/)** has Mixtape included in the
185
185
  theme by default. Please refer to it (or use it directly) when setting up a Mixtape project.
186
186
 
187
- **[mixtape.pnx.io](https://mixtape.pnx.io/)** is Mixtapes storybook.
187
+ **[mxds.pnx.io](https://mxds.pnx.io/)** is Mixtapes storybook.
188
188
 
189
189
  ## Updating a Mixtape based project
190
190
 
@@ -276,13 +276,25 @@ Then create a pull request, wait for builds to pass, and get the code reviewed.
276
276
 
277
277
  Once approved, merge the PR.
278
278
 
279
- When you are ready for a full release, from `main`, run;
279
+ When you are ready for a release, from `main`, run;
280
280
 
281
281
  ```
282
- pnpm version patch -m 'chore: tag %s'
282
+ pnpm bump-version
283
283
  ```
284
284
 
285
- To bump the version number in `package.json`, then tag the commit and push to `origin`.
285
+ To bump the patch version number in `package.json`, then tag the commit and push to `origin`.
286
286
 
287
- This will trigger a deploy in CircleCI to update [mixtape.pnx.io](https://mixtape.pnx.io/).
287
+ This will trigger a deploy in CircleCI to update [mxds.pnx.io](https://mxds.pnx.io/).
288
288
  Approval is then required to publish to the [NPM registry](https://www.npmjs.com/package/@pnx-mixtape/mxds).
289
+
290
+ Alternatively for a minor or major release, from `main`, run;
291
+
292
+ ```
293
+ # Backward compatible new features
294
+ pnpm version minor -m "chore: tag %s"
295
+ ```
296
+
297
+ ```
298
+ # Changes that break backward compatibility
299
+ pnpm version major -m "chore: tag %s"
300
+ ```
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pnx-mixtape/mxds",
3
3
  "description": "The Mixtape Design System",
4
- "version": "0.0.20",
4
+ "version": "0.0.21",
5
5
  "dependencies": {
6
6
  "@floating-ui/dom": "^1.7.3",
7
7
  "@oddbird/popover-polyfill": "^0.6.1",
@@ -19,9 +19,6 @@
19
19
  "devDependencies": {
20
20
  "@csstools/postcss-global-data": "^3.0.0",
21
21
  "@csstools/stylelint-formatter-github": "^1.0.0",
22
- "@eslint-react/eslint-plugin": "^1.52.4",
23
- "@eslint/eslintrc": "^3.3.1",
24
- "@eslint/js": "^9.33.0",
25
22
  "@rollup/plugin-terser": "^0.4.4",
26
23
  "@storybook/addon-a11y": "^9.1.2",
27
24
  "@storybook/addon-docs": "^9.1.2",
@@ -37,7 +34,6 @@
37
34
  "@testing-library/react": "^16.3.0",
38
35
  "@testing-library/user-event": "^14.6.1",
39
36
  "@types/node": "^24.5.2",
40
- "@typescript-eslint/parser": "^8.39.1",
41
37
  "@vitejs/plugin-react": "^5.0.0",
42
38
  "@vitest/ui": "^3.2.4",
43
39
  "axe-playwright": "^2.1.0",
@@ -48,16 +44,9 @@
48
44
  "cz-conventional-changelog": "^3.3.0",
49
45
  "drupal-attribute": "^1.1.0",
50
46
  "drupal-twig-extensions": "1.0.0-beta.5",
51
- "eslint": "^9.33.0",
52
- "eslint-config-prettier": "^10.1.8",
53
- "eslint-formatter-gha": "^1.6.0",
54
- "eslint-plugin-react": "^7.37.5",
55
- "eslint-plugin-storybook": "^9.1.2",
56
- "eslint-plugin-testing-library": "^7.6.6",
57
- "eslint-plugin-unused-imports": "^4.1.4",
58
- "globals": "^16.3.0",
59
47
  "http-server": "^14.1.1",
60
48
  "jsdom": "^26.1.0",
49
+ "oxlint": "^1.23.0",
61
50
  "playwright": "^1.55.0",
62
51
  "postcss": "^8.5.6",
63
52
  "postcss-design-tokens": "^1.3.0",
@@ -73,7 +62,6 @@
73
62
  "tinyglobby": "^0.2.14",
74
63
  "twig": "^1.17.1",
75
64
  "typescript": "^5.9.2",
76
- "typescript-eslint": "^8.39.1",
77
65
  "vite": "^7.1.6",
78
66
  "vite-plugin-twig-drupal": "^1.6.2",
79
67
  "wait-on": "^9.0.0"
@@ -121,8 +109,8 @@
121
109
  "lint-css": "stylelint \"./**/*.css\"",
122
110
  "lint-css-ci": "stylelint \"./**/*.css\" --custom-formatter @csstools/stylelint-formatter-github",
123
111
  "fix-css": "pnpm lint-css --fix",
124
- "lint-js": "eslint \"./**/*.{ts,tsx}\"",
125
- "lint-js-ci": "eslint \"./**/*.{ts,tsx}\" --format gha",
112
+ "lint-js": "oxlint \"./**/*.{ts,tsx}\"",
113
+ "lint-js-ci": "oxlint \"./**/*.{ts,tsx}\" --format github",
126
114
  "fix-js": "pnpm lint-js --fix",
127
115
  "lint-ts": "tsc",
128
116
  "test": "pnpm test-storybook",
@@ -132,6 +120,7 @@
132
120
  "test-storybook-react": "test-storybook --maxWorkers=2 --url http://127.0.0.1:6008 -c .storybook-react",
133
121
  "clean": "rm -rf ./dist",
134
122
  "commit": "git-cz",
123
+ "bump-version": "pnpm version patch -m \"chore: tag %s\"",
135
124
  "http-server": "http-server ./dist/storybook -i -p 3001 --silent",
136
125
  "build-ci": "pnpm build",
137
126
  "lint-ci": "pnpm lint-prettier && pnpm lint-css-ci && pnpm lint-ts && pnpm lint-js-ci"
package/src/Atom/Icon/Icon.tsx CHANGED
@@ -4,7 +4,7 @@ import { Icons } from "../../enums"
4
4
  import { Icon as IconType } from "@pnx-mixtape/ids-shape"
5
5
 
6
6
  export type IconProps = IconType & {
7
- icon: Icons[]
7
+ icon: Icons
8
8
  }
9
9
 
10
10
  const Icon = ({
package/src/Component/Pagination/Pagination.tsx CHANGED
@@ -16,7 +16,9 @@ const Pagination = (): JSX.Element => {
16
16
 
17
17
  const handleClick: MouseEventHandler = e => {
18
18
  const target = e.target as HTMLElement
19
- const page: string = target.getAttribute("data-page")
19
+ const page: string = target
20
+ .closest("[data-page]")
21
+ ?.getAttribute("data-page")
20
22
  if (!page) return
21
23
  onClick(parseInt(page))
22
24
  e.preventDefault()
@@ -25,7 +27,9 @@ const Pagination = (): JSX.Element => {
25
27
 
26
28
  const handleMouseOver: MouseEventHandler = e => {
27
29
  const target = e.target as HTMLElement
28
- const page: string = target.getAttribute("data-page")
30
+ const page: string = target
31
+ .closest("[data-page]")
32
+ ?.getAttribute("data-page")
29
33
  if (page) onMouseOver(parseInt(page))
30
34
  }
31
35
 
package/src/Component/Steps/__snapshots__/Steps.stories.ts.snap CHANGED
@@ -4,7 +4,7 @@ exports[`Component/Steps Counters smoke-test 1`] = `
4
4
  <div class="mx-page default">
5
5
  <div class="mx-steps mx-steps--counters">
6
6
  <div class="mx-steps__panel ">
7
- <div class="mx-steps__panel-content mx-container mx-vertical-flow">
7
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
8
8
  <h2>
9
9
  Funk
10
10
  </h2>
@@ -14,7 +14,7 @@ exports[`Component/Steps Counters smoke-test 1`] = `
14
14
  </div>
15
15
  </div>
16
16
  <div class="mx-steps__panel ">
17
- <div class="mx-steps__panel-content mx-container mx-vertical-flow">
17
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
18
18
  <h3>
19
19
  Soul
20
20
  </h3>
@@ -24,7 +24,7 @@ exports[`Component/Steps Counters smoke-test 1`] = `
24
24
  </div>
25
25
  </div>
26
26
  <div class="mx-steps__panel ">
27
- <div class="mx-steps__panel-content mx-container mx-vertical-flow">
27
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
28
28
  <h4>
29
29
  Motown
30
30
  </h4>
@@ -41,17 +41,17 @@ exports[`Component/Steps Progress smoke-test 1`] = `
41
41
  <div class="mx-page default">
42
42
  <div class="mx-steps mx-steps--supplementary ">
43
43
  <div class="mx-steps__panel mx-steps--fill">
44
- <div class="mx-steps__panel-content mx-container mx-vertical-flow">
44
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
45
45
  Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
46
46
  </div>
47
47
  </div>
48
48
  <div class="mx-steps__panel ">
49
- <div class="mx-steps__panel-content mx-container mx-vertical-flow">
49
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
50
50
  Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
51
51
  </div>
52
52
  </div>
53
53
  <div class="mx-steps__panel ">
54
- <div class="mx-steps__panel-content mx-container mx-vertical-flow">
54
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
55
55
  Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
56
56
  </div>
57
57
  </div>
@@ -63,17 +63,17 @@ exports[`Component/Steps ProgressCounters smoke-test 1`] = `
63
63
  <div class="mx-page default">
64
64
  <div class="mx-steps mx-steps--dark mx-steps--counters ">
65
65
  <div class="mx-steps__panel mx-steps--fill">
66
- <div class="mx-steps__panel-content mx-container mx-vertical-flow">
66
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
67
67
  Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
68
68
  </div>
69
69
  </div>
70
70
  <div class="mx-steps__panel mx-steps--fill">
71
- <div class="mx-steps__panel-content mx-container mx-vertical-flow">
71
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
72
72
  Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
73
73
  </div>
74
74
  </div>
75
75
  <div class="mx-steps__panel ">
76
- <div class="mx-steps__panel-content mx-container mx-vertical-flow">
76
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
77
77
  Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
78
78
  </div>
79
79
  </div>
@@ -85,7 +85,7 @@ exports[`Component/Steps Steps smoke-test 1`] = `
85
85
  <div class="mx-page default">
86
86
  <div class="mx-steps ">
87
87
  <div class="mx-steps__panel ">
88
- <div class="mx-steps__panel-content mx-container mx-vertical-flow">
88
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
89
89
  <h2>
90
90
  Funk
91
91
  </h2>
@@ -95,7 +95,7 @@ exports[`Component/Steps Steps smoke-test 1`] = `
95
95
  </div>
96
96
  </div>
97
97
  <div class="mx-steps__panel ">
98
- <div class="mx-steps__panel-content mx-container mx-vertical-flow">
98
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
99
99
  <h3>
100
100
  Soul
101
101
  </h3>
@@ -105,7 +105,7 @@ exports[`Component/Steps Steps smoke-test 1`] = `
105
105
  </div>
106
106
  </div>
107
107
  <div class="mx-steps__panel ">
108
- <div class="mx-steps__panel-content mx-container mx-vertical-flow">
108
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
109
109
  <h4>
110
110
  Motown
111
111
  </h4>
package/src/Component/Steps/step-item.twig CHANGED
@@ -5,7 +5,7 @@
5
5
  ] %}
6
6
  {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
7
7
  <div{{ attributes }}>
8
- <div class="mx-steps__panel-content mx-container mx-vertical-flow">
8
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
9
9
  {{ content }}
10
10
  </div>
11
11
  </div>
package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap CHANGED
@@ -4,12 +4,12 @@ exports[`Layout/Header PrimaryHeader smoke-test 1`] = `
4
4
  <header class="mx-page mx-header mx-section--s">
5
5
  <div class="mx-header__inner">
6
6
  <div class="mx-header__brand">
7
- <a href="https://mixtape.pnx.io/"
7
+ <a href="https://mxds.pnx.io/"
8
8
  class="mx-logo"
9
9
  >
10
10
  <img alt="Mixtape"
11
11
  loading="eager"
12
- src="https://mixtape.pnx.io/images/mixtape-logo.png"
12
+ src="https://mxds.pnx.io/images/mixtape-logo.png"
13
13
  >
14
14
  </a>
15
15
  </div>
package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap CHANGED
@@ -5,12 +5,12 @@ exports[`Layout/Page Page smoke-test 1`] = `
5
5
  <header class="mx-page mx-header mx-section--s">
6
6
  <div class="mx-header__inner">
7
7
  <div class="mx-header__brand">
8
- <a href="https://mixtape.pnx.io/"
8
+ <a href="https://mxds.pnx.io/"
9
9
  class="mx-logo"
10
10
  >
11
11
  <img alt="Mixtape"
12
12
  loading="eager"
13
- src="https://mixtape.pnx.io/images/mixtape-logo.png"
13
+ src="https://mxds.pnx.io/images/mixtape-logo.png"
14
14
  >
15
15
  </a>
16
16
  </div>