@patternfly/elements 3.0.0 → 3.0.1

package/pf-accordion/README.md

@@ -1,44 +0,0 @@
-# PatternFly Elements Accordion
-     
-`<pf-accordion>` is a web component that provides a collapsible accordion interface for sectioned content.
-
-Read more about Accordion in the [PatternFly Elements Accordion documentation](https://patternflyelements.org/components/accordion)
-
-##  Installation
-
-Load `<pf-accordion>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-accordion/pf-accordion.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-accordion/pf-accordion.js';
-```
-## Usage
-
-```html
-<pf-accordion>
-  <pf-accordion-header>
-    <h3>Consetetur sadipscing elitr?</h3>
-  </pf-accordion-header>
-  <pf-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>
-  </pf-accordion-panel>
-  <pf-accordion-header>
-    <h3>Labore et dolore magna aliquyam erat?</h3>
-  </pf-accordion-header>
-  <pf-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>
-  </pf-accordion-panel>
-</pf-accordion>
-```
-                                                          

package/pf-avatar/README.md

@@ -1,31 +0,0 @@
-# PatternFly Elements Avatar
-
-`<pf-avatar>` is an element for displaying a user's avatar image. If the user in 
-question has provided a custom avatar, provide it and it will be displayed.
-
-Read more about Avatar in the [PatternFly Elements Avatar documentation](https://patternflyelements.org/components/avatar)
-
-##  Installation
-
-Load `<pf-avatar>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-avatar/pf-avatar.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-avatar/pf-avatar.js';
-```
-## Usage
-
-```html
-<pf-avatar alt="Michael Clayton" src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-avatar>
-```

package/pf-back-to-top/README.md

@@ -1,32 +0,0 @@
-# Back to top
-
-The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.
-
-
-##  Installation
-Load `<pf-back-to-top>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-back-to-top/pf-back-to-top.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-back-to-top/pf-back-to-top.js';
-```
-
-## Usage
-
-```html
-<pf-back-to-top href="#top">Back to Top</pf-back-to-top>
-
-```
-
-[docs]: https://patternflyelements.org/components/back-to-top

package/pf-background-image/README.md

@@ -1,37 +0,0 @@
-# Background Image
-
-A **background image** allows you to place an image in the background of your page or area of a page.
-
-
-##  Installation
-Load `<pf-background-image>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-background-image/pf-background-image.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-background-image/pf-background-image.js';
-```
-
-## Usage
-
-```html
-<pf-background-image
-    src="image.jpg"
-    src-2x="image-576.jpg"
-    src-sm="image-768.jpg"
-    src-sm-2x="image-768@2x.jpg"
-    src-lg="image-1200.jpg"
-></pf-background-image>
-```
-
-[docs]: https://patternflyelements.org/components/background-image

package/pf-badge/README.md

@@ -1,57 +0,0 @@
-# PatternFly Elements Badge
-         
-The `<pf-badge>` component provides a way to have small numerical descriptors for 
-for for for UI elements. To provide context to your badge, it is highly 
-encouraged that you also include an `aria-label` attribute in your markup.
-
-Read more about Badge in the [PatternFly Elements Badge documentation](https://patternflyelements.org/components/badge)
-
-##  Installation
-
-Load `<pf-badge>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-badge/pf-badge.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-badge/pf-badge.js';
-```
-
-## Usage
-
-```html
-<section>
-  <pf-badge aria-label="2 unread messages" number="2" threshold="10">2</pf-badge>
-</section>
-```
-
-Please refer to the [specification](https://www.w3.org/TR/wai-aria/#aria-label) for additional details.
-
-With the `threshold` attribute:
-
-```html
-<section>
-  <pf-badge number="1" threshold="10">1</pf-badge>
-  <pf-badge number="17" threshold="20">17</pf-badge>
-  <pf-badge number="900" threshold="100">900</pf-badge>
-</section>
-```
-
-With two state options for the `state` attribute:
-
-```html
-<section>
-  <pf-badge state="read" number="10">10</pf-badge>
-  <pf-badge state="unread" number="20">20</pf-badge>
-</section>
-```
-

package/pf-banner/README.md

@@ -1,60 +0,0 @@
-# Patternfly Elements Banner
-A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive and non-dismissible.
-
-Read more about Button in the [PatternFly Elements Banner documentation](https://patternflyelements.org/components/banner)
-
-## Installation
-Load `<pf-banner>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-banner/pf-banner.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-banner/pf-banner.js';
-```
-
-
-## Usage
-
-```html
-<pf-banner>
-  Default banner
-</pf-banner>
-```
-
-
-## Attributes
-
-### Variant
-Banners have five different variants. The available variants are `default`, `info`, `success`, `danger`, and `warning`.
-
-```html
-<pf-banner variant="info">
-  Info banner
-</pf-banner>
-```
-
-### Icon
-Banners can have an icon attribute for a shorthand to Patternfly Icons. To see available icons, visit the [Patternfly Elements Icons documentation](https://patternflyelements.com/components/icons/).
-
-```html
-<pf-banner variant="info" icon="info">
-  Info banner
-</pf-banner>
-```
-
-### Sticky
-Banners can be sticky, so they stick to the top of the parent. 
-
-```html
-<pf-banner sticky>
-  Sticky banner
-</pf-banner>
-```

package/pf-button/README.md

@@ -1,61 +0,0 @@
-# PatternFly Elements Button
-     
-`<pf-button>` is a web component wrapper around a standard HTML `<button>` element.
-`<pf-button>` is heavily influenced by the findings in this post: [Custom
-elements, shadow DOM and implicit form submission](https://www.hjorthhansen.dev/shadow-dom-and-forms/). You can expect `<pf-button>` to work like a normal `HTMLButtonElement`.
-
-Read more about Button in the [PatternFly Elements Button documentation](https://patternflyelements.org/components/button)
-
-##  Installation
-
-Load `<pf-button>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-button/pf-button.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-button/pf-button.js';
-```
-
-## Usage
-
-When using this component, you must provide a standard HTML Button Elements as
-the only light DOM child of `pf-button`.
-
-```html
-<pf-button>My Button</pf-button>
-```
-
-### Accessibility
-`<pf-button>` addresses the issues associated with typical implementations of
-web component buttons. When using a `<pf-button>` in a `<form>` element, the
-`<pf-button>` will function as a standard button in a `<form>`. You can expect
-the button to submit the form.
-
-#### Disabled Attribute
-Adding the `disabled` attribute to either the `<pf-button>` wrapper or the
-`<button>` element in the light DOM will disable the button.
-
-```html
-<pf-button disabled>Submit</pf-button>
-```
-
-#### Type Attribute
-Using the `type` attribute works in the same fashion as the `disabled`
-attribute. You can add a `type` attribute to the `<pf-button>` element.
-
-```html
-<pf-button type="button">Submit</pf-button>
-<pf-button type="submit">Submit</pf-button>
-<pf-button type="reset">Reset</pf-button>
-```
-

package/pf-card/README.md

@@ -1,34 +0,0 @@
-# PatternFly Elements Card
-         
-Read more about Card in the [PatternFly Elements Card documentation](https://patternflyelements.org/components/card)
-
-##  Installation
-
-Load `<pf-card>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-card/pf-card.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-card/pf-card.js';
-```
-
-## Usage
-
-```html
-<pf-card>
-  <h2 slot="header">Card header</h2>
-  <p>This is the pf-card body.</p>
-  <a href="#" slot="footer">Footer link</a>
-</pf-card>
-```
-

package/pf-chip/README.md

@@ -1,20 +0,0 @@
-# Chip
-
-A **chip** is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.
-
-## Usage
-
-Describe how best to use this web component along with best practices.
-
-```html
-<pf-chip>Chip 1</pf-chip>
-```
-
-```html
-  <pf-chip-group>
-    <pf-chip>Chip 1</pf-chip>
-    <pf-chip>Chip 2</pf-chip>
-    <pf-chip>Chip 3</pf-chip>
-    <pf-chip>Chip 4</pf-chip>
-  </pf-chip-group>
-```

package/pf-clipboard-copy/README.md

@@ -1,8 +0,0 @@
-# Clipboard Copy
-Copy-to-clipboard widget
-
-## Usage
-
-```html
-<pf-clipboard-copy>Content to copy</pf-clipboard-copy>
-```

package/pf-code-block/README.md

@@ -1,77 +0,0 @@
-# PatternFly Elements Code Block
-`<pf-code-block>` is a component that contains two or more lines of ready-only 
-code. The code in a code block can be copied to the clipboard.
-
-Read more about Code Block in the [PatternFly Elements Code Block 
-documentation](https://patternflyelements.org/components/code-block)
-
-##  Installation
-
-Load `<pf-code-block>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-code-block/pf-code-block.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im), install it
-
-```bash
-npm install @patternfly/pf-code-block
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/pf-code-block';
-```
-
-## Usage
-### Basic
-
-Place your code in a `script` tag with a [non-javascript mimetype][mime].
-JavaScript snippets **must** use the `text/javascript-sample` script type. 
-Script text content will be automatically dedented.
-
-
-To add copy-to-clipboard functionality, be sure to import 
-`@patternfly/pf-clipboard` and add the `pf-clipboard` to the `action` slot.
-
-```html
-<pf-code-block>
-  <script type="application/openshift">
-    apiVersion: helm.openshift.io/v1beta1/
-    kind: HelmChartRepository
-    metadata:
-    name: azure-sample-repo0oooo00ooo
-    spec:
-    connectionConfig:
-    url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
-  </script>
-</pf-code-block>
-```
-
-### Expandable
-
-If a block of code is long and you'd like to hide some of the code to take up 
-less height on the page, place the code you'd like to hide in a `script` with 
-`data-expand` attribute present.
-
-It is important that you place the span right next to the first `script`, 
-because of how the whitespace will be handled. Failing to do this can result in 
-unwanted line breaks. 
-
-```html
-<pf-code-block id="expandable-code">
-  <script type="application/openshift">
-    apiVersion: helm.openshift.io/v1beta1/
-    kind: HelmChartRepository
-    metadata:
-    name: azure-sample-repo</script><script type="application/openshift" 
-    data-expand>
-    spec:
-    connectionConfig:
-    url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
-  </script>
-  <pf-clipboard slot="actions" copy-from="#expandable-code"></pf-clipboard>
-</pf-code-block>
-```

package/pf-dropdown/README.md

@@ -1,46 +0,0 @@
-# Dropdown
-
-A dropdown presents a menu of actions or links in a constrained space that will 
-trigger a process or navigate to a new location.
-
-Read more about dropdown in the [PatternFly Elements Dropdown 
-documentation](https://patternflyelements.org/components/dropdown)
-
-##  Installation
-
-Load `<pf-dropdown>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-dropdown/pf-dropdown.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-dropdown/pf-dropdown.js';
-```
-
-## Usage
-
-```html
-<pf-dropdown>
-    <pf-dropdown-item>item4</pf-dropdown-item>
-    <hr>
-    <pf-dropdown-group label="Group 1">
-        <pf-dropdown-item>item1</pf-dropdown-item>
-        <pf-dropdown-item>item2</pf-dropdown-item>
-        <hr>
-        <pf-dropdown-item>item3</pf-dropdown-item>
-    </pf-dropdown-group>
-    <pf-dropdown-group label="Group 2">
-        <pf-dropdown-item>item1</pf-dropdown-item>
-        <pf-dropdown-item >item2</pf-dropdown-item>
-    </pf-dropdown-group>
-</pf-dropdown>
-```

package/pf-icon/README.md

@@ -1,86 +0,0 @@
-# PatternFly Elements Icon
-     
-Read more about Icon in the [PatternFly Elements Icon documentation][docs]
-
-##  Installation
-
-Load `<pf-icon>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-icon/pf-icon.js"></script>
-```
-
-Or, if you are using [NPM](https://npm.im/@patternfly/elements/), install it
-
-```bash
-npm install @patternfly/elements
-```
-
-Then once installed, import it to your application:
-
-```js
-import '@patternfly/elements/pf-icon/pf-icon.js';
-```
-
-## Usage
-
-Place the icon element on the page and give it an icon name from the [default icon set][icon-sets].
-In most cases, the icon should be labelled using `aria-label` or `aria-labelledby`, or removed from
-the accessibility tree with `aria-hidden="true"` or `role="presentation"`, if its content is merely
-presentational and expressed using accessible text copy elsewhere.
-
-```html
-<pf-icon icon="award" aria-label="Awards"></pf-icon>
-```
-
-### Fallback Content
-
-If you wish to display some content while the icon loads (or while JS is disabled),
-you can slot it into `<pf-icon>`. For instance, when using a checkmark icon in a 
-server status table, you may wish to display a checkmark emoji if JS is disabled.
-
-```html
-<pf-icon icon="check">✅</pf-icon>
-```
-
-### Icon Sets
-
-Icon comes with three built-in icon sets:
-
-1. `fas`: Font Awesome Free Solid icons (the default set)
-1. `far`: Font Awesome Free Regular icons
-1. `patternfly`: PatternFly icons
-
-Use the `set` attribute to pick an alternative icon set.
-```html
-<pf-icon icon="star"    set="far"></pf-icon>
-<pf-icon icon="redhat"  set="fab"></pf-icon>
-<pf-icon icon="package" set="patternfly"></pf-icon>
-```
-
-It is possible to add custom icon sets or override the default sets.
-Icon sets are defined in detail in [the docs][icon-sets].
-
-### Bundling
-
-When bundling PfIcon with other modules, the default icon imports will be
-relative to the bundle, not the source file, so be sure to either register all
-the icon sets you'll need, or override the default getter.
-
-```js
-// Workaround for bundled pf-icon: make icon imports absolute, instead of 
-relative to the bundle
-import { PfIcon } from '/pfe.min.js';
-PfIcon.getIconUrl = (set, icon) =>
-  new URL(`/assets/icons/${set}/${icon}.js`, import.meta.url);
-  // default: new URL(`./icons/${set}/${icon}.js`, import.meta.url);
-```
-
-## Loading
-
-Icons load _lazily_ by default, meaning that the browser will not attempt to fetch and render the
-icon until it scrolls into view. You can change this with the `loading` attribute;
-see the [docs][docs] for more info.
-
-[docs]: https://patternflyelements.org/components/icon/
-[icon-sets]: https://patternflyelements.org/components/icon/#icon-sets

package/pf-icon/icons/fab/readme.svg

@@ -1 +0,0 @@
-<!-- © fontawesome. CC-BY-4.0 licensed --><svg xmlns="http://www.w3.org/2000/svg" data-icon-name="readme" height="512" width="576" viewBox="0 0 576 512"><path d="M528.3 46.5H388.5c-48.1 0-89.9 33.3-100.4 80.3-10.6-47-52.3-80.3-100.4-80.3H48c-26.5 0-48 21.5-48 48v245.8c0 26.5 21.5 48 48 48h89.7c102.2 0 132.7 24.4 147.3 75 .7 2.8 5.2 2.8 6 0 14.7-50.6 45.2-75 147.3-75H528c26.5 0 48-21.5 48-48V94.6c0-26.4-21.3-47.9-47.7-48.1zM242 311.9c0 1.9-1.5 3.5-3.5 3.5H78.2c-1.9 0-3.5-1.5-3.5-3.5V289c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5v22.9zm0-60.9c0 1.9-1.5 3.5-3.5 3.5H78.2c-1.9 0-3.5-1.5-3.5-3.5v-22.9c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5V251zm0-60.9c0 1.9-1.5 3.5-3.5 3.5H78.2c-1.9 0-3.5-1.5-3.5-3.5v-22.9c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5v22.9zm259.3 121.7c0 1.9-1.5 3.5-3.5 3.5H337.5c-1.9 0-3.5-1.5-3.5-3.5v-22.9c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5v22.9zm0-60.9c0 1.9-1.5 3.5-3.5 3.5H337.5c-1.9 0-3.5-1.5-3.5-3.5V228c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5v22.9zm0-60.9c0 1.9-1.5 3.5-3.5 3.5H337.5c-1.9 0-3.5-1.5-3.5-3.5v-22.8c0-1.9 1.5-3.5 3.5-3.5h160.4c1.9 0 3.5 1.5 3.5 3.5V190z" /></svg>

package/pf-jump-links/README.md

@@ -1,27 +0,0 @@
-# Jump Links
-
-**Jump links** allow users to navigate to sections within a page.
-
-Read more about Jump Links in the [documentation][docs].
-
-##  Installation
-
-Load `<pf-jump-links>` via CDN:
-
-```html
-<script src="https://jspm.dev/@patternfly/elements/pf-jump-links/pf-jump-links.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-jump-links/pf-jump-links.js';
-```
-
-[docs]: https://patternflyelements.org/components/jump-links