Merge branch 'feature/binding-interface' into feature/binding-interface-frontend

6 years ago · f615f5be3b
19 changed files with 686 additions and 113 deletions
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@ -1,4 +1,4 @@
-import { values } from "lodash/fp"
+import { values, cloneDeep } from "lodash/fp"
 import getNewComponentName from "../getNewComponentName"
 import { backendUiStore } from "builderStore"
 import * as backendStoreActions from "./backend"
@ -24,8 +24,8 @@ import {
  saveCurrentPreviewItem as _saveCurrentPreviewItem,
  saveScreenApi as _saveScreenApi,
  regenerateCssForCurrentScreen,
+  generateNewIdsForComponent,
 } from "../storeUtils"
-
 export const getStore = () => {
  const initial = {
    apps: [],
@ -70,6 +70,8 @@ export const getStore = () => {
  store.addTemplatedComponent = addTemplatedComponent(store)
  store.setMetadataProp = setMetadataProp(store)
  store.editPageOrScreen = editPageOrScreen(store)
+  store.pasteComponent = pasteComponent(store)
+  store.storeComponentForCopy = storeComponentForCopy(store)
  return store
 }

@ -291,9 +293,14 @@ const addChildComponent = store => (componentToAdd, presetProps = {}) => {
      state
    )

-    state.currentComponentInfo._children = state.currentComponentInfo._children.concat(
-      newComponent.props
-    )
+    const currentComponent =
+      state.components[state.currentComponentInfo._component]
+
+    const targetParent = currentComponent.children
+      ? state.currentComponentInfo
+      : getParent(state.currentPreviewItem.props, state.currentComponentInfo)
+
+    targetParent._children = targetParent._children.concat(newComponent.props)

    state.currentFrontEndType === "page"
      ? _savePage(state)
@ -454,3 +461,50 @@ const setMetadataProp = store => (name, prop) => {
    return s
  })
 }
+
+const storeComponentForCopy = store => (component, cut = false) => {
+  store.update(s => {
+    const copiedComponent = cloneDeep(component)
+    s.componentToPaste = copiedComponent
+    s.componentToPaste.isCut = cut
+    if (cut) {
+      const parent = getParent(s.currentPreviewItem.props, component._id)
+      parent._children = parent._children.filter(c => c._id !== component._id)
+      selectComponent(s, parent)
+    }
+
+    return s
+  })
+}
+
+const pasteComponent = store => (targetComponent, mode) => {
+  store.update(s => {
+    if (!s.componentToPaste) return s
+
+    const componentToPaste = cloneDeep(s.componentToPaste)
+    // retain the same ids as things may be referencing this component
+    if (componentToPaste.isCut) {
+      // in case we paste a second time
+      s.componentToPaste.isCut = false
+    } else {
+      generateNewIdsForComponent(componentToPaste, s)
+    }
+    delete componentToPaste.isCut
+
+    if (mode === "inside") {
+      targetComponent._children.push(componentToPaste)
+      return s
+    }
+
+    const parent = getParent(s.currentPreviewItem.props, targetComponent)
+
+    const targetIndex = parent._children.indexOf(targetComponent)
+    const index = mode === "above" ? targetIndex : targetIndex + 1
+    parent._children.splice(index, 0, cloneDeep(componentToPaste))
+    regenerateCssForCurrentScreen(s)
+    _saveCurrentPreviewItem(s)
+    selectComponent(s, componentToPaste)
+
+    return s
+  })
+}
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@ -1,6 +1,8 @@
 import { makePropsSafe } from "components/userInterface/pagesParsing/createProps"
 import api from "./api"
 import { generate_screen_css } from "./generate_css"
+import { uuid } from "./uuid"
+import getNewComponentName from "./getNewComponentName"

 export const selectComponent = (state, component) => {
  const componentDef = component._component.startsWith("##")
@ -79,3 +81,9 @@ export const regenerateCssForCurrentScreen = state => {
  ])
  return state
 }
+
+export const generateNewIdsForComponent = (c, state) =>
+  walkProps(c, p => {
+    p._id = uuid()
+    p._instanceName = getNewComponentName(p._component, state)
+  })
--- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
@ -99,7 +99,7 @@
            <EditRowPopover {row} />
          </td>
          {#each headers as header}
-            <td class="hoverable">
+            <td>
              {#if schema[header].type === 'link'}
                <LinkedRecord field={schema[header]} ids={row[header]} />
              {:else}{row[header] || ''}{/if}
@ -168,6 +168,9 @@
    max-width: 200px;
    text-overflow: ellipsis;
    border: 1px solid var(--grey-4);
+    overflow: hidden;
+    white-space: pre;
+    box-sizing: border-box;
  }

  tbody tr {
@ -187,6 +190,7 @@

  .popovers {
    display: flex;
+    gap: var(--spacing-m);
  }

  .no-data {
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditColumn.svelte
@ -124,8 +124,14 @@
  }

  .field {
-    margin-top: var(--spacing-xl);
-    margin-bottom: var(--spacing-xl);
+    display: grid;
+    grid-template-columns: auto 20px 1fr;
+    align-items: center;
+    grid-gap: 5px;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: var(--spacing-l);
+    font-family: var(--font-normal);
  }

  .button-margin-3 {
--- a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
@ -31,6 +31,9 @@
    {/each}
  </Select>
 {:else}
+  {#if type === 'checkbox'}
+    <label>{label}</label>
+  {/if}
  <Input
    thin
    placeholder={label}
@ -41,3 +44,12 @@
    on:input={handleInput}
    on:change={handleInput} />
 {/if}
+
+<style>
+  label {
+    font-weight: 500;
+    font-size: var(--font-size-s);
+    float: left;
+    margin-right: 8px;
+  }
+</style>
--- a/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte
@ -45,8 +45,7 @@

 <style>
  h5 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
-    margin: 0;
+    margin-bottom: var(--spacing-l);
    font-weight: 500;
  }

--- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
@ -11,21 +11,6 @@

  const { open, close } = getContext("simple-modal")

-  let HEADINGS = [
-    {
-      title: "Tables",
-      key: "TABLES",
-    },
-    {
-      title: "Tables",
-      key: "NAVIGATE",
-    },
-    {
-      title: "Add",
-      key: "ADD",
-    },
-  ]
-
  $: selectedTab = $backendUiStore.tabs.NAVIGATION_PANEL

  function selectModel(model, fieldId) {
@ -44,7 +29,7 @@
  {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
    <div class="hierarchy">
      <div class="components-list-container">
-        <h3>Tables</h3>
+        <h4>Tables</h4>
        <CreateTablePopover />
        <div class="hierarchy-items-container">
          {#each $backendUiStore.models as model}
@ -63,6 +48,10 @@
 </div>

 <style>
+  h4 {
+    font-weight: 500;
+  }
+
  .items-root {
    display: flex;
    flex-direction: column;
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@ -2,7 +2,6 @@
  import { MoreIcon } from "components/common/Icons"
  import { store } from "builderStore"
  import { getComponentDefinition } from "builderStore/store"
-  import getNewComponentName from "builderStore/getNewComponentName"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
  import { last, cloneDeep } from "lodash/fp"
  import UIkit from "uikit"
@ -29,8 +28,7 @@
  })
  $: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false))
  $: noChildrenAllowed =
-    !component ||
-    getComponentDefinition($store, component._component).children === false
+    !component || !getComponentDefinition($store, component._component).children
  $: noPaste = !$store.componentToPaste

  const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
@ -81,7 +79,9 @@
    store.update(s => {
      const parent = getParent(s.currentPreviewItem.props, component)
      const copiedComponent = cloneDeep(component)
-      generateNewIdsForComponent(copiedComponent, s)
+      walkProps(copiedComponent, p => {
+        p._id = uuid()
+      })
      parent._children = [...parent._children, copiedComponent]
      saveCurrentPreviewItem(s)
      s.currentComponentInfo = copiedComponent
@ -104,50 +104,14 @@
    })
  }

-  const generateNewIdsForComponent = (c, state) =>
-    walkProps(c, p => {
-      p._id = uuid()
-      p._instanceName = getNewComponentName(p._component, state)
-    })
-
  const storeComponentForCopy = (cut = false) => {
-    store.update(s => {
-      const copiedComponent = cloneDeep(component)
-      s.componentToPaste = copiedComponent
-      if (cut) {
-        const parent = getParent(s.currentPreviewItem.props, component._id)
-        parent._children = parent._children.filter(c => c._id !== component._id)
-        selectComponent(s, parent)
-      }
-
-      return s
-    })
+    // lives in store - also used by drag drop
+    store.storeComponentForCopy(component, cut)
  }

  const pasteComponent = mode => {
-    store.update(s => {
-      if (!s.componentToPaste) return s
-
-      const componentToPaste = cloneDeep(s.componentToPaste)
-      generateNewIdsForComponent(componentToPaste, s)
-      delete componentToPaste._cutId
-
-      if (mode === "inside") {
-        component._children.push(componentToPaste)
-        return s
-      }
-
-      const parent = getParent(s.currentPreviewItem.props, component)
-
-      const targetIndex = parent._children.indexOf(component)
-      const index = mode === "above" ? targetIndex : targetIndex + 1
-      parent._children.splice(index, 0, cloneDeep(componentToPaste))
-      regenerateCssForCurrentScreen(s)
-      saveCurrentPreviewItem(s)
-      selectComponent(s, componentToPaste)
-
-      return s
-    })
+    // lives in store - also used by drag drop
+    store.pasteComponent(component, mode)
  }
 </script>

--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@ -7,21 +7,27 @@
  import { store } from "builderStore"
  import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/"
  import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
+  import { writable } from "svelte/store"

  export let screens = []

+  const dragDropStore = writable({})
+
  let confirmDeleteDialog
  let componentToDelete = ""

  const joinPath = join("/")

  const normalizedName = name =>
-    pipe(name, [
-      trimCharsStart("./"),
-      trimCharsStart("~/"),
-      trimCharsStart("../"),
-      trimChars(" "),
-    ])
+    pipe(
+      name,
+      [
+        trimCharsStart("./"),
+        trimCharsStart("~/"),
+        trimCharsStart("../"),
+        trimChars(" "),
+      ]
+    )

  const changeScreen = screen => {
    store.setCurrentScreen(screen.props._instanceName)
@ -57,7 +63,8 @@
    {#if $store.currentPreviewItem.props._instanceName && $store.currentPreviewItem.props._instanceName === screen.props._instanceName && screen.props._children}
      <ComponentsHierarchyChildren
        components={screen.props._children}
-        currentComponent={$store.currentComponentInfo} />
+        currentComponent={$store.currentComponentInfo}
+        {dragDropStore} />
    {/if}
  {/each}

@ -94,10 +101,6 @@
    margin: 0 0 0 5px;
  }

-  :global(svg) {
-    transition: 0.2s;
-  }
-
  .rotate :global(svg) {
    transform: rotate(-90deg);
  }
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@ -15,11 +15,19 @@
  export let currentComponent
  export let onSelect = () => {}
  export let level = 0
+  export let dragDropStore
+
+  let dropUnderComponent
+  let componentToDrop

  const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
  const get_name = s => (!s ? "" : last(s.split("/")))

-  const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+  const get_capitalised_name = name =>
+    pipe(
+      name,
+      [get_name, capitalise]
+    )
  const isScreenslot = name => name === "##builtin/screenslot"

  const selectComponent = component => {
@ -32,15 +40,92 @@
    // Go to correct URL
    $goto(`./:page/:screen/${path}`)
  }
+
+  const dragstart = component => e => {
+    e.dataTransfer.dropEffect = "move"
+    dragDropStore.update(s => {
+      s.componentToDrop = component
+      return s
+    })
+  }
+
+  const dragover = (component, index) => e => {
+    const canHaveChildrenButIsEmpty =
+      $store.components[component._component].children &&
+      component._children.length === 0
+
+    e.dataTransfer.dropEffect = "copy"
+    dragDropStore.update(s => {
+      const isBottomHalf = e.offsetY > e.currentTarget.offsetHeight / 2
+      s.targetComponent = component
+      // only allow dropping inside when container type
+      // is empty. If it has children, the user can drag over
+      // it's existing children
+      if (canHaveChildrenButIsEmpty) {
+        if (index === 0) {
+          // when its the first component in the screen,
+          // we divide into 3, so we can paste above, inside or below
+          const pos = e.offsetY / e.currentTarget.offsetHeight
+          if (pos < 0.4) {
+            s.dropPosition = "above"
+          } else if (pos > 0.8) {
+            // purposely giving this the least space as it is often covered
+            // by the component below's "above" space
+            s.dropPosition = "below"
+          } else {
+            s.dropPosition = "inside"
+          }
+        } else {
+          s.dropPosition = isBottomHalf ? "below" : "inside"
+        }
+      } else {
+        s.dropPosition = isBottomHalf ? "below" : "above"
+      }
+      return s
+    })
+    return false
+  }
+
+  const drop = () => {
+    if ($dragDropStore.targetComponent !== $dragDropStore.componentToDrop) {
+      store.storeComponentForCopy($dragDropStore.componentToDrop, true)
+      store.pasteComponent(
+        $dragDropStore.targetComponent,
+        $dragDropStore.dropPosition
+      )
+    }
+    dragDropStore.update(s => {
+      s.dropPosition = ""
+      s.targetComponent = null
+      s.componentToDrop = null
+      return s
+    })
+  }
 </script>

 <ul>
  {#each components as component, index (component._id)}
    <li on:click|stopPropagation={() => selectComponent(component)}>
+
+      {#if $dragDropStore && $dragDropStore.targetComponent === component && $dragDropStore.dropPosition === 'above'}
+        <div
+          on:drop={drop}
+          ondragover="return false"
+          ondragenter="return false"
+          class="budibase__nav-item item drop-item"
+          style="margin-left: {level * 20 + 40}px" />
+      {/if}
+
      <div
        class="budibase__nav-item item"
        class:selected={currentComponent === component}
-        style="padding-left: {level * 20 + 40}px">
+        style="padding-left: {level * 20 + 40}px"
+        draggable={true}
+        on:dragstart={dragstart(component)}
+        on:dragover={dragover(component, index)}
+        on:drop={drop}
+        ondragover="return false"
+        ondragenter="return false">
        <div class="nav-item">
          <i class="icon ri-arrow-right-circle-line" />
          {isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
@ -55,8 +140,18 @@
          components={component._children}
          {currentComponent}
          {onSelect}
+          {dragDropStore}
          level={level + 1} />
      {/if}
+
+      {#if $dragDropStore && $dragDropStore.targetComponent === component && ($dragDropStore.dropPosition === 'inside' || $dragDropStore.dropPosition === 'below')}
+        <div
+          on:drop={drop}
+          ondragover="return false"
+          ondragenter="return false"
+          class="budibase__nav-item item drop-item"
+          style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 2 : 0)) * 20 + 40}px" />
+      {/if}
    </li>
  {/each}
 </ul>
@ -78,6 +173,11 @@
    align-items: center;
  }

+  .drop-item {
+    background: var(--blue-light);
+    height: 36px;
+  }
+
  .actions {
    display: none;
    height: 24px;
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@ -16,12 +16,14 @@
  import { pipe } from "components/common/core"
  import { store } from "builderStore"
  import { ArrowDownIcon, GridIcon } from "components/common/Icons/"
+  import { writable } from "svelte/store"

  export let layout

  let confirmDeleteDialog
  let componentToDelete = ""

+  const dragDropStore = writable({})
  const joinPath = join("/")

  const lastPartOfName = c =>
@ -57,7 +59,8 @@
  <ComponentsHierarchyChildren
    thisComponent={_layout.component.props}
    components={_layout.component.props._children}
-    currentComponent={$store.currentComponentInfo} />
+    currentComponent={$store.currentComponentInfo}
+    {dragDropStore} />
 {/if}

 <style>
@ -81,10 +84,6 @@
    color: var(--grey-7);
  }

-  :global(svg) {
-    transition: 0.2s;
-  }
-
  .rotate :global(svg) {
    transform: rotate(-90deg);
  }
--- a/packages/builder/src/components/userInterface/pagesParsing/createProps.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
@ -48,7 +48,7 @@ export const createProps = (componentDefinition, derivedFromProps) => {
    assign(props, derivedFromProps)
  }

-  if (componentDefinition.children !== false && isUndefined(props._children)) {
+  if (isUndefined(props._children)) {
    props._children = []
  }

--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@ -70,6 +70,20 @@ export const layout = [
      { label: "no wrap", value: "noWrap" },
    ],
  },
+  {
+    label: "Gap",
+    key: "gap",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+    ],
+  },
 ]

 export const margin = [
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@ -313,6 +313,174 @@ export default {
            ],
          },
        },
+        {
+          name: "Card",
+          description: "Card components",
+          icon: "ri-layout-bottom-line",
+          commonProps: {},
+          children: [
+            {
+              _component: "@budibase/standard-components/card",
+              name: "Vertical",
+              description:
+                "A basic card component that can contain content and actions.",
+              icon: "ri-layout-column-line",
+              children: [],
+              properties: {
+                design: { ...all },
+                settings: [
+                  {
+                    label: "Image",
+                    key: "imageUrl",
+                    control: Input,
+                    placeholder: "Image",
+                  },
+                  {
+                    label: "Heading",
+                    key: "heading",
+                    control: Input,
+                    placeholder: "Heading",
+                  },
+                  {
+                    label: "Description",
+                    key: "description",
+                    control: Input,
+                    placeholder: "Description",
+                  },
+                  {
+                    label: "Link Text",
+                    key: "linkText",
+                    control: Input,
+                    placeholder: "Link Text",
+                  },
+                  {
+                    label: "Link Url",
+                    key: "linkUrl",
+                    control: Input,
+                    placeholder: "Link URL",
+                  },
+                  {
+                    label: "Link Color",
+                    key: "color",
+                    control: Input,
+                    placeholder: "Link Color",
+                  },
+                  {
+                    label: "Hover Color",
+                    key: "linkHoverColor",
+                    control: Input,
+                    placeholder: "Hover Color",
+                  },
+                  {
+                    label: "Image Height",
+                    key: "imageHeight",
+                    control: OptionSelect,
+                    options: ["12rem", "16rem", "20rem", "24rem"],
+                    placeholder: "Image Height",
+                  },
+                  {
+                    label: "Card Width",
+                    key: "cardWidth",
+                    control: OptionSelect,
+                    options: ["16rem", "20rem", "24rem"],
+                    placeholder: "Card Width",
+                  },
+                ],
+              },
+            },
+            {
+              _component: "@budibase/standard-components/cardhorizontal",
+              name: "Horizontal",
+              description:
+                "A basic card component that can contain content and actions.",
+              icon: "ri-layout-row-line",
+              children: [],
+              properties: {
+                design: { ...all },
+                settings: [
+                  {
+                    label: "Image",
+                    key: "imageUrl",
+                    control: Input,
+                    placeholder: "Image",
+                  },
+                  {
+                    label: "Heading",
+                    key: "heading",
+                    control: Input,
+                    placeholder: "Heading",
+                  },
+                  {
+                    label: "Description",
+                    key: "description",
+                    control: Input,
+                    placeholder: "Description",
+                  },
+                  {
+                    label: "Subtext",
+                    key: "subtext",
+                    control: Input,
+                    placeholder: "Subtext",
+                  },
+                  {
+                    label: "Link Text",
+                    key: "linkText",
+                    control: Input,
+                    placeholder: "Link Text",
+                  },
+                  {
+                    label: "Link Url",
+                    key: "linkUrl",
+                    control: Input,
+                    placeholder: "Link URL",
+                  },
+                  {
+                    label: "Link Color",
+                    key: "color",
+                    control: Input,
+                    placeholder: "Link Color",
+                  },
+                  {
+                    label: "Hover Color",
+                    key: "linkHoverColor",
+                    control: Input,
+                    placeholder: "Hover Color",
+                  },
+                  {
+                    label: "Card Width",
+                    key: "cardWidth",
+                    control: OptionSelect,
+                    options: [
+                      "24rem",
+                      "28rem",
+                      "32rem",
+                      "40rem",
+                      "48rem",
+                      "60rem",
+                      "100%",
+                    ],
+                    placeholder: "Card Height",
+                  },
+                  {
+                    label: "Image Width",
+                    key: "imageWidth",
+                    control: OptionSelect,
+                    options: ["8rem", "12rem", "16rem"],
+                    placeholder: "Image Width",
+                  },
+                  {
+                    label: "Image Height",
+                    key: "imageHeight",
+                    control: OptionSelect,
+                    options: ["8rem", "12rem", "16rem", "auto"],
+                    placeholder: "Image Height",
+                  },
+                ],
+              },
+            },
+          ],
+        },
+
        {
          _component: "@budibase/materialdesign-components/BasicCard",
          name: "Card",
--- a/packages/builder/tests/createProps.spec.js
+++ b/packages/builder/tests/createProps.spec.js
@ -72,16 +72,6 @@ describe("createDefaultProps", () => {
    expect(props._children).toEqual([])
  })

-  it("should create a object without _children array, when children===false ", () => {
-    const comp = getcomponent()
-    comp.children = false
-
-    const { props, errors } = createProps(comp)
-
-    expect(errors).toEqual([])
-    expect(props._children).not.toBeDefined()
-  })
-
  it("should create a object with single empty array, when prop definition is 'event' ", () => {
    const comp = getcomponent()
    comp.props.onClick = "event"
@ -104,24 +94,22 @@ describe("createDefaultProps", () => {
    expect(props._children).toEqual([])
  })

-  it("should create a _children array when children not defined ", () => {
+  it("should always create _children ", () => {
    const comp = getcomponent()
+    comp.children = false

-    const { props, errors } = createProps(comp)
+    const createRes1 = createProps(comp)

-    expect(errors).toEqual([])
-    expect(props._children).toBeDefined()
-    expect(props._children).toEqual([])
-  })
+    expect(createRes1.errors).toEqual([])
+    expect(createRes1.props._children).toBeDefined()

-  it("should not create _children array when children=false ", () => {
-    const comp = getcomponent()
-    comp.children = false
+    const comp2 = getcomponent()
+    comp2.children = true

-    const { props, errors } = createProps(comp)
+    const createRes2 = createProps(comp)

-    expect(errors).toEqual([])
-    expect(props._children).not.toBeDefined()
+    expect(createRes2.errors).toEqual([])
+    expect(createRes2.props._children).toBeDefined()
  })

  it("should create an object with multiple prop names", () => {
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@ -16,6 +16,7 @@
 	"Navigation": {
 		"name": "Navigation",
 		"description": "A basic header navigation component",
+		"children": true,
 		"props": {
 			"logoUrl": "string",
 			"title": "string",
@ -250,7 +251,8 @@
 		}
 	},
 	"list": {
-		"description": "A configurable data list that attaches to your backend models.",
+		"description": "configurable data list that attaches to your backend models.",
+		"children": true,
 		"context": "model",
 		"data": true,
 		"props": {
@ -271,12 +273,88 @@
 	},
 	"recorddetail": {
 		"description": "Loads a record, using an ID in the url",
+		"children": true,
 		"context": "model",
 		"data": true,
 		"props": {
 			"model": "models"
 		}
 	},
+	"card": {
+		"name": "Card",
+		"props": {
+			"imageUrl": "string",
+			"heading": "string",
+			"description": "string",
+			"linkText": "string",
+			"linkUrl": "string",
+			"color": "string",
+			"linkHoverColor": "string",
+			"imageHeight": {
+				"type": "options",
+				"default": "20rem",
+				"options": [
+					"12rem",
+					"16rem",
+					"20rem",
+					"24rem"				
+				]
+			},
+			"cardWidth": {
+				"type": "options",
+				"default": "20rem",
+				"options": [
+					"16rem",
+					"20rem",
+					"24rem"				
+				]
+			}
+		}
+	},
+	"cardhorizontal": {
+		"name": "Horizontal Card",
+		"props": {
+			"imageUrl": "string",
+			"heading": "string",
+			"description": "string",
+			"subtext": "string",
+			"linkText": "string",
+			"linkUrl": "string",
+			"color": "string",
+			"linkHoverColor": "string",
+			"imageWidth": {
+				"type": "options",
+				"default": "8rem",
+				"options": [
+					"8rem",
+					"12rem",
+					"16rem"			
+				]
+			},
+			"cardWidth": {
+				"type": "options",
+				"default": "32rem",
+				"options": [
+					"24rem",
+					"28rem",
+					"32rem",
+					"40rem",
+					"48rem",
+					"60rem",
+					"100%"		
+				]
+			},
+			"imageHeight": {
+				"type": "options",
+				"default": "8rem",
+				"options": [
+					"8rem",
+					"12rem",
+					"16rem"			
+				]
+			}
+		}
+	},
 	"datamap": {
 		"description": "shiny chart",
 		"data": true,
@ -534,7 +612,7 @@
 	"bullet": {
 		"description": "Bullet chart",
 		"data": true,
-		"props": {
+		"props": { 
 			"model": "string",
 			"color": "string",
 			"customSubtitle": "string",
@ -608,6 +686,7 @@
 	},
 	"container": {
 		"name": "Container",
+		"children": true,
 		"description": "An element that contains and lays out other elements. e.g. <div>, <header> etc",
 		"props": {
 			"className": "string",
--- a/packages/standard-components/src/Card.svelte
+++ b/packages/standard-components/src/Card.svelte
@ -0,0 +1,80 @@
+<script>
+  import { cssVars, createClasses } from "./cssVars"
+
+  export const className = ""
+  export let imageUrl = ""
+  export let heading = ""
+  export let description = ""
+  export let linkText = ""
+  export let linkUrl
+  export let color
+  export let linkHoverColor
+  export let imageHeight
+  export let cardWidth
+
+  $: cssVariables = {
+    color,
+    linkHoverColor,
+    imageHeight,
+    cardWidth,
+  }
+
+  $: showImage = !!imageUrl
+</script>
+
+<div use:cssVars={cssVariables} class="container">
+  {#if showImage}
+    <img class="image" src={imageUrl} alt="" />
+  {/if}
+  <div class="content">
+    <h2 class="heading">{heading}</h2>
+    <h4 class="text">{description}</h4>
+    <a href={linkUrl}>{linkText}</a>
+  </div>
+</div>
+
+<style>
+  .container {
+    width: var(--cardWidth);
+    overflow: hidden !important;
+    height: auto;
+  }
+
+  .image {
+    width: 100% !important;
+    max-width: 100%;
+    height: var(--imageHeight);
+    vertical-align: middle;
+  }
+
+  .content {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .heading {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  .text {
+    font-size: 1rem;
+    margin: 0;
+    font-weight: 400;
+    line-height: 1.5rem;
+  }
+
+  a {
+    margin: 0.5rem 0;
+    text-decoration: none;
+    color: var(--color);
+    font-weight: 600;
+  }
+
+  a:hover {
+    color: var(--linkHoverColor);
+  }
+</style>
--- a/packages/standard-components/src/CardHorizontal.svelte
+++ b/packages/standard-components/src/CardHorizontal.svelte
@ -0,0 +1,104 @@
+<script>
+  import { cssVars, createClasses } from "./cssVars"
+
+  export const className = ""
+  export let imageUrl = ""
+  export let heading = ""
+  export let description = ""
+  export let subtext = ""
+  export let linkText = ""
+  export let linkUrl
+  export let color
+  export let linkHoverColor
+  export let cardWidth
+  export let imageWidth
+  export let imageHeight
+
+  $: cssVariables = {
+    color,
+    linkHoverColor,
+    imageWidth,
+    cardWidth,
+    imageHeight,
+  }
+
+  $: showImage = !!imageUrl
+</script>
+
+<div use:cssVars={cssVariables} class="container">
+  {#if showImage}
+    <img class="image" src={imageUrl} alt="" />
+  {/if}
+  <div class="content">
+    <main>
+      <h2 class="heading">{heading}</h2>
+      <p class="text">{description}</p>
+    </main>
+    <footer>
+      <p class="subtext">{subtext}</p>
+      <a href={linkUrl}>{linkText}</a>
+    </footer>
+  </div>
+</div>
+
+<style>
+  .container {
+    height: 100%;
+    max-width: var(--cardWidth);
+    display: flex !important;
+    text-align: left;
+  }
+
+  .image {
+    width: var(--imageWidth);
+    height: var(--imageHeight);
+    vertical-align: middle;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.85rem 1.5rem;
+  }
+
+  .heading {
+    font-size: 1rem;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  .text {
+    font-size: 0.85rem;
+    margin: 0.5rem 0 0 0;
+    font-weight: 400;
+    line-height: 1.25rem;
+  }
+
+  footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  .subtext {
+    font-size: 0.85rem;
+    margin: 0;
+    font-weight: 400;
+    color: #757575;
+  }
+
+  a {
+    margin: 0.5rem 0 0 0;
+    text-decoration: none;
+    color: var(--color);
+    font-weight: 600;
+    font-size: 0.85rem;
+    margin: 0;
+  }
+
+  a:hover {
+    color: var(--linkHoverColor);
+  }
+</style>
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@ -23,5 +23,7 @@ export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
 export { default as embed } from "./Embed.svelte"
 export { default as stackedlist } from "./StackedList.svelte"
+export { default as card } from "./Card.svelte"
+export { default as cardhorizontal } from "./CardHorizontal.svelte"
 export { default as recorddetail } from "./RecordDetail.svelte"
 export * from "./Chart"