From e7bb051cab796e4475f36d1cddbc0b515f99bc3d Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Tue, 31 Dec 2019 15:35:35 -0800
Subject: [PATCH] refactor(expandable-tile): include above, below the fold
 slots

Remove TileAboveTheFoldContent, TileBelowTheFoldContent
---
 README.md                                     |  2 -
 src/components/Tile/ExpandableTile.svelte     | 38 +++++++++++++------
 src/components/Tile/Tile.Story.svelte         | 14 +------
 .../Tile/TileAboveTheFoldContent.svelte       | 17 ---------
 .../Tile/TileBelowTheFoldContent.svelte       | 17 ---------
 src/components/Tile/index.js                  |  2 -
 src/index.js                                  | 11 +-----
 7 files changed, 29 insertions(+), 72 deletions(-)
 delete mode 100644 src/components/Tile/TileAboveTheFoldContent.svelte
 delete mode 100644 src/components/Tile/TileBelowTheFoldContent.svelte

diff --git a/README.md b/README.md
index 4b82976e..7c17045e 100644
--- a/README.md
+++ b/README.md
@@ -112,8 +112,6 @@ Currently, the following components are supported:
   - ClickableTile
   - SelectableTile
   - ExpandableTile
-    - TileAboveTheFoldContent
-    - TileBelowTheFoldContent
   - RadioTile
   - Tile
   - TileGroup
diff --git a/src/components/Tile/ExpandableTile.svelte b/src/components/Tile/ExpandableTile.svelte
index 83f4941b..27cc7592 100644
--- a/src/components/Tile/ExpandableTile.svelte
+++ b/src/components/Tile/ExpandableTile.svelte
@@ -15,14 +15,14 @@
   import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
   import { cx, css } from '../../lib';
 
-  let tile = undefined;
-  let tileContent = undefined;
-  let aboveTheFold = undefined;
+  let tileRef = undefined;
+  let contentRef = undefined;
+  let aboveRef = undefined;
 
   onMount(() => {
-    const style = window.getComputedStyle(tile);
+    const style = window.getComputedStyle(tileRef);
 
-    tileMaxHeight = aboveTheFold.getBoundingClientRect().height;
+    tileMaxHeight = aboveRef.getBoundingClientRect().height;
     tilePadding =
       parseInt(style.getPropertyValue('padding-top'), 10) +
       parseInt(style.getPropertyValue('padding-bottom'), 10);
@@ -30,13 +30,13 @@
 
   afterUpdate(() => {
     tileMaxHeight = expanded
-      ? tileContent.getBoundingClientRect().height
-      : aboveTheFold.getBoundingClientRect().height;
+      ? contentRef.getBoundingClientRect().height
+      : aboveRef.getBoundingClientRect().height;
   });
 </script>
 
 <div
-  bind:this={tile}
+  bind:this={tileRef}
   class={cx('--tile', '--tile--expandable', expanded && '--tile--is-expanded', light && '--tile--light', className)}
   style={expanded ? undefined : css([style, `max-height: ${tileMaxHeight + tilePadding}px`])}
   on:click
@@ -55,9 +55,16 @@
   on:mouseleave
   {tabindex}
   {id}>
-  <div bind:this={tileContent}>
-    <div bind:this={aboveTheFold} class={cx('--tile-content')}>
-      <slot name="above" />
+  <div bind:this={contentRef}>
+    <div bind:this={aboveRef} class={cx('--tile-content')}>
+      <span
+        on:click
+        on:mouseover
+        on:mouseenter
+        on:mouseleave
+        class={cx('--tile-content__above-the-fold')}>
+        <slot name="above" />
+      </span>
     </div>
     <button
       aria-expanded={expanded}
@@ -66,7 +73,14 @@
       <ChevronDown16 />
     </button>
     <div class={cx('--tile-content')}>
-      <slot name="below" />
+      <span
+        on:click
+        on:mouseover
+        on:mouseenter
+        on:mouseleave
+        class={cx('--tile-content__below-the-fold')}>
+        <slot name="below" />
+      </span>
     </div>
   </div>
 </div>
diff --git a/src/components/Tile/Tile.Story.svelte b/src/components/Tile/Tile.Story.svelte
index e581580f..7119c2db 100644
--- a/src/components/Tile/Tile.Story.svelte
+++ b/src/components/Tile/Tile.Story.svelte
@@ -7,8 +7,6 @@
   import RadioTile from './RadioTile.svelte';
   import SelectableTile from './SelectableTile.svelte';
   import Tile from './Tile.svelte';
-  import TileAboveTheFoldContent from './TileAboveTheFoldContent.svelte';
-  import TileBelowTheFoldContent from './TileBelowTheFoldContent.svelte';
   import TileGroup from './TileGroup.svelte';
 
   const radioTiles = [
@@ -54,16 +52,8 @@
       </TileGroup>
     {:else if story === 'expandable'}
       <ExpandableTile {...$$props}>
-        <div slot="above">
-          <TileAboveTheFoldContent>
-            <div style="height: 200px">Above the fold content here</div>
-          </TileAboveTheFoldContent>
-        </div>
-        <div slot="below">
-          <TileBelowTheFoldContent>
-            <div style="height: 400px">Below the fold content here</div>
-          </TileBelowTheFoldContent>
-        </div>
+        <div slot="above" style="height: 200px">Above the fold content here</div>
+        <div slot="below" style="height: 400px">Below the fold content here</div>
       </ExpandableTile>
     {:else}
       <Tile {...$$props}>Default Tile</Tile>
diff --git a/src/components/Tile/TileAboveTheFoldContent.svelte b/src/components/Tile/TileAboveTheFoldContent.svelte
deleted file mode 100644
index 43cc4993..00000000
--- a/src/components/Tile/TileAboveTheFoldContent.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-</script>
-
-<span
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  class={cx('--tile-content__above-the-fold', className)}
-  {style}>
-  <slot />
-</span>
diff --git a/src/components/Tile/TileBelowTheFoldContent.svelte b/src/components/Tile/TileBelowTheFoldContent.svelte
deleted file mode 100644
index 12ccd2e9..00000000
--- a/src/components/Tile/TileBelowTheFoldContent.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-</script>
-
-<span
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
-  class={cx('--tile-content__below-the-fold', className)}
-  {style}>
-  <slot />
-</span>
diff --git a/src/components/Tile/index.js b/src/components/Tile/index.js
index 926396cc..b487a140 100644
--- a/src/components/Tile/index.js
+++ b/src/components/Tile/index.js
@@ -5,5 +5,3 @@ export { default as ClickableTile } from './ClickableTile.svelte';
 export { default as ExpandableTile } from './ExpandableTile.svelte';
 export { default as SelectableTile } from './SelectableTile.svelte';
 export { default as TileGroup } from './TileGroup.svelte';
-export { default as TileAboveTheFoldContent } from './TileAboveTheFoldContent.svelte';
-export { default as TileBelowTheFoldContent } from './TileBelowTheFoldContent.svelte';
diff --git a/src/index.js b/src/index.js
index 7ce8755c..109b2b3d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -70,14 +70,7 @@ import Tabs, { Tab, TabContent, TabsSkeleton } from './components/Tabs';
 import Tag, { TagSkeleton } from './components/Tag';
 import TextArea, { TextAreaSkeleton } from './components/TextArea';
 import TextInput, { TextInputSkeleton, PasswordInput } from './components/TextInput';
-import Tile, {
-  ClickableTile,
-  ExpandableTile,
-  SelectableTile,
-  TileGroup,
-  TileAboveTheFoldContent,
-  TileBelowTheFoldContent
-} from './components/Tile';
+import Tile, { ClickableTile, ExpandableTile, SelectableTile, TileGroup } from './components/Tile';
 import TimePicker, { TimePickerSelect } from './components/TimePicker';
 import Toggle, { ToggleSkeleton } from './components/Toggle';
 import ToggleSmall, { ToggleSmallSkeleton } from './components/ToggleSmall';
@@ -184,8 +177,6 @@ export {
   TextInput,
   TextInputSkeleton,
   Tile,
-  TileAboveTheFoldContent,
-  TileBelowTheFoldContent,
   TileGroup,
   ToastNotification,
   TimePicker,