MD Typography completed (#86)

packages/materialdesign-components/src/Test/TestApp.svelte

@@ -7,15 +7,13 @@
   const _appPromise = createApp()
   _appPromise.then(a => (_bb = a))
 
-  const testProps = props.justAnH1
+  const { h1, overline, button, textfield } = props
-  const button = props.button
-  const textfield = props.textfield
 
   let currentComponent
 
   $: {
     if (_bb && currentComponent) {
-      _bb.hydrateChildren([testProps, button, textfield], currentComponent)
+      _bb.hydrateChildren([h1, overline, button, textfield], currentComponent)
     }
   }
 </script>

packages/materialdesign-components/src/Test/props.js

@@ -1,11 +1,16 @@
-const getComponent = comp => `@budibase//materialdesign-components/${comp}`;
+const getComponent = comp => `@budibase/materialdesign-components/${comp}`;
 
 
 export const props = {
-  justAnH1: {
+  h1: {
-    _component: "@budibase/materialdesign-components/h1",
+    _component: "@budibase/materialdesign-components/H1",
     _children: [],
-    text: "This is a Header",
+    text: "Im a big header",
+  },
+  overline: {
+    _component: getComponent`Overline`,
+    _children: [],
+    text: "A wee Overline",
   },
   button: {
     _component: "@budibase/materialdesign-components/button",

packages/materialdesign-components/src/Test/testComponents.js

@@ -1,4 +1,3 @@
-import h1 from "../H1.svelte";
+import { button, icon, textfield, H1, Overline } from "@BBMD";
-import { button, icon, textfield } from "@BBMD";
+export default { H1, Overline, button, icon, textfield };
-export default { h1, button, icon, textfield };
 

packages/materialdesign-components/src/Typography/Body1.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<span class="mdc-typography--body1">{text}</span>

packages/materialdesign-components/src/Typography/Body2.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<span class="mdc-typography--body2">{text}</span>

packages/materialdesign-components/src/Typography/Caption.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<div class="mdc-typography--caption">{text}</div>

packages/materialdesign-components/src/Typography/H1.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<h1 class="mdc-typography--headline1">{text}</h1>

packages/materialdesign-components/src/Typography/H2.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<h2 class="mdc-typography--headline2">{text}</h2>

packages/materialdesign-components/src/Typography/H3.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<h3 class="mdc-typography--headline3">{text}</h3>

packages/materialdesign-components/src/Typography/H4.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<h4 class="mdc-typography--headline4">{text}</h4>

packages/materialdesign-components/src/Typography/H5.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<h5 class="mdc-typography--headline5">{text}</h5>

packages/materialdesign-components/src/Typography/H6.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<h6 class="mdc-typography--headline6">{text}</h6>

packages/materialdesign-components/src/Typography/Overline.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<span class="mdc-typography--overline">{text}</span>

packages/materialdesign-components/src/Typography/Sub1.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<span class="mdc-typography--subtitle1">{text}</span>

packages/materialdesign-components/src/Typography/Sub2.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let text = ""
+</script>
+
+<span class="mdc-typography--subtitle2">{text}</span>

packages/materialdesign-components/src/Typography/_style.scss

@@ -0,0 +1 @@
+@import "@material/typography/mdc-typography.scss";

packages/materialdesign-components/src/Typography/index.js

@@ -0,0 +1,13 @@
+import "./_style.scss";
+export { default as H1 } from "./H1.svelte";
+export { default as H2 } from "./H2.svelte";
+export { default as H3 } from "./H3.svelte";
+export { default as H4 } from "./H4.svelte";
+export { default as H5 } from "./H5.svelte";
+export { default as H6 } from "./H6.svelte";
+export { default as Body1 } from "./Body1.svelte";
+export { default as Body2 } from "./Body2.svelte";
+export { default as Sub1 } from "./Sub1.svelte";
+export { default as Sub2 } from "./Sub2.svelte";
+export { default as Caption } from "./Caption.svelte";
+export { default as Overline } from "./Overline.svelte";

packages/materialdesign-components/src/index.js

@@ -1,5 +1,6 @@
-export { default as h1 } from "./H1.svelte";
+// export { default as h1 } from "./H1.svelte";
 
 export { default as icon } from "./Icon.svelte";
 export { button } from "./Button";
 export { textfield } from "./Textfield";
+export * from "./Typography"