refactor(expandable-tile): include above, below the fold slots

Remove TileAboveTheFoldContent, TileBelowTheFoldContent

README.md

@@ -112,8 +112,6 @@ Currently, the following components are supported:
   - ClickableTile
   - SelectableTile
   - ExpandableTile
-    - TileAboveTheFoldContent
-    - TileBelowTheFoldContent
   - RadioTile
   - Tile
   - TileGroup

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 tileRef = undefined;
-  let tileContent = undefined;
+  let contentRef = undefined;
-  let aboveTheFold = 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
+      ? contentRef.getBoundingClientRect().height
-      : aboveTheFold.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={contentRef}>
-    <div bind:this={aboveTheFold} class={cx('--tile-content')}>
+    <div bind:this={aboveRef} class={cx('--tile-content')}>
-      <slot name="above" />
+      <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>

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">
+        <div slot="above" style="height: 200px">Above the fold content here</div>
-          <TileAboveTheFoldContent>
+        <div slot="below" style="height: 400px">Below the fold content here</div>
-            <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>
       </ExpandableTile>
     {:else}
       <Tile {...$$props}>Default Tile</Tile>

src/components/Tile/TileAboveTheFoldContent.svelte

@@ -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>

src/components/Tile/TileBelowTheFoldContent.svelte

@@ -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>

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';

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, {
+import Tile, { ClickableTile, ExpandableTile, SelectableTile, TileGroup } from './components/Tile';
-  ClickableTile,
-  ExpandableTile,
-  SelectableTile,
-  TileGroup,
-  TileAboveTheFoldContent,
-  TileBelowTheFoldContent
-} 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,