@lion/collapsible
Advanced tools
@lion/collapsible - npm Package Compare versions
Comparing version 0.3.2 to 0.4.0
| # Change Log | ||
| ## 0.4.0 | ||
| ### Minor Changes | ||
| - f3e54c56: Publish documentation with a format for Rocket | ||
| - 5db622e9: BREAKING: Align exports fields. This means no more wildcards, meaning you always import with bare import specifiers, extensionless. Import components where customElements.define side effect is executed by importing from '@lion/package/define'. For multi-component packages this defines all components (e.g. radio-group + radio). If you want to only import a single one, do '@lion/radio-group/define-radio' for example for just lion-radio. | ||
| ### Patch Changes | ||
| - Updated dependencies [f3e54c56] | ||
| - Updated dependencies [5db622e9] | ||
| - @lion/core@0.15.0 | ||
| ## 0.3.2 | ||
@@ -4,0 +17,0 @@ |
| { | ||
| "name": "@lion/collapsible", | ||
| "version": "0.3.2", | ||
| "version": "0.4.0", | ||
| "description": "This component is a combination of a button (the invoker), a chunk of extra content.", | ||
@@ -27,7 +27,8 @@ "license": "MIT", | ||
| "scripts": { | ||
| "custom-elements-manifest": "custom-elements-manifest analyze --litelement --exclude 'docs/**/*' 'demo/**/*'", | ||
| "custom-elements-manifest": "custom-elements-manifest analyze --litelement --exclude \"docs/**/*\" \"test-helpers/**/*\"", | ||
| "debug": "cd ../../ && npm run debug -- --group collapsible", | ||
| "debug:firefox": "cd ../../ && npm run debug:firefox -- --group collapsible", | ||
| "debug:webkit": "cd ../../ && npm run debug:webkit -- --group collapsible", | ||
| "prepublishOnly": "../../scripts/npm-prepublish.js && npm run custom-elements-manifest", | ||
| "publish-docs": "node ../../packages-node/publish-docs/src/cli.js --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../", | ||
| "prepublishOnly": "npm run publish-docs && npm run custom-elements-manifest", | ||
| "test": "cd ../../ && npm run test:browser -- --group collapsible" | ||
@@ -41,3 +42,3 @@ }, | ||
| "dependencies": { | ||
| "@lion/core": "0.14.1" | ||
| "@lion/core": "0.15.0" | ||
| }, | ||
@@ -56,4 +57,5 @@ "keywords": [ | ||
| ".": "./index.js", | ||
| "./lion-collapsible": "./lion-collapsible.js" | ||
| "./define": "./lion-collapsible.js", | ||
| "./docs/": "./docs/" | ||
| } | ||
| } |
182
README.md
@@ -1,15 +0,8 @@ | ||
| # Collapsible | ||
| # Content >> Collapsible >> Overview ||10 | ||
| `lion-collapsible` is a combination of a button (the invoker), a chunk of 'extra content', and an animation that is used to disclose the extra content. There are two slots available respectively; `invoker` to specify collapsible invoker and `content` for the extra content of the collapsible. | ||
| `lion-collapsible` is a combination of a button (the invoker), a chunk of 'extra content', and can be extended with an animation to disclose the extra content. There are two slots available respectively; `invoker` to specify the collapsible's invoker and `content` for the extra content of the collapsible. | ||
| ```js script | ||
| import { html } from '@lion/core'; | ||
| import './lion-collapsible.js'; | ||
| import './demo/custom-collapsible.js'; | ||
| import './demo/applyDemoCollapsibleStyles.js'; | ||
| export default { | ||
| title: 'Others/Collapsible', | ||
| }; | ||
| import '@lion/collapsible/define'; | ||
| ``` | ||
@@ -31,3 +24,3 @@ | ||
| - Use `opened` or `toggle()` to render default open | ||
| - Use `opened` attribute or `toggle()` method to render default open | ||
| - `invoker` slot can be custom template e.g. `lion-button` or native `button` with custom styling | ||
@@ -37,6 +30,4 @@ - Observe the state with the help of `@opened-changed` event | ||
| ## How to use | ||
| ## Installation | ||
| ### Installation | ||
| ```bash | ||
@@ -49,164 +40,3 @@ npm i --save @lion/collapsible | ||
| // or | ||
| import '@lion/collapsible/lion-collapsible.js'; | ||
| import '@lion/collapsible/define'; | ||
| ``` | ||
| ### Usage | ||
| ```html | ||
| <lion-collapsible> | ||
| <button slot="invoker">Invoker Text</button> | ||
| <div slot="content">Extra content</div> | ||
| </lion-collapsible> | ||
| ``` | ||
| ### Examples | ||
| #### Default open | ||
| Add the `opened` attribute to keep the component default open. | ||
| ```js preview-story | ||
| export const defaultOpen = () => html` | ||
| <lion-collapsible opened> | ||
| <button slot="invoker">More about cars</button> | ||
| <div slot="content"> | ||
| Most definitions of cars say that they run primarily on roads, seat one to eight people, have | ||
| four tires, and mainly transport people rather than goods. | ||
| </div> | ||
| </lion-collapsible> | ||
| `; | ||
| ``` | ||
| #### Methods | ||
| There are the following methods available to control the extra content for the collapsible. | ||
| - `toggle()`: toggle the extra content | ||
| - `show()`: show the extra content | ||
| - `hide()`: hide the extra content | ||
| ```js preview-story | ||
| export const methods = () => html` | ||
| <lion-collapsible id="car-collapsible"> | ||
| <button slot="invoker">More about cars</button> | ||
| <div slot="content"> | ||
| Most definitions of cars say that they run primarily on roads, seat one to eight people, have | ||
| four tires, and mainly transport people rather than goods. | ||
| </div> | ||
| </lion-collapsible> | ||
| <section style="margin-top:16px"> | ||
| <button @click=${() => document.querySelector('#car-collapsible').toggle()}> | ||
| Toggle content | ||
| </button> | ||
| <button @click=${() => document.querySelector('#car-collapsible').show()}>Show content</button> | ||
| <button @click=${() => document.querySelector('#car-collapsible').hide()}>Hide content</button> | ||
| </section> | ||
| `; | ||
| ``` | ||
| #### Events | ||
| `lion-collapsible` fires an event on `invoker` click to notify the component's current state. It is useful for analytics purposes or to perform some actions while expanding and collapsing the component. | ||
| - `@opened-changed`: triggers when collapsible either gets opened or closed | ||
| ```js preview-story | ||
| export const events = () => html` | ||
| <div class="demo-custom-collapsible-state-container"> | ||
| <strong id="collapsible-state"></strong> | ||
| </div> | ||
| <lion-collapsible | ||
| @opened-changed=${e => { | ||
| const collapsibleState = document.getElementById('collapsible-state'); | ||
| collapsibleState.innerText = `Opened: ${e.target.opened}`; | ||
| }} | ||
| > | ||
| <button slot="invoker">More about cars</button> | ||
| <div slot="content"> | ||
| Most definitions of cars say that they run primarily on roads, seat one to eight people, have | ||
| four tires, and mainly transport people rather than goods. | ||
| </div> | ||
| </lion-collapsible> | ||
| `; | ||
| ``` | ||
| #### Custom Invoker Template | ||
| A custom template can be specified to the `invoker` slot. It can be any button or custom component which mimics the button behavior for better accessibility support. In the below example, `lion-button` and native `button` with styling is used as a collapsible invoker. | ||
| ```js preview-story | ||
| export const customInvokerTemplate = () => html` | ||
| <lion-collapsible> | ||
| <button class="demo-custom-collapsible-invoker" slot="invoker">MORE ABOUT CARS</button> | ||
| <div slot="content"> | ||
| Most definitions of cars say that they run primarily on roads, seat one to eight people, have | ||
| four tires, and mainly transport people rather than goods. | ||
| </div> | ||
| </lion-collapsible> | ||
| <lion-collapsible style="margin-top:16px;"> | ||
| <lion-button slot="invoker">More about cars</lion-button> | ||
| <div slot="content"> | ||
| Most definitions of cars say that they run primarily on roads, seat one to eight people, have | ||
| four tires, and mainly transport people rather than goods. | ||
| </div> | ||
| </lion-collapsible> | ||
| `; | ||
| ``` | ||
| #### Extended collapsible with animation | ||
| `LionCollapsible` can easily be extended to add more features in the component, for example, animation. | ||
| ```js preview-story | ||
| export const customAnimation = () => html` | ||
| <div class="demo-custom-collapsible-container"> | ||
| <div class="demo-custom-collapsible-body"> | ||
| A motorcycle, often called a motorbike, bike, or cycle, is a two- or three-wheeled motor | ||
| vehicle. | ||
| </div> | ||
| <custom-collapsible> | ||
| <button class="demo-custom-collapsible-invoker" slot="invoker">MORE ABOUT MOTORCYCLES</button> | ||
| <div slot="content"> | ||
| Motorcycle design varies greatly to suit a range of different purposes: long distance | ||
| travel, commuting, cruising, sport including racing, and off-road riding. Motorcycling is | ||
| riding a motorcycle and related social activity such as joining a motorcycle club and | ||
| attending motorcycle rallies. | ||
| </div> | ||
| </custom-collapsible> | ||
| </div> | ||
| <div class="demo-custom-collapsible-container"> | ||
| <div class="demo-custom-collapsible-body"> | ||
| A car (or automobile) is a wheeled motor vehicle used for transportation. | ||
| </div> | ||
| <custom-collapsible opened> | ||
| <button class="demo-custom-collapsible-invoker" slot="invoker">MORE ABOUT CARS</button> | ||
| <div slot="content"> | ||
| Most definitions of cars say that they run primarily on roads, seat one to eight people, | ||
| have four tires, and mainly transport people rather than goods. | ||
| </div> | ||
| </custom-collapsible> | ||
| </div> | ||
| `; | ||
| ``` | ||
| Use `_showAnimation` and `_hideAnimation` methods to customize open and close behavior. Check the full example for the `custom-collapsible` [here](https://github.com/ing-bank/lion/blob/master/packages/collapsible/demo/CustomCollapsible.js). | ||
| ```js | ||
| _showAnimation({ contentNode }) { | ||
| const expectedHeight = await this.__calculateHeight(contentNode); | ||
| contentNode.style.setProperty('opacity', '1'); | ||
| contentNode.style.setProperty('padding', '12px 0'); | ||
| contentNode.style.setProperty('max-height', '0px'); | ||
| await new Promise(resolve => requestAnimationFrame(() => resolve())); | ||
| contentNode.style.setProperty('max-height', expectedHeight); | ||
| await this._waitForTransition({ contentNode }); | ||
| } | ||
| _hideAnimation({ contentNode }) { | ||
| if (this._contentHeight === '0px') { | ||
| return; | ||
| } | ||
| ['opacity', 'padding', 'max-height'].map(prop => contentNode.style.setProperty(prop, 0)); | ||
| await this._waitForTransition({ contentNode }); | ||
| } | ||
| ``` |
@@ -1,2 +0,2 @@ | ||
| export type LionCollapsible = import("../src/LionCollapsible.js").LionCollapsible; | ||
| export type LionCollapsible = import("../src/LionCollapsible").LionCollapsible; | ||
| export type TemplateResult = import("@lion/core").TemplateResult; |
| import { expect, fixture as _fixture, html } from '@open-wc/testing'; | ||
| import '../lion-collapsible.js'; | ||
| import '@lion/collapsible/define'; | ||
@@ -5,0 +5,0 @@ /** |
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
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
Improved metrics
- Number of package files
- increased by16.67%
14
Worsened metrics
- Total package byte prevSize
- decreased by-4.61%
31311
- Number of lines in readme file
- decreased by-80.95%
40
Dependency changes
+ Added@lion/core@0.15.0(transitive)
- Removed@lion/core@0.14.1(transitive)
Updated@lion/core@0.15.0