mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
remove experimental pages
This commit is contained in:
Cory LaViska
@@ -1,44 +0,0 @@
|
||||
---
|
||||
title: Clamped Color Tokens
|
||||
layout: block
|
||||
---
|
||||
|
||||
{% set tints = ['max-50', 'max-60', 'max-70', 'min-50', 'min-60', 'min-70'] %}
|
||||
{% set hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] %}
|
||||
|
||||
<table class="colors">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="core-column">Core tint</th>
|
||||
{% for tint in tints -%}
|
||||
<th>{{ tint }}</th>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% for hue in hues -%}
|
||||
<tr class="wa-color-{{ hue }}">
|
||||
<th>{{ hue | capitalize }}</th>
|
||||
<td class="core-column">
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on); --key: var(--wa-color-{{ hue }}-key);">
|
||||
{{ palettes[paletteId][hue].maxChromaTint }}
|
||||
<wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{% for tint in tints -%}
|
||||
<td>
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
|
||||
<wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
<style>
|
||||
.core-column .color.swatch::before {
|
||||
counter-reset: key var(--key);
|
||||
content: counter(key);
|
||||
}
|
||||
</style>
|
||||
@@ -1,100 +0,0 @@
|
||||
---
|
||||
title: Default Layout and Spacing
|
||||
description: TODO
|
||||
layout: blank
|
||||
---
|
||||
|
||||
<style>
|
||||
[slot='banner'] {
|
||||
background-color: pink;
|
||||
}
|
||||
[slot='header'] {
|
||||
background-color: peachpuff;
|
||||
}
|
||||
[slot='subheader'] {
|
||||
background-color: papayawhip;
|
||||
}
|
||||
[slot='navigation-header'] {
|
||||
background-color: lemonchiffon;
|
||||
}
|
||||
[slot='navigation'] {
|
||||
background-color: honeydew;
|
||||
}
|
||||
[slot='navigation-footer'] {
|
||||
background-color: paleturquoise;
|
||||
}
|
||||
[slot='main-header'] {
|
||||
background-color: lavenderblush;
|
||||
}
|
||||
main {
|
||||
background-color: lavender;
|
||||
height: 100%;
|
||||
}
|
||||
[slot='main-footer'] {
|
||||
background-color: thistle;
|
||||
}
|
||||
[slot='aside'] {
|
||||
background-color: lightcyan;
|
||||
height: 100%;
|
||||
}
|
||||
[slot='footer'] {
|
||||
background-color: lightsteelblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<wa-page>
|
||||
<section slot="banner">
|
||||
<strong>Banner</strong>
|
||||
<span>Banner</span>
|
||||
<span>Banner</span>
|
||||
</section>
|
||||
<header slot="header">
|
||||
<strong>Header</strong>
|
||||
<span>Header</span>
|
||||
<span>Header</span>
|
||||
</header>
|
||||
<nav slot="subheader">
|
||||
<strong>Subheader</strong>
|
||||
<span>Subheader</span>
|
||||
<span>Subheader</span>
|
||||
</nav>
|
||||
<nav slot="navigation-header">
|
||||
<strong>Nav Header</strong>
|
||||
<span>Nav Header</span>
|
||||
<span>Nav Header</span>
|
||||
</nav>
|
||||
<nav slot="navigation">
|
||||
<strong>Navigation</strong>
|
||||
<span>Navigation</span>
|
||||
<span>Navigation</span>
|
||||
</nav>
|
||||
<nav slot="navigation-footer">
|
||||
<strong>Nav Footer</strong>
|
||||
<span>Nav Footer</span>
|
||||
<span>Nav Footer</span>
|
||||
</nav>
|
||||
<div slot="main-header">
|
||||
<strong>Main Header</strong>
|
||||
<span>Main Header</span>
|
||||
<span>Main Header</span>
|
||||
</div>
|
||||
<main>
|
||||
<h1>Main</h1>
|
||||
<p>No flex properties here! The author can specify their own preferred content flow and layout in the default slot.</p>
|
||||
</main>
|
||||
<div slot="main-footer">
|
||||
<strong>Main Footer</strong>
|
||||
<span>Main Footer</span>
|
||||
<span>Main Footer</span>
|
||||
</div>
|
||||
<aside slot="aside">
|
||||
<strong>Aside</strong>
|
||||
<span>Aside</span>
|
||||
<span>Aside</span>
|
||||
</aside>
|
||||
<footer slot="footer">
|
||||
<strong>Footer</strong>
|
||||
<span>Footer</span>
|
||||
<span>Footer</span>
|
||||
</footer>
|
||||
</wa-page>
|
||||
@@ -1,50 +0,0 @@
|
||||
---
|
||||
title: Form Control Validation
|
||||
description: TODO
|
||||
layout: page
|
||||
---
|
||||
|
||||
Adding the `wa-valid` or `wa-invalid` class to a form control will change its appearance. This is useful for applying validation styles to server-rendered form controls.
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
|
||||
<div>
|
||||
<h3>Valid</h3>
|
||||
<wa-input class="wa-valid" label="Name" hint="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
|
||||
<wa-select class="wa-valid" label="Choose one" hint="Make a choice already">
|
||||
<wa-option>There can be only one!</wa-option>
|
||||
<wa-option>Well, maybe two is OK</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea class="wa-valid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
|
||||
<wa-slider class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
|
||||
<wa-checkbox class="wa-valid" checked>I am awesome</wa-checkbox><br>
|
||||
<wa-checkbox class="wa-valid">So am I</wa-checkbox><br><br>
|
||||
<wa-switch class="wa-valid" checked>Still awesome</wa-switch><br>
|
||||
<wa-switch class="wa-valid">More awesome</wa-switch><br><br>
|
||||
<wa-radio-group class="wa-valid" label="Select an option" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group><br>
|
||||
<wa-button variant="brand">Submit Form</wa-button>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Invalid</h3>
|
||||
<wa-input class="wa-invalid" label="Name" hint="Just a first name is fine" placeholder="Enter your name"></wa-input><br>
|
||||
<wa-select class="wa-invalid" label="Choose one" hint="Make a choice already">
|
||||
<wa-option>There can be only one!</wa-option>
|
||||
<wa-option>Well, maybe two is OK</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea class="wa-invalid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
|
||||
<wa-slider class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
|
||||
<wa-checkbox class="wa-invalid" checked>I am awesome</wa-checkbox><br>
|
||||
<wa-checkbox class="wa-invalid">So am I</wa-checkbox><br><br>
|
||||
<wa-switch class="wa-invalid" checked>Still awesome</wa-switch><br>
|
||||
<wa-switch class="wa-invalid">More awesome</wa-switch><br><br>
|
||||
<wa-radio-group class="wa-invalid" label="Select an option" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group><br>
|
||||
<wa-button variant="brand">Submit Form</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,84 +0,0 @@
|
||||
---
|
||||
title: Inheritance & Default value tests
|
||||
wide: true
|
||||
---
|
||||
|
||||
## Variant
|
||||
|
||||
{%- set variantDefaults = {
|
||||
button: 'neutral',
|
||||
tag: 'neutral',
|
||||
badge: 'brand',
|
||||
callout: 'brand'
|
||||
} %}
|
||||
{%- set variants = ['', 'neutral', 'brand'] %}
|
||||
|
||||
### Defaults
|
||||
|
||||
```html {.example}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Default</th>
|
||||
<th>Neutral</th>
|
||||
<th>Brand</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% for element, default in variantDefaults %}
|
||||
<tr>
|
||||
<th>{{ element | capitalize }}</th>
|
||||
<td><wa-{{ element }}>{{ default | capitalize }}</wa-{{ element }}></td>
|
||||
<td><wa-{{ element }} variant="neutral">Neutral</wa-{{ element }}></td>
|
||||
<td><wa-{{ element }} variant="brand">Brand</wa-{{ element }}></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
```
|
||||
|
||||
### Nested elements
|
||||
|
||||
{% set containers = [
|
||||
{parent: 'callout', child: 'button'},
|
||||
{parent: 'callout', child: 'callout'},
|
||||
{parent: 'button', child: 'badge'}
|
||||
] %}
|
||||
|
||||
{% for container in containers %}
|
||||
{% set parent = container.parent %}
|
||||
{% set child = container.child %}
|
||||
|
||||
#### {{ child | capitalize }} in {{ parent | capitalize }}
|
||||
|
||||
```html {.example}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{% if parent == child -%}
|
||||
<th>👇 Parent / Child 👉</th>
|
||||
{% else %}
|
||||
<th>👇 {{ parent | capitalize }} / {{ child | capitalize }} 👉</th>
|
||||
{%- endif %}
|
||||
<th>Default</th>
|
||||
<th>Neutral</th>
|
||||
<th>Brand</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% for parentVariant in variants %}
|
||||
{% set parentContent = (parentVariant | capitalize or 'Default') if parent == 'button' %}
|
||||
|
||||
<tr>
|
||||
<th>{{ parentVariant | capitalize or 'Default' }}</th>
|
||||
{% for childVariant in variants -%}
|
||||
{% set childContent = (childVariant or parentVariant or variantDefaults[child]) | capitalize %}
|
||||
{% set childContent = childContent[0] if child == 'badge' else childContent %}
|
||||
<td><wa-{{ parent }}{{ parentVariant | attr('variant') }}>
|
||||
{{ parentContent }}
|
||||
<wa-{{ child }}{{ childVariant | attr('variant') }}>{{ childContent }}</wa-{{ child }}>
|
||||
</wa-{{ parent }}></td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
```
|
||||
{% endfor %}
|
||||
@@ -1,78 +0,0 @@
|
||||
---
|
||||
title: Size tests
|
||||
---
|
||||
|
||||
Button size should default to `medium`:
|
||||
|
||||
```html {.example}
|
||||
<wa-button size="small">Small</wa-button>
|
||||
<wa-button>Medium</wa-button>
|
||||
<wa-button size="medium">Medium</wa-button>
|
||||
<wa-button size="large">Large</wa-button>
|
||||
```
|
||||
|
||||
If no button size is specified, it should default to that of its ancestor:
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group size="small">
|
||||
<wa-button>Small 1</wa-button>
|
||||
<wa-button>Small 2</wa-button>
|
||||
<wa-button>Small 3</wa-button>
|
||||
</wa-button-group>
|
||||
<br /><br />
|
||||
<wa-button-group>
|
||||
<wa-button>Medium 1</wa-button>
|
||||
<wa-button>Medium 2</wa-button>
|
||||
<wa-button>Medium 3</wa-button>
|
||||
</wa-button-group>
|
||||
<br /><br />
|
||||
<wa-button-group size="large">
|
||||
<wa-button>Large 1</wa-button>
|
||||
<wa-button>Large 2</wa-button>
|
||||
<wa-button>Large 3</wa-button>
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
Dropdown:
|
||||
|
||||
```html {.example}
|
||||
<p>
|
||||
Small dropdown:
|
||||
<wa-dropdown size="small">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-dropdown-item>Dropdown Item 1</wa-dropdown-item>
|
||||
<wa-dropdown-item>Dropdown Item 2</wa-dropdown-item>
|
||||
<wa-dropdown-item>Dropdown Item 3</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Small menu:
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-dropdown-item size="small">Dropdown Item 1</wa-dropdown-item>
|
||||
<wa-dropdown-item size="small">Dropdown Item 2</wa-dropdown-item>
|
||||
<wa-dropdown-item size="small">Dropdown Item 3</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Small menu item:
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-dropdown-item size="small">Dropdown Item 1</wa-dropdown-item>
|
||||
<wa-dropdown-item size="small">Dropdown Item 2</wa-dropdown-item>
|
||||
<wa-dropdown-item size="small">Dropdown Item 3</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
No size:
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-dropdown-item>Dropdown Item 1</wa-dropdown-item>
|
||||
<wa-dropdown-item>Dropdown Item 2</wa-dropdown-item>
|
||||
<wa-dropdown-item>Dropdown Item 3</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
</p>
|
||||
```
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user