Skip to content

Commit

Permalink
breaking: remove details from repo, add it as a dependency (#18)
Browse files Browse the repository at this point in the history
  • Loading branch information
@web-padawan
web-padawan committed Jan 15, 2019
1 parent b94a332 commit 2b27dd3
Show file tree
Hide file tree
Showing 34 changed files with 96 additions and 829 deletions.
24 changes: 7 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# <vaadin-accordion>

[<vaadin-accordion>](https://vaadin.com/components/vaadin-accordion) is a set of two Web Components providing functionality for expansible details and accordion, part of the [Vaadin components](https://vaadin.com/components).
[<vaadin-accordion>](https://vaadin.com/components/vaadin-accordion) is a Web Component implementing the vertically stacked set of expansible panels, part of the [Vaadin components](https://vaadin.com/components).

[Live Demo ↗](https://vaadin.com/components/vaadin-accordion/html-examples)
|
Expand All @@ -20,17 +20,12 @@
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="vaadin-accordion.html">
<link rel="import" href="vaadin-details.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
```html
<vaadin-details>
<div slot="summary">Expansible Details</div>
<div>Details is a standalone expansible section.</div>
</vaadin-details>
<vaadin-accordion>
<vaadin-accordion-panel theme="filled">
<div slot="summary">Accordion Panel 1</div>
Expand All @@ -43,7 +38,7 @@
</vaadin-accordion>
```

[<img src="https://raw.githubusercontent.com/vaadin/vaadin-accordion/master/screenshot.png" alt="Screenshot of vaadin-accordion">](https://vaadin.com/components/vaadin-accordion)
[<img src="https://raw.githubusercontent.com/vaadin/vaadin-accordion/master/screenshot.png" alt="Screenshot of vaadin-accordion" width="900">](https://vaadin.com/components/vaadin-accordion)


## Installation
Expand All @@ -63,11 +58,10 @@ Install `vaadin-accordion`:
bower i vaadin/vaadin-accordion --save
```

Once installed, import the components in your application:
Once installed, import it in your application:

```html
<link rel="import" href="bower_components/vaadin-accordion/vaadin-accordion.html">
<link rel="import" href="bower_components/vaadin-accordion/vaadin-details.html">
```

### Polymer 3 and ES Modules compatible version
Expand All @@ -79,11 +73,10 @@ Install `vaadin-accordion`:
npm i @vaadin/vaadin-accordion --save
```

Once installed, import the components in your application:
Once installed, import it in your application:

```js
import '@vaadin/vaadin-accordion/vaadin-accordion.js';
import '@vaadin/vaadin-accordion/vaadin-details.js';
```

## Getting started
Expand All @@ -94,20 +87,17 @@ To use the Material theme, import the correspondent file from the `theme/materia

## Entry points

- The components with the Lumo theme:
- The component with the Lumo theme:

`theme/lumo/vaadin-accordion.html`
`theme/lumo/vaadin-details.html`

- The components with the Material theme:
- The component with the Material theme:

`theme/material/vaadin-accordion.html`
`theme/material/vaadin-details.html`

- Aliases for `theme/lumo/vaadin-*.html`:
- Alias for `theme/lumo/vaadin-accordion.html`:

`vaadin-accordion.html`
`vaadin-details.html`


## Running demos and tests in a browser
Expand Down
6 changes: 2 additions & 4 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@
"description": "vaadin-accordion",
"main": [
"vaadin-accordion.html",
"vaadin-details.html",
"theme/material/vaadin-accordion.html",
"theme/material/vaadin-details.html"
"theme/material/vaadin-accordion.html"
],
"keywords": [
"Vaadin",
Expand All @@ -31,7 +29,7 @@
"polymer": "^2.0.0",
"vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.0",
"vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.0.0",
"vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.0",
"vaadin-details": "vaadin/vaadin-details#^1.0.0-alpha2",
"vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.3.3",
"vaadin-material-styles": "vaadin/vaadin-material-styles#^1.2.0"
},
Expand Down
26 changes: 0 additions & 26 deletions demo/accordion-basic-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,6 @@
}
</style>

<h3>Details</h3>
<p>
The <code>&lt;vaadin-details&gt;</code> component creates the expansible section
of the content, visible only when toggled into an <code>opened</code> state.
It is similar to the native <code>&lt;summary&gt;</code> and <code>&lt;details&gt;</code>
HTML elements, but offers better styling support and accessibility features.
</p>
<vaadin-demo-snippet id="accordion-basic-demos-details">
<template preserve-content>
<vaadin-details>
<div slot="summary">Panel heading</div>
<div>Panel content</div>
</vaadin-details>
</template>
</vaadin-demo-snippet>

<h3>Disabled Details</h3>
<vaadin-demo-snippet id="accordion-basic-demos-details-disabled">
<template preserve-content>
<vaadin-details disabled opened>
<div slot="summary">Disabled heading</div>
<div>Always visible content</div>
</vaadin-details>
</template>
</vaadin-demo-snippet>

<h3>Accordion</h3>
<p>
The <code>&lt;vaadin-accordion&gt;</code> component implements the
Expand Down
115 changes: 48 additions & 67 deletions demo/accordion-theme-variants-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,86 +6,67 @@
}
</style>

<h3>Small Size Details</h3>
<vaadin-demo-snippet id="accordion-theme-variants-demos-small">
<template preserve-content>
<vaadin-details theme="small">
<div slot="summary">Small</div>
<div>Panel content</div>
</vaadin-details>
</template>
</vaadin-demo-snippet>
<p>
You can combine all of these variants together, e.g.
<code>&lt;vaadin-accordion <b>theme="filled small reverse"</b>&gt;</code>
<b>Note:</b> the <code>theme</code> attribute must be set for each panel separately.
</p>

<h3>Filled Details</h3>
<h3>Filled Panels</h3>
<vaadin-demo-snippet id="accordion-theme-variants-demos-filled">
<template preserve-content>
<vaadin-details theme="filled">
<div slot="summary">Filled</div>
<div>Panel content</div>
</vaadin-details>
</template>
</vaadin-demo-snippet>

<h3>Reverse Details</h3>
<vaadin-demo-snippet id="accordion-theme-variants-demos-reverse">
<template preserve-content>
<vaadin-details theme="reverse">
<div slot="summary">Reverse</div>
<div>Panel content</div>
</vaadin-details>
</template>
</vaadin-demo-snippet>

<h3>Small Size Filled Details</h3>
<vaadin-demo-snippet id="accordion-theme-variants-demos-small-filled">
<template preserve-content>
<vaadin-details theme="small filled">
<div slot="summary">Small Filled</div>
<div>Panel content</div>
</vaadin-details>
<vaadin-accordion>
<vaadin-accordion-panel theme="filled">
<div slot="summary">Panel 1</div>
<div>Panel content</div>
</vaadin-accordion-panel>
<vaadin-accordion-panel theme="filled">
<div slot="summary">Panel 2</div>
<div>Panel content</div>
</vaadin-accordion-panel>
<vaadin-accordion-panel theme="filled" disabled>
<div slot="summary">Panel 3</div>
<div>Panel content</div>
</vaadin-accordion-panel>
</vaadin-accordion>
</template>
</vaadin-demo-snippet>

<h3>Reverse Filled Details</h3>
<vaadin-demo-snippet id="accordion-theme-variants-demos-reverse-filled">
<h3>Small Panels</h3>
<vaadin-demo-snippet id="accordion-theme-variants-demos-small">
<template preserve-content>
<vaadin-details theme="reverse filled">
<div slot="summary">Reverse Filled</div>
<div>Panel content</div>
</vaadin-details>
<vaadin-accordion>
<vaadin-accordion-panel theme="small">
<div slot="summary">Panel 1</div>
<div>Panel content</div>
</vaadin-accordion-panel>
<vaadin-accordion-panel theme="small">
<div slot="summary">Panel 2</div>
<div>Panel content</div>
</vaadin-accordion-panel>
<vaadin-accordion-panel theme="small">
<div slot="summary">Panel 3</div>
<div>Panel content</div>
</vaadin-accordion-panel>
</vaadin-accordion>
</template>
</vaadin-demo-snippet>

<h3>Filled Accordion</h3>
<p>
All the above Lumo theme variants available for <code>&lt;vaadin-details&gt;</code>
can be applied to <code>&lt;vaadin-accordion-panel&gt;</code> component.
You can also combine them, e.g. <code>theme="small reverse filled"</code>.
<b>Note:</b> the <code>theme</code> attribute must be set for each panel separately.
</p>
<vaadin-demo-snippet id="accordion-theme-variants-demos-accordion-filled">
<h3>Reverse Panels</h3>
<vaadin-demo-snippet id="accordion-theme-variants-demos-reverse">
<template preserve-content>
<vaadin-accordion>
<vaadin-accordion-panel theme="filled">
<div slot="summary">Personal Information</div>
<vaadin-vertical-layout>
<vaadin-text-field label="Name" theme="small"></vaadin-text-field>
<vaadin-text-field label="Phone" theme="small"></vaadin-text-field>
<vaadin-text-field label="Email" theme="small"></vaadin-text-field>
</vaadin-vertical-layout>
<vaadin-accordion-panel theme="reverse">
<div slot="summary">Panel 1</div>
<div>Panel content</div>
</vaadin-accordion-panel>
<vaadin-accordion-panel theme="filled">
<div slot="summary">Billing Address</div>
<vaadin-vertical-layout>
<vaadin-text-field label="Address" theme="small"></vaadin-text-field>
<vaadin-text-field label="City" theme="small"></vaadin-text-field>
<vaadin-text-field label="State" theme="small"></vaadin-text-field>
<vaadin-text-field label="Zip Code" theme="small"></vaadin-text-field>
</vaadin-vertical-layout>
</vaadin-accordion-panel theme="filled">
<vaadin-accordion-panel theme="filled" disabled>
<div slot="summary">Payment</div>
<span>Not yet implemented</span>
<vaadin-accordion-panel theme="reverse">
<div slot="summary">Panel 2</div>
<div>Panel content</div>
</vaadin-accordion-panel>
<vaadin-accordion-panel theme="reverse">
<div slot="summary">Panel 3</div>
<div>Panel content</div>
</vaadin-accordion-panel>
</vaadin-accordion>
</template>
Expand Down
1 change: 0 additions & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
<script src="../../vaadin-demo-helpers/vaadin-demo-ready-event-emitter.js"></script>

<link rel="import" href="../vaadin-accordion.html">
<link rel="import" href="../vaadin-details.html">

<link rel="import" href="../../vaadin-text-field/vaadin-text-field.html">
<link rel="import" href="../../vaadin-ordered-layout/vaadin-vertical-layout.html">
Expand Down
Binary file modified screenshot.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 25 additions & 12 deletions src/vaadin-accordion.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<link rel="import" href="../../polymer/lib/utils/flattened-nodes-observer.html">
<link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html">
<link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
<link rel="import" href="vaadin-details.html">
<link rel="import" href="../../vaadin-details/src/vaadin-details.html">

<dom-module id="vaadin-accordion">
<template>
Expand All @@ -33,11 +33,23 @@
*
* ### Styling
*
* `<vaadin-accordion-panel>` is an extension of `<vaadin-details>` component.
* It has the same slots for summary and expansible content, and inherits all
* the state attributes and stylable shadow parts.
* The following shadow DOM parts are exposed for styling:
*
* See [`<vaadin-details>` documentation](#/elements/vaadin-details).
* Part name | Description
* -----------------|----------------
* `summary` | The element used to open and close collapsible content.
* `toggle` | The element used as indicator, can represent an icon.
* `summary-content`| The wrapper for the slotted summary content.
* `content` | The wrapper for the collapsible panel content.
*
* The following attributes are exposed for styling:
*
* Attribute | Description
* -------------| -----------
* `opened` | Set when the collapsible content is expanded and visible.
* `disabled` | Set when the element is disabled.
* `focus-ring` | Set when the element is focused using the keyboard.
* `focused` | Set when the element is focused.
*
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*
Expand Down Expand Up @@ -65,22 +77,23 @@
*
* ```
* <vaadin-accordion>
* <vaadin-accordion-panel summary="Panel 1">
* <vaadin-accordion-panel>
* <div slot="summary">Panel 1</div>
* This panel is opened, so the text is visible by default.
* </vaadin-accordion-panel>
* <vaadin-accordion-panel summary="Panel 2">
* <vaadin-accordion-panel>
* <div slot="summary">Panel 2</div>
* After opening this panel, the first one becomes closed.
* </vaadin-accordion-panel>
* </vaadin-accordion>
* ```
*
* ### Styling
*
* The styling should be applied to [`<vaadin-accordion-panel>`](#/elements/vaadin-accordion-panel)
* component, which extends `<vaadin-details>`. It has the same slots
* and inherits all the state attributes and stylable shadow parts.
* See the [`<vaadin-accordion-panel>`](#/elements/vaadin-accordion-panel)
* documentation for the available state attributes and stylable shadow parts.
*
* You can apply the theme to `<vaadin-accordion>` component itself,
* **Note:** You can apply the theme to `<vaadin-accordion>` component itself,
* especially by using the following CSS selector:
*
* ```
Expand All @@ -89,7 +102,7 @@
* }
* ```
*
* See also [ThemableMixin styling documentation](https://github.com/vaadin/vaadin-themable-mixin/wiki)
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*
* @memberof Vaadin
* @mixes Vaadin.ElementMixin
Expand Down

0 comments on commit 2b27dd3

Please sign in to comment.