Elonsoft · feerzlay · Jul 6, 2020
diff --git a/README.md b/README.md
@@ -5,3 +5,15 @@
 ```bash
 yarn add @elonsoft/elonkit angular2-text-mask text-mask-addons
 ```
+
+```scss
+@import '@elonsoft/elonkit/theme';
+@include elonkit-theme($theme);
+```
+
+### Override Angular Material styles
+
+```scss
+@import '@elonsoft/elonkit/overrides';
+@include elonkit-overrides($theme);
+```
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "elonsoft",
   "version": "0.0.1",
   "scripts": {
-    "build": "ng build --prod && scss-bundle && cp README.md dist/elonkit",
+    "build": "ng build --prod && scss-bundle --config scss-bundle.config.theme.json && scss-bundle --config scss-bundle.config.overrides.json && cp README.md dist/elonkit",
     "test": "ng test",
     "test:watch": "ng test --watch",
     "lint:tslint": "tslint -c tslint.json --project tsconfig.json 'projects/**/*.ts'",
@@ -73,7 +73,7 @@
     "react-is": "~16.13.1",
     "sass": "^1.26.8",
     "sass-loader": "^8.0.2",
-    "scss-bundle": "~3.0.2",
+    "scss-bundle": "~3.1.2",
     "stylelint": "~13.6.0",
     "stylelint-config-sass-guidelines": "~7.0.0",
     "stylelint-order": "~4.1.0",

diff --git a/projects/elonkit/src/overrides.scss b/projects/elonkit/src/overrides.scss
@@ -0,0 +1,7 @@
+@import './overrides/button/button';
+@import './overrides/form-field/form-field';
+
+@mixin elonkit-overrides($theme) {
+  @include es-button-overrides($theme);
+  @include es-form-field-overrides($theme);
+}
diff --git a/...kit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.html b/...kit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.html
@@ -0,0 +1 @@
+<button mat-flat-button color="primary">Button</button>
diff --git a/...onkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.ts b/...onkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.ts
@@ -0,0 +1,9 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'es-button-story-basic',
+  templateUrl: './button-story-basic.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class ButtonStoryBasicComponent {}
diff --git a/.../elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.module.ts b/.../elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+
+import { MatButtonModule } from '@angular/material/button';
+
+import { ButtonStoryBasicComponent } from './button-story-basic.component';
+
+@NgModule({
+  declarations: [ButtonStoryBasicComponent],
+  imports: [MatButtonModule],
+  exports: [ButtonStoryBasicComponent]
+})
+export class ButtonStoryBasicModule {}
diff --git a/projects/elonkit/src/overrides/button/__stories__/button-story-basic/index.ts b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/index.ts
@@ -0,0 +1,2 @@
+export { ButtonStoryBasicComponent } from './button-story-basic.component';
+export { ButtonStoryBasicModule } from './button-story-basic.module';
diff --git a/projects/elonkit/src/overrides/button/__stories__/button.stories.mdx b/projects/elonkit/src/overrides/button/__stories__/button.stories.mdx
@@ -0,0 +1,25 @@
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import { Preview } from '~storybook/components';
+
+import { withA11y } from '@storybook/addon-a11y';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { ButtonStoryBasicModule, ButtonStoryBasicComponent } from './button-story-basic';
+
+<Meta title='Overrides/Button' decorators={[withA11y, withKnobs]} />
+
+# Button
+
+<Preview>
+  <Story name='Basic' height='170px'>
+    {{
+      component: ButtonStoryBasicComponent,
+      moduleMetadata: {
+        imports: [BrowserAnimationsModule, ButtonStoryBasicModule]
+      }
+    }}
+  </Story>
+</Preview>
diff --git a/projects/elonkit/src/overrides/button/button.scss b/projects/elonkit/src/overrides/button/button.scss
@@ -0,0 +1,5 @@
+@mixin es-button-overrides($theme) {
+  .mat-button-base {
+    text-transform: uppercase;
+  }
+}
diff --git a/...rides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.html b/...rides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.html
@@ -0,0 +1,13 @@
+<div style="max-width: 400px;">
+  <mat-form-field appearance="outline">
+    <mat-label>Input 1</mat-label>
+    <input matInput />
+    <mat-hint>This is hint 1</mat-hint>
+  </mat-form-field>
+
+  <mat-form-field appearance="outline">
+    <mat-label>Input 2</mat-label>
+    <input matInput />
+    <mat-hint>This is hint 2</mat-hint>
+  </mat-form-field>
+</div>
diff --git a/...errides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.ts b/...errides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.ts
@@ -0,0 +1,9 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'es-form-field-story-basic',
+  templateUrl: './form-field-story-basic.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class FormFieldStoryBasicComponent {}
diff --git a/.../overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.module.ts b/.../overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+import { FormFieldStoryBasicComponent } from './form-field-story-basic.component';
+
+@NgModule({
+  declarations: [FormFieldStoryBasicComponent],
+  imports: [MatButtonModule, MatFormFieldModule, MatInputModule],
+  exports: [FormFieldStoryBasicComponent]
+})
+export class FormFieldStoryBasicModule {}
diff --git a/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/index.ts b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/index.ts
@@ -0,0 +1,2 @@
+export { FormFieldStoryBasicComponent } from './form-field-story-basic.component';
+export { FormFieldStoryBasicModule } from './form-field-story-basic.module';
diff --git a/projects/elonkit/src/overrides/form-field/__stories__/form-field.stories.mdx b/projects/elonkit/src/overrides/form-field/__stories__/form-field.stories.mdx
@@ -0,0 +1,25 @@
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import { Preview } from '~storybook/components';
+
+import { withA11y } from '@storybook/addon-a11y';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { FormFieldStoryBasicModule, FormFieldStoryBasicComponent } from './form-field-story-basic';
+
+<Meta title='Overrides/Form Field' decorators={[withA11y, withKnobs]} />
+
+# Form Field
+
+<Preview>
+  <Story name='Basic' height='170px'>
+    {{
+      component: FormFieldStoryBasicComponent,
+      moduleMetadata: {
+        imports: [BrowserAnimationsModule, FormFieldStoryBasicModule]
+      }
+    }}
+  </Story>
+</Preview>
diff --git a/projects/elonkit/src/overrides/form-field/form-field.scss b/projects/elonkit/src/overrides/form-field/form-field.scss
@@ -0,0 +1,9 @@
+@mixin es-form-field-overrides($theme) {
+  .mat-form-field-appearance-outline {
+    width: 100%;
+
+    .mat-form-field-subscript-wrapper {
+      position: static;
+    }
+  }
+}
diff --git a/projects/elonkit/storybook/preview-theme.scss b/projects/elonkit/storybook/preview-theme.scss
@@ -11,3 +11,7 @@ $theme: mat-light-theme($primary, $accent);
 // In production it's "@elonsoft/elonkit/theme"
 @import '../src/theme';
 @include elonkit-theme($theme);
+
+// In production it's "@elonsoft/elonkit/overrides"
+@import '../src/overrides';
+@include elonkit-overrides($theme);
diff --git a/projects/elonkit/storybook/preview.js b/projects/elonkit/storybook/preview.js
@@ -9,6 +9,15 @@ import theme from './theme';
 
 addParameters({
   options: {
-    theme
+    theme,
+    storySort: (a, b) => {
+      if (a[1].kind.split('/')[0] !== b[1].kind.split('/')[0]) {
+        return a[1].kind.startsWith('UI') ? -1 : 1;
+      }
+
+      return a[1].kind === b[1].kind
+        ? 0
+        : a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
+    }
   }
 });
diff --git a/scss-bundle.config.overrides.json b/scss-bundle.config.overrides.json
@@ -0,0 +1,8 @@
+{
+  "bundlerOptions": {
+    "entryFile": "./projects/elonkit/src/overrides.scss",
+    "rootDir": "./projects/src",
+    "outFile": "./dist/elonkit/overrides.scss",
+    "logLevel": "error"
+  }
+}
diff --git a/scss-bundle.config.json → scss-bundle.config.theme.json b/scss-bundle.config.json → scss-bundle.config.theme.json
diff --git a/yarn.lock b/yarn.lock
@@ -3174,7 +3174,7 @@
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
   integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
 
-"@types/fs-extra@^8.0.0":
+"@types/fs-extra@^8.0.1":
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-8.1.1.tgz#1e49f22d09aa46e19b51c0b013cb63d0d923a068"
   integrity sha512-TcUlBem321DFQzBNuz8p0CLLKp0VvF/XH9E4KHNmgwyp4E3AfgI5cjiIVZWlbfThBop2qxFIh4+LeY6hVWWZ2w==
@@ -5482,7 +5482,7 @@ chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
-chokidar@^3.0.2:
+chokidar@^3.3.1:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.0.tgz#b30611423ce376357c765b9b8f904b9fba3c0be8"
   integrity sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==
@@ -5813,7 +5813,7 @@ commander@^2.11.0, commander@^2.12.1, commander@^2.20.0, commander@^2.9.0, comma
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^3.0.0, commander@^3.0.2:
+commander@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/commander/-/commander-3.0.2.tgz#6837c3fb677ad9933d1cfba42dd14d5117d6b39e"
   integrity sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==
@@ -11225,16 +11225,16 @@ loglevel-plugin-prefix@^0.8.4:
   resolved "https://registry.yarnpkg.com/loglevel-plugin-prefix/-/loglevel-plugin-prefix-0.8.4.tgz#2fe0e05f1a820317d98d8c123e634c1bd84ff644"
   integrity sha512-WpG9CcFAOjz/FtNht+QJeGpvVl/cdR6P0z6OcXSkr8wFJOsV2GRj2j10JLfjuA4aYkcKCNIEqRGCyTife9R8/g==
 
-loglevel@^1.6.3, loglevel@^1.6.8:
-  version "1.6.8"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
-  integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==
-
 loglevel@^1.6.4:
   version "1.6.7"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.7.tgz#b3e034233188c68b889f5b862415306f565e2c56"
   integrity sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A==
 
+loglevel@^1.6.6, loglevel@^1.6.8:
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
+  integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==
+
 longest-streak@^2.0.1:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
@@ -15247,20 +15247,27 @@ sass@1.26.3:
   dependencies:
     chokidar ">=2.0.0 <4.0.0"
 
-sass@^1.22.9, sass@^1.26.8:
-  version "1.26.8"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.8.tgz#312652530721f9568d4c4000b0db07ec6eb23325"
-  integrity sha512-yvtzyrKLGiXQu7H12ekXqsfoGT/aTKeMDyVzCB675k1HYuaj0py63i8Uf4SI9CHXj6apDhpfwbUr3gGOjdpu2Q==
-  dependencies:
-    chokidar ">=2.0.0 <4.0.0"
-
 sass@^1.23.0:
   version "1.25.0"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.25.0.tgz#f8bd7dfbb39d6b0305e27704a8ebe637820693f3"
   integrity sha512-uQMjye0Y70SEDGO56n0j91tauqS9E1BmpKHtiYNQScXDHeaE9uHwNEqQNFf4Bes/3DHMNinB6u79JsG10XWNyw==
   dependencies:
     chokidar ">=2.0.0 <4.0.0"
 
+sass@^1.23.7:
+  version "1.26.9"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.9.tgz#73c10cbb88c12b22a9e0107725bfd62296f4978f"
+  integrity sha512-t8AkRVi+xvba4yZiLWkJdgJHBFCB3Dh4johniQkPy9ywkgFHNasXFEFP+RG/F6LhQ+aoE4aX+IorIWQjS0esVw==
+  dependencies:
+    chokidar ">=2.0.0 <4.0.0"
+
+sass@^1.26.8:
+  version "1.26.8"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.8.tgz#312652530721f9568d4c4000b0db07ec6eb23325"
+  integrity sha512-yvtzyrKLGiXQu7H12ekXqsfoGT/aTKeMDyVzCB675k1HYuaj0py63i8Uf4SI9CHXj6apDhpfwbUr3gGOjdpu2Q==
+  dependencies:
+    chokidar ">=2.0.0 <4.0.0"
+
 sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -15327,28 +15334,28 @@ scope-analyzer@^2.0.1:
     estree-is-function "^1.0.0"
     get-assigned-identifiers "^1.1.0"
 
-scss-bundle@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/scss-bundle/-/scss-bundle-3.0.2.tgz#c6fd4d8738a938584070210beb9bd5eb69d87bbb"
-  integrity sha512-6OUFD+bD1ko/nrcXEGQ58NY/pTAQyj3LBfUyCpDeplcs8m8U7CWAfSuK49BrV5PEUGRXEh3oiETxqeG1vJSvrA==
+scss-bundle@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/scss-bundle/-/scss-bundle-3.1.2.tgz#8919dd7603d01a84822e8aab5210e5b0b50c548b"
+  integrity sha512-lvxTwCKDLgzmRWhGwJ834ggtnEhs0G9FxSJRWte+NwlshVvBcQ/kOHHkpAGDpCxIMNGz/Utl0yd/MWyQAOBhqg==
   dependencies:
     "@types/archy" "^0.0.31"
     "@types/debug" "^4.1.5"
-    "@types/fs-extra" "^8.0.0"
+    "@types/fs-extra" "^8.0.1"
     "@types/glob" "^7.1.1"
     "@types/lodash.debounce" "^4.0.6"
     "@types/sass" "^1.16.0"
     archy "^1.0.0"
-    chalk "^2.4.2"
-    chokidar "^3.0.2"
-    commander "^3.0.0"
+    chalk "^3.0.0"
+    chokidar "^3.3.1"
+    commander "^4.0.1"
     fs-extra "^8.1.0"
     globs "^0.1.4"
     lodash.debounce "^4.0.8"
-    loglevel "^1.6.3"
+    loglevel "^1.6.6"
     loglevel-plugin-prefix "^0.8.4"
     pretty-bytes "^5.3.0"
-    sass "^1.22.9"
+    sass "^1.23.7"
     tslib "^1.10.0"
 
 select-hose@^2.0.0:
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<button mat-flat-button color="primary">Button</button>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { ButtonStoryBasicComponent } from './button-story-basic.component';
		export { ButtonStoryBasicModule } from './button-story-basic.module';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { FormFieldStoryBasicComponent } from './form-field-story-basic.component';
		export { FormFieldStoryBasicModule } from './form-field-story-basic.module';