@patternfly/pfe-button
Advanced tools
@patternfly/pfe-button - npm Package Compare versions
Comparing version 1.12.3 to 2.0.0-next.0
107
package.json
| { | ||
| "name": "@patternfly/pfe-button", | ||
| "license": "MIT", | ||
| "version": "2.0.0-next.0", | ||
| "description": "Button element for PatternFly Elements", | ||
| "pfelement": { | ||
| "className": "PfeButton", | ||
| "elementName": "pfe-button", | ||
| "files": { | ||
| "styles": "./src/pfe-button.scss", | ||
| "template": "./src/pfe-button.html", | ||
| "js": "./src/pfe-button.js" | ||
| "customElements": "custom-elements.json", | ||
| "type": "module", | ||
| "main": "./pfe-button.js", | ||
| "module": "./pfe-button.js", | ||
| "types": "./pfe-button.d.ts", | ||
| "exports": { | ||
| ".": { | ||
| "esbuild": "./pfe-button.ts", | ||
| "default": "./pfe-button.js" | ||
| }, | ||
| "assets": [], | ||
| "preview": "button.svg" | ||
| "./*": { | ||
| "esbuild": "./*.ts", | ||
| "default": "./*.js" | ||
| } | ||
| }, | ||
| "version": "1.12.3", | ||
| "publishConfig": { | ||
| "access": "public", | ||
| "registry": "https://registry.npmjs.org/" | ||
| }, | ||
| "scripts": { | ||
| "⚙️-----UTIL-------⚙️": "❓ Manages the repo", | ||
| "clean": "git clean -fX -e node_modules -e tsconfig.tsbuildinfo", | ||
| "🚚-----DIST-------🚚": "❓ Publish packages", | ||
| "prepublishOnly": "npm run build", | ||
| "👷♀️-----BUILD------👷♀️": "❓ Prepare dist artifacts", | ||
| "analyze": "cem analyze", | ||
| "build": "run-s build:*", | ||
| "build:clean": "npm run clean", | ||
| "build:esbuild": "node ../../scripts/build.js --include pfe-button", | ||
| "build:analyze": "npm run analyze", | ||
| "build:types": "tsc -b .", | ||
| "🧑🔬-----TEST-------🧑🔬": "❓ Test packages", | ||
| "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js", | ||
| "👷♀️-----DEV--------👷♀️": "❓ Development aids", | ||
| "test:watch": "npm test -- --watch", | ||
| "watch:analyze": "npm run analyze -- --watch", | ||
| "watch:types": "tsc -w" | ||
| }, | ||
| "keywords": [ | ||
| "web-components", | ||
| "button", | ||
| "html" | ||
@@ -25,46 +54,28 @@ ], | ||
| }, | ||
| "browserslist": [ | ||
| "last 2 versions", | ||
| "Firefox >= 78", | ||
| "iOS >= 8", | ||
| "ie 11" | ||
| ], | ||
| "publishConfig": { | ||
| "access": "public" | ||
| "bugs": { | ||
| "url": "https://github.com/patternfly/patternfly-elements/issues" | ||
| }, | ||
| "main": "./dist/pfe-button.umd.js", | ||
| "module": "./dist/pfe-button.js", | ||
| "unpkg": "./dist/pfe-button.umd.min.js", | ||
| "files": [ | ||
| "dist" | ||
| "!*.ts", | ||
| "custom-elements.json", | ||
| "**/*.LEGAL.txt", | ||
| "**/*.css", | ||
| "**/*.d.ts", | ||
| "**/*.js", | ||
| "**/*.js.map", | ||
| "!custom-elements-manifest.config.js", | ||
| "!demo/*", | ||
| "!docs/*", | ||
| "!test/*" | ||
| ], | ||
| "scripts": { | ||
| "build": "../../node_modules/.bin/gulp && ../../node_modules/.bin/prettier --ignore-path ../../.prettierignore --write '**/*.{js,json}'", | ||
| "dev": "../../node_modules/.bin/gulp dev", | ||
| "watch": "../../node_modules/.bin/gulp watch", | ||
| "test": "../../node_modules/.bin/wct --configFile ../../wct.conf.json elements/pfe-button/test/" | ||
| }, | ||
| "contributors": [ | ||
| { | ||
| "name": "Kyle Buchanan" | ||
| }, | ||
| { | ||
| "name": "Ivana Rodriguez", | ||
| "url": "https://github.com/eyevana" | ||
| }, | ||
| { | ||
| "name": "Wes Ruvalcaba" | ||
| } | ||
| "Kyle Buchanan", | ||
| "Ivana Rodriguez (https://github.com/eyevana)", | ||
| "Wes Ruvalcaba", | ||
| "Benny Powers <bennyp@redhat.com>" | ||
| ], | ||
| "license": "MIT", | ||
| "devDependencies": { | ||
| "@patternfly/pfe-sass": "^1.12.3" | ||
| }, | ||
| "dependencies": { | ||
| "@patternfly/pfelement": "^1.12.3" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/patternfly/patternfly-elements/issues" | ||
| }, | ||
| "gitHead": "8cad71b1de7cb39aa77372fa8ae228b813e700c5" | ||
| "@patternfly/pfe-core": "^2.0.0-next.0", | ||
| "lit": "^2.1.2" | ||
| } | ||
| } |
@@ -1,8 +0,31 @@ | ||
| # PatternFly Element | Button Element | ||
| This component is a web component wrapper around a standard HTML Button Element. | ||
| # PatternFly Elements Button | ||
| `<pfe-button>` is a web component wrapper around a standard HTML `<button>` element. | ||
| `<pfe-button>` is heavily influenced by the findings in this post: [Custom | ||
| elements, shadow DOM and implicit form submission](https://www.hjorthhansen.dev/shadow-dom-and-forms/). You can expect `<pfe-button>` to work like a normal | ||
| HTML Button Element. | ||
| elements, shadow DOM and implicit form submission](https://www.hjorthhansen.dev/shadow-dom-and-forms/). You can expect `<pfe-button>` to work like a normal `HTMLButtonElement`. | ||
| Read more about Button in the [PatternFly Elements Button documentation](https://patternflyelements.org/components/button) | ||
| ## Installation | ||
| Load `<pfe-button>` via CDN: | ||
| ```html | ||
| <script src="https://unpkg.com/@patternfly/pfe-button?module"></script> | ||
| ``` | ||
| Or, if you are using [NPM](https://npm.im), install it | ||
| ```bash | ||
| npm install @patternfly/pfe-button | ||
| ``` | ||
| Then once installed, import it to your application: | ||
| ```js | ||
| import '@patternfly/pfe-button'; | ||
| ``` | ||
| ## Usage | ||
| When using this component, you must provide a standard HTML Button Elements as | ||
@@ -17,10 +40,2 @@ the only light DOM child of `pfe-button`. | ||
| ### Size | ||
| ```html | ||
| <pfe-button size="large"> | ||
| <button>Large Button</button> | ||
| </pfe-button> | ||
| ``` | ||
| ### Accessibility | ||
@@ -69,49 +84,1 @@ `<pfe-button>` addresses the issues associated with typical implementations of | ||
| ## Slots | ||
| None | ||
| ## Attributes | ||
| `disabled` (observed): Disables the button | ||
| `variant`: Changes the style of the button. Possible values are | ||
| - primary (default) | ||
| - secondary | ||
| - tertiary | ||
| - danger | ||
| - control | ||
| `size`: Changes the size of the button. | ||
| - medium (default) | ||
| - large | ||
| ## Events | ||
| ### pfe-button:click | ||
| This event is fired when `<pfe-button>` is clicked and serves as a way to | ||
| capture click events if necessary. | ||
| ## Dev | ||
| `npm start` | ||
| ## Test | ||
| `npm run test` | ||
| ## Build | ||
| `npm run build` | ||
| ## Demo | ||
| From the PFElements root directory, run: | ||
| `npm run demo` | ||
| ## Code style | ||
| Button (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save. | ||
| [prettier]: https://github.com/prettier/prettier/ | ||
| [prettier-ed]: https://prettier.io/docs/en/editors.html | ||
| [web-component-tester]: https://github.com/Polymer/web-component-tester |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-100%
0
- Number of low supply chain risk alerts
- decreased by-100%
0
- Is type module
Yes
Worsened metrics
- Total package byte prevSize
- decreased by-73.58%
38686
- Dependency count
- increased by100%
2
- Number of package files
- decreased by-50%
7
- Lines of code
- decreased by-33.09%
461
- Number of lines in readme file
- decreased by-28.45%
83
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedlit@^2.1.2
+ Added@floating-ui/core@1.6.8(transitive)
+ Added@floating-ui/dom@1.6.12(transitive)
+ Added@floating-ui/utils@0.2.8(transitive)
+ Added@lit-labs/ssr-dom-shim@1.2.1(transitive)
+ Added@lit/reactive-element@1.6.3(transitive)
+ Added@patternfly/pfe-core@2.4.1(transitive)
+ Added@types/trusted-types@2.0.7(transitive)
+ Addedlit@2.8.0(transitive)
+ Addedlit-element@3.3.3(transitive)
+ Addedlit-html@2.8.0(transitive)
- Removed@patternfly/pfelement@^1.12.3
- Removed@patternfly/pfelement@1.12.3(transitive)