fix: small fixes

src/components/Layout/index.js

@@ -1,22 +1,14 @@
-import Container from "./Container.vue";
-import Col from "./Col.vue";
-import Section from "./Section.vue";
-import Ui from "./Ui.vue";
-import App from "./App/_app.vue";
+import App from "./App/app.vue";
 import AppMain from "./App/app-main.vue";
 import AppNavigation from "./App/app-navigation.vue";
-import Shell from "./Shell/_shell.vue";
+import Shell from "./Shell/shell.vue";
 import ShellHeader from "./Shell/shell-header.vue";
 import ShellApp from "./Shell/shell-app.vue";
 import ShellFooter from "./Shell/shell-footer.vue";
 import * as ShellBar from "./ShellBar";
 import { pluginify, objectValues } from "./../../util";
 
 export default pluginify(
-  Container,
-  Col,
-  Section,
-  Ui,
   App,
   AppMain,
   AppNavigation,
@@ -27,16 +19,4 @@ export default pluginify(
   ...objectValues(ShellBar)
 );
 
-export {
-  Container,
-  Col,
-  Section,
-  Ui,
-  App,
-  AppMain,
-  AppNavigation,
-  Shell,
-  ShellHeader,
-  ShellFooter,
-  ShellApp
-};
+export { App, AppMain, AppNavigation, Shell, ShellHeader, ShellFooter, ShellApp };

src/components/col/_col.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="fd-col" :class="classes">
+    <slot />
+  </div>
+</template>
+
+<script>
+// Column-component – used together with `fd-container`.
+export default {
+  name: "FdCol",
+  props: {
+    // Number of columns to span
+    span: {
+      type: Number,
+      // `null` – width is automatically computed
+      default: null
+    },
+    // Number of columns to shift the column
+    shiftBy: {
+      type: Number,
+      // `null` – no shifting
+      default: null
+    }
+  },
+  computed: {
+    classes() {
+      const { span, shiftBy } = this;
+      return [
+        span == null ? "" : `fd-col--${span}`,
+        shiftBy == null ? "" : `fd-col--shift-${shiftBy}`
+      ];
+    }
+  }
+};
+</script>

src/components/col/index.js

@@ -0,0 +1,4 @@
+import FdCol from "./_col.vue";
+import { pluginify } from "./../../util";
+export default pluginify(FdCol);
+export { default as Col } from "./_col.vue";

src/components/Layout/Container.vue → src/components/container/_container.vue

@@ -1,21 +1,24 @@
 <template>
-  <div :class="classes">
+  <div class="fd-container" :class="classes">
+    <!-- Content – or 0…12 instances of `fd-col` -->
     <slot />
   </div>
 </template>
 
 <script>
+// Container component – should contains `fd-col`-instances.
 export default {
   name: "FdContainer",
   props: {
+    // If `true`, the container will act as a flexbox.
     flex: { type: Boolean, default: false },
     fluid: { type: Boolean, default: false },
+    // If `true`, the wrapper is centered within it's parent.
     centered: { type: Boolean, default: false }
   },
   computed: {
     classes() {
       return {
-        "fd-container": true,
         "fd-container--flex": this.flex,
         "fd-container--fluid": this.fluid,
         "fd-container--centered": this.centered

src/components/container/index.js

@@ -0,0 +1,4 @@
+import FdContainer from "./_container.vue";
+import { pluginify } from "./../../util";
+export default pluginify(FdContainer);
+export { default as Container } from "./_container.vue";

src/components/index.js

@@ -11,6 +11,8 @@ import Combobox from "./Combobox";
 import ContextMenu from "./ContextMenu";
 import ContextButton from "./ContextButton";
 import ComboboxMenu from "./ComboboxMenu";
+import Container from "./container";
+import Col from "./col";
 import Counter from "./Counter";
 import DatePicker from "./DatePicker";
 import DatePickerInput from "./DatePickerInput";
@@ -36,6 +38,7 @@ import ModalOverlay from "./ModalOverlay";
 import Pagination from "./Pagination";
 import Panel from "./Panel";
 import Popover from "./Popover";
+import Section from "./section";
 import SearchInput from "./SearchInput";
 import SideNav from "./SideNav";
 import Spinner from "./Spinner";
@@ -68,6 +71,8 @@ const plugin = {
       ButtonGroup,
       Calendar,
       Combobox,
+      Container,
+      Col,
       ComboboxMenu,
       Counter,
       ContextMenu,
@@ -97,6 +102,7 @@ const plugin = {
       Panel,
       Popover,
       SearchInput,
+      Section,
       SideNav,
       Spinner,
       Status,

src/components/section/index.js

@@ -0,0 +1,8 @@
+import FdSection from "./section.vue";
+import FdSectionTitle from "./section-title.vue";
+import FdSectionHeader from "./section-header.vue";
+import { pluginify } from "./../../util";
+export default pluginify(FdSection, FdSectionTitle, FdSectionHeader);
+export { default as Section } from "./section.vue";
+export { default as SectionTitle } from "./section-title.vue";
+export { default as SectionHeader } from "./section-header.vue";

src/components/section/section-header.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="fd-section__header"><slot /></div>
+</template>
+
+<script>
+export default {
+  name: "FdSectionHeader"
+};
+</script>

src/components/section/section-title.vue

@@ -0,0 +1,15 @@
+<script>
+export default {
+  name: "FdSectionTitle",
+  props: {
+    tag: {
+      type: String,
+      default: "h3"
+    }
+  },
+  render(h) {
+    const tag = this.tag;
+    return h(tag, { class: "fd-section__title" }, [this.$slots.default]);
+  }
+};
+</script>

src/components/section/section.vue

@@ -0,0 +1,12 @@
+<template>
+  <section class="fd-section">
+    <slot name="header" />
+    <slot />
+  </section>
+</template>
+
+<script>
+export default {
+  name: "FdSection"
+};
+</script>

src/docs/content/en_us/container.md

@@ -26,5 +26,12 @@ Layout containers used to arrange content on a 12-column grid. Can be used insid
 
 ## Fluid with Cols
 
+This is a small playground which shows you how the fluid container behaves in different situations. Try adding/removing columns and the resize the window.
+
 <d-example name="3-container-fluid-with-cols">
 </d-example>
+
+## Centered & Shifted Content
+
+<d-example name="shifted-and-centered">
+</d-example>

src/docs/content/en_us/section.md

@@ -1,6 +1,8 @@
 ---
 fdRelatedComponents:
   - fd-section
+  - fd-section-header
+  - fd-section-title
   - fd-panel
   - fd-panel-grid
 ---

src/docs/content/examples/container/2-container-centered.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <fd-container style="width: 200px;" centered>
+    <fd-container v-fd-bg:neutral-2 style="width: 200px;" centered>
       Centered
     </fd-container>
   </div>

src/docs/content/examples/container/3-container-fluid-with-cols.vue

@@ -1,26 +1,28 @@
 <template>
   <div>
-    Columns:
-    <fd-button :disabled="addDiabled" @click="cols++" styling="light" icon="sys-add"></fd-button>
-    <fd-button
-      :disabled="removeDisabled"
-      @click="cols--"
-      styling="light"
-      icon="sys-minus"
-    ></fd-button>
+    <fd-button :disabled="addDiabled" @click="cols++" styling="light" icon="sys-add">
+      Column
+    </fd-button>
+    <fd-button :disabled="removeDisabled" @click="cols--" styling="light" icon="sys-minus">
+      Column
+    </fd-button>
+    <hr />
     <br />
     <fd-container fluid>
-      <fd-col :span="1" v-for="col in cols" :key="`col-${col}`">{{ col }}. Column</fd-col>
+      <fd-col :span="span" v-for="col in cols" :key="`col-${col}`">{{ col }}. Column</fd-col>
     </fd-container>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return { cols: 6 };
+    return { cols: 3 };
   },
   computed: {
+    span() {
+      return 12 / this.cols;
+    },
     addDiabled() {
       return this.cols > 11;
     },

src/docs/content/examples/container/shifted-and-centered.vue

@@ -0,0 +1,5 @@
+<template>
+  <fd-container centered>
+    <fd-col :shift-by="2" :span="3" v-fd-bg:neutral-2>Content</fd-col>
+  </fd-container>
+</template>

src/docs/content/examples/section/header.vue

@@ -1,5 +1,10 @@
 <template>
-  <fd-section title="Section title">
+  <fd-section>
+    <template #header>
+      <fd-section-header>
+        <fd-section-title>Section title</fd-section-title>
+      </fd-section-header>
+    </template>
     <fd-panel>Panel</fd-panel>
   </fd-section>
 </template>