From 904c46cd8ac8cf2e0ca7cdcf2cf8df41659eb0eb Mon Sep 17 00:00:00 2001
From: LuLaValva <lukelavalva@gmail.com>
Date: Fri, 16 Jun 2023 15:51:24 -0700
Subject: [PATCH 1/4] feat(toggle-button): add toggle button

---
 ds-versions.json                              |   1 +
 src/components/ebay-toggle-button/README.md   |   0
 .../ebay-toggle-button/browser.json           |   9 ++
 .../ebay-toggle-button/component.js           |  13 ++
 .../examples/with-icon.marko                  |   6 +
 .../examples/with-image.marko                 |  10 ++
 src/components/ebay-toggle-button/index.marko |  52 +++++++
 .../ebay-toggle-button/marko-tag.json         |  33 +++++
 src/components/ebay-toggle-button/style.js    |   1 +
 .../toggle-button.stories.js                  | 138 ++++++++++++++++++
 10 files changed, 263 insertions(+)
 create mode 100644 src/components/ebay-toggle-button/README.md
 create mode 100644 src/components/ebay-toggle-button/browser.json
 create mode 100644 src/components/ebay-toggle-button/component.js
 create mode 100644 src/components/ebay-toggle-button/examples/with-icon.marko
 create mode 100644 src/components/ebay-toggle-button/examples/with-image.marko
 create mode 100644 src/components/ebay-toggle-button/index.marko
 create mode 100644 src/components/ebay-toggle-button/marko-tag.json
 create mode 100644 src/components/ebay-toggle-button/style.js
 create mode 100644 src/components/ebay-toggle-button/toggle-button.stories.js

diff --git a/ds-versions.json b/ds-versions.json
index 67481678f..d99999fff 100644
--- a/ds-versions.json
+++ b/ds-versions.json
@@ -46,6 +46,7 @@
     "textbox": "1.1.0",
     "toast": "2.1.0",
     "toast-dialog": "2.1.0",
+    "toggle-button": "1.0.0",
     "tooltip": "1.0.0",
     "tourtip": "1.0.0",
     "typography": "1.1.0"
diff --git a/src/components/ebay-toggle-button/README.md b/src/components/ebay-toggle-button/README.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/ebay-toggle-button/browser.json b/src/components/ebay-toggle-button/browser.json
new file mode 100644
index 000000000..b498bbf77
--- /dev/null
+++ b/src/components/ebay-toggle-button/browser.json
@@ -0,0 +1,9 @@
+{
+    "requireRemap": [
+        {
+            "from": "./style",
+            "to": "../../common/empty",
+            "if-flag": "ebayui-no-skin"
+        }
+    ]
+}
diff --git a/src/components/ebay-toggle-button/component.js b/src/components/ebay-toggle-button/component.js
new file mode 100644
index 000000000..18a0dad1e
--- /dev/null
+++ b/src/components/ebay-toggle-button/component.js
@@ -0,0 +1,13 @@
+export default class {
+    onInput(input) {
+        this.state = { pressed: input.pressed };
+    }
+
+    handleClick(ev) {
+        this.state.pressed = !this.state.pressed;
+        this.emit("toggle", {
+            originalEvent: ev,
+            pressed: this.state.pressed,
+        });
+    }
+}
diff --git a/src/components/ebay-toggle-button/examples/with-icon.marko b/src/components/ebay-toggle-button/examples/with-icon.marko
new file mode 100644
index 000000000..58bc6c3a2
--- /dev/null
+++ b/src/components/ebay-toggle-button/examples/with-icon.marko
@@ -0,0 +1,6 @@
+<ebay-toggle-button title="Title" subtitle="Subtitle">
+    <@icon><ebay-afterpay-32-colored-icon/></@icon>
+</ebay-toggle-button>
+<ebay-toggle-button title="Title" subtitle="Subtitle" gallery>
+    <@icon><ebay-archive-24-icon/></@icon>
+</ebay-toggle-button>
diff --git a/src/components/ebay-toggle-button/examples/with-image.marko b/src/components/ebay-toggle-button/examples/with-image.marko
new file mode 100644
index 000000000..96ad1dd2a
--- /dev/null
+++ b/src/components/ebay-toggle-button/examples/with-image.marko
@@ -0,0 +1,10 @@
+<ebay-toggle-button title="Title" subtitle="Subtitle">
+    <@img src="https://cloudfront.slrlounge.com/wp-content/uploads/2012/07/01-SLRLounge-Holding-Standing-Wrong.jpg" />
+</ebay-toggle-button>
+
+<ebay-toggle-button title="Title" subtitle="Subtitle" gallery>
+    <@img
+        src="https://cloudfront.slrlounge.com/wp-content/uploads/2012/07/01-SLRLounge-Holding-Standing-Wrong.jpg"
+        size="cover"
+        position="top" />
+</ebay-toggle-button>
diff --git a/src/components/ebay-toggle-button/index.marko b/src/components/ebay-toggle-button/index.marko
new file mode 100644
index 000000000..5596cdbdc
--- /dev/null
+++ b/src/components/ebay-toggle-button/index.marko
@@ -0,0 +1,52 @@
+import { processHtmlAttributes } from "../../common/html-attributes";
+
+static var ignoredAttributes = [
+    "class",
+    "title",
+    "subtitle",
+    "pressed"
+];
+
+<button
+    type="button"
+    class=[
+        "toggle-button",
+        input.gallery ? "toggle-button--gallery-layout" : "toggle-button--list-layout",
+        input.class
+    ]
+    aria-pressed=state.pressed && "true"
+    ...processHtmlAttributes(input, ignoredAttributes)
+    onClick("handleClick")>
+    <if(input.icon)>
+        <span class="toggle-button__icon">
+            <${input.icon}/>
+        </span>
+    </if>
+    <else-if(input.img)>
+        <span class="toggle-button__image-container">
+            <span
+                role="img"
+                aria-label=input.img.alt
+                class="toggle-button__image"
+                style={
+                    backgroundImage: `url(${input.img.src})`,
+                    backgroundRepeat: "no-repeat",
+                    backgroundPosition: input.img.position || "center",
+                    backgroundSize: input.img.size || "contain"
+                } />
+        </span>
+    </else-if>
+    <span class="toggle-button__content">
+        <span class="toggle-button__title">${input.title}</span>
+        <if(input.subtitle)>
+            <span class="toggle-button__subtitle">
+                <if(typeof input.subtitle === "string")>
+                    ${input.subtitle}
+                </if>
+                <else>
+                    <${input.subtitle}/>
+                </else>
+            </span>
+        </if>
+    </span>
+</button>
diff --git a/src/components/ebay-toggle-button/marko-tag.json b/src/components/ebay-toggle-button/marko-tag.json
new file mode 100644
index 000000000..5198ebdea
--- /dev/null
+++ b/src/components/ebay-toggle-button/marko-tag.json
@@ -0,0 +1,33 @@
+{
+    "attribute-groups": ["html-attributes"],
+    "@*": {
+        "targetProperty": null,
+        "type": "expression"
+    },
+    "@html-attributes": "expression",
+    "@pressed": "boolean",
+    "@title": "string",
+    "@subtitle <subtitle>": {
+        "@*": {
+            "targetProperty": null,
+            "type": "expression"
+        },
+        "@html-attributes": "expression"
+    },
+    "@icon <icon>": {
+        "@*": {
+            "targetProperty": null,
+            "type": "expression"
+        },
+        "@html-attributes": "expression"
+    },
+    "@img <img>": {
+        "@*": {
+            "targetProperty": null,
+            "type": "expression"
+        },
+        "@html-attributes": "expression",
+        "@src": "string",
+        "@size": "string"
+    }
+}
diff --git a/src/components/ebay-toggle-button/style.js b/src/components/ebay-toggle-button/style.js
new file mode 100644
index 000000000..f5aeb77fd
--- /dev/null
+++ b/src/components/ebay-toggle-button/style.js
@@ -0,0 +1 @@
+require("@ebay/skin/toggle-button");
diff --git a/src/components/ebay-toggle-button/toggle-button.stories.js b/src/components/ebay-toggle-button/toggle-button.stories.js
new file mode 100644
index 000000000..b2d67e7bf
--- /dev/null
+++ b/src/components/ebay-toggle-button/toggle-button.stories.js
@@ -0,0 +1,138 @@
+import { tagToString } from "../../../.storybook/storybook-code-source";
+import { addRenderBodies } from "../../../.storybook/utils";
+import readme from "./README.md";
+import component from "./index.marko";
+import WithIconTemplate from "./examples/with-icon.marko";
+import WithIconCode from "./examples/with-icon.marko?raw";
+import WithImageTemplate from "./examples/with-image.marko";
+import WithImageCode from "./examples/with-image.marko?raw";
+
+const Template = (args) => ({
+    input: addRenderBodies(args),
+});
+
+export default {
+    title: "buttons/ebay-toggle-button",
+    component,
+    parameters: {
+        docs: {
+            description: {
+                component: readme,
+            },
+        },
+    },
+    argTypes: {
+        renderBody: {},
+        gallery: {
+            type: "boolean",
+            control: { type: "boolean" },
+            description: "true when the button is in gallery layout",
+        },
+        pressed: {
+            type: "boolean",
+            control: { type: "boolean" },
+            description: "pressed state of the button",
+        },
+        title: {
+            type: "string",
+            control: { type: "text" },
+            description: "title attribute for the button",
+        },
+        subtitle: {
+            type: "string",
+            control: { type: "text" },
+            description: "subtitle attribute for the button",
+        },
+        icon: {
+            name: "@icon",
+            description: "an `<ebay-[name]-icon>` to show as the button's icon",
+            table: {
+                category: "@attribute tags",
+            },
+        },
+        img: {
+            name: "@img",
+            description: "An `<img>` to show as the button's image",
+        },
+        href: {
+            table: {
+                category: "@img attributes",
+            },
+            control: { type: "text" },
+            description: "href attribute for the image",
+        },
+        alt: {
+            table: {
+                category: "@img attributes",
+            },
+            control: { type: "text" },
+            description: "alt attribute for the image",
+        },
+        size: {
+            table: {
+                category: "@img attributes",
+            },
+            control: { type: "text" },
+            description:
+                "size of the image. Values may be any which are applicable to the CSS `background-size` property, but only `contain` and `cover` are fully supported.",
+        },
+        position: {
+            table: {
+                category: "@img attributes",
+            },
+            control: { type: "text" },
+            description:
+                "position of the image, to be used when `size` is set to `cover`.",
+        },
+        onToggle: {
+            action: "on-toggle",
+            description: "Triggered when the button is toggled",
+            table: {
+                category: "Events",
+                defaultValue: {
+                    summary: "{ originalEvent, pressed }",
+                },
+            },
+        },
+    },
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    title: "Title",
+    subtitle: "Subtitle",
+};
+
+Default.parameters = {
+    docs: {
+        source: {
+            code: tagToString("ebay-toggle-button", Default.args),
+        },
+    },
+};
+
+export const WithIcon = (args) => ({
+    input: args,
+    component: WithIconTemplate,
+});
+WithIcon.args = {};
+WithIcon.parameters = {
+    docs: {
+        source: {
+            code: WithIconCode,
+        },
+    },
+};
+
+export const WithImage = (args) => ({
+    input: args,
+    component: WithImageTemplate,
+});
+WithImage.args = {};
+WithImage.parameters = {
+    docs: {
+        source: {
+            code: WithImageCode,
+        },
+    },
+};

From cb88559233ca2e8663af4a3ccad3a49cd5a8cd1f Mon Sep 17 00:00:00 2001
From: LuLaValva <lukelavalva@gmail.com>
Date: Tue, 20 Jun 2023 11:11:47 -0700
Subject: [PATCH 2/4] fix(toggle-button): simplified attrs and improved docs

---
 .../examples/multiline-subtitle.marko         |  6 ++
 .../examples/with-icon.marko                  |  5 +-
 .../examples/with-image.marko                 | 14 ++--
 src/components/ebay-toggle-button/index.marko | 29 ++++----
 .../toggle-button.stories.js                  | 66 +++++++++++++------
 5 files changed, 74 insertions(+), 46 deletions(-)
 create mode 100644 src/components/ebay-toggle-button/examples/multiline-subtitle.marko

diff --git a/src/components/ebay-toggle-button/examples/multiline-subtitle.marko b/src/components/ebay-toggle-button/examples/multiline-subtitle.marko
new file mode 100644
index 000000000..1ada725e3
--- /dev/null
+++ b/src/components/ebay-toggle-button/examples/multiline-subtitle.marko
@@ -0,0 +1,6 @@
+<ebay-toggle-button title="Title" ...input onToggle("emit", "toggle")>
+  <@subtitle>
+    <p>Subtitle 1</p>
+    <p>Subtitle 2</p>
+  </@subtitle>
+</ebay-toggle-button>
\ No newline at end of file
diff --git a/src/components/ebay-toggle-button/examples/with-icon.marko b/src/components/ebay-toggle-button/examples/with-icon.marko
index 58bc6c3a2..d2697ef13 100644
--- a/src/components/ebay-toggle-button/examples/with-icon.marko
+++ b/src/components/ebay-toggle-button/examples/with-icon.marko
@@ -1,6 +1,3 @@
-<ebay-toggle-button title="Title" subtitle="Subtitle">
-    <@icon><ebay-afterpay-32-colored-icon/></@icon>
-</ebay-toggle-button>
-<ebay-toggle-button title="Title" subtitle="Subtitle" gallery>
+<ebay-toggle-button title="Title" subtitle="Subtitle" ...input onToggle("emit", "toggle")>
     <@icon><ebay-archive-24-icon/></@icon>
 </ebay-toggle-button>
diff --git a/src/components/ebay-toggle-button/examples/with-image.marko b/src/components/ebay-toggle-button/examples/with-image.marko
index 96ad1dd2a..bd60140fa 100644
--- a/src/components/ebay-toggle-button/examples/with-image.marko
+++ b/src/components/ebay-toggle-button/examples/with-image.marko
@@ -1,10 +1,4 @@
-<ebay-toggle-button title="Title" subtitle="Subtitle">
-    <@img src="https://cloudfront.slrlounge.com/wp-content/uploads/2012/07/01-SLRLounge-Holding-Standing-Wrong.jpg" />
-</ebay-toggle-button>
-
-<ebay-toggle-button title="Title" subtitle="Subtitle" gallery>
-    <@img
-        src="https://cloudfront.slrlounge.com/wp-content/uploads/2012/07/01-SLRLounge-Holding-Standing-Wrong.jpg"
-        size="cover"
-        position="top" />
-</ebay-toggle-button>
+$ const { src, alt, fillPlacement, ...buttonInput } = input
+<ebay-toggle-button title="Title" subtitle="Subtitle" ...buttonInput onToggle("emit", "toggle")>
+    <@img src=src alt=alt fillPlacement=fillPlacement />
+</ebay-toggle-button>
\ No newline at end of file
diff --git a/src/components/ebay-toggle-button/index.marko b/src/components/ebay-toggle-button/index.marko
index 5596cdbdc..0d6dcea12 100644
--- a/src/components/ebay-toggle-button/index.marko
+++ b/src/components/ebay-toggle-button/index.marko
@@ -11,7 +11,7 @@ static var ignoredAttributes = [
     type="button"
     class=[
         "toggle-button",
-        input.gallery ? "toggle-button--gallery-layout" : "toggle-button--list-layout",
+        input.layoutType && `toggle-button--${input.layoutType}-layout`,
         input.class
     ]
     aria-pressed=state.pressed && "true"
@@ -24,16 +24,23 @@ static var ignoredAttributes = [
     </if>
     <else-if(input.img)>
         <span class="toggle-button__image-container">
-            <span
-                role="img"
-                aria-label=input.img.alt
-                class="toggle-button__image"
-                style={
-                    backgroundImage: `url(${input.img.src})`,
-                    backgroundRepeat: "no-repeat",
-                    backgroundPosition: input.img.position || "center",
-                    backgroundSize: input.img.size || "contain"
-                } />
+            <if(input.img.fillPlacement)>
+                <span
+                    role="img"
+                    aria-label=input.img.alt
+                    class="toggle-button__image"
+                    style={
+                        backgroundImage: `url(${input.img.src})`,
+                        backgroundPosition: input.img.fillPlacement || "center",
+                        backgroundSize: "cover",
+                        backgroundRepeat: "no-repeat",
+                    } />
+            </if>
+            <else>
+                <span class="toggle-button__image">
+                    <img src=input.img.src alt=input.img.alt />
+                </span>
+            </else>
         </span>
     </else-if>
     <span class="toggle-button__content">
diff --git a/src/components/ebay-toggle-button/toggle-button.stories.js b/src/components/ebay-toggle-button/toggle-button.stories.js
index b2d67e7bf..8a0eeb7d1 100644
--- a/src/components/ebay-toggle-button/toggle-button.stories.js
+++ b/src/components/ebay-toggle-button/toggle-button.stories.js
@@ -6,6 +6,8 @@ import WithIconTemplate from "./examples/with-icon.marko";
 import WithIconCode from "./examples/with-icon.marko?raw";
 import WithImageTemplate from "./examples/with-image.marko";
 import WithImageCode from "./examples/with-image.marko?raw";
+import MultilineSubtitleTemplate from "./examples/multiline-subtitle.marko";
+import MultilineSubtitleCode from "./examples/multiline-subtitle.marko?raw";
 
 const Template = (args) => ({
     input: addRenderBodies(args),
@@ -23,29 +25,31 @@ export default {
     },
     argTypes: {
         renderBody: {},
-        gallery: {
-            type: "boolean",
-            control: { type: "boolean" },
-            description: "true when the button is in gallery layout",
+        layoutType: {
+            type: "string",
+            control: { type: "select" },
+            options: ["minimal", "list", "gallery"],
+            description:
+                'Enforced layout type of the button. May be `"minimal"` (default), `"list"`, or `"gallery"`',
         },
         pressed: {
             type: "boolean",
             control: { type: "boolean" },
-            description: "pressed state of the button",
+            description: "Pressed state of the button",
         },
         title: {
             type: "string",
             control: { type: "text" },
-            description: "title attribute for the button",
+            description: "Title attribute for the button",
         },
         subtitle: {
-            type: "string",
+            type: "string|@subtitle",
             control: { type: "text" },
-            description: "subtitle attribute for the button",
+            description: "Subtitle attribute for the button",
         },
         icon: {
             name: "@icon",
-            description: "an `<ebay-[name]-icon>` to show as the button's icon",
+            description: "An `<ebay-[name]-icon>` to show as the button's icon",
             table: {
                 category: "@attribute tags",
             },
@@ -53,36 +57,39 @@ export default {
         img: {
             name: "@img",
             description: "An `<img>` to show as the button's image",
+            table: {
+                category: "@attribute tags",
+            },
         },
-        href: {
+        subtitleTag: {
+            name: "@subtitle",
+            description:
+                "May be used instead of the `subtitle` attribute for more control. Should contain no more than two brief lines of text",
             table: {
-                category: "@img attributes",
+                category: "@attribute tags",
             },
-            control: { type: "text" },
-            description: "href attribute for the image",
         },
-        alt: {
+        src: {
             table: {
                 category: "@img attributes",
             },
             control: { type: "text" },
-            description: "alt attribute for the image",
+            description: "Link to the image source",
         },
-        size: {
+        alt: {
             table: {
                 category: "@img attributes",
             },
             control: { type: "text" },
-            description:
-                "size of the image. Values may be any which are applicable to the CSS `background-size` property, but only `contain` and `cover` are fully supported.",
+            description: "Alt text for the image",
         },
-        position: {
+        fillPlacement: {
             table: {
                 category: "@img attributes",
             },
             control: { type: "text" },
             description:
-                "position of the image, to be used when `size` is set to `cover`.",
+                "Placement of the image within the given bounds using the CSS `background-position` property. Using this property will switch the image fit from `contain` to `cover`",
         },
         onToggle: {
             action: "on-toggle",
@@ -128,7 +135,11 @@ export const WithImage = (args) => ({
     input: args,
     component: WithImageTemplate,
 });
-WithImage.args = {};
+WithImage.args = {
+    layoutType: "gallery",
+    src: "https://cloudfront.slrlounge.com/wp-content/uploads/2012/07/01-SLRLounge-Holding-Standing-Wrong.jpg",
+    fillPlacement: "top",
+};
 WithImage.parameters = {
     docs: {
         source: {
@@ -136,3 +147,16 @@ WithImage.parameters = {
         },
     },
 };
+
+export const MultilineSubtitle = (args) => ({
+    input: args,
+    component: MultilineSubtitleTemplate,
+});
+MultilineSubtitle.args = {};
+MultilineSubtitle.parameters = {
+    docs: {
+        source: {
+            code: MultilineSubtitleCode,
+        },
+    },
+};

From c8dfcbc74f617bdcd75581304a62fba1b376da95 Mon Sep 17 00:00:00 2001
From: LuLaValva <lukelavalva@gmail.com>
Date: Tue, 20 Jun 2023 12:02:02 -0700
Subject: [PATCH 3/4] fix(toggle-button): spacing

---
 .../examples/multiline-subtitle.marko                  | 10 +++++-----
 .../ebay-toggle-button/examples/with-image.marko       |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ebay-toggle-button/examples/multiline-subtitle.marko b/src/components/ebay-toggle-button/examples/multiline-subtitle.marko
index 1ada725e3..add528ee2 100644
--- a/src/components/ebay-toggle-button/examples/multiline-subtitle.marko
+++ b/src/components/ebay-toggle-button/examples/multiline-subtitle.marko
@@ -1,6 +1,6 @@
 <ebay-toggle-button title="Title" ...input onToggle("emit", "toggle")>
-  <@subtitle>
-    <p>Subtitle 1</p>
-    <p>Subtitle 2</p>
-  </@subtitle>
-</ebay-toggle-button>
\ No newline at end of file
+    <@subtitle>
+        <p>Subtitle 1</p>
+        <p>Subtitle 2</p>
+    </@subtitle>
+</ebay-toggle-button>
diff --git a/src/components/ebay-toggle-button/examples/with-image.marko b/src/components/ebay-toggle-button/examples/with-image.marko
index bd60140fa..9f21c1428 100644
--- a/src/components/ebay-toggle-button/examples/with-image.marko
+++ b/src/components/ebay-toggle-button/examples/with-image.marko
@@ -1,4 +1,4 @@
 $ const { src, alt, fillPlacement, ...buttonInput } = input
 <ebay-toggle-button title="Title" subtitle="Subtitle" ...buttonInput onToggle("emit", "toggle")>
     <@img src=src alt=alt fillPlacement=fillPlacement />
-</ebay-toggle-button>
\ No newline at end of file
+</ebay-toggle-button>

From 42f682f70c38e3a5eef9c6e8dcc903fd24ce6085 Mon Sep 17 00:00:00 2001
From: LuLaValva <lukelavalva@gmail.com>
Date: Tue, 20 Jun 2023 14:58:50 -0700
Subject: [PATCH 4/4] fix(toggle-button): modify documentation surrounding
 layoutType

---
 .../ebay-toggle-button/examples/multiline-subtitle.marko   | 2 +-
 src/components/ebay-toggle-button/examples/with-icon.marko | 2 +-
 .../ebay-toggle-button/examples/with-image.marko           | 2 +-
 src/components/ebay-toggle-button/toggle-button.stories.js | 7 +++----
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/ebay-toggle-button/examples/multiline-subtitle.marko b/src/components/ebay-toggle-button/examples/multiline-subtitle.marko
index add528ee2..ce755c396 100644
--- a/src/components/ebay-toggle-button/examples/multiline-subtitle.marko
+++ b/src/components/ebay-toggle-button/examples/multiline-subtitle.marko
@@ -1,4 +1,4 @@
-<ebay-toggle-button title="Title" ...input onToggle("emit", "toggle")>
+<ebay-toggle-button title="Title" layoutType="list" ...input onToggle("emit", "toggle")>
     <@subtitle>
         <p>Subtitle 1</p>
         <p>Subtitle 2</p>
diff --git a/src/components/ebay-toggle-button/examples/with-icon.marko b/src/components/ebay-toggle-button/examples/with-icon.marko
index d2697ef13..c2db721bb 100644
--- a/src/components/ebay-toggle-button/examples/with-icon.marko
+++ b/src/components/ebay-toggle-button/examples/with-icon.marko
@@ -1,3 +1,3 @@
-<ebay-toggle-button title="Title" subtitle="Subtitle" ...input onToggle("emit", "toggle")>
+<ebay-toggle-button title="Title" subtitle="Subtitle" layoutType="list" ...input onToggle("emit", "toggle")>
     <@icon><ebay-archive-24-icon/></@icon>
 </ebay-toggle-button>
diff --git a/src/components/ebay-toggle-button/examples/with-image.marko b/src/components/ebay-toggle-button/examples/with-image.marko
index 9f21c1428..ba8129b5e 100644
--- a/src/components/ebay-toggle-button/examples/with-image.marko
+++ b/src/components/ebay-toggle-button/examples/with-image.marko
@@ -1,4 +1,4 @@
 $ const { src, alt, fillPlacement, ...buttonInput } = input
-<ebay-toggle-button title="Title" subtitle="Subtitle" ...buttonInput onToggle("emit", "toggle")>
+<ebay-toggle-button title="Title" subtitle="Subtitle" layoutType="list" ...buttonInput onToggle("emit", "toggle")>
     <@img src=src alt=alt fillPlacement=fillPlacement />
 </ebay-toggle-button>
diff --git a/src/components/ebay-toggle-button/toggle-button.stories.js b/src/components/ebay-toggle-button/toggle-button.stories.js
index 8a0eeb7d1..772f72ae8 100644
--- a/src/components/ebay-toggle-button/toggle-button.stories.js
+++ b/src/components/ebay-toggle-button/toggle-button.stories.js
@@ -28,9 +28,9 @@ export default {
         layoutType: {
             type: "string",
             control: { type: "select" },
-            options: ["minimal", "list", "gallery"],
+            options: [undefined, "list", "gallery"],
             description:
-                'Enforced layout type of the button. May be `"minimal"` (default), `"list"`, or `"gallery"`',
+                'Enforced layout type of the button. May be `undefined` (minimal default), `"list"`, or `"gallery"`. Gallery layout may only be used when there is also an icon or an image.',
         },
         pressed: {
             type: "boolean",
@@ -89,7 +89,7 @@ export default {
             },
             control: { type: "text" },
             description:
-                "Placement of the image within the given bounds using the CSS `background-position` property. Using this property will switch the image fit from `contain` to `cover`",
+                "Placement of the image within the given bounds using the CSS `background-position` property. Options include [keywords, lengths, and edge distances](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position). Using this property will switch the image fit from `contain` to `cover`",
         },
         onToggle: {
             action: "on-toggle",
@@ -107,7 +107,6 @@ export default {
 export const Default = Template.bind({});
 Default.args = {
     title: "Title",
-    subtitle: "Subtitle",
 };
 
 Default.parameters = {