feat(stack): Adds new component to arrange content and actions. #6743 #…

…5664
Esri · May 15, 2023 · 7b0b567 · 7b0b567
1 parent 70f6b7b
commit 7b0b567
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/src/components/stack/stack.e2e.ts b/src/components/stack/stack.e2e.ts
@@ -1,11 +1,30 @@
-import { hidden, renders, slots } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { hidden, renders, slots, defaults, accessible } from "../../tests/commonTests";
 import { SLOTS } from "./resources";
 
 describe("calcite-stack", () => {
+  it("has defaults", async () =>
+    defaults("calcite-stack", [
+      {
+        propertyName: "disabled",
+        defaultValue: false
+      }
+    ]));
+
   describe("renders", () => {
     renders("calcite-stack", { display: "flex" });
   });
 
+  describe("accessible when disabled", () => {
+    accessible(html`<calcite-stack disabled>
+      <calcite-action appearance="transparent" text="banana" icon="banana" slot="actions-start"></calcite-action>
+      Hello World
+      <calcite-avatar slot="content-end" thumbnail="http://placekitten.com/105/105" scale="s"> </calcite-avatar>
+      <calcite-chip slot="content-start" value="chip" scale="s" appearance="outline">My great chip</calcite-chip>
+      <calcite-action appearance="transparent" text="Close" icon="x" slot="actions-end"></calcite-action>
+    </calcite-stack>`);
+  });
+
   it("honors hidden attribute", async () => hidden("calcite-stack"));
 
   it("has slots", () => slots("calcite-stack", SLOTS));

diff --git a/src/components/stack/stack.stories.ts b/src/components/stack/stack.stories.ts
@@ -24,6 +24,14 @@ export const simple = (): string => simpleHTML;
 export const simpleDarkMode_TestOnly = (): string => simpleHTML;
 simpleDarkMode_TestOnly.parameters = { modes: modesDarkDefault };
 
+export const disabled_TestOnly = (): string => html`<calcite-stack disabled>
+  <calcite-action appearance="transparent" text="banana" icon="banana" slot="actions-start"></calcite-action>
+  Hello World
+  <calcite-avatar slot="content-end" thumbnail="http://placekitten.com/105/105" scale="s"> </calcite-avatar>
+  <calcite-chip slot="content-start" value="chip" scale="s" appearance="outline">My great chip</calcite-chip>
+  <calcite-action appearance="transparent" text="Close" icon="x" slot="actions-end"></calcite-action>
+</calcite-stack>`;
+
 export const panelFooter_TestOnly = (): string => html`<calcite-panel>
   <div slot="header-content">My Panel</div>
   <p>My content</p>

diff --git a/src/components/stack/usage/Disabled.md b/src/components/stack/usage/Disabled.md
@@ -0,0 +1,9 @@
+```html
+<calcite-stack disabled>
+  <calcite-action appearance="transparent" text="banana" icon="banana" slot="actions-start"></calcite-action>
+  Hello World
+  <calcite-avatar slot="content-end" thumbnail="http://placekitten.com/105/105" scale="s"> </calcite-avatar>
+  <calcite-chip slot="content-start" value="chip" scale="s" appearance="outline">My great chip</calcite-chip>
+  <calcite-action appearance="transparent" text="Close" icon="x" slot="actions-end"></calcite-action>
+</calcite-stack>
+```