feat(button): add "featured" variant

https://stackoverflow.atlassian.net/browse/STACKS-680
StackExchange · Nov 14, 2024 · da7f7b9 · da7f7b9
1 parent 7a26544
commit da7f7b9
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 1 deletion.
diff --git a/docs/_data/buttons.json b/docs/_data/buttons.json
@@ -35,6 +35,26 @@
         }
       ]
     }
+  ]
+  ,
+  "featured": [
+    {
+      "title": "Featured",
+      "class": "s-btn__featured",
+      "classes": [
+        {
+          "title": "Clear"
+        },
+        {
+          "title": "Outlined",
+          "class": "s-btn__outlined"
+        },
+        {
+          "title": "Filled",
+          "class": "s-btn__filled"
+        }
+      ]
+    }
   ],
   "muted": [
     {

diff --git a/docs/product/components/buttons.html b/docs/product/components/buttons.html
@@ -11,6 +11,7 @@
     <ol class="stacks-list">
         <li><a href="#base">Base</a></li>
         <li><a href="#danger">Danger</a></li>
+        <li><a href="#Featured">Featured</a></li>
         <li><a href="#muted">Muted</a></li>
     </ol>
     <p class="stacks-copy">Each style is explained below, detailing how and where to use these styles.</p>
@@ -119,6 +120,61 @@
         </div>
     </div>
 
+
+    {% header "h3", "Featured" %}
+    <!-- TODO add featured button description -->
+    <p class="stacks-copy">Featured buttons are…</p>
+
+    <div class="stacks-preview">
+{% highlight html %}
+<button class="s-btn s-btn__featured" type="button">…</button>
+<button class="s-btn s-btn__outlined s-btn__featured" type="button">…</button>
+<button class="s-btn s-btn__filled s-btn__featured" type="button">…</button>
+{% endhighlight %}
+        <div class="stacks-preview--example">
+            <div class="overflow-x-auto">
+                <table class="wmn5 s-table s-table__bx-simple">
+                    <thead>
+                        <tr>
+                            <th scope="col">Type</th>
+                            <th scope="col" class="s-table--cell4">Class</th>
+                            <th scope="col" class="ta-center">Default State</th>
+                            <th scope="col" class="ta-center">Selected State</th>
+                            <th scope="col" class="ta-center">Disabled State</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for btn in buttons.featured %}
+                            {% assign types = btn.classes %}
+                            {% for class in types %}
+                            <tr>
+                                <th scope="row" class="va-middle">
+                                    {{ class.title }}
+                                </th>
+                                <td class="va-middle">
+                                    <div class="d-flex g4 fw-wrap">
+                                        <code class="flex--item stacks-code">.s-btn</code>
+                                        {% if btn.class != nil %}
+                                            <code class="flex--item stacks-code">.{{ btn.class }}</code>
+                                        {% endif %}
+                                        {% if class.class != nil %}
+                                            <code class="flex--item stacks-code">.{{ class.class }}</code>
+                                        {% endif %}
+                                    </div>
+                                </td>
+                                <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.class }} {{ class.class }}" type="button">Ask question</button></td>
+                                <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.class }} {{ class.class }} is-selected" type="button" aria-pressed="true">Ask question</button></td>
+                                <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.class }} {{ class.class }}" type="button" disabled>Ask question</button></td>
+                            </tr>
+                            {% endfor %}
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</section>
+
     {% header "h3", "Muted" %}
     <p class="stacks-copy">Muted buttons are a secondary button style, a grayscale visual treatment. Used in layouts for the least important items or currently inactive actions.</p>
 

diff --git a/lib/components/button/button.less b/lib/components/button/button.less
@@ -268,6 +268,32 @@
         --_bu-number-fc-filled: var(--black);
     }
 
+    &&__featured {
+        --_bu-bg-active: var(--purple-300);
+        --_bu-bg-hover: var(--purple-200);
+        --_bu-bg-selected: var(--purple-300);
+        --_bu-fc: var(--purple-500);
+        --_bu-fc-active: var(--_bu-fc);
+        --_bu-fc-hover: var(--purple-500);
+        --_bu-fc-selected: var(--purple-600);
+        --_bu-filled-bc: transparent;
+        --_bu-filled-bc-selected: var(--_bu-filled-bc);
+        --_bu-filled-bg: var(--purple-400);
+        --_bu-filled-bg-active: var(--purple-500);
+        --_bu-filled-bg-hover: var(--purple-500);
+        --_bu-filled-bg-selected: var(--purple-600);
+        --_bu-filled-fc: var(--white);
+        --_bu-filled-fc-active: var(--_bu-filled-fc);
+        --_bu-filled-fc-hover: var(--_bu-filled-fc);
+        --_bu-filled-fc-selected: var(--_bu-filled-fc);
+        --_bu-outlined-bc: var(--purple-400);
+        --_bu-outlined-bc-selected: var(--purple-500);
+        --_bu-outlined-bg-selected: var(--_bu-bg-selected);
+        --_bu-outlined-fc-selected: var(--_bu-fc-selected);
+        --_bu-number-fc: var(--white);
+        --_bu-number-fc-filled: var(--black);
+    }
+
     &&__muted {
         --_bu-bc-hover: var(--black-300);
         --_bu-bg-active: var(--black-150);

diff --git a/lib/components/button/button.test.setup.ts b/lib/components/button/button.test.setup.ts
@@ -16,7 +16,7 @@ const getChild = (child?: string): string => {
 // TODO test disabled states, interaction pseudo-classes
 const testArgs: TestVariationArgs = {
     baseClass: "s-btn",
-    variants: ["danger", "muted"],
+    variants: ["danger", "featured", "muted"],
     modifiers: {
         primary: ["filled", "outlined"],
         secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],