@patternfly/elements 3.0.0 → 3.0.2

package/pf-label/README.md

@@ -1,61 +0,0 @@
-# Label
-An inline-block element component that provides a distinct visual style for 
-metadata in a UI.  Commonly used as visual representations for tags, labels can 
-include an optional pf-icon and are available in a solid and outline style 
-variant. 
-
-Read more about Label in the [PatternFly Elements Label documentation](https://patternflyelements.org/components/label)
-
-##  Installation
-
-Load `<pf-label>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-label/pf-label.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-label/pf-label.js';
-```
-
-## Usage
-
-Default
-```html
-<p>Some Text <pf-label>Your label text here</pf-label></p>
-```
-
-Color Options: `grey (default), blue ,green, orange, red, purple, cyan`
-```html
-<p>Some Text <pf-label color="red">Your label text here</pf-label></p>
-```
-
-With and Icon:
-```html
-<p>Some Text <pf-label icon="web-icon-globe">Your label text here</pf-label></p>
-```
-
-Outline variant:
-```html
-<p>Some Text <pf-label outline>Your label text here</pf-label></p>
-```
-
-> ### Conveying meaning to assistive technologies
-> Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that
-> information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text 
-> hidden with the a class.
-
-
-```html
-<pf-label color="red">
- Some text <span class="visually-hidden-class">Some additional info</span>
-</pf-label>
-```

package/pf-modal/README.md

@@ -1,63 +0,0 @@
-# PatternFly Elements Modal
-     
-`pf-modal` is a self-contained modal window that is hidden on page load and (when activated) restricts the user from interacting with content in the main window.
-
-Read more about Modal in the [PatternFly Elements Modal documentation](https://patternflyelements.org/components/modal)
-
-##  Installation
-
-Load `<pf-modal>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-modal/pf-modal.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-modal/pf-modal.js';
-```
-
-## Usage
-
-Open a modal dialog with the `showModal()` method, or by setting the `open` boolean attribute.
-
-```html
-<pf-modal>
-  <h2 slot="header">Modal with a header</h2>
-  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-  <a slot="footer" href="#bar">Learn more</a>
-</pf-modal>
-
-<script>
-document.querySelector('pf-modal').showModal();
-</script>
-```
-
-### With a trigger
-
-You may assign a button-like trigger element to the modal by setting the modal element's `trigger` attribute to the trigger's ID.
-
-```html
-<pf-modal trigger="trigger-button">
-  <h2 slot="header">Modal with a header</h2>
-  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-  <a slot="footer" href="#bar">Learn more</a>
-</pf-modal>
-
-<button id="trigger-button">Open modal</button>
-```
-
-You may also imperatively set the trigger element with the `setTrigger()` method:
-```js
-const modal = document.querySelector('pf-modal');
-const trigger = document.querySelector('button#my-trigger');
-modal.setTrigger(trigger);
-```
-

package/pf-panel/README.md

@@ -1,10 +0,0 @@
-# Panel
-Panel contains content with optional header and footer content.
-
-## Usage
-
-```html
-<pf-panel>
-  <p>Panel content</p>
-</pf-panel>
-```

package/pf-popover/README.md

@@ -1,48 +0,0 @@
-# Popover
-
-A Popover displays content in a non-modal dialog and adds contextual information or provides resources via text and links.
-
-## Usage
-
-Read more about popovers in the [PatternFly Elements Popover documentation](https://patternflyelements.org/components/popover)
-
-## Installation
-
-Load `<pf-popover>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-popover/pf-popover.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-popover/pf-popover.js';
-```
-
-## Usage
-
-### Basic Popover
-
-```html
-<pf-popover heading="Popover heading"
-            body="Popovers are triggered by click rather than hover."
-            footer="Popover footer">
-  <pf-button>Toggle popover</pf-button>
-</pf-popover>
-```
-
-```html
-<pf-popover>
-  <h3 slot="heading">Popover heading</h3>
-  <div slot="body">Popovers are triggered by click rather than hover.</div>
-  <span slot="footer">Popover footer</span>
-  <pf-button>Toggle popover</pf-button>
-</pf-popover>
-```

package/pf-progress/README.md

@@ -1,33 +0,0 @@
-# Progress
-
-A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
-
-Read more about Progress in the [PatternFly Elements Progress documentation][docs].
-
-##  Installation
-
-Load `<pf-progress>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-progress/pf-progress.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-progress/pf-progress.js';
-```
-
-## Usage
-
-```html
-<pf-progress title="Default" value="33"></pf-progress>
-```
-
-[docs]: https://patternflyelements.org/components/progress

package/pf-progress-stepper/README.md

@@ -1,41 +0,0 @@
-# PatternFly Elements Progress Stepper
-
-A component that gives the user a visual representation of the current state of 
-their progress through an application (typically a multistep form).
-
-Read more about Progress Stepper in the [PatternFly Elements Progress Steps 
-documentation][docs].
-
-##  Installation
-
-Load `<pf-progress-stepper>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-progress-stepper/pf-progress-stepper.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-progress-stepper/pf-progress-stepper.js';
-```
-
-## Usage
-
-```html
-<pf-progress-stepper>
-  <pf-progress-step variant="success">Completed</pf-progress-step>
-  <pf-progress-step variant="warning">Issue</pf-progress-step>
-  <pf-progress-step variant="danger">Failure</pf-progress-step>
-  <pf-progress-step current variant="info">Running</pf-progress-step>
-  <pf-progress-step>Last</pf-progress-step>
-</pf-progress-stepper>
-```
-
-[docs]: https://patternflyelements.org/components/progress-stepper

package/pf-select/README.md

@@ -1,21 +0,0 @@
-# Select
-
-A select list enables users to select one or more items from a list.
-
-## Usage
-
-A select component consists of a toggle control to open and close a menu of actions or links.
-Selects differ from dropdowns in that they persist selection, whereas dropdowns are typically used to present a list of actions or links.
-
-```html
-<pf-select>
-  <pf-option>Blue</pf-option>
-  <pf-option>Green</pf-option>
-  <pf-option>Magenta</pf-option>
-  <pf-option>Orange</pf-option>
-  <pf-option>Purple</pf-option>
-  <pf-option>Pink</pf-option>
-  <pf-option>Red</pf-option>
-  <pf-option>Yellow</pf-option>
-</pf-select>
-```

package/pf-spinner/README.md

@@ -1,46 +0,0 @@
-# PatternFly Elements Spinner
-     
-`<pf-spinner>` is used to indicate to users that an action is in progress.
-
-Read more about Spinner in the [PatternFly Elements Spinner documentation](https://patternflyelements.org/components/spinner)
-
-##  Installation
-
-Load `<pf-spinner>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-spinner/pf-spinner.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-spinner/pf-spinner.js';
-```
-
-## Usage
-```html
-<pf-spinner>Loading...</pf-spinner>
-```
-
-### Size variations
-
-```html
-<pf-spinner size="sm">Loading...</pf-spinner>
-<pf-spinner size="md">Loading...</pf-spinner>
-<pf-spinner size="lg">Loading...</pf-spinner>
-<pf-spinner size="xl">Loading...</pf-spinner>
-```
-
-### Custom size
-
-```html
-<pf-spinner diameter="80px">Loading...</pf-spinner>
-```
-

package/pf-switch/README.md

@@ -1,91 +0,0 @@
-# PatternFly Elements Switch
-     
-`<pf-switch>` is a switch that toggles the state of a setting (between on and 
-off). Switches provide a more explicit, visible representation on a setting.
-
-Read more about Switch in the [PatternFly Elements Switch documentation](https://patternflyelements.org/components/switch)
-
-##  Installation
-
-Load `<pf-switch>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-switch/pf-switch.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-switch/pf-switch.js';
-```
-
-### Note
-For `<pf-switch>` to work in Safari, you'll need to load the [element-internals-polyfill](https://www.npmjs.com/package/element-internals-polyfill). Safari is in the process of [adding element internals to WebKit](https://bugs.webkit.org/show_bug.cgi?id=197960) so this polyfill should be temporary.
-
-## Usage
-```html
-<pf-switch id="switch"></pf-switch>
-<label for="switch" data-state="on">Message when on</label>
-<label for="switch" data-state="off" hidden>Message when off</label>
-```
-
-### Form Associated
-
-`<pf-switch>` is a form-associated custom element. That means that it can
-participate in HTML forms just like a native `<input>`. For example, if you add
-the `name` attribute, or the `id` attribute, the element will appear in the
-FormData object. For example, if you add the `name` attribute, or the `id`
-attribute, the element will appear in the `FormData` object.
-
-```html
-<form>
-  <label> Dark Mode
-    <pf-switch name="dark"></pf-switch>
-  </label>
-  <script>
-  document.currentScript.closest('form').addEventListener('submit', function() {
-    console.log(this.elements.dark) // <pf-switch>
-  })
-  </script>
-</form>
-```
-
-
-### Without label
-
-```html
-<pf-switch></pf-switch>
-```
-
-### Checked with label
-
-```html
-<pf-switch show-check-icon></pf-switch>
-<label for="switch" data-state="on">Message when on</label>
-<label for="switch" data-state="off" hidden>Message when off</label>
-```
-
-### Disabled Switches
-
-```html
-<form>
-  <fieldset>
-    <legend>Checked and Disabled</legend>
-    <pf-switch id="checked-disabled" checked disabled></pf-switch>
-    <label for="checked-disabled" data-state="on">Message when on</label>
-    <label for="checked-disabled" data-state="off">Message when off</label>
-  </fieldset>
-
-  <fieldset>
-    <pf-switch id="disabled" disabled></pf-switch>
-    <label for="disabled" data-state="on">Message when on</label>
-    <label for="disabled" data-state="off">Message when off</label>
-  </fieldset>
-</form>
-```

package/pf-table/README.md

@@ -1,43 +0,0 @@
-# Table
-A **table** is used to display large data sets that can be easily laid out in a simple grid with column headers.
-
-## Usage
-Use the `<pf-table>` elements the way you would native HTML table elements.
-See the [docs][docs] for more info.
-
-```html
-<pf-table>
-  <pf-thead>
-    <pf-tr>
-      <pf-th>Repositories</pf-th>
-      <pf-th>Branches</pf-th>
-      <pf-th>Pull requests</pf-th>
-      <pf-th>Workspaces</pf-th>
-      <pf-th>Last commit</pf-th>
-    </pf-tr>
-  </pf-thead>
-  <pf-tr>
-    <pf-th>one</pf-th>
-    <pf-td>two</pf-td>
-    <pf-td>three</pf-td>
-    <pf-td>four</pf-td>
-    <pf-td>five</pf-td>
-  </pf-tr>
-  <pf-tr>
-    <pf-th>one - 2</pf-th>
-    <pf-td></pf-td>
-    <pf-td></pf-td>
-    <pf-td>four - 2</pf-td>
-    <pf-td>five - 2</pf-td>
-  </pf-tr>
-  <pf-tr>
-    <pf-th>one - 3</pf-th>
-    <pf-td>two - 3</pf-td>
-    <pf-td>three - 3</pf-td>
-    <pf-td>four - 3</pf-td>
-    <pf-td>five - 3</pf-td>
-  </pf-tr>
-</pf-table>
-```
-
-[docs]: https://patternflyelements.org/components/table/

package/pf-tabs/README.md

@@ -1,40 +0,0 @@
-# PatternFly Elements Tabs
-     
-Read more about Tabs in the [PatternFly Elements Tabs documentation](https://patternflyelements.org/components/tabs)
-
-##  Installation
-
-Load `<pf-tabs>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-tabs/pf-tabs.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-tabs/pf-tabs.js';
-```
-
-### Note
-For `<pf-tabs>` to work in Safari, you'll need to load the [element-internals-polyfill](https://www.npmjs.com/package/element-internals-polyfill). Safari is in the process of [adding element internals to WebKit](https://bugs.webkit.org/show_bug.cgi?id=197960) so this polyfill should be temporary.
-
-## Usage
-
-```html
-<pf-tabs>
-  <pf-tab id="users" slot="tab">Users</pf-tab>
-  <pf-tab-panel>Users</pf-tab-panel>
-  <pf-tab slot="tab">Containers</pf-tab>
-  <pf-tab-panel>Containers <a href="#">Focusable element</a></pf-tab-panel>
-  <pf-tab slot="tab">Database</pf-tab>
-  <pf-tab-panel>Database</pf-tab-panel>
-</pf-tabs>
-```
-

package/pf-text-area/README.md

@@ -1,11 +0,0 @@
-# Text Area
-Add a description of the component here.
-
-## Usage
-Describe how best to use this web component along with best practices.
-
-```html
-<pf-text-area>
-
-</pf-text-area>
-```

package/pf-text-input/README.md

@@ -1,9 +0,0 @@
-# Text Input
-A **text input** is used to gather free-form text from a user.
-
-```html
-<label>
-  Text Input
-  <pf-text-input></pf-text-input>
-</label>
-```

package/pf-tile/README.md

@@ -1,12 +0,0 @@
-# Tile
-A **tile** component is a form of selection that can be used in place of a radio 
-button and is commonly used in forms. A tile appears visually similar to a 
-selectable card. However, tiles are used specifically when the user is selecting 
-a static option, whereas a selectable card triggers an action or opens a 
-quickstart or sidebar to provide additional information.
-
-```html
-<pf-tile>
-  <h3 slot="title">Default</h3>
-</pf-tile>
-```

package/pf-timestamp/README.md

@@ -1,64 +0,0 @@
-# PatternFly Elements Timestamp
-     
-A timestamp provides consistent formats for displaying date and time values.
-
-Read more about Datetime in the [PatternFly Elements Timestamp documentation](https://patternflyelements.org/components/timestamp)
-
-##  Installation
-
-Load `<pf-timestamp>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-timestamp/pf-timestamp.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-timestamp/pf-timestamp.js';
-```
-
-## Usage
-
-### Just the date: January 2, 2006
-```html
-<pf-timestamp
-  date="Mon Jan 2 15:04:05 EST 2006"
-  date-format="long">
-</pf-timestamp>
-```
-
-### With time: Monday, January 2, 2006 at 3:04:05 PM EST
-```html
-<pf-timestamp
-  date="Mon Jan 2 15:04:05 EST 2006"
-  date-format="full"
-  time-format="long">
-</pf-timestamp>
-```
-
-### With an en-GB locale: Monday, 2 January 2006 at 15:04:05 GMT-5
-You can use any locale here.
-```html
-<pf-timestamp
-  date="Mon Jan 2 15:04:05 EST 2006"
-  date-format="full"
-  time-format="long"
-  locale="en-GB">
-</pf-timestamp>
-```
-
-### Relative time: 17 years ago
-```html
-<pf-timestamp
-  date="Mon Jan 2 15:04:05 EST 2006"
-  relative>
-</pf-timestamp>
-```
-

package/pf-tooltip/README.md

@@ -1,64 +0,0 @@
-# Tooltip
-A tooltip is a floating text area triggered by a user that provides helpful or contextual information.
-
-## Usage
-A tooltip is used by wrapping an html element in the pf-tooltip element along with contextual information to be displayed alongside of the element.  
-
-Read more about tooltips in the [PatternFly Elements Tooltip documentation](https://patternflyelements.org/components/tooltip)
-
-##  Installation
-
-Load `<pf-tooltip>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-tooltip/pf-tooltip.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
-```
-
-## Usage
-
-
-### Basic Tooltip 
-```html
-<pf-tooltip> This is An Element
-  <div slot="content">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
-    incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et 
-    ultrices.
-  </div>
-</pf-tooltip>
-```
-
-### Tooltip With Left Positioning (also available: top, right, bottom)
-```html
-<pf-tooltip position="left"> This is An Element
-  <div slot="content">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
-    incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et 
-    ultrices.
-  </div>
-</pf-tooltip>
-```
-
-### Tooltip With Left Positioning And Offset
-```html
-<pf-tooltip position="left" offset="10, 10">
-    <div>
-        This is An Element 
-    </div>
-    <div slot="content">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.
-    </div>
-</pf-tooltip>
-```