feat(icon-button): added priority (#2156)

.changeset/nice-islands-visit.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+icon-button: added priority attribute

src/components/ebay-icon-button/component-browser.ts

@@ -7,6 +7,7 @@ interface IconButtonInput extends Omit<Marko.Input<"button">, `on${string}`> {
     "badge-number"?: number | string;
     href?: string;
     transparent?: boolean;
+    priority?: "primary" | "secondary" | "tertiary" | "none";
     size?: "small" | "large";
     partiallyDisabled?: ButtonInput["partiallyDisabled"];
     "badge-aria-label"?: AttrString;

src/components/ebay-icon-button/icon-button.stories.ts

@@ -42,6 +42,16 @@ export default {
                 },
             },
         },
+        priority: {
+            options: ["primary", "secondary", "tertiary", "none"],
+            description: "Priority of the button. Toggle the color and border of the button",
+            table: {
+                defaultValue: {
+                    summary: "none",
+                },
+            },
+            type: { category: "Options" },
+        },
         partiallyDisabled: {
             description:
                 "programmatically disabled, but remains keyboard focusable",
@@ -128,15 +138,15 @@ export default {
     },
 };
 
-export const Standard = Template.bind({});
-Standard.args = {
+export const Default = Template.bind({});
+Default.args = {
     href: "",
     disabled: false,
     partiallyDisabled: false,
     badgeNumber: 0,
     "aria-label": "menu",
 };
-Standard.parameters = {
+Default.parameters = {
     docs: {
         source: {
             code,

src/components/ebay-icon-button/index.marko

@@ -1,6 +1,11 @@
 import { processHtmlAttributes } from "../../common/html-attributes"
 
 static const VALID_SIZES = ['small', 'large']
+static var validPriorities = [
+    'primary',
+    'secondary',
+    'tertiary'
+];
 
 static function toJSON(this: any) {
     return {
@@ -13,6 +18,7 @@ $ const {
     badgeAriaLabel,
     badgeNumber,
     href,
+    priority = "none",
     partiallyDisabled,
     renderBody,
     size,
@@ -38,6 +44,8 @@ $ const tagType = href ? "a" : "button";
         'icon-btn',
         badgeNumber && `icon-btn--badged`,
         transparent && 'icon-btn--transparent',
+        (validPriorities.includes(priority) &&
+        `icon-btn--${priority}`),
         size && VALID_SIZES.includes(size) && `icon-btn--${size}`
     ]
     data-ebayui=true

src/components/ebay-icon-button/test/__snapshots__/Renders-defaults.expected.txt

@@ -0,0 +1,28 @@
+<DocumentFragment>
+  <button
+    class="icon-btn"
+    data-ebayui=""
+    href=""
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="icon icon--menu-24"
+      focusable="false"
+    >
+      <defs>
+        <symbol
+          id="icon-menu-24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3 5h18a1 1 0 0 0 0-2H3a1 1 0 0 0 0 2Zm18 6H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2ZM3 19h18a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2Z"
+          />
+        </symbol>
+      </defs>
+      <use
+        href="#icon-menu-24"
+      />
+    </svg>
+  </button>
+</DocumentFragment>

src/components/ebay-icon-button/test/__snapshots__/renders-badged-icon-variant.expected.txt

@@ -0,0 +1,36 @@
+<DocumentFragment>
+  <button
+    aria-label="Badged button"
+    class="icon-btn icon-btn--badged"
+    data-ebayui=""
+    href=""
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="icon icon--menu-24"
+      focusable="false"
+    >
+      <defs>
+        <symbol
+          id="icon-menu-24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3 5h18a1 1 0 0 0 0-2H3a1 1 0 0 0 0 2Zm18 6H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2ZM3 19h18a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2Z"
+          />
+        </symbol>
+      </defs>
+      <use
+        href="#icon-menu-24"
+      />
+    </svg>
+    <span
+      aria-hidden="true"
+      aria-label="5 Items"
+      class="badge"
+    >
+      5
+    </span>
+  </button>
+</DocumentFragment>

src/components/ebay-icon-button/test/__snapshots__/renders-button-with-priority-delete.expected.txt

@@ -0,0 +1,28 @@
+<DocumentFragment>
+  <button
+    class="icon-btn"
+    data-ebayui=""
+    href=""
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="icon icon--menu-24"
+      focusable="false"
+    >
+      <defs>
+        <symbol
+          id="icon-menu-24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3 5h18a1 1 0 0 0 0-2H3a1 1 0 0 0 0 2Zm18 6H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2ZM3 19h18a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2Z"
+          />
+        </symbol>
+      </defs>
+      <use
+        href="#icon-menu-24"
+      />
+    </svg>
+  </button>
+</DocumentFragment>

src/components/ebay-icon-button/test/__snapshots__/renders-button-with-priority-primary.expected.txt

@@ -0,0 +1,28 @@
+<DocumentFragment>
+  <button
+    class="icon-btn icon-btn--primary"
+    data-ebayui=""
+    href=""
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="icon icon--menu-24"
+      focusable="false"
+    >
+      <defs>
+        <symbol
+          id="icon-menu-24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3 5h18a1 1 0 0 0 0-2H3a1 1 0 0 0 0 2Zm18 6H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2ZM3 19h18a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2Z"
+          />
+        </symbol>
+      </defs>
+      <use
+        href="#icon-menu-24"
+      />
+    </svg>
+  </button>
+</DocumentFragment>

src/components/ebay-icon-button/test/__snapshots__/renders-button-with-priority-secondary.expected.txt

@@ -0,0 +1,28 @@
+<DocumentFragment>
+  <button
+    class="icon-btn icon-btn--secondary"
+    data-ebayui=""
+    href=""
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="icon icon--menu-24"
+      focusable="false"
+    >
+      <defs>
+        <symbol
+          id="icon-menu-24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3 5h18a1 1 0 0 0 0-2H3a1 1 0 0 0 0 2Zm18 6H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2ZM3 19h18a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2Z"
+          />
+        </symbol>
+      </defs>
+      <use
+        href="#icon-menu-24"
+      />
+    </svg>
+  </button>
+</DocumentFragment>

src/components/ebay-icon-button/test/__snapshots__/renders-button-with-size-large.expected.txt

@@ -0,0 +1,28 @@
+<DocumentFragment>
+  <button
+    class="icon-btn icon-btn--large"
+    data-ebayui=""
+    href=""
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="icon icon--menu-24"
+      focusable="false"
+    >
+      <defs>
+        <symbol
+          id="icon-menu-24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3 5h18a1 1 0 0 0 0-2H3a1 1 0 0 0 0 2Zm18 6H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2ZM3 19h18a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2Z"
+          />
+        </symbol>
+      </defs>
+      <use
+        href="#icon-menu-24"
+      />
+    </svg>
+  </button>
+</DocumentFragment>

src/components/ebay-icon-button/test/__snapshots__/renders-button-with-size-small.expected.txt

@@ -0,0 +1,28 @@
+<DocumentFragment>
+  <button
+    class="icon-btn icon-btn--small"
+    data-ebayui=""
+    href=""
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="icon icon--menu-24"
+      focusable="false"
+    >
+      <defs>
+        <symbol
+          id="icon-menu-24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3 5h18a1 1 0 0 0 0-2H3a1 1 0 0 0 0 2Zm18 6H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2ZM3 19h18a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2Z"
+          />
+        </symbol>
+      </defs>
+      <use
+        href="#icon-menu-24"
+      />
+    </svg>
+  </button>
+</DocumentFragment>

src/components/ebay-icon-button/test/__snapshots__/renders-disabled-version.expected.txt

@@ -0,0 +1,29 @@
+<DocumentFragment>
+  <button
+    class="icon-btn"
+    data-ebayui=""
+    disabled=""
+    href=""
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="icon icon--menu-24"
+      focusable="false"
+    >
+      <defs>
+        <symbol
+          id="icon-menu-24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3 5h18a1 1 0 0 0 0-2H3a1 1 0 0 0 0 2Zm18 6H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2ZM3 19h18a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2Z"
+          />
+        </symbol>
+      </defs>
+      <use
+        href="#icon-menu-24"
+      />
+    </svg>
+  </button>
+</DocumentFragment>

src/components/ebay-icon-button/test/__snapshots__/renders-fake-version.expected.txt

@@ -0,0 +1,28 @@
+<DocumentFragment>
+  <a
+    aria-label="fake button"
+    class="icon-btn"
+    data-ebayui=""
+    href="#"
+  >
+    <svg
+      aria-hidden="true"
+      class="icon icon--menu-24"
+      focusable="false"
+    >
+      <defs>
+        <symbol
+          id="icon-menu-24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3 5h18a1 1 0 0 0 0-2H3a1 1 0 0 0 0 2Zm18 6H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2ZM3 19h18a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2Z"
+          />
+        </symbol>
+      </defs>
+      <use
+        href="#icon-menu-24"
+      />
+    </svg>
+  </a>
+</DocumentFragment>

src/components/ebay-icon-button/test/__snapshots__/renders-icon.expected.txt

@@ -0,0 +1,29 @@
+<DocumentFragment>
+  <button
+    aria-label="icon button"
+    class="icon-btn"
+    data-ebayui=""
+    href=""
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="icon icon--menu-24"
+      focusable="false"
+    >
+      <defs>
+        <symbol
+          id="icon-menu-24"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3 5h18a1 1 0 0 0 0-2H3a1 1 0 0 0 0 2Zm18 6H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2ZM3 19h18a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2Z"
+          />
+        </symbol>
+      </defs>
+      <use
+        href="#icon-menu-24"
+      />
+    </svg>
+  </button>
+</DocumentFragment>