@justeattakeaway/pie-icons-webc 0.17.2 → 0.18.0

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 (2) hide show
  1. package/README.md +20 -5
  2. package/package.json +8 -8
package/README.md CHANGED
@@ -85,7 +85,7 @@ export class MyAmazingComponent extends LitElement {
85
85
  return html`
86
86
  <h2>
87
87
  This is a heading
88
- <icon-app-restaurant size="xl" />
88
+ <icon-app-restaurant size="xl"></icon-app-restaurant>
89
89
  </h2>`;
90
90
  }
91
91
  }
@@ -129,9 +129,24 @@ export default function App() {
129
129
  }
130
130
  ```
131
131
 
132
- #### TODO: Add Vue usage
132
+ #### Vue
133
133
 
134
- If you require icons for a Vue app, you can either use these icons, or use our native Vue component package – [pie-icons-vue](https://www.npmjs.com/package/@justeattakeaway/pie-icons-vue).
134
+ This package requires Node 18+, therefore, if you are using a lower version of Node please use our native Vue component package – [pie-icons-vue](https://www.npmjs.com/package/@justeattakeaway/pie-icons-vue).
135
+
136
+ To import from the package root:
137
+
138
+ ```tsx
139
+ import { IconAlertTriangleLarge, IconCalendar } from "@justeattakeaway/pie-icons-webc";
140
+
141
+ export default function App() {
142
+ return (
143
+ <div className="App">
144
+ <icon-calendar></icon-calendar>
145
+ <icon-alert-triangle-large></icon-alert-triangle-large>
146
+ </div>
147
+ );
148
+ }
149
+ ```
135
150
 
136
151
 
137
152
  ### Props
@@ -152,8 +167,8 @@ Large icons `size` default and minimum value is `32`. Values larger than the min
152
167
  Example:
153
168
 
154
169
  ```js
155
- <icon-alert-triangle size="s" />
156
- <icon-alert-triangle-large size="80" />
170
+ <icon-alert-triangle size="s"></icon-alert-triangle>
171
+ <icon-alert-triangle-large size="80"></icon-alert-triangle-large>
157
172
  ```
158
173
 
159
174
  ### Tree shaking
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-icons-webc",
3
- "version": "0.17.2",
3
+ "version": "0.18.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
@@ -64,23 +64,23 @@
64
64
  "clean": "run -T rimraf -rf ./dist/ ./icons/",
65
65
  "lint:scripts": "run -T eslint .",
66
66
  "lint:scripts:fix": "yarn lint:scripts --fix",
67
- "test": "wtr tests/*.test.js --node-resolve",
68
- "test:browsers": "npx playwright test -c ./playwright-react.config.ts",
69
- "test:browsers:ci": "yarn test:browsers",
70
- "test:ci": "yarn test"
67
+ "test:browsers": "yarn test:react && yarn test:webc",
68
+ "test:react": "npx playwright test -c ./playwright-react.config.ts",
69
+ "test:webc": "npx playwright test -c ./playwright-lit.config.ts",
70
+ "test:browsers:ci": "yarn test:browsers"
71
71
  },
72
72
  "browserslist": [
73
73
  "extends @justeattakeaway/browserslist-config-pie"
74
74
  ],
75
75
  "dependencies": {
76
- "@justeattakeaway/pie-webc-core": "0.17.1"
76
+ "@justeattakeaway/pie-webc-core": "0.19.0"
77
77
  },
78
78
  "devDependencies": {
79
- "@babel/core": "7.23.7",
79
+ "@babel/core": "7.23.9",
80
80
  "@babel/node": "7.20.7",
81
+ "@justeattakeaway/pie-components-config": "0.11.0",
81
82
  "@justeattakeaway/pie-icons": "4.9.3",
82
83
  "@justeattakeaway/pie-icons-configs": "4.5.1",
83
- "@open-wc/testing": "4.0.0",
84
84
  "@rollup/plugin-typescript": "11.1.6",
85
85
  "@web/test-runner": "0.16.1",
86
86
  "just-kebab-case": "4.2.0",