Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: make broken demos work again #2329

Merged
merged 1 commit into from
Aug 8, 2024
Merged

chore: make broken demos work again #2329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/components/button/use-cases.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,10 @@ export const withinForm = () => html`
<input id="firstNameId" name="firstName" />
<label for="lastNameId">Last name</label>
<input id="lastNameId" name="lastName" />
<lion-button-submit @click=${ev => console.log('click submit handler', ev.target)}
<lion-button-submit @click="${ev => console.log('click submit handler', ev.target)}"
>Submit</lion-button-submit
>
<lion-button-reset @click=${ev => console.log('click reset handler', ev.target)}
<lion-button-reset @click="${ev => console.log('click reset handler', ev.target)}"
>Reset</lion-button-reset
>
</form>
Expand Down
8 changes: 4 additions & 4 deletions docs/components/calendar/use-cases.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const selectedDate = () => html`
max-width: 500px;
}
</style>
<lion-calendar class="demo-calendar" .selectedDate=${new Date(1988, 2, 5)}></lion-calendar>
<lion-calendar class="demo-calendar" .selectedDate="${new Date(1988, 2, 5)}"></lion-calendar>
`;
```

Expand Down Expand Up @@ -160,7 +160,7 @@ export const disabledDates = () => html`
</style>
<lion-calendar
class="demo-calendar"
.disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
.disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
></lion-calendar>
`;
```
Expand All @@ -183,7 +183,7 @@ export const combinedDisabledDates = () => {
</style>
<lion-calendar
class="demo-calendar"
.disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
.disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
.minDate="${new Date()}"
.maxDate="${maxDate}"
></lion-calendar>
Expand Down Expand Up @@ -215,7 +215,7 @@ export const findingEnabledDates = () => {
</style>
<lion-calendar
class="demo-calendar js-calendar"
.disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
.disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
></lion-calendar>
<button @click="${ev => getCalendar(ev).focusDate(getCalendar(ev).findNextEnabledDate())}">
focus findNextEnabledDate
Expand Down
6 changes: 3 additions & 3 deletions docs/components/checkbox-group/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import '@lion/ui/define/lion-checkbox.js';

```html preview-story
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
<lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group>
```

Expand Down
66 changes: 33 additions & 33 deletions docs/components/checkbox-group/use-cases.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ Our recommendation would be to set the `name` attribute only on the `lion-checkb
name="scientists[]"
label="Favorite scientists"
>
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
<lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group>
```

Expand All @@ -47,9 +47,9 @@ You can pre-select options by targeting the `modelValue` object of the option an

```html preview-story
<lion-checkbox-group name="scientists" label="Favorite scientists">
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'} checked></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
<lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}" checked></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group>
```

Expand All @@ -59,9 +59,9 @@ You can disable the entire group by setting the `disabled` attribute on the `<li

```html preview-story
<lion-checkbox-group name="scientists[]" label="Favorite scientists" disabled>
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
<lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group>
```

Expand All @@ -71,17 +71,17 @@ You can use `slot="label"` instead of the `label` attribute for defining more co

```html preview-story
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox .choiceValue=${'Archimedes'}>
<lion-checkbox .choiceValue="${'Archimedes'}">
<label slot="label"
><a href="https://wikipedia.org/wiki/Archimedes" target="_blank">Archimedes</a></label
>
</lion-checkbox>
<lion-checkbox .choiceValue=${'Francis Bacon'}>
<lion-checkbox .choiceValue="${'Francis Bacon'}">
<label slot="label"
><a href="https://wikipedia.org/wiki/Francis_Bacon" target="_blank">Francis Bacon</a></label
>
</lion-checkbox>
<lion-checkbox .choiceValue=${'Marie Curie'}>
<lion-checkbox .choiceValue="${'Marie Curie'}">
<label slot="label"
><a href="https://wikipedia.org/wiki/Marie_Curie" target="_blank">Marie Curie</a></label
>
Expand All @@ -97,17 +97,17 @@ You can add help text on each checkbox with `help-text` attribute on the `<lion-
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox
label="Archimedes"
.choiceValue=${'Archimedes'}
.choiceValue="${'Archimedes'}"
help-text="Archimedes of Syracuse was a Greek mathematician, physicist, engineer, inventor, and astronomer"
></lion-checkbox>
<lion-checkbox
label="Francis Bacon"
.choiceValue=${'Francis Bacon'}
.choiceValue="${'Francis Bacon'}"
help-text="Francis Bacon, 1st Viscount St Alban also known as Lord Verulam, was an English philosopher and statesman who served as Attorney General and as Lord Chancellor of England"
></lion-checkbox>
<lion-checkbox
label="Marie Curie"
.choiceValue=${'Marie Curie'}
.choiceValue="${'Marie Curie'}"
help-text="Marie Skłodowska Curie born Maria Salomea Skłodowska, was a Polish and naturalized-French physicist and chemist who conducted pioneering research on radioactivity"
></lion-checkbox>
</lion-checkbox-group>
Expand All @@ -129,9 +129,9 @@ export const event = ({ shadowRoot }) => html`
4,
))}
>
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
<lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
</lion-checkbox-group>
<br />
<span>Selected scientists: <strong id="selectedDinosaur">N/A</strong></span>
Expand All @@ -147,22 +147,22 @@ A `checkbox-indeterminate`'s value is neither true nor false, but is instead ind
<lion-checkbox-indeterminate label="Old Greek scientists">
<lion-checkbox
label="Archimedes"
.choiceValue=${'Archimedes'}
.choiceValue="${'Archimedes'}"
></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
<lion-checkbox
label="Pythagoras"
.choiceValue=${'Pythagoras'}
.choiceValue="${'Pythagoras'}"
></lion-checkbox>
</lion-checkbox-indeterminate>
<lion-checkbox-indeterminate label="17th Century scientists">
<lion-checkbox
label="Isaac Newton"
.choiceValue=${'Isaac Newton'}
.choiceValue="${'Isaac Newton'}"
></lion-checkbox>
<lion-checkbox
label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'}
.choiceValue="${'Galileo Galilei'}"
></lion-checkbox>
</lion-checkbox-indeterminate>
</lion-checkbox-group>
Expand All @@ -175,21 +175,21 @@ The `checkbox-indeterminate` can have another `checkbox-indeterminate` as a chil
<lion-checkbox-indeterminate label="Scientists">
<lion-checkbox
label="Isaac Newton"
.choiceValue=${'Isaac Newton'}
.choiceValue="${'Isaac Newton'}"
></lion-checkbox>
<lion-checkbox
label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'}
.choiceValue="${'Galileo Galilei'}"
></lion-checkbox>
<lion-checkbox-indeterminate label="Old Greek scientists">
<lion-checkbox
label="Archimedes"
.choiceValue=${'Archimedes'}
.choiceValue="${'Archimedes'}"
></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
<lion-checkbox
label="Pythagoras"
.choiceValue=${'Pythagoras'}
.choiceValue="${'Pythagoras'}"
></lion-checkbox>
</lion-checkbox-indeterminate>
</lion-checkbox-indeterminate>
Expand All @@ -203,21 +203,21 @@ You can also use `mixed-state` attribute so your indeterminate checkbox toggles
<lion-checkbox-indeterminate mixed-state label="Scientists">
<lion-checkbox
label="Isaac Newton"
.choiceValue=${'Isaac Newton'}
.choiceValue="${'Isaac Newton'}"
></lion-checkbox>
<lion-checkbox
label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'}
.choiceValue="${'Galileo Galilei'}"
></lion-checkbox>
<lion-checkbox-indeterminate mixed-state label="Old Greek scientists">
<lion-checkbox
label="Archimedes"
.choiceValue=${'Archimedes'}
.choiceValue="${'Archimedes'}"
></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
<lion-checkbox label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
<lion-checkbox
label="Pythagoras"
.choiceValue=${'Pythagoras'}
.choiceValue="${'Pythagoras'}"
></lion-checkbox>
</lion-checkbox-indeterminate>
</lion-checkbox-indeterminate>
Expand Down
6 changes: 3 additions & 3 deletions docs/components/collapsible/use-cases.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,13 @@ export const methods = ({ shadowRoot }) => html`
</div>
</lion-collapsible>
<section style="margin-top:16px">
<button @click=${() => shadowRoot.querySelector('#car-collapsible').toggle()}>
<button @click="${() => shadowRoot.querySelector('#car-collapsible').toggle()}">
Toggle content
</button>
<button @click=${() => shadowRoot.querySelector('#car-collapsible').show()}>
<button @click="${() => shadowRoot.querySelector('#car-collapsible').show()}">
Show content
</button>
<button @click=${() => shadowRoot.querySelector('#car-collapsible').hide()}>
<button @click="${() => shadowRoot.querySelector('#car-collapsible').hide()}">
Hide content
</button>
</section>
Expand Down
40 changes: 20 additions & 20 deletions docs/components/combobox/extensions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ easily from an extended Lion component, just by:
```js preview-story
export const MaterialDesign = () => html`
<md-combobox name="combo" label="Default">
<md-option .choiceValue=${'Apple'}>Apple</md-option>
<md-option .choiceValue=${'Artichoke'}>Artichoke</md-option>
<md-option .choiceValue=${'Asparagus'}>Asparagus</md-option>
<md-option .choiceValue=${'Banana'}>Banana</md-option>
<md-option .choiceValue=${'Beets'}>Beets</md-option>
<md-option .choiceValue="${'Apple'}">Apple</md-option>
<md-option .choiceValue="${'Artichoke'}">Artichoke</md-option>
<md-option .choiceValue="${'Asparagus'}">Asparagus</md-option>
<md-option .choiceValue="${'Banana'}">Banana</md-option>
<md-option .choiceValue="${'Beets'}">Beets</md-option>
</md-combobox>
`;
```
Expand All @@ -34,11 +34,11 @@ export const MaterialDesign = () => html`
```js preview-story
export const Github = () => html`
<gh-combobox name="combo" label="Switch branches/tags">
<gh-option href="https://www.github.com" .choiceValue=${'master'} default>master</gh-option>
<gh-option .choiceValue=${'develop'}>develop</gh-option>
<gh-option .choiceValue=${'release'}>release</gh-option>
<gh-option .choiceValue=${'feat/abc'}>feat/abc</gh-option>
<gh-option .choiceValue=${'feat/xyz123'}>feat/xyz123</gh-option>
<gh-option href="https://www.github.com" .choiceValue="${'master'}" default>master</gh-option>
<gh-option .choiceValue="${'develop'}">develop</gh-option>
<gh-option .choiceValue="${'release'}">release</gh-option>
<gh-option .choiceValue="${'feat/abc'}">feat/abc</gh-option>
<gh-option .choiceValue="${'feat/xyz123'}">feat/xyz123</gh-option>
</gh-combobox>
`;
```
Expand All @@ -62,36 +62,36 @@ export const Whatsapp = () => {
is-user-text
is-user-text-read
image="${obamaImgUrl}"
.choiceValue=${'Barack Obama'}
.choiceValue="${'Barack Obama'}"
></wa-option>
<wa-option
title="Donald Trump"
text="Take care!"
time="14:59"
is-user-text
image="${trumpImgUrl}"
.choiceValue=${'Donald Trump'}
.choiceValue="${'Donald Trump'}"
></wa-option>
<wa-option
title="Joe Biden"
text="Hehe😅. You too, man, you too..."
time="yesterday"
image="${bidenImgUrl}"
.choiceValue=${'Joe Biden'}
.choiceValue="${'Joe Biden'}"
></wa-option>
<wa-option
title="George W. Bush"
time="friday"
text="You bet I will. Let's catch up soon!"
image="${bushImgUrl}"
.choiceValue=${'George W. Bush'}
.choiceValue="${'George W. Bush'}"
></wa-option>
<wa-option
title="Bill Clinton"
time="thursday"
text="Dude...😂 😂 😂"
image="${clintonImgUrl}"
.choiceValue=${'Bill Clinton'}
.choiceValue="${'Bill Clinton'}"
></wa-option>
</wa-combobox>
`;
Expand All @@ -114,35 +114,35 @@ export const GoogleSearch = () => {
href="https://www.google.com/search?query=apple"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Apple'}
.choiceValue="${'Apple'}"
>Apple</google-option
>
<google-option
href="https://www.google.com/search?query=Artichoke"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Artichoke'}
.choiceValue="${'Artichoke'}"
>Artichoke</google-option
>
<google-option
href="https://www.google.com/search?query=Asparagus"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Asparagus'}
.choiceValue="${'Asparagus'}"
>Asparagus</google-option
>
<google-option
href="https://www.google.com/search?query=Banana"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Banana'}
.choiceValue="${'Banana'}"
>Banana</google-option
>
<google-option
href="https://www.google.com/search?query=Beets"
target="_blank"
rel="noopener noreferrer"
.choiceValue=${'Beets'}
.choiceValue="${'Beets'}"
>Beets</google-option
>
</google-combobox>
Expand Down
Loading