docs: add "try it" links to webcomponents.dev

adobe · Mar 16, 2021 · 3217b51 · 3217b51
1 parent 4f22b98
commit 3217b51
Show file tree

Hide file tree

Showing 53 changed files with 76 additions and 26 deletions.
diff --git a/documentation/src/components/home.css b/documentation/src/components/home.css
@@ -11,15 +11,15 @@ governing permissions and limitations under the License.
 */
 
 #hero {
-    margin-bottom: 3em;
+    margin-bottom: 4em;
 }
 
 #hero .spectrum-Article {
     padding-bottom: 2em;
 }
 
 #hero-buttons {
-    margin-top: 1em;
+    margin-top: 2em;
 }
 
 #features {

diff --git a/documentation/src/components/home.ts b/documentation/src/components/home.ts
@@ -15,6 +15,7 @@ import { RouteComponent } from './route-component.js';
 import componentStyles from './markdown.css';
 import homeStyles from './home.css';
 import '@spectrum-web-components/button/sp-button.js';
+import '@spectrum-web-components/button-group/sp-button-group.js';
 import '@spectrum-web-components/link/sp-link.js';
 import '@spectrum-web-components/divider/sp-divider.js';
 
@@ -32,20 +33,22 @@ class HomeElement extends RouteComponent {
                         Spectrum Web Components
                     </h1>
                 </div>
-                <p class="spectrum-Body spectrum-Body--sizeXL">
+                <p class="spectrum-Body spectrum-Body--sizeXXL">
                     The Spectrum Web Components project is an implementation of <sp-link
                     href="https://spectrum.adobe.com/">Spectrum, Adobe’s design system</sp-link
                     >. It's designed to work with any web framework — or even
                     without one.
                 </p>
-                <div id="hero-buttons">
+                <sp-button-group id="hero-buttons">
                     <sp-button
                         href="https://github.com/adobe/spectrum-web-components"
+                        target="_blank"
                         variant="primary"
+                        size="xl"
                     >
                         View on GitHub
                     </sp-button>
-                </div>
+                </sp-button-group>
             </section>
             <section id="features">
                 <div class="feature">

diff --git a/packages/accordion/README.md b/packages/accordion/README.md
@@ -6,6 +6,7 @@ The `<sp-accordion>` element is a list of items that can be expanded or collapse
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/accordion?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/accordion)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/accordion?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/accordion)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Muvuvbd79YCP9tcdtnsW/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/accordion

diff --git a/packages/action-bar/README.md b/packages/action-bar/README.md
@@ -6,6 +6,7 @@ A `<sp-action-bar>` delivers a floating action bar that is a convenient way to d
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/action-bar?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-bar)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-bar?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-bar)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Tqvpr5Yolj9drzPab26O/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/action-bar

diff --git a/packages/action-button/README.md b/packages/action-button/README.md
@@ -6,6 +6,7 @@ An `<sp-action-button>` represents an action a user can take.
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/action-button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-button)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-button)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/mOF1zUEjLJzODGXFYaIU/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/action-button

diff --git a/packages/action-group/README.md b/packages/action-group/README.md
@@ -6,6 +6,7 @@
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/action-group?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-group)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-group?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-group)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/ty5ezK85zgVE5vuZfMem/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/action-group

diff --git a/packages/action-menu/README.md b/packages/action-menu/README.md
@@ -6,6 +6,7 @@ An `<sp-action-menu>` is an action button with a Popover. Use an `<sp-menu>` ele
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/action-menu?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-menu)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-menu?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-menu)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/EYQn9T6wOnieZbv4xnPj/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/action-menu

diff --git a/packages/asset/README.md b/packages/asset/README.md
@@ -6,13 +6,22 @@ Use an `<sp-asset>` element to visually represent a file, folder or image in you
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/asset?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/asset)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/asset?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/asset)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/CdMbDDjxdnvVyMlGrrJj/src/index.ts)
 
 ```
-npm install @spectrum-web-components/asset
+yarn add @spectrum-web-components/asset
+```
 
-# or
+Import the side effectful registration of `<sp-asset>` via:
 
-yarn add @spectrum-web-components/asset
+```
+import '@spectrum-web-components/asset/sp-asset.js';
+```
+
+When looking to leverage the `Asset` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Asset } from '@spectrum-web-components/asset';
 ```
 
 ## Example

diff --git a/packages/avatar/README.md b/packages/avatar/README.md
@@ -6,6 +6,7 @@ An `<sp-avatar>` is a great way to feature a visual representation of a user.
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/avatar?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/avatar)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/avatar?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/avatar)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/i3gAnjAfQVC43ypsIyw8/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/avatar

diff --git a/packages/banner/README.md b/packages/banner/README.md
@@ -6,6 +6,7 @@ An `<sp-banner>` is an additional label an existing component may have. Banners
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/banner?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/banner)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/banner?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/banner)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/qsv9Ztje6fUhANFmk8EA/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/banner

diff --git a/packages/button-group/README.md b/packages/button-group/README.md
@@ -6,6 +6,7 @@
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/button-group?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/button-group)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/button-group?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/button-group)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Zjc3o94DWuBkT4ve3dny/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/button-group

diff --git a/packages/button/README.md b/packages/button/README.md
@@ -9,6 +9,7 @@ loudness for various attention-getting needs.
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/button)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/button)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Zjc3o94DWuBkT4ve3dny/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/button

diff --git a/packages/card/README.md b/packages/card/README.md
@@ -9,6 +9,7 @@ image/caption pairs.
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/card?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/card)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/card?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/card)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/gohijqRl7uBMp6qJZsp2/src/index.stories.js)
 
 ```
 yarn add @spectrum-web-components/card

diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md
@@ -10,6 +10,7 @@ instead of selecting.
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/checkbox?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/checkbox)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/checkbox?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/checkbox)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/jeIGAXHMUrTp6hGMquoD/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/checkbox

diff --git a/packages/coachmark/README.md b/packages/coachmark/README.md
@@ -6,6 +6,7 @@ An `<sp-coachmark>` element can be used to bring added attention to specific par
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/coachmark?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/coachmark)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/coachmark?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/coachmark)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Z611FV1zeF0CLBLVHNFY/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/coachmark

diff --git a/packages/color-area/README.md b/packages/color-area/README.md
@@ -6,6 +6,7 @@ An `<sp-color-area>` allows users to visually select two properties of a color s
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/color-area?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/color-area)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/color-area?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/color-area)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/crxLSSCXLFPpmUsM6GJQ/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/color-area

diff --git a/packages/color-handle/README.md b/packages/color-handle/README.md
@@ -6,6 +6,7 @@ The `<sp-color-handle>` is used to select a colour on an `<sp-color-area>`, `<sp
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/color-handle?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/color-handle)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/color-handle?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/color-handle)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/crxLSSCXLFPpmUsM6GJQ/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/color-handle

diff --git a/packages/color-loupe/README.md b/packages/color-loupe/README.md
@@ -6,6 +6,7 @@ An `<sp-color-loupe>` shows the output color that would otherwise be covered by
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/color-loupe?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/color-loupe)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/color-loupe?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/color-loupe)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/crxLSSCXLFPpmUsM6GJQ/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/color-loupe

diff --git a/packages/color-slider/README.md b/packages/color-slider/README.md
@@ -6,6 +6,7 @@ An `<sp-color-slider>` lets users visually change an individual channel of a col
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/color-slider?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/color-slider)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/color-slider?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/color-slider)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/kxW1VIhXBXVSOnyXhF9M/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/color-slider

diff --git a/packages/color-wheel/README.md b/packages/color-wheel/README.md
@@ -6,6 +6,7 @@ An `<sp-color-wheel>` lets users visually change an individual channel of a colo
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/color-wheel?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/color-wheel)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/color-wheel?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/color-wheel)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/m5lUgBAAejgIkESwRvEs/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/color-wheel

diff --git a/packages/dialog/README.md b/packages/dialog/README.md
@@ -6,6 +6,7 @@
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/dialog?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/dialog)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/dialog?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/dialog)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/RSDikStPmUPSioVpCsYb/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/dialog

diff --git a/packages/dialog/dialog-wrapper.md b/packages/dialog/dialog-wrapper.md
@@ -6,6 +6,7 @@
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/dialog?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/dialog)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/dialog?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/dialog)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/MLYDVWpWhNxJZDW3Ywqq/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/dialog

diff --git a/packages/divider/README.md b/packages/divider/README.md
@@ -6,6 +6,7 @@
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/divider?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/divider)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/divider?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/divider)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/jNHEeVQDhrcDMfbS9uZR/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/divider

diff --git a/packages/dropzone/README.md b/packages/dropzone/README.md
@@ -8,6 +8,7 @@ DropZones should be used with an IllustratedMessage component as a child if the
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/dropzone?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/dropzone)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/dropzone?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/dropzone)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/yoQJtdPFBCH1UG3Qsicc/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/dropzone

diff --git a/packages/field-label/README.md b/packages/field-label/README.md
@@ -6,6 +6,7 @@ An `<sp-field-label>` provides accessible labelling for form elements. Use the `
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/field-label?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/field-label)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/field-label?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/field-label)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/fDq5bpzNQJzUUyEq6ENR/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/field-label

diff --git a/packages/illustrated-message/README.md b/packages/illustrated-message/README.md
@@ -6,6 +6,7 @@ An `<sp-illustrated-message>` displays an illustration icon and a message, usual
 
 [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/illustrated-message?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/illustrated-message)
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/illustrated-message?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/illustrated-message)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/pUGMQGhJjaNs0KxKxTpU/src/index.ts)
 
 ```
 yarn add @spectrum-web-components/illustrated-message