@patternfly/pfe-accordion - npm Package Compare versions

Comparing version 1.12.3 to 2.0.0-next.0

package.json

 {
   "name": "@patternfly/pfe-accordion",
-  "pfelement": {
-    "className": "PfeAccordion",
-    "elementName": "pfe-accordion",
-    "assets": [
-      "pfe-accordion.js",
-      "pfe-accordion-header.js",
-      "pfe-accordion-panel.js"
-    ],
-    "preview": "accordion.svg"
+  "version": "2.0.0-next.0",
+  "license": "MIT",
+  "description": "Accordion for PatternFly Elements",
+  "customElements": "custom-elements.json",
+  "type": "module",
+  "main": "./pfe-accordion.js",
+  "module": "./pfe-accordion.js",
+  "types": "./pfe-accordion.d.ts",
+  "exports": {
+    ".": {
+      "esbuild": "./pfe-accordion.ts",
+      "default": "./pfe-accordion.js"
+    },
+    "./*": {
+      "esbuild": "./*.ts",
+      "default": "./*.js"
+    }
   },
-  "version": "1.12.3",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
-  "description": "Accordion 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-accordion",
+    "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",
+    "accordion",
     "html"
@@ -27,45 +54,31 @@ ],
   },
-  "browserslist": [
-    "last 2 versions",
-    "Firefox >= 78",
-    "iOS >= 8",
-    "ie 11"
-  ],
-  "main": "./dist/pfe-accordion.umd.js",
-  "module": "./dist/pfe-accordion.js",
-  "unpkg": "./dist/pfe-accordion.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-accordion/test/"
-  },
   "contributors": [
-    {
-      "name": "Kyle Buchanan",
-      "email": "[e-mail]",
-      "url": "https://github.com/kylebuch8"
-    },
-    {
-      "name": "cd"
-    },
-    {
-      "name": "Kendall Totten"
-    }
+    "Kyle Buchanan <[e-mail]> (https://github.com/kylebuch8)",
+    "cd",
+    "Kendall Totten",
+    "Benny Powers <[e-mail]>",
+    "Michael Potter"
   ],
-  "license": "MIT",
-  "devDependencies": {
-    "@patternfly/pfe-sass": "^1.12.3"
-  },
   "dependencies": {
-    "@patternfly/pfelement": "^1.12.3"
-  },
-  "generator-pfelement-version": "0.5.5",
-  "bugs": {
-    "url": "https://github.com/patternfly/patternfly-elements/issues"
-  },
-  "gitHead": "8cad71b1de7cb39aa77372fa8ae228b813e700c5"
+    "@patternfly/pfe-collapse": "^2.0.0-next.0",
+    "@patternfly/pfe-core": "^2.0.0-next.0",
+    "@patternfly/pfe-icon": "^2.0.0-next.0",
+    "lit": "^2.1.2"
+  }
 }

README.md

@@ -1,166 +0,44 @@
-# PFElements Accordion Element
+# PatternFly Elements Accordion
+     
+`<pfe-accordion>` is a web component that provides a collapsible accordion interface for sectioned content.
 
-## Usage
+Read more about Accordion in the [PatternFly Elements Accordion documentation](https://patternflyelements.org/components/accordion)
 
-```
-<pfe-accordion>
-  <pfe-accordion-header>
-    <h3>Consetetur sadipscing elitr?</h3>
-  </pfe-accordion-header>
-  <pfe-accordion-panel>
-    <p><a href="#">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
-  </pfe-accordion-panel>
-  <pfe-accordion-header>
-    <h3>Labore et dolore magna aliquyam erat?</h3>
-  </pfe-accordion-header>
-  <pfe-accordion-panel>
-    <p><a href="#">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
-  </pfe-accordion-panel>
-</pfe-accordion>
-```
+##  Installation
 
-## Slots
+Load `<pfe-accordion>` via CDN:
 
-### Default slot in pfe-accordion
+```html
+<script src="https://unpkg.com/@patternfly/pfe-accordion?module"></script>
+```
 
-Place the `pfe-accordion-header` and `pfe-accordion-panel` elements here.
+Or, if you are using [NPM](https://npm.im), install it
 
-### Default slot in pfe-accordion-header
+```bash
+npm install @patternfly/pfe-accordion
+```
 
-We expect the light DOM of the `pfe-accordion-header` to be a heading level tag (h1, h2, h3, h4, h5, h6). This content is copied into shadow DOM and so most external styles will not penetrate.
+Then once installed, import it to your application:
 
-### Default slot in pfe-accordion-panel
+```js
+import '@patternfly/pfe-accordion';
+```
+## Usage
 
-Add the content for your accordion panel here. This content remains in the light DOM; external styles will penetrate this region.
-
-## Attributes
-
-**`context`**
-Changes the context of the accordion to one of 3 possible options:
-- `light` (default)
-- `dark`
-- `saturated`
-
-This will override any context being passed from a parent component and will add a style attribute setting the `--context` variable.
-
-**`disclosure`**
-If `pfe-accordion` has one `pfe-accordion-header`, it will get tagged with `disclosure="true"`. This applies a slightly different set of styles: chevron appears on the left side, the header has a single border on all four sides. Applying `disclosure="false"` to a `pfe-accordion` element containing only one header/panel pairing will set the element to display as a standard accordion.
-
-**`history`**
-Updates window.history and the URL to create sharable links. With the `history` attribute, the accordion *must* have an `id`.
-
-The URL pattern will be `?{id-of-tabs}={index-of-expanded-items}`. In the example
-below, selecting "Accordion 2" will update the URL as follows: `?lorem-ipsum=2`. The index value for the expanded items starts at 1.
-
 ```html
-<pfe-accordion history id="lorem-ipsum">
+<pfe-accordion>
   <pfe-accordion-header>
-    <h3>Accordion 1</h3>
+    <h3>Consetetur sadipscing elitr?</h3>
   </pfe-accordion-header>
   <pfe-accordion-panel>
-    <p>Accordion 1 panel content.</p>
+    <p><a href="#">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
   </pfe-accordion-panel>
   <pfe-accordion-header>
-    <h3>Accordion 2</h3>
+    <h3>Labore et dolore magna aliquyam erat?</h3>
   </pfe-accordion-header>
   <pfe-accordion-panel>
-    <p>Accordion 2 panel content.</p>
+    <p><a href="#">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
   </pfe-accordion-panel>
 </pfe-accordion>
 ```
-
-To expand multiple sets, you can dash separate indexes: `?lorem-ipsum=1-2`.
-
-*Note:* This feature is not supported in IE11.
-
-**`expanded-index`**
-Sets and reflects the currently expanded accordion indexes. Use commas to separate multiple indexes.  The index value for the expanded items starts at 1.
-
-```html
-<pfe-accordion expanded-index="2,3">
-  ...
-</pfe-accordion>
-```
-
-## Events
-
-### pfe-accordion:change
-
-Fires when an pfe-accordion-header is activated. The detail object contains the
-following
-
-```
-detail: {
-  expanded: Boolean
-}
-```
-
-## API
-
-### toggle(index)
-
-Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.
-
-### expand(index)
-
-Accepts a 0-based index value (integer) for the set of accordion items to expand.
-
-### expandAll()
-
-Expands all accordion items.
-
-### collapse(index)
-
-Accepts a 0-based index value (integer) for the set of accordion items to collapse.
-
-### collapseAll()
-
-Collapse all accordion items.
-
-## Styling hooks
-
-| Theme hook | Description | Default |
-| --- | --- | --- |
-| `--pfe-accordion--Padding` | Applied to header and panel components | var(--pfe-theme--container-padding, 1rem) calc(var(--pfe-theme--container-padding, 1rem) * 1.5) |
-| `--pfe-accordion--BorderColor` | Color of the encompassing borders | var(--pfe-theme--color--surface--border, #d2d2d2) |
-| `--pfe-accordion--BorderWidth` | Width of the encompassing borders | var(--pfe-theme--surface--border-width, 1px) |
-| `--pfe-accordion--accent--width` | Width of the accent mark | var(--pfe-theme--surface--border-width--active, 3px) |
-| `--pfe-accordion--Width` | Maximum width for the accordion element | 100% |
-| `--pfe-accordion--MaxWidth--content` | Maximum width for the content inside the accordion panel | 80ch |
-| `--pfe-accordion--BoxShadow` | Box shadow on the header and panel in closed state | 0 5px 4px transparent |
-| `--pfe-accordion--ZIndex` | Accordion's z-index for the stack | 3 |
-| `--pfe-accordion--FontSize--header` | Font-size for the accordion header text | var(--pf-global--FontSize--xl, 1.25rem) |
-| `--pfe-accordion--FontWeight--header` | Font-weight for the accordion header text | var(--pfe-theme--font-weight--normal, 400) |
-| `--pfe-accordion--TextAlign` | Text alignment for the accordion header text | left |
-| `--pfe-accordion--BackgroundColor` | Background color for the accordion header and panel | transparent |
-| `--pfe-accordion--Color` | Text color for the accordion header and panel | var(--pfe-broadcasted--text, #3c3f42) |
-| `--pfe-accordion--accent` | Left accent line color for the accordion header and panel | transparent |
-| `--pfe-accordion--BackgroundColor--active` | Background color when the accordion is active (hover, focus) | var(--pfe-theme--color--surface--lighter, #f0f0f0) |
-| `--pfe-accordion--Color--active` | Text color when the accordion is active (hover, focus) | var(--pfe-broadcasted--text, #3c3f42) |
-| `--pfe-accordion--accent--active` | Color of the accent mark when the accordion is active (hover, focus) | var(--pfe-theme--color--ui-accent, #06c) |
-| `--pfe-accordion--BackgroundColor--expanded` | Background color when the accordion is open | var(--pfe-theme--color--surface--lightest, #fff) |
-| `--pfe-accordion--Color--expanded` | Text color when the accordion is open | var(--pfe-broadcasted--text, #3c3f42) |
-| `--pfe-accordion--accent--expanded` | Color of the accent mark when the accordion is open | var(--pfe-theme--color--ui-accent, #06c) |
-| `--pfe-accordion--BoxShadow--expanded` | Box shadow when the accordion is open | 0 5px 4px rgba(140, 140, 140, 0.35) |
-
-## Test
-
-    npm run test
-
-## Build
-
-    npm run build
-
-## Demo
-
-From the PFElements root directory, run:
-
-    npm start
-
-## Code style
-
-Accordion (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://github.com/prettier/prettier/#editor-integration
-[web-component-tester]: https://github.com/Polymer/web-component-tester
+                                                          

New alerts

Major refactor

Supply chain risk

Package 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

Quality

Package 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 risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This 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

0

decreased by-100%

Number of low supply chain risk alerts

0

decreased by-100%

Is type module

Yes

Worsened metrics

Total package byte prevSize

142373

decreased by-76.21%

Dependency count

4

increased by300%

Number of package files

13

decreased by-31.58%

Lines of code

1884

decreased by-31.29%

Number of lines in readme file

45

decreased by-73.05%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@patternfly/pfe-collapse@^2.0.0-next.0

• + Added@patternfly/pfe-core@^2.0.0-next.0

• + Added@patternfly/pfe-icon@^2.0.0-next.0

• + 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-collapse@2.0.0-next.4(transitive)

• + Added@patternfly/pfe-core@2.4.1(transitive)

• + Added@patternfly/pfe-icon@2.0.0-next.6(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Addedlit@2.3.02.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)