@ebay/skin 18.1.0 → 18.2.0

package/src/modules/flag.marko

@@ -0,0 +1,46 @@
+import {flags} from '../routes/modules.marko';
+<div id="flag">
+  <section-header metadata=input.metadata name=input.name/>
+
+  <p>The flag module is a bundle that provides full access to all the country flags via the <span
+      class="highlight">&lt;svg&gt;</span> and <span class="highlight">&lt;use&gt;</span> tags.</p>
+
+  <div class="demo">
+    <div class="demo__inner">
+      <svg class="flag flag--us" height="48" width="64">
+        <icon-symbol file="flags" prefix="flag" name="us" />
+      </svg>
+    </div>
+  </div>
+
+  <highlight-code type="html" >
+  <svg class="flag flag--us" height="48" width="64">
+    <use href="#flag-us"></use>
+  </svg>
+  </highlight-code>
+
+  <h3>Including an Flag</h3>
+  <p>A flag can be referenced from the <a
+      href="https://raw.githubusercontent.com/eBay/skin/master/src/svg/flags.svg">flags svg</a> file. We also provide
+    individual flags as SVGs located in this <a
+      href="https://github.com/eBay/skin/tree/master/src/svg/flag">directory</a>. You can include these on your page as
+    raw SVGs as needed.</p>
+
+  <highlight-code type="html" >
+  <div hidden>
+    <svg class="flag flag--us" height="48" width="64">
+      <use href="#flag-us"></use>
+    </svg>
+  </div>
+  </highlight-code>
+  <p><strong>NOTE:</strong> the SVG tag does not support the <span class="highlight">hidden</span> attribute, hence a
+    hidden wrapper element is needed.</p>
+
+  <flag-list flag=flags/>
+</div>
+export const metadata = {
+            "ds-component": {
+                "version": 1
+            }
+
+};

package/src/modules/floating-label.marko

@@ -0,0 +1,492 @@
+<div id="floating-label">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <p>Floating labels appear to sit <em>inside</em> the textbox when it has no value or focus, and sit <em>above</em> the textbox otherwise.</p>
+
+    <h3>Floating Label with no Value</h3>
+    <p>If the textbox has no value, the label can be positioned inside the textbox.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="floating-label">
+                <label class="floating-label__label" for="first-name-1">First Name</label>
+                <span class="textbox">
+                    <input class="textbox__control" id="first-name-1" type="text" />
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="floating-label">
+    <label class="floating-label__label" for="first-name">First Name</label>
+    <span class="textbox">
+        <input class="textbox__control" id="first-name" type="text" />
+    </span>
+</span>
+    </highlight-code>
+
+    <h3>Floating Label with Value</h3>
+    <p>If the textbox has a value, the label must be positioned above the textbox.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="floating-label">
+                <label class="floating-label__label" for="last-name-1">Last Name</label>
+                <span class="textbox">
+                    <input class="textbox__control" id="last-name-1" type="text" value="Smith" />
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="floating-label">
+    <label class="floating-label__label" for="last-name">Last Name</label>
+    <span class="textbox">
+        <input class="textbox__control" id="last-name" type="text" value="Smith" />
+    </span>
+</span>
+    </highlight-code>
+
+    <h3>Large floating label</h3>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="floating-label floating-label--large">
+                <label class="floating-label__label" for="dob-1">Date Of Birth</label>
+                <span class="textbox textbox--large">
+                    <input class="textbox__control" id="dob-1" type="text"/>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="floating-label floating-label--large">
+    <label class="floating-label__label" for="dob">Date Of Birth</label>
+    <span class="textbox">
+        <input class="textbox__control" id="dob" type="text" />
+    </span>
+</span>
+    </highlight-code>
+
+    <h3>Floating Label with Disabled Textbox</h3>
+    <p>Use the <span class="highlight">disabled</span> property &amp; <span class="highlight">floating-label__label--disabled</span> modifier on the input element and the label element respectively to disable the input.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="floating-label">
+                <label class="floating-label__label floating-label__label--disabled" for="first-name-2">First Name</label>
+                <span class="textbox textbox--disabled">
+                    <input class="textbox__control" id="first-name-2" type="text" disabled />
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--disabled" for="first-name">First Name</label>
+    <span class="textbox textbox--disabled">
+        <input class="textbox__control" id="first-name" type="text" disabled />
+    </span>
+</span>
+    </highlight-code>
+
+    <h3>Floating Label with Placeholder</h3>
+    <p>The placeholder should only be shown when the textbox is focused and there is no text</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="floating-label">
+                <label class="floating-label__label" for="first-name-3">First Name</label>
+                <span class="textbox">
+                    <input class="textbox__control" id="first-name-3" type="text" placeholder="No spaces or numbers allowed" />
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="floating-label">
+    <label class="floating-label__label" for="first-name">First Name</label>
+    <span class="textbox">
+        <input class="textbox__control" id="first-name" type="text" placeholder="No spaces or numbers allowed"/>
+    </span>
+</span>
+    </highlight-code>
+
+    <h3>Floating Label with Invalid Textbox</h3>
+    <p>Set the <span class="highlight">aria-invalid</span> property to <span class="highlight">true</span> and add <span class="highlight">floating-label__label--invalid</span> to the label to semantically and visually highlight the invalid state.</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="floating-label">
+                <label class="floating-label__label" for="first-name-4">First Name</label>
+                <span class="textbox textbox--invalid">
+                    <input class="textbox__control" id="first-name-4" type="text" aria-invalid="true" />
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="floating-label">
+    <label class="floating-label__label floating-label__label--invalid" for="first-name">First Name</label>
+    <span class="textbox textbox--invalid">
+        <input class="textbox__control" id="first-name" type="text" aria-invalid="true" />
+    </span>
+</span>
+    </highlight-code>
+
+    <h3 id="floating-label-textarea">Floating Label with Textarea</h3>
+    <p>Use the textarea tag for a multi-line textbox.</p>
+    <p>A multi-line textbox allows line breaks and has a minimum height of 200px.</p>
+    <p>In order to prevent overlap for floating label, use <span class="highlight">.floating-label--opaque</span> class</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="floating-label floating-label--opaque">
+                <label class="floating-label__label" for="first-name">Enter list of users</label>
+                <span class="textbox">
+                    <textarea aria-label="Textbox demo" class="textbox__control"></textarea>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="floating-label floating-label--opaque">
+    <label class="floating-label__label" for="first-name">Enter list of users</label>
+    <span class="textbox">
+        <textarea aria-label="Textbox demo" class="textbox__control"></textarea>
+    </span>
+</span>
+    </highlight-code>
+
+    <h3 id="floating-label-combobox">Floating label with Combobox</h3>
+    <p>Use the textarea tag for a multi-line textbox.</p>
+    <p>A multi-line textbox allows line breaks and has a minimum height of 200px.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <form action="index.html">
+                <span class="combobox floating-label">
+                    <label class="floating-label__label" for="first-name">Enter list of users</label>
+                    <span class="combobox__control">
+                        <input name="combobox-default" role="combobox" type="text" aria-haspopup="listbox"
+                            aria-label="Combobox demo" aria-owns="listbox1" />
+                        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                            <icon-symbol name="chevron-down-12" />
+                        </svg>
+                    </span>
+                    <div class="combobox__listbox">
+                        <div id="listbox1" class="combobox__options" role="listbox">
+                            <div class="combobox__option" role="option">
+                                <span>Option 1</span>
+                            </div>
+                            <div class="combobox__option" role="option">
+                                <span>Option 2</span>
+                            </div>
+                            <div class="combobox__option" role="option">
+                                <span>Option 3</span>
+                            </div>
+                        </div>
+                    </div>
+                </span>
+            </form>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="combobox floating-label">
+    <label class="floating-label__label" for="first-name">Enter list of users</label>
+    <span class="combobox__control">
+        <input name="combobox-default" id="first-name" role="combobox" type="text" aria-haspopup="listbox" aria-label="Combobox demo" aria-owns="listbox1" />
+        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
+        </svg>
+    </span>
+    <div class="combobox__listbox">
+        <div id="listbox1" class="combobox__options" role="listbox">
+            <div class="combobox__option" role="option">
+                <span>Option 1</span>
+            </div>
+            <div class="combobox__option" role="option">
+                <span>Option 2</span>
+            </div>
+            <div class="combobox__option" role="option">
+                <span>Option 3</span>
+            </div>
+        </div>
+    </div>
+</span>
+    </highlight-code>
+
+    <h3>Floating Label with long text</h3>
+    <p>This example shows how the floating label will truncate with long text</p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="floating-label">
+                <label class="floating-label__label" for="stop-name-1">Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</label>
+                <span class="textbox">
+                    <input class="textbox__control" id="stop-name-1" type="text" />
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="floating-label">
+    <label class="floating-label__label" for="first-name">Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</label>
+    <span class="textbox">
+        <input class="textbox__control" id="first-name" type="text" />
+    </span>
+</span>
+    </highlight-code>
+
+    <h3>Floating Label with select</h3>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="floating-label">
+                <label class="floating-label__label">Select Option</label>
+                <span class="select">
+                    <select aria-label="Select demo" name="options">
+                        <option value="">Choose an option</option>
+                        <option value="item1">Pick Option 1 (default)</option>
+                        <option value="item2">Pick Option 2</option>
+                        <option value="item3">Pick Option 3</option>
+                    </select>
+                    <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                        <icon-symbol name="chevron-down-12" />
+                    </svg>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="floating-label">
+    <label class="floating-label__label">Select Option</label>
+    <span class="select">
+        <select name="options">
+            <option value="">Choose an option</option>
+            <option value="item1">Pick Option 1 (default)</option>
+            <option value="item2">Pick Option 2</option>
+            <option value="item3">Pick Option 3</option>
+        </select>
+        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
+        </svg>
+    </span>
+</span>
+    </highlight-code>
+
+    <h3>Floating Label with large select</h3>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="floating-label floating-label--large">
+
+                <label class="floating-label__label floating-label__label">Select Option</label>
+                <span class="select select--large ">
+                    <select aria-label="Select demo" name="options">
+                        <option value="">Choose an option</option>
+                        <option value="item1">Pick Option 1 (default)</option>
+                        <option value="item2">Pick Option 2</option>
+                        <option value="item3">Pick Option 3</option>
+                    </select>
+                    <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+                        <icon-symbol name="chevron-down-12" />
+                    </svg>
+                </span>
+            </span>
+        </div>
+    </div>
+
+    <highlight-code type="html" >
+<span class="floating-label floating-label--large">
+    <label class="floating-label__label">Select Option</label>
+    <span class="select select--large">
+        <select name="options">
+            <option value="">Choose an option</option>
+            <option value="item1">Pick Option 1</option>
+            <option value="item2">Pick Option 2</option>
+            <option value="item3">Pick Option 3</option>
+        </select>
+        <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
+            <use href="#icon-chevron-down-12"></use>
+        </svg>
+    </span>
+</span>
+    </highlight-code>
+
+    <h3>Floating Label with Phone input</h3>
+    <p>For phone input, the label always remains in floating state above the input. This state ensures that the label does not obscure the phone number.</p>
+    <div class="demo">
+      <div class="demo__inner">
+        <span class="phone-input">
+          <span class="listbox-button listbox-button--form">
+            <button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
+              data-listbox-button-prefix="Country: " aria-label="Country: United States of America (+1)">
+              <span class="btn__cell">
+                <span class="btn__text">
+                  <svg class="flag flag--us" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="1">
+                    <use href="#flag-us"></use>
+                  </svg>
+                </span>
+                <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
+                  <use href="#icon-chevron-down-12"></use>
+                </svg>
+              </span>
+            </button>
+            <div class="listbox-button__listbox">
+              <div class="listbox-button__options" role="listbox">
+                <div class="listbox-button__option" role="option">
+                  <span class="listbox-button__value">
+                    <svg class="flag flag--al" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="355">
+                      <use href="#flag-al"></use>
+                    </svg>
+                    <span>Albania</span>
+                    <span>(+355)</span>
+                  </span>
+                  <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
+                  </svg>
+                </div>
+                <div class="listbox-button__option" role="option">
+                  <span class="listbox-button__value">
+                    <svg class="flag flag--in" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="91">
+                      <use href="#flag-in"></use>
+                    </svg>
+                    <span>India</span>
+                    <span>(+91)</span>
+                  </span>
+                  <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
+                  </svg>
+                </div>
+                <div class="listbox-button__option" role="option">
+                  <span class="listbox-button__value">
+                    <svg class="flag flag--sh" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="290">
+                      <use href="#flag-sh"></use>
+                    </svg>
+                    <span>Saint Helena, Ascension and Tristan da Cunha</span>
+                    <span>(+290)</span>
+                  </span>
+                  <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
+                  </svg>
+                </div>
+                <div class="listbox-button__option" role="option">
+                  <span class="listbox-button__value">
+                    <svg class="flag flag--gb" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="44">
+                      <use href="#flag-gb"></use>
+                    </svg>
+                    <span>United Kingdom</span>
+                    <span>(+44)</span>
+                  </span>
+                  <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
+                  </svg>
+                </div>
+                <div class="listbox-button__option" role="option" aria-selected="true">
+                  <span class="listbox-button__value">
+                    <svg class="flag flag--us" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="1">
+                      <use href="#flag-us"></use>
+                    </svg>
+                    <span>United States of America</span>
+                    <span>(+1)</span>
+                  </span>
+                  <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </span>
+          <span class="field floating-label">
+            <label class="floating-label__label" for="field1"><span class="clipped">Area code + </span>Phone
+              Number</label>
+              <span class="textbox">
+                <span id="floating-phone-prefix-0">+1</span>
+                <input class="textbox__control" type="tel" aria-label="area code + phone number"
+                  autocomplete="tel-national" aria-describedby="floating-phone-prefix-0"/>
+              </span>
+          </span>
+        </span>
+      </div>
+    </div>
+    <highlight-code type="html" >
+    <span class="phone-input">
+        <span class="listbox-button listbox-button--form">
+          <button class="btn btn--form btn--split-start" aria-expanded="false" aria-haspopup="listbox" type="button"
+            data-listbox-button-prefix="Country: ">
+            <span class="btn__cell">
+              <span class="btn__text">
+                <svg class="flag flag--us" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="1">
+                  <use href="#flag-us"></use>
+                </svg>
+              </span>
+              <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+              </svg>
+            </span>
+          </button>
+          <div class="listbox-button__listbox">
+            <div class="listbox-button__options" role="listbox">
+              <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">
+                  <svg class="flag flag--al" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="355">
+                    <use href="#flag-al"></use>
+                  </svg>
+                  <span>Albania</span>
+                  <span>(+355)</span>
+                </span>
+                <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+                  <use href="#icon-tick-16"></use>
+                </svg>
+              </div>
+              ...
+              <div class="listbox-button__option" role="option" aria-selected="true">
+                <span class="listbox-button__value">
+                  <svg class="flag flag--us" focusable="false" height="18" width="24" aria-hidden="true" data-country-code="1">
+                    <use href="#flag-us"></use>
+                  </svg>
+                  <span>United States of America</span>
+                  <span>(+1)</span>
+                </span>
+                <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
+                  <use href="#icon-tick-16"></use>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </span>
+        <span class="field floating-label">
+          <label class="floating-label__label" for="field1"><span class="clipped">Area code + </span>Phone
+            Number</label>
+            <span class="textbox">
+              <span id="floating-phone-prefix-0">+1</span>
+              <input class="textbox__control" type="tel" aria-label="area code + phone number"
+                autocomplete="tel-national" aria-describedby="floating-phone-prefix-0"/>
+            </span>
+        </span>
+      </span>
+    </highlight-code>
+
+    <h3 id="floating-label-transitions">Floating Label Transitions</h3>
+    <p>By default, with only the base markup shown above, the label remains in a floating state above the input. This default state ensures that the label does not obscure the textbox value while we wait for JavaScript.</p>
+    <p>When JavaScript is ready, the label can be re-positioned inside the textbox by adding the <span class="highlight">floating-label__label--inline</span> modifier class. By default, this re-positioning of label happens instantly, without a transition. Typically, we do not want to show transitions on the initial page render, as this might be too jarring and distracting for some users.</p>
+    <p>You will also need to add the <span class="highlight">floating-label__label--focus</span> class when the input recieves focus and remove it when the input loses focus. This is to ensure the right colors are applied to the label when focusing the input.</p>
+    <p>To opt into transitions after the initial render is complete, add the  <span class="highlight">floating-label__label--animate</span> modifier when the textbox receives focus.</p>
+    <p>The examples above use <a href="https://github.com/makeup-js/makeup-floating-label">makeup-floating-label</a>, a simple JavaScript module that adds the aforementioned logic. Feel free to use this module or use it as the basis to roll your own.</p>
+</div>
+
+export const metadata = {
+      "ds-component": {
+          "name": "form-field",
+          "version": 2.2
+      }
+};

package/src/modules/global.marko

@@ -0,0 +1,7 @@
+<div id="global">
+    <h2><span class="secondary-text">@ebay/skin/</span>global</h2>
+    <p>The global module defines the styles of any common page aspects, such as font family, font size, background color, text color and link states.</p>
+</div>
+
+export const metadata = {
+};