chore: make broken demos work again

ing-bank · Aug 8, 2024 · 95b7460 · 95b7460
1 parent e6f2e59
commit 95b7460
Show file tree

Hide file tree

Showing 53 changed files with 469 additions and 469 deletions.
diff --git a/docs/components/button/use-cases.md b/docs/components/button/use-cases.md
@@ -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>

diff --git a/docs/components/calendar/use-cases.md b/docs/components/calendar/use-cases.md
@@ -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>
 `;
 ```
 
@@ -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>
 `;
 ```
@@ -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>
@@ -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

diff --git a/docs/components/checkbox-group/overview.md b/docs/components/checkbox-group/overview.md
@@ -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>
 ```
 

diff --git a/docs/components/checkbox-group/use-cases.md b/docs/components/checkbox-group/use-cases.md
@@ -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>
 ```
 
@@ -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>
 ```
 
@@ -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>
 ```
 
@@ -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
     >
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>

diff --git a/docs/components/collapsible/use-cases.md b/docs/components/collapsible/use-cases.md
@@ -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>

diff --git a/docs/components/combobox/extensions.md b/docs/components/combobox/extensions.md
@@ -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>
 `;
 ```
@@ -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>
 `;
 ```
@@ -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>
   `;
@@ -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>