refactor!: Modify Tip API & remove unused utilities (#720)

* no message * - remove localstorage support - thumbnail slot - remove unused utilities - update demo * no message * fix styling * Remove unused utility methods * Updated tip-manager demo. Co-authored-by: Alan Sangma <asangma@esri.com>
Esri · Jan 7, 2020 · 5cd8777 · 5cd8777
1 parent 9f02abe
commit 5cd8777
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 231 deletions.
diff --git a/src/components/calcite-tip/calcite-tip.e2e.ts b/src/components/calcite-tip/calcite-tip.e2e.ts
@@ -39,25 +39,6 @@ describe("calcite-tip", () => {
     expect(eventSpy).toHaveReceivedEvent();
   });
 
-  it("should hide by default if tip with an id is dismissed", async () => {
-    const page = await setUpPage(`<calcite-tip storage-id="foo"><p>testing localstorage</p></calcite-tip>`, {
-      withPeerDependencies: true
-    });
-
-    const closeButton = await page.find(`calcite-tip >>> .${CSS.close}`);
-
-    await closeButton.click();
-
-    const page2 = await newE2EPage();
-    await page2.setContent(`<calcite-tip storage-id="foo"><p>testing localstorage</p></calcite-tip>`);
-
-    const tip = await page2.find(`calcite-tip >>> .${CSS.container}`);
-
-    const isVisible = await tip.isVisible();
-
-    expect(isVisible).toBe(false);
-  });
-
   it("header should only be visible if dismissible or has a heading", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-tip><p>testing</p></calcite-tip>`);

diff --git a/src/components/calcite-tip/calcite-tip.scss b/src/components/calcite-tip/calcite-tip.scss
@@ -52,11 +52,11 @@ $tip-image-max-width: 100% !default;
   }
 }
 
-.info ::slotted(p) {
+::slotted(p) {
   margin-top: 0;
 }
 
-.info ::slotted(a) {
+::slotted(a) {
   color: var(--calcite-app-foreground-link);
 }
 
@@ -66,3 +66,6 @@ $tip-image-max-width: 100% !default;
     max-width: $tip-image-max-width;
   }
 }
+.image-frame ::slotted(img) {
+  max-width: $tip-image-max-width;
+}
diff --git a/src/components/calcite-tip/calcite-tip.stories.ts b/src/components/calcite-tip/calcite-tip.stories.ts
@@ -29,10 +29,6 @@ const createAttributes: () => Attributes = () => [
     name: "dir",
     value: select("dir", dir.values, dir.defaultValue)
   },
-  {
-    name: "storage-id",
-    value: text("storageId", "")
-  },
   {
     name: "non-dismissible",
     value: boolean("nonDismissible", false)

diff --git a/src/components/calcite-tip/calcite-tip.tsx b/src/components/calcite-tip/calcite-tip.tsx
@@ -1,12 +1,10 @@
-import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from "@stencil/core";
-import { getItem, setItem } from "../utils/localStorage";
+import { Component, Element, Event, EventEmitter, Host, Prop, h } from "@stencil/core";
 import { CalciteTheme } from "../interfaces";
-import { CSS, ICONS, TEXT } from "./resources";
+import { CSS, ICONS, SLOTS, TEXT } from "./resources";
 import { VNode } from "@stencil/core/internal";
 
 /**
- * @slot info - A slot for adding an HTML element to the body of the tip.
- * @slot link - A slot for adding an HTML anchor element to the body of the tip.
+ * @slot thumbnail - A slot for adding an HTML image element to the tip.
  */
 @Component({
   tag: "calcite-tip",
@@ -20,9 +18,9 @@ export class CalciteTip {
   //
   // --------------------------------------------------------------------------
   /**
-   * The local storage id used for an instance of a tip.
+   * No longer displays the tip.
    */
-  @Prop() storageId: string;
+  @Prop({ mutable: true }) dismissed = false;
 
   /**
    * Indicates whether the tip can be dismissed.
@@ -32,31 +30,21 @@ export class CalciteTip {
   /**
    * The heading of the tip.
    */
-  @Prop() heading: string;
+  @Prop() heading?: string;
 
   /**
    * The selected state of the tip if it is being used inside a `calcite-tip-manager`.
    */
   @Prop({
     reflect: true
   })
-  selected: boolean;
+  selected?: boolean;
 
   /**
    * Alternate text for closing the tip.
    */
   @Prop() textClose = TEXT.close;
 
-  /**
-   * Alternate text for description of the thumbnail.
-   */
-  @Prop() textThumbnail: string;
-
-  /**
-   * A string of the path to the thumbnail.
-   */
-  @Prop() thumbnail: string;
-
   /**
    * Used to set the component's color scheme.
    */
@@ -70,8 +58,6 @@ export class CalciteTip {
 
   @Element() el: HTMLCalciteTipElement;
 
-  @State() dismissed = getItem(`${this.el.tagName.toLowerCase()}-${this.storageId}`) !== null;
-
   // --------------------------------------------------------------------------
   //
   //  Events
@@ -92,12 +78,6 @@ export class CalciteTip {
   hideTip = () => {
     this.dismissed = true;
 
-    const { storageId } = this;
-
-    if (storageId) {
-      setItem(`${this.el.tagName.toLowerCase()}-${storageId}`, "dismissed");
-    }
-
     this.calciteTipDismiss.emit();
   };
 
@@ -127,30 +107,19 @@ export class CalciteTip {
   }
 
   renderImageFrame(): VNode {
-    const { thumbnail, textThumbnail } = this;
+    const { el } = this;
 
-    return thumbnail ? (
+    return el.querySelector(`[slot=${SLOTS.thumbnail}]`) ? (
       <div class={CSS.imageFrame}>
-        <img src={thumbnail} alt={textThumbnail} />
+        <slot name={SLOTS.thumbnail} />
       </div>
     ) : null;
   }
 
   renderInfoNode(): VNode {
-    const { el } = this;
-
-    const infoSlotNode = el.querySelector("[slot=info]") ? <slot name="info" /> : null;
-
-    const linkSlotNode = el.querySelector("[slot=link]") ? (
-      <p class={CSS.link}>
-        <slot name="link" />
-      </p>
-    ) : null;
-
     return (
       <div class={CSS.info}>
-        {infoSlotNode}
-        {linkSlotNode}
+        <slot />
       </div>
     );
   }

diff --git a/src/components/calcite-tip/resources.ts b/src/components/calcite-tip/resources.ts
@@ -5,8 +5,7 @@ export const CSS = {
   close: "close",
   imageFrame: "image-frame",
   content: "content",
-  info: "info",
-  link: "link"
+  info: "info"
 };
 
 export const TEXT = {
@@ -16,3 +15,7 @@ export const TEXT = {
 export const ICONS = {
   close: "x"
 };
+
+export const SLOTS = {
+  thumbnail: "thumbnail"
+};
diff --git a/src/components/calcite-tip/usage/basic.md b/src/components/calcite-tip/usage/basic.md
@@ -3,34 +3,11 @@
 Renders a non-dismissible tip with a heading, thumbnail, info and a link.
 
 ```html
-<calcite-tip
-  non-dismissible
-  heading="Celestial Bodies!"
-  thumbnail="https://placeimg.com/1000/600"
-  text-thumbnail="This is an image of nature."
->
-  <p slot="info">
+<calcite-tip non-dismissible heading="Celestial Bodies!">
+  <img slot="thumbnail" src="https://placeimg.com/1000/600" alt="This is an image of nature." />
+  <p>
     Normal tip with a landscape or square image and a small amount of text in the "info" slot.
   </p>
-  <a slot="link" href="http://www.esri.com">Put a link hurr!</a>
-</calcite-tip>
-```
-
-#### With storage-id
-
-Renders a dismissable tip with storage-id. With storage-id, if the tip is closed and the page is refreshed, the tip will not reappear.
-
-```html
-<calcite-tip
-  storage-id="foo"
-  heading="Celestial Bodies"
-  thumbnail="https://placeimg.com/100/100"
-  text-thumbnail="This is an image of nature."
->
-  <p slot="info">
-    This tip has an image that is only 100px by 100px. The image frame sets the width but doesn't force the image to be
-    larger than it's native size.
-  </p>
-  <a slot="link" href="http://www.esri.com">View Esri</a>
+  <a href="http://www.esri.com">Put a link hurr!</a>
 </calcite-tip>
 ```
diff --git a/src/components/utils/localStorage.ts b/src/components/utils/localStorage.ts