diff --git a/packages/materialdesign-components/.gitignore b/packages/materialdesign-components/.gitignore index d1a78365b..f29fd6f0b 100644 --- a/packages/materialdesign-components/.gitignore +++ b/packages/materialdesign-components/.gitignore @@ -3,4 +3,4 @@ node_modules yarn.lock package-lock.json dist/index.js -public/* \ No newline at end of file +public/build \ No newline at end of file diff --git a/packages/materialdesign-components/public/index.html b/packages/materialdesign-components/public/index.html new file mode 100644 index 000000000..0008e34ed --- /dev/null +++ b/packages/materialdesign-components/public/index.html @@ -0,0 +1,18 @@ + + + + + + + Svelte app + + + + + + + + + + \ No newline at end of file diff --git a/packages/materialdesign-components/rollup.testconfig.js b/packages/materialdesign-components/rollup.testconfig.js index f2e80e1e3..dcbc39256 100644 --- a/packages/materialdesign-components/rollup.testconfig.js +++ b/packages/materialdesign-components/rollup.testconfig.js @@ -91,7 +91,7 @@ export default { sourcemap: true, format: "iife", name: "app", - file: "public/bundle.js", + file: "public/build/bundle.js", globals: { crypto: "crypto", }, @@ -104,7 +104,7 @@ export default { // we'll extract any component CSS out into // a separate file — better for performance css: css => { - css.write("public/bundle.css") + css.write("public/build/bundle.css"); }, hydratable: true, diff --git a/packages/materialdesign-components/src/Button/Button.svelte b/packages/materialdesign-components/src/Button/Button.svelte new file mode 100644 index 000000000..1bd40b2d7 --- /dev/null +++ b/packages/materialdesign-components/src/Button/Button.svelte @@ -0,0 +1,60 @@ + + + +{#if href} + + {text} + +{:else} + +{/if} + + diff --git a/packages/materialdesign-components/src/Button/_index.scss b/packages/materialdesign-components/src/Button/_index.scss new file mode 100644 index 000000000..db3072f01 --- /dev/null +++ b/packages/materialdesign-components/src/Button/_index.scss @@ -0,0 +1,5 @@ +@import "@material/button/mdc-button.scss"; +@import "@material/ripple/mdc-ripple.scss"; +@import "./mixins.scss"; + +@include bbmd-button-styles(); diff --git a/packages/materialdesign-components/src/Button/_mixins.scss b/packages/materialdesign-components/src/Button/_mixins.scss new file mode 100644 index 000000000..909be472f --- /dev/null +++ b/packages/materialdesign-components/src/Button/_mixins.scss @@ -0,0 +1,39 @@ +@import "@material/feature-targeting/functions"; +@import "@material/feature-targeting/mixins"; + +@mixin bbmd-button-styles($query: mdc-feature-all()) { + $feat-structure: mdc-feature-create-target($query, structure); + + .bbmd-mdc-button--size-large { + @include button-sizing($feat-structure, 21px, 40px, 15px); + } + + .bbmd-mdc-button--size-small { + @include button-sizing($feat-structure, 9px, 32px, 13px); + } + + .bbmd-mdc-button--colour-secondary { + //no feature target as relying on theme variable custom property + @include mdc-button-ink-color(secondary); + + &.mdc-button--raised, + &.mdc-button--unelevated { + @include mdc-button-container-fill-color(secondary); + @include mdc-button-ink-color(on-secondary); + } + + &.mdc-button--outlined { + @include mdc-button-outline-color(secondary); + } + } +} + +@mixin button-sizing($feat, $padding, $height, $fontSize) { + @include mdc-feature-targets($feat) { + padding: 0px $padding; + height: $height; + } + > .mdc-button__label { + font-size: $fontSize; + } +} diff --git a/packages/materialdesign-components/src/Button/index.js b/packages/materialdesign-components/src/Button/index.js new file mode 100644 index 000000000..7b0f4b393 --- /dev/null +++ b/packages/materialdesign-components/src/Button/index.js @@ -0,0 +1,2 @@ +import "./_index.scss"; +export { default as button } from "./Button.svelte"; diff --git a/packages/materialdesign-components/src/ClassBuilder.js b/packages/materialdesign-components/src/ClassBuilder.js new file mode 100644 index 000000000..f5dc8dfd3 --- /dev/null +++ b/packages/materialdesign-components/src/ClassBuilder.js @@ -0,0 +1,38 @@ +export default class ClassBuilder { + constructor(block, customDefaults) { + this.block = `mdc-${block}`; + this.customDefaults = customDefaults; //will be ignored when building custom classes + } + + // classParams: {modifiers:[] (mdc), custom:[] (bbmd), extra:[] (any)} + blocks(classParams) { + let base = this.block; + if (classParams == undefined) return base; + return this.buildClass(base, classParams); + } + + //elementName: string, classParams: {} + elements(elementName, classParams) { + let base = `${this.block}__${elementName}`; + if (classParams == undefined) return base; + return this.buildClass(base, classParams); + } + + buildClass(base, classParams) { + let cls = base; + const { modifiers, customs, extras } = classParams; + if (!!modifiers) cls += modifiers.map(m => ` ${base}--${m}`).join(" "); + if (!!customs) + cls += Object.entries(customs) + .map(([property, value]) => { + //disregard falsy and values set by customDefaults constructor param + if (!!value && !this.customDefaults.includes(value)) { + //custom scss name convention = bbmd-[block | element]--[property]-[value] + return ` bbmd-${base}--${property}-${value}`; + } + }) + .join(""); + if (!!extras) cls += ` ${extras.join(" ")}`; + return cls.trim(); + } +} diff --git a/packages/materialdesign-components/src/Icon.svelte b/packages/materialdesign-components/src/Icon.svelte new file mode 100644 index 000000000..2f51bd366 --- /dev/null +++ b/packages/materialdesign-components/src/Icon.svelte @@ -0,0 +1,13 @@ + + +{icon} diff --git a/packages/materialdesign-components/src/Ripple.js b/packages/materialdesign-components/src/Ripple.js new file mode 100644 index 000000000..f16f43a1c --- /dev/null +++ b/packages/materialdesign-components/src/Ripple.js @@ -0,0 +1,28 @@ +import { MDCRipple } from "@material/ripple"; + +export default function ripple( + node, + props = { colour: "primary", unbounded: false } +) { + node.classList.add("mdc-ripple-surface"); + const component = new MDCRipple(node); + component.unbounded = props.unbounded; + + if (props.colour === "secondary") { + node.classList.remove("mdc-ripple-surface--primary"); + node.classList.add("mdc-ripple-surface--accent"); + } else { + node.classList.add("mdc-ripple-surface--primary"); + node.classList.remove("mdc-ripple-surface--accent"); + } + + return { + destroy() { + component.destroy(); + node.classList.remove("mdc-ripple-surface"); + node.classList.remove("mdc-ripple-surface--primary"); + node.classList.remove("mdc-ripple-surface--accent"); + component = null; + } + }; +} diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js index 7967672ba..faf18e090 100644 --- a/packages/materialdesign-components/src/Test/props.js +++ b/packages/materialdesign-components/src/Test/props.js @@ -7,6 +7,20 @@ export const props = { button: { _component: "@budibase/materialdesign-components/button", _children: [], - raised: true, + variant: "raised", + colour: "secondary", + size: "large", + href: "", + icon: "alarm_on", + trailingIcon: true, + fullBleed: false, + text: "I am button", + disabled: false }, -} + icon: { + _component: "@budibase/materialdesign-components/icon", + _children: [], + icon: "" + } +}; + diff --git a/packages/materialdesign-components/src/Test/testComponents.js b/packages/materialdesign-components/src/Test/testComponents.js index fc33d24fb..a3078e1f6 100644 --- a/packages/materialdesign-components/src/Test/testComponents.js +++ b/packages/materialdesign-components/src/Test/testComponents.js @@ -1,4 +1,5 @@ -import h1 from "../H1.svelte" -import { button } from "@BBMD" +import h1 from "../H1.svelte"; +import { button, icon } from "@BBMD"; + +export default { h1, button, icon }; -export default { h1, button } diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js index 956a3ebb2..c003d7086 100644 --- a/packages/materialdesign-components/src/index.js +++ b/packages/materialdesign-components/src/index.js @@ -1,2 +1,4 @@ -export { default as h1 } from "./H1.svelte" -export { default as button } from "./Button.svelte" +export { default as h1 } from "./H1.svelte"; +export { default as icon } from "./Icon.svelte"; +export { button } from "./Button"; +