feat(toggle-button): new component

.github/workflows/pages-html-proofer.yml

@@ -33,4 +33,4 @@ jobs:
             token: ${{ secrets.GITHUB_TOKEN }}
         - run: bundle config set --local without 'github-pages'
         - run: bundle install
-        - run: bundle exec htmlproofer ./_site/index.html --disable-external --ignore_empty_alt --allow_hash_href --allow-missing-href
+        - run: bundle exec htmlproofer ./_site/index.html --disable_external --ignore_empty_alt --allow_hash_href --allow_missing_href

.gitignore

@@ -14,3 +14,4 @@ docs/static/*.min.css
 .storybook/preview-head.html
 .idea
 .storybook-percy
+AssistivTunnel

Gemfile

@@ -1,3 +1,4 @@
 source 'https://rubygems.org'
 gem 'github-pages', group: :jekyll_plugins
-gem "html-proofer"
+# html-proofer 4.3 has false positives for allow_missing_href 
+gem "html-proofer", "4.2"

Gemfile.lock

@@ -1,28 +1,20 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    Ascii85 (1.1.0)
     activesupport (7.0.5)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
     addressable (2.8.4)
       public_suffix (>= 2.0.2, < 6.0)
-    afm (0.2.2)
-    async (2.5.1)
-      console (~> 1.10)
-      io-event (~> 1.1)
-      timers (~> 4.1)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
     coffee-script-source (1.11.1)
     colorator (1.1.0)
     commonmarker (0.23.9)
     concurrent-ruby (1.2.2)
-    console (1.16.2)
-      fiber-local
     dnsruby (1.70.0)
       simpleidn (~> 0.2.1)
     em-websocket (0.5.3)
@@ -37,7 +29,6 @@ GEM
       ruby2_keywords (>= 0.0.4)
     faraday-net_http (3.0.2)
     ffi (1.15.5)
-    fiber-local (1.0.0)
     forwardable-extended (2.6.0)
     gemoji (3.0.1)
     github-pages (228)
@@ -91,23 +82,21 @@ GEM
       octokit (~> 4.0)
       public_suffix (>= 3.0, < 5.0)
       typhoeus (~> 1.3)
-    hashery (2.1.2)
     html-pipeline (2.14.3)
       activesupport (>= 2)
       nokogiri (>= 1.4)
-    html-proofer (5.0.7)
+    html-proofer (4.2.0)
       addressable (~> 2.3)
-      async (~> 2.1)
+      mercenary (~> 0.3)
       nokogiri (~> 1.13)
-      pdf-reader (~> 2.11)
+      parallel (~> 1.10)
       rainbow (~> 3.0)
       typhoeus (~> 1.3)
       yell (~> 2.0)
       zeitwerk (~> 2.5)
     http_parser.rb (0.8.0)
     i18n (1.14.0)
       concurrent-ruby (~> 1.0)
-    io-event (1.2.2)
     jekyll (3.9.3)
       addressable (~> 2.4)
       colorator (~> 1.0)
@@ -239,14 +228,9 @@ GEM
     octokit (4.25.1)
       faraday (>= 1, < 3)
       sawyer (~> 0.9)
+    parallel (1.23.0)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    pdf-reader (2.11.0)
-      Ascii85 (~> 1.0)
-      afm (~> 0.2.1)
-      hashery (~> 2.0)
-      ruby-rc4
-      ttfunk
     public_suffix (4.0.7)
     racc (1.6.2)
     rainbow (3.1.1)
@@ -255,7 +239,6 @@ GEM
       ffi (~> 1.0)
     rexml (3.2.5)
     rouge (3.26.0)
-    ruby-rc4 (0.1.5)
     ruby2_keywords (0.0.5)
     rubyzip (2.3.2)
     safe_yaml (1.0.5)
@@ -271,8 +254,6 @@ GEM
       unf (~> 0.1.4)
     terminal-table (1.8.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
-    timers (4.3.5)
-    ttfunk (1.7.0)
     typhoeus (1.4.0)
       ethon (>= 0.9.0)
     tzinfo (2.0.6)
@@ -292,7 +273,7 @@ PLATFORMS
 
 DEPENDENCIES
   github-pages
-  html-proofer
+  html-proofer (= 4.2)
 
 BUNDLED WITH
-   2.3.18
+   2.4.13

dist/floating-label/floating-label.css

@@ -78,3 +78,13 @@ label.floating-label__label--invalid {
   right: 16px;
   transform-origin: right;
 }
+label.floating-label__label.floating-label__label--inline:has(
+        + .textbox > :autofill
+    ) {
+  transform: scale(0.75, 0.75) translate(0, 2px);
+}
+.floating-label--large label.floating-label__label.floating-label__label--inline:has(
+        + .textbox > :autofill
+    ) {
+  transform: scale(0.75, 0.75) translate(0, 3px);
+}

dist/toggle-button/toggle-button.css

@@ -0,0 +1,138 @@
+:root {
+  --toggle-button-height-min: 72px;
+  --toggle-button-width-max: 342px;
+  --toggle-button-width-min: 224px;
+  --toggle-button-minimal-width-min: 72px;
+  --toggle-button-minimal-width-max: 342px;
+  --toggle-button-gallery-width-min: 168px;
+  --toggle-button-gallery-width-max: 342px;
+}
+.toggle-button {
+  background-color: var(--color-background-primary);
+  border: 1px solid var(--color-stroke-default);
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px transparent;
+  color: var(--color-foreground-primary);
+  display: inline-flex;
+  font-size: 0.875rem;
+  margin-right: 8px;
+  margin-top: auto;
+  max-width: var(--toggle-button-width-max);
+  min-height: var(--toggle-button-height-min);
+  min-width: var(--toggle-button-width-min);
+  padding: 0 16px;
+  vertical-align: top;
+}
+.toggle-button:focus-visible {
+  outline-offset: 1px;
+  outline-style: outset;
+  outline-width: 2px;
+}
+.toggle-button[aria-pressed="true"] {
+  background-color: var(--color-background-secondary);
+  border: 1px solid var(--color-stroke-strong);
+  box-shadow: 0 0 0 1px var(--color-stroke-strong);
+  font-weight: bold;
+}
+.toggle-button__content {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+.toggle-button__icon {
+  margin-bottom: 16px;
+  margin-right: 16px;
+  margin-top: 16px;
+}
+.toggle-button__image-container {
+  align-self: center;
+  margin-bottom: 16px;
+  margin-right: 16px;
+  margin-top: 16px;
+}
+.toggle-button__image-container svg.icon {
+  height: 100%;
+}
+.toggle-button__image-container img {
+  height: 100%;
+  max-height: 56px;
+  max-width: 56px;
+}
+.toggle-button__image {
+  display: inline-block;
+  height: 56px;
+  width: 56px;
+}
+.toggle-button__title {
+  font-size: 1rem;
+  font-weight: bold;
+  line-height: 1.5rem;
+  margin-bottom: 4px;
+  margin-top: 16px;
+}
+.toggle-button .toggle-button__content .toggle-button__title:only-child {
+  font-weight: bold;
+  margin-bottom: auto;
+  margin-top: auto;
+  text-align: center;
+  width: 100%;
+}
+.toggle-button:not([aria-pressed="true"]) .toggle-button__title:only-child {
+  font-weight: normal;
+}
+.toggle-button__subtitle {
+  color: var(--color-foreground-secondary);
+  line-height: 1.25rem;
+  margin-bottom: 16px;
+}
+.toggle-button__subtitle p {
+  margin: 0;
+}
+.toggle-button[aria-pressed="true"] .toggle-button__subtitle {
+  color: var(--color-foreground-primary);
+  font-weight: normal;
+}
+/* Layout Themes */
+.toggle-button-theme-minimal {
+  justify-content: center;
+  max-width: var(--toggle-button-minimal-width-max);
+  min-width: var(--toggle-button-minimal-width-min);
+}
+.toggle-button-theme-gallery {
+  flex-direction: column;
+  max-width: var(--toggle-button-gallery-width-max);
+  min-width: var(--toggle-button-gallery-width-min);
+}
+.toggle-button-theme-gallery .toggle-button__content {
+  align-self: self-start;
+}
+.toggle-button-theme-gallery .toggle-button__image-container,
+.toggle-button-theme-gallery .toggle-button__icon {
+  margin-bottom: 0;
+  margin-right: 0;
+  text-align: left;
+}
+.toggle-button-theme-gallery .toggle-button__image-container {
+  padding-bottom: 60%;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+.toggle-button-theme-gallery .toggle-button__image {
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+}
+.toggle-button-theme-gallery .toggle-button__image-container img {
+  height: 100%;
+  max-height: 200px;
+  max-width: initial;
+}
+.toggle-button-theme-gallery .toggle-button__icon ~ .toggle-button__content {
+  align-self: flex-start;
+}

docs/_config.yml

@@ -9,4 +9,4 @@ defaults:
       path: "" # an empty string here means all files in the project
     values:
       cdn_path: https://ir.ebaystatic.com/cr/v/c1/skin
-      version: 16.2.1
+      version: 16.3.0

docs/_data/modules.yaml

@@ -57,6 +57,7 @@ list:
   - tabs
   - textbox
   - toast-dialog
+  - toggle-button
   - tokens
   - tooltip
   - tourtip

docs/_includes/icon.html

@@ -1,18 +1,6 @@
 <div id="icon">
     {% include section-header.html name="icon" version=page.versions.icon %}
 
-    <section class="section-notice section-notice--attention" role="region" aria-label="Attention" aria-roledescription="Notice">
-        <div class="section-notice__header" id="section-notice-attention">
-            <svg class="icon icon--attention-filled-16" focusable="false" height="16" width="16" aria-label="Attention">
-                {% include symbol.html name="attention-filled-16" %}
-            </svg>
-        </div>
-        <div class="section-notice__main">
-            <h3 class="section-notice__title">Icon Transition and Upcoming Deprecation</h3>
-            <p>As of Skin 15.5.0, icons are transitioning. Along with the introduction of new icons, we are transitioning the postfix naming convention from descriptive ("-large") sizing to more specific size-based icon naming ("-24"). With the next major Skin release (16.0.0), all icons with the old naming convention will be removed. More information will be coming to help with the transition and upgrade.</p>
-        </div>
-    </section>
-
     <p>The icon module is a bundle that provides full access to the entire range of eBay iconography via the <span
             class="highlight">&lt;svg&gt;</span> and <span class="highlight">&lt;use&gt;</span> tags.</p>
     <p>To avoid gigantic icons when in a non-CSS state, we use the SVG width and height attributes to override the