From 4c88fff69cafccc72a45e63c90b3a0be095787aa Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Mon, 19 Feb 2024 09:31:01 +1100
Subject: [PATCH] feat(#139): add layout component

---
 src/components/Layout.stories.js | 36 ++++++++++++++++++
 src/components/Layout.vue        | 65 ++++++++++++++++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 src/components/Layout.stories.js
 create mode 100644 src/components/Layout.vue

diff --git a/src/components/Layout.stories.js b/src/components/Layout.stories.js
new file mode 100644
index 0000000..c1442cf
--- /dev/null
+++ b/src/components/Layout.stories.js
@@ -0,0 +1,36 @@
+import CTLabel from './Label.vue'
+
+export default {
+  title: 'CivicTheme/Atoms/Forms/Label',
+  component: CTLabel,
+  argTypes: {
+    size: {
+      options: ['extra-large', 'large', 'regular', 'small', 'extra-small'],
+      control: 'select'
+    },
+    theme: {
+      options: ['dark', 'light'],
+      control: 'select'
+    }
+  },
+  parameters: {
+    status: {
+      type: 'beta',
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    template: `<CTLabel v-bind="$props" v-on="$props">
+  <template v-if="$props.default">{{ $props.default }}</template>
+</CTLabel>`,
+  }
+}
+
+export const Default = Template.bind({})
+Default.storyName = 'Label'
+Default.args = {
+  default: '[Default content slot]',
+}
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
new file mode 100644
index 0000000..9ffcf4f
--- /dev/null
+++ b/src/components/Layout.vue
@@ -0,0 +1,65 @@
+<template>
+  <main :class="`ct-layout ${themeClass}`" role="main">
+    <a id="main-content" tabindex="-1" />
+    <slot name="content_top" />
+
+    <div
+      class="ct-layout__inner"
+      :class="{
+        'container': container
+      }"
+    >
+      <div class="row">
+        <aside
+          v-if="hasSidebar"
+          class="ct-layout__sidebar"
+          :class="columnClasses.sidebar"
+          role="complementary"
+        >
+          <slot name="sidebar" />
+        </aside>
+
+        <section class="ct-layout__main" :class="columnClasses.main">
+          <div class="ct-layout--single-column">
+            <div class="ct-layout__content">
+              <slot />
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+
+    <slot name="content_bottom" />
+  </main>
+</template>
+
+<script>
+import ThemeMixin from '../mixins/theme'
+
+export default {
+  mixins: [ThemeMixin],
+
+  props: {
+    columns: {
+      type: Object,
+      default: undefined
+    },
+    container: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    columnClasses: ({ columns, hasSidebar }) => {
+      const colClasses = (o) => Object.entries(o).map(([key, value]) => `col-${key}-${value}`).join(' ')
+      return {
+        main: colClasses(columns?.main || hasSidebar ? { xss: 12, m: 8, 'm-offset': 1 } : { xss: 12 }),
+        sidebar: hasSidebar ? colClasses(columns?.sidebar || { xss: 12, m: 3 }) : undefined,
+      }
+    },
+
+    hasSidebar: ({ $slots }) => !!$slots?.sidebar
+  }
+}
+</script>