From 96352f835b219a4af13f3ed2562fcb603d7c1825 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Fri, 20 Mar 2020 09:57:49 +0000
Subject: [PATCH] Card with lay undefined issue

---
 .../materialdesign-components/package.json    |  4 +-
 .../src/Button/Button.svelte                  | 10 ++-
 .../src/Card/Card.svelte                      | 45 ++++++++++++++
 .../src/Card/CardBody.svelte                  | 12 ++++
 .../src/Card/CardFooter.svelte                | 31 ++++++++++
 .../src/Card/CardHeader.svelte                | 45 ++++++++++++++
 .../src/Card/CardImage.svelte                 | 62 +++++++++++++++++++
 .../src/Card/_styles.scss                     |  1 +
 .../src/Card/index.js                         |  7 +++
 .../src/Common/Icon.svelte                    |  2 -
 .../src/DatePicker/DatePicker.svelte          |  5 +-
 .../src/IconButton/IconButton.svelte          |  9 +++
 .../src/Test/TestApp.svelte                   |  2 +
 .../src/Test/props.js                         | 55 +++++++++++++++-
 .../src/Typography/Body2.svelte               |  8 ++-
 .../src/Typography/H6.svelte                  |  8 ++-
 .../src/Typography/Sub2.svelte                |  8 ++-
 .../materialdesign-components/src/index.js    |  7 +++
 18 files changed, 310 insertions(+), 11 deletions(-)
 create mode 100644 packages/materialdesign-components/src/Card/Card.svelte
 create mode 100644 packages/materialdesign-components/src/Card/CardBody.svelte
 create mode 100644 packages/materialdesign-components/src/Card/CardFooter.svelte
 create mode 100644 packages/materialdesign-components/src/Card/CardHeader.svelte
 create mode 100644 packages/materialdesign-components/src/Card/CardImage.svelte
 create mode 100644 packages/materialdesign-components/src/Card/_styles.scss
 create mode 100644 packages/materialdesign-components/src/Card/index.js

diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index f21c6c8d6b..42bea7428c 100644
--- a/packages/materialdesign-components/package.json
+++ b/packages/materialdesign-components/package.json
@@ -50,5 +50,7 @@
   "version": "0.0.27",
   "license": "MIT",
   "gitHead": "72a77a035eb7c1443b079bf93c29b3e5fe02094e",
-  "dependencies": {}
+  "dependencies": {
+    "@material/card": "4.0.0"
+  }
 }
diff --git a/packages/materialdesign-components/src/Button/Button.svelte b/packages/materialdesign-components/src/Button/Button.svelte
index 7c8821547a..80b3ddd792 100644
--- a/packages/materialdesign-components/src/Button/Button.svelte
+++ b/packages/materialdesign-components/src/Button/Button.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { setContext, getContext } from "svelte"
+  import { onMount } from "svelte"
   import Icon from "../Common/Icon.svelte"
   import ripple from "../Common/Ripple.js"
   import ClassBuilder from "../ClassBuilder.js"
@@ -22,12 +22,18 @@
 
   export let _bb
 
+  onMount(() => {
+    let ctx = _bb.getContext("BBMD:button:context")
+    extras = [ctx]
+  })
+
+  let extras = ""
   let modifiers = {}
   let customs = { size, colour }
 
   if (!href) modifiers = { variant }
 
-  let props = { modifiers, customs }
+  let props = { modifiers, customs, extras }
 
   let blockClasses = cb.build({ props })
   const labelClass = cb.elem("label")
diff --git a/packages/materialdesign-components/src/Card/Card.svelte b/packages/materialdesign-components/src/Card/Card.svelte
new file mode 100644
index 0000000000..d32f34f04f
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/Card.svelte
@@ -0,0 +1,45 @@
+<script>
+  import CardHeader from "./CardHeader.svelte"
+  import CardBody from "./CardBody.svelte"
+  import CardImage from "./CardImage.svelte"
+  import CardFooter from "./CardFooter.svelte"
+  import { H2, H6, Body2 } from "../Typography"
+  import { Button } from "../Button"
+  import { IconButton } from "../IconButton"
+  import ClassBuilder from "../ClassBuilder.js"
+
+  export let width = "350px"
+  export let height = "auto"
+  export let variant = "standard"
+
+  export let _bb
+  let card
+
+  const cb = new ClassBuilder("card", ["standard"])
+
+  $: modifiers = { variant }
+  $: props = { modifiers }
+  $: cardClass = cb.build({ props })
+
+  $: card && _bb.attachChildren(card)
+</script>
+
+<div
+  bind:this={card}
+  style={`width: ${width}; height: ${height}`}
+  class={cardClass} />
+
+<!-- <CardHeader title="Eyeoo" subtitle="efe wfew rregreg" />
+  <CardBody isPrimaryAction>
+    <CardImage url="https://picsum.photos/350/200" />
+    <H6 text="Body Header" horizontalMargin={10} />
+    <Body2 text="something something mc something" horizontalMargin={10} />
+  </CardBody>
+  <CardFooter>
+    <Button {_bb} text="Save" />
+    <Button {_bb} text="Cancel" />
+    <IconButton icon="3d_rotation" />
+    <IconButton icon="accessibility" />
+    <IconButton icon="alarm" />
+
+  </CardFooter> -->
diff --git a/packages/materialdesign-components/src/Card/CardBody.svelte b/packages/materialdesign-components/src/Card/CardBody.svelte
new file mode 100644
index 0000000000..eb37f0c33b
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/CardBody.svelte
@@ -0,0 +1,12 @@
+<script>
+  export let _bb
+  export let isPrimaryAction = false
+  export let onClick = () => {}
+
+  let cardBody
+  let cls = isPrimaryAction ? "mdc-card__primary-action" : ""
+
+  $: cardBody && _bb.attachChildren(cardBody)
+</script>
+
+<div bind:this={cardBody} class={cls} on:click={onClick} />
diff --git a/packages/materialdesign-components/src/Card/CardFooter.svelte b/packages/materialdesign-components/src/Card/CardFooter.svelte
new file mode 100644
index 0000000000..b3702ee47f
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/CardFooter.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { onMount } from "svelte"
+  let cardFooter
+  export let _bb
+  export let padding = "5px"
+
+  onMount(() => {
+    _bb.setContext(
+      "BBMD:icon-button:context",
+      "mdc-card__action mdc-card__action--icon"
+    )
+    _bb.setContext(
+      "BBMD:button:context",
+      "mdc-card__action mdc-card__action--button"
+    )
+  })
+
+  $: cardFooter && _bb.attachChildren(cardFooter)
+</script>
+
+<div
+  bind:this={cardFooter}
+  style={`padding: ${padding}`}
+  class="mdc-card__actions bbmd-card__actions" />
+
+<style>
+  .bbmd-card__actions {
+    display: flex;
+    flex-flow: row wrap;
+  }
+</style>
diff --git a/packages/materialdesign-components/src/Card/CardHeader.svelte b/packages/materialdesign-components/src/Card/CardHeader.svelte
new file mode 100644
index 0000000000..7f9e80cd17
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/CardHeader.svelte
@@ -0,0 +1,45 @@
+<script>
+  import { H6, Sub2 } from "../Typography"
+  import Icon from "../Common/Icon.svelte"
+  export let _bb
+  export let title = ""
+  export let subtitle = ""
+  export let icon = ""
+
+  $: useIcon = !!icon
+
+  $: useSubtitle = !!subtitle
+</script>
+
+<div class="card-header">
+  {#if useIcon}
+    <div class="card-header__icon">
+      <Icon {icon} />
+    </div>
+  {/if}
+  <div class="card-header__title">
+    <H6 text={title} />
+    {#if useSubtitle}
+      <Sub2 text={subtitle} />
+    {/if}
+  </div>
+</div>
+
+<style>
+  .card-header {
+    display: flex;
+    flex-flow: row nowrap;
+    padding: 10px;
+  }
+
+  .card-header__icon {
+    flex: 0;
+    padding: 10px;
+  }
+
+  .card-header__title {
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1;
+  }
+</style>
diff --git a/packages/materialdesign-components/src/Card/CardImage.svelte b/packages/materialdesign-components/src/Card/CardImage.svelte
new file mode 100644
index 0000000000..e7207271a0
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/CardImage.svelte
@@ -0,0 +1,62 @@
+<script>
+  import { H6, Sub2 } from "../Typography"
+  export let _bb
+  export let displayHorizontal = false //aligns image on row with title and subtitle text
+  export let url = ""
+  export let title = ""
+  export let subtitle = ""
+
+  $: useTitle = !!title
+  $: useSubTitle = !!subtitle
+</script>
+
+{#if !displayHorizontal}
+  <div
+    class="my-card__media mdc-card__media mdc-card__media--16-9"
+    style={`background-image: url(${url})`}>
+    <div class="mdc-card__media-content bbmd-card-media__content">
+      {#if useTitle}
+        <H6 text={title} verticalMargin={0} horizontalMargin={10} />
+        {#if useSubTitle}
+          <Sub2 text={subtitle} horizontalMargin={10} />
+        {/if}
+      {/if}
+    </div>
+  </div>
+{:else}
+  <div class="bbmd-card--horizontal">
+    <div
+      class="mdc-card__media mdc-card__media mdc-card__media--square
+      bbmd-card--horizontal-image"
+      style={`background-image: url(${url})`} />
+    <div class="bbmd-card--horizontal-text">
+      {#if useTitle}
+        <H6 text={title} verticalMargin={0} horizontalMargin={10} />
+        {#if useSubTitle}
+          <Sub2 text={subtitle} horizontalMargin={10} />
+        {/if}
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .bbmd-card--horizontal {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  .bbmd-card--horizontal-image {
+    flex: 0 0 110px;
+  }
+
+  .bbmd-card--horizontal-text {
+    flex: 1;
+    padding: 10px 5px;
+  }
+
+  .bbmd-card-media__content {
+    top: 125px;
+    color: white;
+  }
+</style>
diff --git a/packages/materialdesign-components/src/Card/_styles.scss b/packages/materialdesign-components/src/Card/_styles.scss
new file mode 100644
index 0000000000..67be710d6f
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/_styles.scss
@@ -0,0 +1 @@
+@import "@material/card/mdc-card.scss"
diff --git a/packages/materialdesign-components/src/Card/index.js b/packages/materialdesign-components/src/Card/index.js
new file mode 100644
index 0000000000..d950503099
--- /dev/null
+++ b/packages/materialdesign-components/src/Card/index.js
@@ -0,0 +1,7 @@
+import "./_styles.scss"
+export { default as Card } from "./Card.svelte"
+export { default as CardBody } from "./CardBody.svelte"
+export { default as CardFooter } from "./CardFooter.svelte"
+export { default as CardHeader } from "./CardHeader.svelte"
+export { default as CardImage } from "./CardImage.svelte"
+
diff --git a/packages/materialdesign-components/src/Common/Icon.svelte b/packages/materialdesign-components/src/Common/Icon.svelte
index d4820fcf6c..7a825f8cca 100644
--- a/packages/materialdesign-components/src/Common/Icon.svelte
+++ b/packages/materialdesign-components/src/Common/Icon.svelte
@@ -1,6 +1,4 @@
 <script>
-  import { getContext } from "svelte"
-
   export let icon = ""
   export let context = ""
 
diff --git a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
index d43cbc072e..1dc3defd1b 100644
--- a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
+++ b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
@@ -25,6 +25,7 @@
   let navDate = new Date()
   const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
 
+  export let _bb
   export let date = new Date()
   export let label = ""
   export let onSelect = selectedDate => {}
@@ -105,13 +106,13 @@
     <div class="calendar-container">
       <div class="month-picker">
         <div>
-          <IconButton icon="chevron_left" onClick={subtractMonth} />
+          <IconButton icon="chevron_left" {_bb} onClick={subtractMonth} />
         </div>
         <div class="centreText">
           <Body1 text={monthAndYear} />
         </div>
         <div>
-          <IconButton icon="chevron_right" onClick={addMonth} />
+          <IconButton icon="chevron_right" {_bb} onClick={addMonth} />
         </div>
       </div>
       <div class="week-days">
diff --git a/packages/materialdesign-components/src/IconButton/IconButton.svelte b/packages/materialdesign-components/src/IconButton/IconButton.svelte
index 57580776e3..a6caf48d97 100644
--- a/packages/materialdesign-components/src/IconButton/IconButton.svelte
+++ b/packages/materialdesign-components/src/IconButton/IconButton.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { onMount } from "svelte"
   import ripple from "../Common/Ripple.js"
   import ClassBuilder from "../ClassBuilder.js"
 
@@ -15,6 +16,14 @@
   export let onIcon = "" //on state icon for toggle button
   export let size = "medium"
 
+  onMount(() => {
+    let ctx = !!_bb ? _bb.getContext("BBMD:icon-button:context") : ""
+    //It isn't possible to use context within nested components as they do not have their own _bb instance (has to be passed down from parent component). This allows context to be passed as props
+    if (!context && !!ctx) {
+      context = ctx
+    }
+  })
+
   function onButtonClick() {
     open = !open
     onClick()
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index a84d0280d4..b6956809d7 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -19,6 +19,7 @@
     Select,
     DatePicker,
     IconButton,
+    Card,
   } = props
 
   let currentComponent
@@ -38,6 +39,7 @@
             Radiobuttongroup,
             DatePicker,
             IconButton,
+            Card,
           ],
         },
       }
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index e53441c8ce..28b834a808 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -210,11 +210,64 @@ export const props = {
     _component: "@budibase/materialdesign-components/DatePicker",
     _children: [],
     label: "Date of Admission",
-    onSelect: date => console.log("SELECTED DATE", date)
+    onSelect: date => console.log("SELECTED DATE", date),
   },
   IconButton: {
     _component: "@budibase/materialdesign-components/IconButton",
     _children: [],
     icon: "calendar_today",
   },
+  Card: {
+    _component: "@budibase/materialdesign-components/Card",
+    _children: [
+      {
+        _component: "@budibase/materialdesign-components/CardBody",
+        _children: [
+          {
+            _component: "@budibase/materialdesign-components/CardImage",
+            _children: [],
+            displayHorizontal: false,
+            url: "https://picsum.photos/350",
+            title: "Our New World",
+            subtitle: "Out now in cinemas",
+          },
+          {
+            _component: "@budibase/materialdesign-components/H6",
+            _children: [],
+            text: "Movie Of The Year",
+          },
+          {
+            _component: "@budibase/materialdesign-components/Body2",
+            _children: [],
+            text: "The most epic movie of the year has just arrived in cinemas",
+          },
+        ],
+      },
+      {
+        _component: "@budibase/materialdesign-components/CardFooter",
+        _children: [
+          {
+            _component: "@budibase/materialdesign-components/Button",
+            text: "Save",
+          },
+          {
+            _component: "@budibase/materialdesign-components/Button",
+            text: "Cancel",
+          },
+          {
+            _component: "@budibase/materialdesign-components/IconButton",
+            icon: "3d_rotation",
+          },
+          {
+            _component: "@budibase/materialdesign-components/IconButton",
+            icon: "accessibility",
+          },
+          {
+            _component: "@budibase/materialdesign-components/IconButton",
+            icon: "alarm_on",
+          },
+        ],
+      },
+    ],
+  },
 }
diff --git a/packages/materialdesign-components/src/Typography/Body2.svelte b/packages/materialdesign-components/src/Typography/Body2.svelte
index 5e1cbb850d..eddd94c3f7 100644
--- a/packages/materialdesign-components/src/Typography/Body2.svelte
+++ b/packages/materialdesign-components/src/Typography/Body2.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 0
+  export let horizontalMargin = 0
 </script>
 
-<span class="mdc-typography--body2">{text}</span>
+<span
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--body2">
+  {text}
+</span>
diff --git a/packages/materialdesign-components/src/Typography/H6.svelte b/packages/materialdesign-components/src/Typography/H6.svelte
index 18a191d787..8a9d36c9e2 100644
--- a/packages/materialdesign-components/src/Typography/H6.svelte
+++ b/packages/materialdesign-components/src/Typography/H6.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<h6 class="mdc-typography--headline6">{text}</h6>
+<h6
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--headline6">
+  {text}
+</h6>
diff --git a/packages/materialdesign-components/src/Typography/Sub2.svelte b/packages/materialdesign-components/src/Typography/Sub2.svelte
index d6377cadab..c8860a5869 100644
--- a/packages/materialdesign-components/src/Typography/Sub2.svelte
+++ b/packages/materialdesign-components/src/Typography/Sub2.svelte
@@ -1,5 +1,11 @@
 <script>
   export let text = ""
+  export let verticalMargin = 5
+  export let horizontalMargin = 0
 </script>
 
-<span class="mdc-typography--subtitle2">{text}</span>
+<span
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  class="mdc-typography--subtitle2">
+  {text}
+</span>
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index 13cf4fb2ca..5ae421467b 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -21,3 +21,10 @@ export { Menu } from "./Menu"
 export { Select } from "./Select"
 export { DatePicker } from "./DatePicker"
 export { IconButton } from "./IconButton"
+export { Card } from "./Card"
+export { CardHeader } from "./Card"
+export { CardImage } from "./Card"
+export { CardBody } from "./Card"
+export { CardFooter } from "./Card"
+
+