Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@patternfly/pfe-progress-indicator
Advanced tools
@patternfly/pfe-progress-indicator - npm Package Compare versions
Comparing version 1.12.3 to 2.0.0-next.0
| { | ||
| "name": "@patternfly/pfe-progress-indicator", | ||
| "pfelement": { | ||
| "className": "PfeProgressIndicator", | ||
| "elementName": "pfe-progress-indicator", | ||
| "preview": "progress-indicator--screenshot.png" | ||
| "license": "MIT", | ||
| "version": "2.0.0-next.0", | ||
| "description": "Progress element for PatternFly Elements", | ||
| "customElements": "custom-elements.json", | ||
| "type": "module", | ||
| "main": "./pfe-progress-indicator.js", | ||
| "module": "./pfe-progress-indicator.js", | ||
| "types": "./pfe-progress-indicator.d.ts", | ||
| "exports": { | ||
| ".": { | ||
| "esbuild": "./pfe-progress-indicator.ts", | ||
| "default": "./pfe-progress-indicator.js" | ||
| }, | ||
| "./*": { | ||
| "esbuild": "./*.ts", | ||
| "default": "./*.js" | ||
| } | ||
| }, | ||
| "version": "1.12.3", | ||
| "publishConfig": { | ||
| "access": "public" | ||
| "access": "public", | ||
| "registry": "https://registry.npmjs.org/" | ||
| }, | ||
| "description": "Progress element for PatternFly Elements", | ||
| "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-progress-indicator", | ||
| "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", | ||
| "loading", | ||
| "progress", | ||
| "html" | ||
@@ -22,35 +55,26 @@ ], | ||
| }, | ||
| "browserslist": [ | ||
| "last 2 versions", | ||
| "Firefox >= 78", | ||
| "iOS >= 8", | ||
| "ie 11" | ||
| ], | ||
| "main": "./dist/pfe-progress-indicator.umd.js", | ||
| "module": "./dist/pfe-progress-indicator.js", | ||
| "unpkg": "./dist/pfe-progress-indicator.umd.min.js", | ||
| "bugs": { | ||
| "url": "https://github.com/patternfly/patternfly-elements/issues" | ||
| }, | ||
| "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-progress-indicator/test/" | ||
| }, | ||
| "author": { | ||
| "name": "Daniel Faucette" | ||
| }, | ||
| "license": "MIT", | ||
| "devDependencies": { | ||
| "@patternfly/pfe-sass": "^1.12.3" | ||
| }, | ||
| "contributors": [ | ||
| "Daniel Faucette", | ||
| "Benny Powers <bennyp@redhat.com>" | ||
| ], | ||
| "dependencies": { | ||
| "@patternfly/pfelement": "^1.12.3" | ||
| }, | ||
| "generator-pfelement-version": "1.1.0", | ||
| "bugs": { | ||
| "url": "https://github.com/patternfly/patternfly-elements/issues" | ||
| }, | ||
| "gitHead": "8cad71b1de7cb39aa77372fa8ae228b813e700c5" | ||
| "@patternfly/pfe-core": "^2.0.0-next.0", | ||
| "lit": "^2.1.2" | ||
| } | ||
| } |
@@ -1,76 +0,33 @@ | ||
| # PFElements Progress Indicator Element | ||
| # PatternFly Elements Progress Indicator | ||
| `pfe-progress-indicator` is a "loader" that indicates to the user that part of the web page is loading, or waiting on other http events to be ready to use. | ||
| ## Usage | ||
| ```html | ||
| <pfe-progress-indicator indeterminate> | ||
| <h1>My fallback loading message</h1> | ||
| </pfe-progress-indicator> | ||
| ``` | ||
| Read more about Progress Indicator in the [PatternFly Elements Progress Indicator documentation](https://patternflyelements.org/components/progress-indicator) | ||
| At the time of writing there is only one style variant, `pfe-indeterminate` that spins without informing the user of where they are in the waiting process, only that http activity has not been resolved. This may change in the future as more style variants become available. | ||
| ## Installation | ||
| ## Slots | ||
| Load `<pfe-progress-indicator>` via CDN: | ||
| Progress Indicator has one unnamed slot only. | ||
| ### Default slot | ||
| We expect any html tag to be the first child inside `pfe-progress-indicator` element. The provided element should contain a fallback loading message if JavaScript should fail for any reason. When the element is connected, the loading message is visually hidden, and replaced by an animated "spinner". | ||
| E.g. | ||
| ```html | ||
| // The web component that upgrades to a "loader" | ||
| <pfe-progress-indicator indeterminate> | ||
| // your custom message for JS failure AND a11y technologies | ||
| <h1> | ||
| This text will be seen if JS fails, but will be hidden on upgrade. | ||
| Screen readers will still see it as a part of the DOM. | ||
| </h1> | ||
| </pfe-progress-indicator> | ||
| <script src="https://unpkg.com/@patternfly/pfe-progress-indicator?module"></script> | ||
| ``` | ||
| ## Attributes | ||
| Or, if you are using [NPM](https://npm.im), install it | ||
| ### indeterminate | ||
| ```bash | ||
| npm install @patternfly/pfe-progress-indicator | ||
| ``` | ||
| Uses the spinner style display. Currently this is on the only supported display. | ||
| Then once installed, import it to your application: | ||
| ### size | ||
| ```js | ||
| import '@patternfly/pfe-progress-indicator'; | ||
| ``` | ||
| Possible values: `sm`, `md`, `xl` | ||
| ## Usage | ||
| ```html | ||
| <pfe-progress-indicator indeterminate>My fallback loading message</pfe-progress-indicator> | ||
| ``` | ||
| ## Styling | ||
| At the time of writing there is only one style variant, `indeterminate` that spins without informing the user of where they are in the waiting process, only that http activity has not been resolved. This may change in the future as more style variants become available. | ||
| ### Variable hooks | ||
| | Variable name | Default value | Use | | ||
| | -------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------- | | ||
| | `--pfe-progress-indicator--background-color` | rgba(0, 0, 0, .25) | Color of the circle | | ||
| | `--pfe-progress-indicator--foreground-color` | rgba(0, 0, 0, .75) | Color of the spinner | | ||
| | `--pfe-progress-indicator--Width` | 2rem | Width of the circle | | ||
| | `--pfe-progress-indicator--Height` | 2rem | Height of the circle | | ||
| ## Test | ||
| npm run test | ||
| ## Build | ||
| npm run build | ||
| ## Demo | ||
| From the PFElements root directory, run: | ||
| npm start | ||
| ## Code style | ||
| Progress Indicator (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
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
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-69.99%
19034
- Dependency count
- increased by100%
2
- Number of package files
- decreased by-50%
7
- Lines of code
- decreased by-41.02%
243
- Number of lines in readme file
- decreased by-55.84%
34
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedlit@^2.1.2
+ Added@floating-ui/core@1.6.9(transitive)
+ Added@floating-ui/dom@1.6.13(transitive)
+ Added@floating-ui/utils@0.2.9(transitive)
+ Added@lit-labs/ssr-dom-shim@1.3.0(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)