diff --git a/package-lock.json b/package-lock.json index 8ad166d..52ab0a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -287,6 +287,11 @@ "integrity": "sha512-HyYEUDeIj5rRQU2Hk5HTB2uHsbRQpF70nvMhVzi+VJR0X+xNEhjPui4/kBf3VeH/wqD28PT4sVOm8qqLjBrSZg==", "dev": true }, + "@eightshapes/css-classify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@eightshapes/css-classify/-/css-classify-0.1.2.tgz", + "integrity": "sha512-zQrRhfFj8x3kHWhWOCUVp+8pVdFN2m6uxfEE4qSPohQ1Q+KBX3N+XMU3UnoAbjMaAp2P03NdkfZ2RyqrIBigDg==" + }, "@emotion/cache": { "version": "10.0.29", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", @@ -3493,6 +3498,12 @@ "integrity": "sha1-8rslNovBIeORwlIN6Slpyu4KApA=", "dev": true }, + "memorystream": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", + "integrity": "sha1-htcJCzDORV1j+64S3aUaR93K+bI=", + "dev": true + }, "merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -3637,6 +3648,12 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "nice-try": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", + "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", + "dev": true + }, "node-libs-browser": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz", @@ -3708,6 +3725,148 @@ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "dev": true }, + "npm-run-all": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz", + "integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "chalk": "^2.4.1", + "cross-spawn": "^6.0.5", + "memorystream": "^0.3.1", + "minimatch": "^3.0.4", + "pidtree": "^0.3.0", + "read-pkg": "^3.0.0", + "shell-quote": "^1.6.1", + "string.prototype.padend": "^3.0.0" + }, + "dependencies": { + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "cross-spawn": { + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", + "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", + "dev": true, + "requires": { + "nice-try": "^1.0.4", + "path-key": "^2.0.1", + "semver": "^5.5.0", + "shebang-command": "^1.2.0", + "which": "^1.2.9" + } + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + }, + "load-json-file": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", + "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "parse-json": "^4.0.0", + "pify": "^3.0.0", + "strip-bom": "^3.0.0" + } + }, + "parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=", + "dev": true, + "requires": { + "error-ex": "^1.3.1", + "json-parse-better-errors": "^1.0.1" + } + }, + "path-key": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", + "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=", + "dev": true + }, + "path-type": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz", + "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==", + "dev": true, + "requires": { + "pify": "^3.0.0" + } + }, + "pify": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "dev": true + }, + "read-pkg": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", + "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=", + "dev": true, + "requires": { + "load-json-file": "^4.0.0", + "normalize-package-data": "^2.3.2", + "path-type": "^3.0.0" + } + }, + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + }, + "shebang-command": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", + "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=", + "dev": true, + "requires": { + "shebang-regex": "^1.0.0" + } + }, + "shebang-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", + "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=", + "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + }, + "which": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } + } + } + }, "npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -3946,6 +4105,12 @@ "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", "dev": true }, + "pidtree": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz", + "integrity": "sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==", + "dev": true + }, "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", @@ -4182,6 +4347,16 @@ "safe-buffer": "^5.1.0" } }, + "raw-loader": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz", + "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==", + "dev": true, + "requires": { + "loader-utils": "^2.0.0", + "schema-utils": "^3.0.0" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -4492,6 +4667,12 @@ "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", "dev": true }, + "shell-quote": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz", + "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==", + "dev": true + }, "signal-exit": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", @@ -4641,6 +4822,17 @@ "strip-ansi": "^6.0.0" } }, + "string.prototype.padend": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.1.tgz", + "integrity": "sha512-eCzTASPnoCr5Ht+Vn1YXgm8SB015hHKgEIMu9Nr9bQmLhRBxKRfmzSj/IQsxDFc8JInJDDFA0qXwK+xxI7wDkg==", + "dev": true, + "requires": { + "call-bind": "^1.0.0", + "define-properties": "^1.1.3", + "es-abstract": "^1.18.0-next.1" + } + }, "string.prototype.trimend": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz", diff --git a/package.json b/package.json index f72ecb8..dc6e865 100644 --- a/package.json +++ b/package.json @@ -7,11 +7,16 @@ "url": "https://github.com/initialyze/initialyzer-ds.git" }, "scripts": { - "build": "webpack --config webpack.config.js" + "build": "npm-run-all build:css build:js", + "build:js": "webpack --config webpack/js/webpack.config.js", + "build:css": "webpack --config webpack/css/webpack.config.js", + "lit:css": "node src/utility/create-dynamic-lit-css.js", + "build:dist": "npm-run-all build:css lit:css build:js" }, "author": "Initialyze", "license": "", "dependencies": { + "@eightshapes/css-classify": "^0.1.2", "@webcomponents/webcomponentsjs": "^2.5.0", "bootstrap": "^4.6.0", "lit-element": "^2.4.0", @@ -34,7 +39,9 @@ "eslint-plugin-import": "^2.22.1", "eslint-plugin-prettier": "^3.3.1", "mini-css-extract-plugin": "^1.3.3", + "npm-run-all": "^4.1.5", "postcss-loader": "^4.1.0", + "raw-loader": "^4.0.2", "sass": "^1.32.4", "sass-loader": "^10.1.1", "webpack": "^5.13.0", diff --git a/src/global/_design-token-variables.scss b/src/global/_design-token-variables.scss new file mode 100644 index 0000000..3b7825e --- /dev/null +++ b/src/global/_design-token-variables.scss @@ -0,0 +1,112 @@ + +/** + * @tokens SCSS: Opacities + * @presenter Opacity + */ + +/* Opacity palette */ +$opacity-0: 0; +$opacity-10: 0.1; +$opacity-20: 0.2; +$opacity-30: 0.3; +$opacity-40: 0.4; +$opacity-50: 0.5; +$opacity-60: 0.6; +$opacity-70: 0.7; +$opacity-80: 0.8; +$opacity-90: 0.9; +$opacity-100: 1; + + +/** + * @tokens SCSS: Colors + * @presenter Color + */ + +// Colors +$warning-color: #FFB900 !default; +$crimson: #E74856 !default; +$blue: #0078D7 !default; /* Description 1 */ +$cyan: #0099BC !default; +$dimgrey: #7A7574 !default; +$grey: #767676 !default; // Description 2 +$light-grey: #BFBFBF !default; +$gainsboro: #DCDCDC !default; +$amber: #FF8C00 !default; +$red: #E81123 !default; +$dark-blue: #0063B1 !default; +$steel-blue: #2D7D9A !default; +$dark-dimgrey: #5D5A58 !default; +$dark-grey: #4C4A48 !default; +$orange: #F7630C !default; +$pink: #EA005E !default; +$light-violet: #8E8CD8 !default; +$turquoise: #00B7C3 !default; +$bluegrey: #68768A !default; +$steel: #69797E !default; +$chocolate: #CA5010 !default; +$medium-violet: #C30052 !default; +$slate-blue: #6B69D6 !default; +$teal: #038387 !default; +$dark-bluegrey: #515C6B !default; +$dark-steel: #4A5459 !default; +$deep-orange: #DA3B01 !default; +$megent: #E3008C !default; +$light-purple: #8764B8 !default; +$light-sea: #00B294 !default; +$slate-grey: #567C73 !default; +$olive: #647C64 !default; +$salmon: #EF6950 !default; +$dark-pink: #BF0077 !default; +$dark-purple: #744DA9 !default; +$dark-cyan: #018574 !default; +$green-grey: #486860 !default; +$dark-olive: #525E54 !default; +$dark-coral: #D13438 !default; +$orchid: #C239B3 !default; +$medium-orchid: #B146C2 !default; +$green: #00CC6A !default; +$grass-green: #498205 !default; +$sandy: #847545 !default; +$coral: #FF4343 !default; +$purple: #9A0089 !default; +$dark-orchid: #881798 !default; +$forest-green: #10893E !default; +$dark-green: #107C10 !default; +$earth: #7E735F !default; +$black-base: #000 !default; +$white-base: #fff !default; + +/** + * @tokens SCSS: Spacings + * @presenter Spacing + */ + +//Spacing Defaults +$body-default-padding: 1rem 0; + +//space in rems +$space-xxs: $spacer * .125; +$space-xs: $spacer * 0.25; +$space-sm: $spacer * 0.5; +$space-md: $spacer; +$space-lg: $spacer * 2; +$space-xl: $spacer * 4; +$space-xxl: $spacer * 8; + + +/** + * @tokens SCSS: Easings + * @presenter Easing + */ + +// Transitions +$transition-basic: all .2s linear !default; + +/** + * @tokens SCSS: Border + * @presenter Border + */ + +// Border radius +$border-radius-circle: 50% !default; diff --git a/src/global/_design-token.css b/src/global/_design-token.css new file mode 100644 index 0000000..82b5fd1 --- /dev/null +++ b/src/global/_design-token.css @@ -0,0 +1,121 @@ +/** + * @tokens CSS: Opacities + * @presenter Opacity + */ + +:root { +/* Opacity palette */ +--opacity-0: 0; +--opacity-10: 0.1; +--opacity-20: 0.2; +--opacity-30: 0.3; +--opacity-40: 0.4; +--opacity-50: 0.5; +--opacity-60: 0.6; +--opacity-70: 0.7; +--opacity-80: 0.8; +--opacity-90: 0.9; +--opacity-100: 1; +} + +/** + * @tokens CSS: Colors + * @presenter Color + */ +:root { + --warning-color: #FFB900; +--crimson: #E74856; +--blue: #0078D7; +--cyan: #0099BC; +--dimgrey: #7A7574; +--grey: #767676; +--light-grey: #BFBFBF; +--gainsboro: #DCDCDC; +--amber: #FF8C00; +--red: #E81123; +--dark-blue: #0063B1; +--steel-blue: #2D7D9A; +--dark-dimgrey: #5D5A58; +--dark-grey: #4C4A48; +--orange: #F7630C; +--pink: #EA005E; +--light-violet: #8E8CD8; +--turquoise: #00B7C3; +--bluegrey: #68768A; +--steel: #69797E; +--chocolate: #CA5010; +--medium-violet: #C30052; +--slate-blue: #6B69D6; +--teal: #038387; +--dark-bluegrey: #515C6B; +--dark-steel: #4A5459; +--deep-orange: #DA3B01; +--megent: #E3008C; +--light-purple: #8764B8; +--light-sea: #00B294; +--slate-grey: #567C73; +--olive: #647C64; +--salmon: #EF6950; +--dark-pink: #BF0077; +--dark-purple: #744DA9; +--dark-cyan: #018574; +--green-grey: #486860; +--dark-olive: #525E54; +--dark-coral: #D13438; +--orchid: #C239B3; +--medium-orchid: #B146C2; +--green: #00CC6A; +--grass-green: #498205; +--sandy: #847545; +--coral: #FF4343; +--purple: #9A0089; +--dark-orchid: #881798; +--forest-green: #10893E; +--dark-green: #107C10; +--earth: #7E735F; +--black-base: #000 ; +--white-base: #fff ; + + +/* Aliases */ + +--primary: var(--blue); +--secondary: var(--grey); +--default: var(--dark-purple); +--success: var(--dark-green); +--info: var(--turquoise); +--warning: var(--warning-color); +--danger: var(--deep-orange); + +} + +/** + * @tokens CSS: Spacings + * @presenter Spacing + */ +:root { +--spacer: 1rem; +--space-xxs: .125rem; +--space-xs: 0.25rem; +--space-sm: 0.5rem; +--space-md: var(--spacer); +--space-lg: 2rem; +--space-xl: 4rem; +--space-xxl: 8rem; +} + +/** + * @tokens CSS: Easings + * @presenter Easing + */ +:root { +--transition-basic: all .2s linear; /* To use it in SCSS you can add $transition-basic variable */ +} + +/** + * @tokens CSS: Border + * @presenter Border + */ +:root { +--border-radius-circle: 50%; +} \ No newline at end of file diff --git a/src/global/_variables.scss b/src/global/_variables.scss index aeec270..c669200 100644 --- a/src/global/_variables.scss +++ b/src/global/_variables.scss @@ -1,23 +1,12 @@ // overwrite the default bootstrap variables which we will need here for some calculation @import "overwrite"; +@import "design-token-variables"; // Variables // // Variables should follow the `$component-state-property-size` formula for // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. -/* Opacity palette */ -$opacity-0: 0; -$opacity-10: 0.1; -$opacity-20: 0.2; -$opacity-30: 0.3; -$opacity-40: 0.4; -$opacity-50: 0.5; -$opacity-60: 0.6; -$opacity-70: 0.7; -$opacity-80: 0.8; -$opacity-90: 0.9; -$opacity-100: 1; /* Opacity classes with respective values */ $opacity-classes: ( @@ -65,60 +54,7 @@ $open-font-path: "../resources/fonts/OpenSans/" !default; // Font-Awesome $fa-font-path: "../resources/font-awesome"; -// Colors -$warning-color: #FFB900 !default; -$crimson: #E74856 !default; -$blue: #0078D7 !default; -$cyan: #0099BC !default; -$dimgrey: #7A7574 !default; -$grey: #767676 !default; -$light-grey: #BFBFBF !default; -$gainsboro: #DCDCDC !default; -$amber: #FF8C00 !default; -$red: #E81123 !default; -$dark-blue: #0063B1 !default; -$steel-blue: #2D7D9A !default; -$dark-dimgrey: #5D5A58 !default; -$dark-grey: #4C4A48 !default; -$orange: #F7630C !default; -$pink: #EA005E !default; -$light-violet: #8E8CD8 !default; -$turquoise: #00B7C3 !default; -$bluegrey: #68768A !default; -$steel: #69797E !default; -$chocolate: #CA5010 !default; -$medium-violet: #C30052 !default; -$slate-blue: #6B69D6 !default; -$teal: #038387 !default; -$dark-bluegrey: #515C6B !default; -$dark-steel: #4A5459 !default; -$deep-orange: #DA3B01 !default; -$megent: #E3008C !default; -$light-purple: #8764B8 !default; -$light-sea: #00B294 !default; -$slate-grey: #567C73 !default; -$olive: #647C64 !default; -$salmon: #EF6950 !default; -$dark-pink: #BF0077 !default; -$dark-purple: #744DA9 !default; -$dark-cyan: #018574 !default; -$green-grey: #486860 !default; -$dark-olive: #525E54 !default; -$dark-coral: #D13438 !default; -$orchid: #C239B3 !default; -$medium-orchid: #B146C2 !default; -$green: #00CC6A !default; -$grass-green: #498205 !default; -$sandy: #847545 !default; -$coral: #FF4343 !default; -$purple: #9A0089 !default; -$dark-orchid: #881798 !default; -$forest-green: #10893E !default; -$dark-green: #107C10 !default; -$earth: #7E735F !default; -$black-base: #000 !default; -$white-base: #fff !default; - +// Color pallate $full-pallete: () !default; $full-palette: map-merge( ( @@ -232,18 +168,6 @@ $typography-sizes: map_merge( ); -//Spacing Defaults -$body-default-padding: 1rem 0; - -//space in rems -$space-xxs: $spacer * .125; -$space-xs: $spacer * 0.25; -$space-sm: $spacer * 0.5; -$space-md: $spacer; -$space-lg: $spacer * 2; -$space-xl: $spacer * 4; -$space-xxl: $spacer * 8; - $space_tokens: ( xxs : $space-xxs, xs : $space-xs, @@ -254,12 +178,6 @@ $space_tokens: ( xxl : $space-xxl ); -// Transitions -$transition-basic: all .2s linear !default; - -// Border radius -$border-radius-circle: 50% !default; - // Dropdown $dropdown-menu-padding: 1rem !default; diff --git a/src/global/button.scss b/src/global/button.scss new file mode 100644 index 0000000..ca161a4 --- /dev/null +++ b/src/global/button.scss @@ -0,0 +1,63 @@ +.cmp-button +{ + @extend .btn; + // link behaviour + &.link { + &:hover{ + box-shadow: none; + } + } + // Button Block + &--block{ + > .cmp-button, + > .cmp-form-button { + @extend .btn-block; + } + } + + //button sizes (cmp-button--${size}) + &--sm + { + > .cmp-button, + > .cmp-form-button + { + @extend .btn-sm; + } + } + + &--lg { + > .cmp-button, + > .cmp-form-button + { + @extend .btn-lg; + } + } + + // button colors (cmp-button--${color}) + @each $color, $value in $fluent-colors { + // Button Background Variant + &--#{$color} { + > .cmp-button, + > .cmp-form-button { + @extend .btn-#{$color}; + } + } + } + + //button outline-colors (cmp-button--outline-${color}) + &--outline { + // Button Variant + @each $color, $value in $fluent-colors { + &-#{$color} { + .cmp-button, + > .cmp-form-button { + @extend .btn-outline-#{$color}; + } + } + } + } +} +// Form Button Style Override - Default +.cmp-form-button{ + @extend .btn; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html deleted file mode 100644 index 6e05fb9..0000000 --- a/src/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - Document - - - -
- - - - -
- - - \ No newline at end of file diff --git a/src/index.js b/src/index.js deleted file mode 100644 index a8e56ee..0000000 --- a/src/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import './style.scss'; -import './web-component/**/*.js'; diff --git a/src/style.scss b/src/style.scss deleted file mode 100644 index 248fb8c..0000000 --- a/src/style.scss +++ /dev/null @@ -1 +0,0 @@ -@import './web-component/**/*.scss'; \ No newline at end of file diff --git a/src/utility/create-dynamic-lit-css.js b/src/utility/create-dynamic-lit-css.js new file mode 100644 index 0000000..e69058e --- /dev/null +++ b/src/utility/create-dynamic-lit-css.js @@ -0,0 +1,24 @@ +const path = require("path"); +const fs = require("fs"); +const componentDirectory = process.cwd(); +const componentDistDirectory = path.join(componentDirectory, "dist"); +const distFiles = fs.readdirSync(componentDistDirectory); +const cssDistFiles = distFiles.filter( + (filename) => path.parse(filename).ext === ".css" +); +const litCssExportString = `// DO NOT EDIT THIS FILE DIRECTLY +import { css, unsafeCSS } from "lit-element"; +export default css\` + \${unsafeCSS(\`INJECTCSSHERE\`)}\`;`; +cssDistFiles.forEach((filename) => { + const fullPathToFile = path.join(componentDistDirectory, filename); + const { name } = path.parse(filename); + const cssContents = fs.readFileSync(fullPathToFile, "utf-8"); + const newFileName = `${name}.styles.js`; + const fullPathToNewFile = path.join(componentDistDirectory, newFileName); + const newFileContents = litCssExportString.replace( + "INJECTCSSHERE", + cssContents + ); + fs.writeFileSync(fullPathToNewFile, newFileContents); +}); \ No newline at end of file diff --git a/src/web-component/button/button.js b/src/web-component/button/button.js new file mode 100644 index 0000000..873d441 --- /dev/null +++ b/src/web-component/button/button.js @@ -0,0 +1,50 @@ +import { LitElement, html } from 'lit-element'; +import { unsafeHTML } from 'lit-html/directives/unsafe-html'; + +class Button extends LitElement { + static get properties() { + return { + id: { type: String }, + linkWithQuery: { type: String }, + accessibilityLabel: { type: String }, + text: { type: String }, + linkTarget : { type: String}, + linkType : { type: String} + }; + } + + constructor() { + super(); + this.id = "button1"; + this.linkWithQuery = "www.google.com"; + this.accessibilityLabel = "button1"; + this.text = "button1"; + this.linkType ="a"; + this.linkTarget = "_self"; + } + + render() { + console.log("Initializing button component ...",this); + let customElement; + customElement = ` +
+ + ${this.text} + +
+ `; + + return html` + ${unsafeHTML(customElement)} + `; + } +} + +customElements.define('init-wc-button', Button); \ No newline at end of file diff --git a/src/web-component/card/card.html b/src/web-component/card/card.html new file mode 100644 index 0000000..02a32e1 --- /dev/null +++ b/src/web-component/card/card.html @@ -0,0 +1,30 @@ + + + + + + Card + + + + + +
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/src/web-component/card/card.js b/src/web-component/card/card.js new file mode 100644 index 0000000..07e4034 --- /dev/null +++ b/src/web-component/card/card.js @@ -0,0 +1,73 @@ +import { LitElement, html, css, unsafeCSS } from 'lit-element'; +import { CSSClassify } from "@eightshapes/css-classify"; +import { unsafeHTML } from 'lit-html/directives/unsafe-html'; +import '../button/button'; +import componentStyles from '../../../dist/card.styles'; + +class Card extends CSSClassify(LitElement) { + + static get styles() { + return css`${unsafeCSS(componentStyles.cssText)}`; + } + + static get properties() { + return { + assetVariation: { type: String }, + pretitle: { type: String }, + fileReference: {type: String}, + title: { type: String }, + titleType: { type: String }, + description: { type: String }, + variation: { type: String }, + linkEntireCmp: { type: String }, + titleLinkHidden: { type: String }, + linkURL: { type: String }, + actionsEnabled: { type: String }, + template: { type: String }, + linkEntireCard: {}, + }; + } + + constructor() { + super(); + this.assetVariation = 'Default'; + this.title = 'Card Title'; + this.linkURL = 'https://publish-aem65-int.initialyze.com/'; + this.titleType = 'h1'; + this.description = 'Add some description here...'; + this.variation = 'Default'; + this.pretitle = "News"; + this.fileReference = "/content/dam/aem-initialyzer-docs/en/images/logos/initialyzer-logo-top-monochrome.svg"; + this.linkEntireCard = 'false'; + this.titleLinkHidden = 'true'; + this.actionsEnabled = 'true'; + } + + render() { + console.log("Initializing card component ...", componentStyles); + let customElement; + // IF LINK DISABLED + if (this.variation == "Default") { + customElement = ` +
+ +
+
+
+
${this.pretitle}
+

+ ${this.title} +

+
${this.description}
+ +
+ +
`; + } + return html` + ${unsafeHTML(customElement)} + `; + } +} + +customElements.define('init-wc-card', Card); \ No newline at end of file diff --git a/src/web-component/card/card.scss b/src/web-component/card/card.scss new file mode 100644 index 0000000..4072a3e --- /dev/null +++ b/src/web-component/card/card.scss @@ -0,0 +1,307 @@ +// import bootstrap functions, variables and mixins so that we may leverage them +@import "~bootstrap/scss/functions"; +@import '~bootstrap/scss/mixins'; + +//global variables that we need for our project. +@import '../../global/variables'; + +// import the explicit bootstrap pieces that are needed +// Core CSS +@import "~bootstrap/scss/card"; + +//START - BOOTSTRAP GRID +@import "~bootstrap/scss/utilities/spacing"; + +// global mixin being used across the site. +@import '../../global/mixins'; + +// Global SCSS +@import '../../global/typography'; +@import '../../global/colors'; +@import '../../global/grid'; +@import "../../global/spacing"; + +.cmp-card-wrapper { + + .cmp-card { + @extend .card; + + box-shadow: $box-shadow; + position: relative; + // Link entire card + &__wrapper-link { + position: absolute; + width: 100%; + height: 100%; + z-index: 100; + cursor: pointer; + opacity: 0; + } + // Default Style - [START] + + &__asset--embed .cmp-embed > iframe { + width: 100%; + height: 100%; + } + + &__card-title { + @extend .card-title; + @extend .space-stack--xs; + } + + &__description { + @extend .card-text; + @extend .space-stack--md; + } + + &__eyebrow { + background-color: $light-grey; + @extend .space-inset--xs; + @extend .space-stack--xs; + } + // Default Style - [END] + } + + &.cmp-card{ + // Width variation - [START] + &__parent-width { + width:inherit; + } + &__fixed-width { + width: 18rem; + } + &__max-width { + max-width: 540px; + } + // Width variation - [END] + + // Basic card variant + &--basic { + .cmp-card__content { + @extend .card-body; + } + } + + // Vertical card variants + &--vertical { + .cmp-card__asset { + img { + @extend .card-img-top; + } + } + .cmp-card__content { + @extend .card-body; + } + } + + &--profile-card { + text-align: center; + .cmp-card__asset-image { + & > .cmp-image { + position: relative; + height: 120px; + margin-bottom: 50px; + .cmp-image__image { + position: absolute; + width: 130px; + height: 130px; + box-shadow: 0px 5px 10px $grey; + bottom: -50px; + left: 0px; + right: 0px; + margin: 0 auto; + } + } + } + } + + + // Horizontal card variant + &--horizontal { + //common styles for horizontal card variant + .cmp-card__wrapper { + @extend .row; + @extend .no-gutters; + } + .cmp-card__asset { + @extend .col-md-4; + padding-left:0; + padding-right:0; + img { + @extend .card-img; + } + } + .cmp-card__content { + @extend .col-md-8; + @extend .card-body; + @extend .space-inset--lg; + align-self: center; + } + + //styles specific to image-left variant + &.cmp-card--image-left{ + + } + + //styles specific to image-right variant + &.cmp-card--image-right { + .cmp-card__wrapper { + flex-direction: row-reverse; + } + } + + .cmp-card__asset-image + { + .cmp-image__image + { + height: rem-calc(150px); + width: 100%; + object-fit: cover; + + @include media-breakpoint-up(md) + { + height: rem-calc(200px); + } + } + } + + } + + &--image-overlay { + .cmp-card__wrapper { + position: relative; + .cmp-card__content { + padding: 0px; + .cmp-card__bg-content-col { + position: absolute; + top: 0px; + bottom: 0px; + margin: 0 auto; + left: 0px; + right: 0px; + background: $black; + opacity: .5; + } + .cmp-card__content-wrapper{ + position: absolute; + bottom: 0px; + @extend .space-inset--md; + } + } + } + } + + &--jumbotron { + .cmp-card__wrapper { + position: relative; + .cmp-card__content { + padding: 0px; + .cmp-card__bg-content-col { + position: absolute; + top: 0px; + bottom: 0px; + margin: 0 auto; + left: 0px; + right: 0px; + } + .cmp-card__content-wrapper{ + max-width: $container-max-width; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + @extend .space-inset--md; + } + } + } + + .cmp-card__card-title + { + @extend .text-xl; + @extend .space-stack--lg; + @extend .text-center; + font-weight: $font-weight-normal; + + @include media-breakpoint-up(md) + { + @include font-size($font-size-xxl); + @include space-around('margin', $bottom:$space-xl ); + } + @include media-breakpoint-up(lg) { + @include font-size($font-size-xxxl); + } + } + + .cmp-card__description + { + @extend .text-center; + @extend .p3; + @extend .space-stack--lg; + + @include media-breakpoint-up(md) + { + @include space-around('margin', $bottom:$space-xl ); + @include font-size($p2-font-size); + } + + } + + .cmp-card__asset-image + { + .cmp-image__image + { + min-height: 400px; + max-height: 600px; + height: 70vh; + width: 100%; + object-fit: cover; + + @include media-breakpoint-up(md) + { + height: 50vh; + } + } + } + } + } + + &.cmp-card__inline--button{ + .cmp-card__action-container { + display: inline-block; + > .cmp-card__action-item { + display: inline-block; + } + } + } + /* create gradient classes for image on card */ + @each $key, $value in $fluent-colors { + &.cmp-card__asset--bgColor-#{$key} .cmp-card__asset-image>.cmp-image{ + background-color: $value; + } + + &.cmp-card__asset--bgColor-#{$key}.gradient-vertical .cmp-card__asset-image > .cmp-image { + @include gradient(mix($white, $value, 80%), $value, vertical); + } + &.cmp-card__asset--bgColor-#{$key}.gradient-horizontal .cmp-card__asset-image > .cmp-image { + @include gradient(mix($white, $value, 80%), $value, horizontal); + } + &.cmp-card__asset--bgColor-#{$key}.gradient-radial .cmp-card__asset-image > .cmp-image { + @include gradient(mix($white, $value, 80%), $value, null); + } + } +} + + +//author mode fixes +.aem-AuthorLayer-Edit +{ + .cmp-card--jumbotron + { + .cmp-card__asset-image { + .cmp-image__image { + max-height: 500px; + max-width: 100%; + } + } + } +} diff --git a/src/web-component/title/title.js b/src/web-component/title/title.js index cc58828..1cf1f89 100644 --- a/src/web-component/title/title.js +++ b/src/web-component/title/title.js @@ -12,7 +12,7 @@ class Title extends LitElement { return { text: { type: String }, type: { type: String }, - linkDisabled: { type: Boolean }, + linkDisabled: { type: String }, linkURL: { type: String }, }; } diff --git a/webpack.config.js b/webpack/css/webpack.config.js similarity index 51% rename from webpack.config.js rename to webpack/css/webpack.config.js index 956780b..9dc2c0c 100644 --- a/webpack.config.js +++ b/webpack/css/webpack.config.js @@ -4,42 +4,15 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode: 'production', - entry: './src/index.js', + entry: { + 'card': './src/web-component/card/card.scss', + }, module: { rules: [ - { - enforce: 'pre', - test: /\.js$/, - exclude: /node_modules/, - use: [ - { - loader: 'eslint-loader', - options: { - failOnError: true, - failOnWarning: false, - fix: true, - }, - }, - { - loader: 'webpack-import-glob-loader', - options: { - url: false, - }, - }, - ], - }, - { - test: /\.js$/, - exclude: /node_modules/, - use: [ - { - loader: 'babel-loader', - }, - ], - }, { test: /\.scss$/, use: [ + 'raw-loader', MiniCssExtractPlugin.loader, { loader: 'css-loader', @@ -63,12 +36,8 @@ module.exports = { }, ] }, - output: { - filename: 'main.js', - path: path.resolve(__dirname, 'dist'), - }, + plugins: [ - new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: '[name].css', }), diff --git a/webpack/js/webpack.config.js b/webpack/js/webpack.config.js new file mode 100644 index 0000000..c2d5d8d --- /dev/null +++ b/webpack/js/webpack.config.js @@ -0,0 +1,48 @@ +const path = require('path'); + +module.exports = { + mode: 'production', + entry: { + 'card': './src/web-component/card/card.js', + 'title': './src/web-component/title/title.js', + }, + module: { + rules: [ + { + enforce: 'pre', + test: /\.js$/, + exclude: /node_modules/, + use: [ + { + loader: 'eslint-loader', + options: { + failOnError: true, + failOnWarning: false, + fix: true, + }, + }, + { + loader: 'webpack-import-glob-loader', + options: { + url: false, + }, + }, + ], + }, + { + test: /\.js$/, + exclude: /node_modules/, + use: [ + { + loader: 'babel-loader', + }, + ], + } + ] + }, + output: { + filename: () => { + return '[name].js'; + } + } +}; \ No newline at end of file