From c49b6ef55441f605247425a3444a939e030849d4 Mon Sep 17 00:00:00 2001 From: Catlabs Date: Mon, 16 Jul 2018 16:42:39 +0200 Subject: [PATCH] feat(stark-ui): implementation of the button's theme ISSUES CLOSED: #476 --- packages/stark-ui/assets/styles/_colors.scss | 2 +- .../stark-ui/assets/styles/_typography.scss | 4 +- .../stark-ui/assets/styles/_variables.scss | 67 ++--- .../stark-ui/assets/themes/_button-theme.scss | 89 +++++-- .../components/_action-bar-theme.scss | 64 ++--- .../components/_action-bar.component.scss | 7 +- .../components/action-bar.component.html | 16 +- .../action-bar/components/action.intf.ts | 25 +- showcase/src/app/app.component.html | 25 +- showcase/src/app/app.module.ts | 5 +- showcase/src/app/app.routes.ts | 3 +- .../demo/action-bar/action-bar.component.ts | 4 +- .../src/app/demo/button/button.component.html | 229 ++++++++++++++++++ .../src/app/demo/button/button.component.scss | 14 ++ .../src/app/demo/button/button.component.ts | 12 + showcase/src/app/demo/button/index.ts | 1 + showcase/src/app/demo/demo.module.ts | 8 +- showcase/src/app/demo/index.ts | 1 + showcase/src/app/home/home.component.ts | 1 - .../example-viewer.component.html | 2 +- .../src/assets/examples/button/accent.css | 10 + .../src/assets/examples/button/accent.html | 20 ++ showcase/src/assets/examples/button/alert.css | 10 + .../src/assets/examples/button/alert.html | 20 ++ showcase/src/assets/examples/button/alt.css | 10 + showcase/src/assets/examples/button/alt.html | 20 ++ showcase/src/assets/examples/button/basic.css | 10 + .../src/assets/examples/button/basic.html | 20 ++ .../src/assets/examples/button/disabled.css | 10 + .../src/assets/examples/button/disabled.html | 20 ++ .../src/assets/examples/button/neutral.css | 10 + .../src/assets/examples/button/neutral.html | 20 ++ .../src/assets/examples/button/primary.css | 10 + .../src/assets/examples/button/primary.html | 20 ++ .../src/assets/examples/button/success.css | 10 + .../src/assets/examples/button/success.html | 20 ++ showcase/src/assets/examples/button/warn.css | 10 + showcase/src/assets/examples/button/warn.html | 20 ++ showcase/src/assets/examples/button/white.css | 10 + .../src/assets/examples/button/white.html | 20 ++ 40 files changed, 751 insertions(+), 128 deletions(-) create mode 100644 showcase/src/app/demo/button/button.component.html create mode 100644 showcase/src/app/demo/button/button.component.scss create mode 100644 showcase/src/app/demo/button/button.component.ts create mode 100644 showcase/src/app/demo/button/index.ts create mode 100644 showcase/src/assets/examples/button/accent.css create mode 100644 showcase/src/assets/examples/button/accent.html create mode 100644 showcase/src/assets/examples/button/alert.css create mode 100644 showcase/src/assets/examples/button/alert.html create mode 100644 showcase/src/assets/examples/button/alt.css create mode 100644 showcase/src/assets/examples/button/alt.html create mode 100644 showcase/src/assets/examples/button/basic.css create mode 100644 showcase/src/assets/examples/button/basic.html create mode 100644 showcase/src/assets/examples/button/disabled.css create mode 100644 showcase/src/assets/examples/button/disabled.html create mode 100644 showcase/src/assets/examples/button/neutral.css create mode 100644 showcase/src/assets/examples/button/neutral.html create mode 100644 showcase/src/assets/examples/button/primary.css create mode 100644 showcase/src/assets/examples/button/primary.html create mode 100644 showcase/src/assets/examples/button/success.css create mode 100644 showcase/src/assets/examples/button/success.html create mode 100644 showcase/src/assets/examples/button/warn.css create mode 100644 showcase/src/assets/examples/button/warn.html create mode 100644 showcase/src/assets/examples/button/white.css create mode 100644 showcase/src/assets/examples/button/white.html diff --git a/packages/stark-ui/assets/styles/_colors.scss b/packages/stark-ui/assets/styles/_colors.scss index 4e4c9a65dd..c5f0639ccb 100644 --- a/packages/stark-ui/assets/styles/_colors.scss +++ b/packages/stark-ui/assets/styles/_colors.scss @@ -3,7 +3,7 @@ $mat-light-theme-foreground: $foregrounds; @if variable-exists(stark-base-theme) { $base-theme: map-merge($base-theme, $stark-base-theme); - + @if map-has-key($stark-base-theme, backgrounds) { $mat-light-theme-background: map-merge($backgrounds, map-get($stark-base-theme, backgrounds)); } diff --git a/packages/stark-ui/assets/styles/_typography.scss b/packages/stark-ui/assets/styles/_typography.scss index c41a41273d..ffe24acc06 100644 --- a/packages/stark-ui/assets/styles/_typography.scss +++ b/packages/stark-ui/assets/styles/_typography.scss @@ -15,8 +15,8 @@ $typography-config: mat-typography-config( $display-1: mat-typography-level-create(map-get($typography-theme, display-1)), $headline: mat-typography-level-create(map-get($typography-theme, headline)), $title: mat-typography-level-create(map-get($typography-theme, title)), - $subheading-2: mat-typography-level-create(map-get($typography-theme, subheading-2)), /*Menu, List, Option*/ - $subheading-1: mat-typography-level-create(map-get($typography-theme, subheading-1)), + $subheading-2: mat-typography-level-create(map-get($typography-theme, subheading-2)), + /*Menu, List, Option*/ $subheading-1: mat-typography-level-create(map-get($typography-theme, subheading-1)), $body-2: mat-typography-level-create(map-get($typography-theme, body-2)), $body-1: mat-typography-level-create(map-get($typography-theme, body-1)), $caption: mat-typography-level-create(map-get($typography-theme, caption)), diff --git a/packages/stark-ui/assets/styles/_variables.scss b/packages/stark-ui/assets/styles/_variables.scss index c542c7d42f..6262923691 100644 --- a/packages/stark-ui/assets/styles/_variables.scss +++ b/packages/stark-ui/assets/styles/_variables.scss @@ -67,20 +67,20 @@ $accent-palette: ( ); $warning-palette: ( - 50: #ffccbc, - 100: #ffcdd2, - 200: #ef9a9a, - 300: #e57373, - 400: #ef5350, - 500: #f44336, - 600: #e53935, - 700: #d32f2f, - 800: #c62828, - 900: #b71c1c, - A100: #ff8a80, - A200: #ff5252, - A400: #ff1744, - A700: #d50000, + 50: #fff3e0, + 100: #ffe0b2, + 200: #ffcc80, + 300: #ffb74d, + 400: #ffa726, + 500: #ff9800, + 600: #fb8c00, + 700: #f57c00, + 800: #ef6c00, + 900: #e65100, + A100: #ffd180, + A200: #ffab40, + A400: #ff9100, + A700: #ff6d00, contrast: ( 50: $dark-primary-text, 100: $dark-primary-text, @@ -93,9 +93,9 @@ $warning-palette: ( 800: $light-primary-text, 900: $light-primary-text, A100: $dark-primary-text, - A200: $light-primary-text, - A400: $light-primary-text, - A700: $light-primary-text + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: black ) ); @@ -136,25 +136,26 @@ $foregrounds: ( $base-theme: ( primary-palette: mat-palette($primary-palette), accent-palette: mat-palette($accent-palette), - warn-palette: mat-palette($mat-red) + warn-palette: mat-palette($warning-palette) ); $button-theme: ( - border-radius: $border-radius, - font-size: 14px, - font-weight: 500, - line-height: 36px, - padding: 0 16px, - small-font-size: 12px, - small-font-weight: 500, - small-line-height: 26px, - small-min-width: 50px, - small-padding: 0 5px, - large-font-size: 30px, - large-font-weight: 500, - large-line-height: 52px, - large-min-width: 88px, - large-padding: 0 20px + alert: ( + color: #d32f2f, + contrast: $light-primary-text + ), + alt: ( + color: #323232, + contrast: $light-primary-text + ), + neutral: ( + color: #bfbfbf, + contrast: $light-primary-text + ), + success: ( + color: #4caf50, + contrast: $light-primary-text + ) ); $card-theme: ( diff --git a/packages/stark-ui/assets/themes/_button-theme.scss b/packages/stark-ui/assets/themes/_button-theme.scss index 5b69bbb690..6b619a2116 100644 --- a/packages/stark-ui/assets/themes/_button-theme.scss +++ b/packages/stark-ui/assets/themes/_button-theme.scss @@ -1,10 +1,31 @@ -@mixin stark-button-color($color) { - color: $color; - .mat-button-focus-overlay { - background-color: rgba($color: $color, $alpha: 0.12); +@mixin stark-button-color($color, $contrast) { + &.mat-button, + &.mat-icon-button, + &.mat-stroked-button { + color: $color; + .mat-button-focus-overlay { + background-color: rgba($color: $color, $alpha: 0.12); + } + .mat-ripple-element { + background-color: rgba($color: $color, $alpha: 0.1); + } } - .mat-ripple-element { - background-color: rgba($color: $color, $alpha: 0.1); + + &.mat-flat-button, + &.mat-raised-button, + &.mat-fab, + &.mat-mini-fab { + color: $contrast; + background-color: $color; + .mat-ripple-element { + background-color: rgba($color: $contrast, $alpha: 0.1); + } + } + + .mat-icon-button { + .mat-ripple-element { + background-color: rgba($color: $color, $alpha: 0.2); + } } } @@ -12,27 +33,45 @@ $button-theme: map-merge($button-theme, $stark-button-theme); } -button[mat-raised-button], -a[mat-raised-button] { - border-radius: map-get($button-theme, border-radius); - /*padding: map-get($button-theme, padding); - line-height: map-get($button-theme, line-height);*/ +.mat-success { + @include stark-button-color(map-get(map-get($button-theme, success), color), map-get(map-get($button-theme, success), contrast)); +} + +.mat-alert { + @include stark-button-color(map-get(map-get($button-theme, alert), color), map-get(map-get($button-theme, alert), contrast)); +} + +.mat-alt { + @include stark-button-color(map-get(map-get($button-theme, alt), color), map-get(map-get($button-theme, alt), contrast)); +} + +.mat-neutral { + @include stark-button-color(map-get(map-get($button-theme, neutral), color), map-get(map-get($button-theme, neutral), contrast)); } -button[mat-raised-button].stark-small-button, -a[mat-raised-button].stark-small-button { - font-size: map-get($button-theme, small-font-size); - font-weight: map-get($button-theme, small-font-weight); - line-height: map-get($button-theme, small-line-height); - min-width: map-get($button-theme, small-min-width); - padding: map-get($button-theme, small-padding); +.mat-white { + @include stark-button-color(#fff, $dark-primary-text); +} + +.mat-icon-button .mat-icon, +.mat-mini-fab .mat-icon { + &.stark-small-icon { + line-height: 18px; + height: 18px; + width: 18px; + svg { + height: 18px; + width: 18px; + } + } } -button[mat-raised-button].stark-large-button, -a[mat-raised-button].stark-large-button { - font-size: map-get($button-theme, large-font-size); - font-weight: map-get($button-theme, large-font-weight); - line-height: map-get($button-theme, large-line-height); - min-width: map-get($button-theme, large-min-width); - padding: map-get($button-theme, large-padding); +.mat-button, +.mat-icon-button, +.mat-stroked-button, +.mat-flat-button, +.mat-raised-button, +.mat-fab, +.mat-mini-fab { + text-transform: uppercase; } diff --git a/packages/stark-ui/src/modules/action-bar/components/_action-bar-theme.scss b/packages/stark-ui/src/modules/action-bar/components/_action-bar-theme.scss index 632674297f..39b25403af 100644 --- a/packages/stark-ui/src/modules/action-bar/components/_action-bar-theme.scss +++ b/packages/stark-ui/src/modules/action-bar/components/_action-bar-theme.scss @@ -1,37 +1,47 @@ -.stark-action-bar { - .mat-icon-button { - @include stark-button-color(mat-color(map-get($base-theme, primary-palette))); - } - &.stark-action-bar-full { - background-color: rgba(0, 0, 0, 0.85); - color: rgba(255, 255, 255, 0.8); - .mat-icon-button { - @include stark-button-color(rgba($color: #fff, $alpha: 0.8)); - } +@media #{$tablet-query} { + .stark-action-bar { .action-label { + &.primary { + color: mat-color(map-get($base-theme, primary-palette)); + } + &.warn { + color: mat-color(map-get($base-theme, warn-palette)); + } + &.accent { + color: mat-color(map-get($base-theme, accent-palette)); + } + &.success { + color: map-get(map-get($button-theme, success), color); + } + &.alert { + color: map-get(map-get($button-theme, alert), color); + } + &.alt { + color: map-get(map-get($button-theme, alt), color); + } + &.neutral { + color: map-get(map-get($button-theme, neutral), color); + } + &.white { + color: #fff; + } &.disabled { - color: rgba($color: #fff, $alpha: 0.25); + color: map-get($mat-light-theme-foreground, disabled-text); } } } } -@media #{$tablet-query} { - .stark-action-bar { - color: $md-primary; - &.stark-action-bar-full { - background: none; - color: mat-color(map-get($base-theme, primary-palette)); - .mat-icon-button:not([disabled]) { - @include stark-button-color(mat-color(map-get($base-theme, primary-palette))); - } - [disabled].mat-icon-button { - @include stark-button-color(map-get($mat-light-theme-foreground, disabled-button)); - } - .action-label { - &.disabled { - color: map-get($mat-light-theme-foreground, disabled-button); - } +@media #{$mobile-only-query} { + .stark-action-bar-full { + background-color: rgba(0, 0, 0, 0.85); + .mat-icon-button { + @include stark-button-color(rgba($color: #fff, $alpha: 0.8), $light-primary-text); + } + .action-label { + color: rgba(255, 255, 255, 0.8); + &.disabled { + color: rgba($color: #fff, $alpha: 0.25); } } } diff --git a/packages/stark-ui/src/modules/action-bar/components/_action-bar.component.scss b/packages/stark-ui/src/modules/action-bar/components/_action-bar.component.scss index ba878ad4e2..614ea56bc0 100644 --- a/packages/stark-ui/src/modules/action-bar/components/_action-bar.component.scss +++ b/packages/stark-ui/src/modules/action-bar/components/_action-bar.component.scss @@ -10,12 +10,7 @@ align-items: center; flex-wrap: wrap; } - .mat-icon-button { - .mat-icon svg { - height: 20px; - width: 20px; - } - } + &.stark-action-bar-full { bottom: 0; left: 0; diff --git a/packages/stark-ui/src/modules/action-bar/components/action-bar.component.html b/packages/stark-ui/src/modules/action-bar/components/action-bar.component.html index 302a86080e..5a3bf3e2e7 100644 --- a/packages/stark-ui/src/modules/action-bar/components/action-bar.component.html +++ b/packages/stark-ui/src/modules/action-bar/components/action-bar.component.html @@ -4,27 +4,27 @@
- - +
- -
- + {{ action.label }}
diff --git a/packages/stark-ui/src/modules/action-bar/components/action.intf.ts b/packages/stark-ui/src/modules/action-bar/components/action.intf.ts index fd7593e1c5..721bbf01de 100644 --- a/packages/stark-ui/src/modules/action-bar/components/action.intf.ts +++ b/packages/stark-ui/src/modules/action-bar/components/action.intf.ts @@ -3,42 +3,47 @@ */ export interface StarkActionBase { /** - * Path to SVG icon from iconSets to display inside the action button. Ex: "pencil" (optional) + * Color of the button + */ + buttonColor?: "primary" | "accent" | "warn" | "success" | "alert" | "alt" | "neutral" | "white" | string; + + /** + * Path to SVG icon from iconSets to display inside the action button. Ex: "pencil" */ icon?: string; /** - * Text to be displayed as label of the action button (optional) + * Text to be displayed as label of the action button */ label?: string; /** - * The second label if this action has two possible states: activated and deactivated (optional) + * The second label if this action has two possible states: activated and deactivated */ labelActivated?: string; /** - * In case of two label states, this function will hide one of them or show another (optional) + * In case of two label states, this function will hide one of them or show another */ labelSwitchFunction?: () => boolean; /** - * Whether the action button should be enabled for user interaction or not (optional) + * Whether the action button should be enabled for user interaction or not */ isEnabled?: boolean; /** - * The second icon if this action has two possible states: activated and deactivated (optional) + * The second icon if this action has two possible states: activated and deactivated */ iconActivated?: string; /** - * In case of two icon states, this function will hide one of them or show another (optional) + * In case of two icon states, this function will hide one of them or show another */ iconSwitchFunction?: () => boolean; /** - * Custom CSS class to be set to the action button (optional) + * Custom CSS class to be set to the action button */ className?: string; } @@ -73,7 +78,7 @@ export interface StarkAction extends StarkActionBase { isEnabled: boolean; /** - * Whether the action button will be visible or not (optional) + * Whether the action button will be visible or not */ isVisible?: boolean; } @@ -88,7 +93,7 @@ export interface StarkDefaultPredefinedAction extends StarkActionBase {} */ export interface StarkCustomizablePredefinedAction extends StarkActionBase { /** - * Whether the action button will be visible or not (optional) + * Whether the action button will be visible or not */ isVisible?: boolean; } diff --git a/showcase/src/app/app.component.html b/showcase/src/app/app.component.html index 0b768b27b8..a544d50811 100644 --- a/showcase/src/app/app.component.html +++ b/showcase/src/app/app.component.html @@ -1,21 +1,29 @@
- - - + + + - +
- +
- + Home @@ -23,6 +31,9 @@ Action Bar + + Button + Example Viewer @@ -31,7 +42,7 @@ - +
diff --git a/showcase/src/app/app.module.ts b/showcase/src/app/app.module.ts index 9726f0cd38..9520122d94 100644 --- a/showcase/src/app/app.module.ts +++ b/showcase/src/app/app.module.ts @@ -35,8 +35,8 @@ import { StarkSessionService, StarkUser } from "@nationalbankbelgium/stark-core"; -import { StarkAppLogoModule } from "@nationalbankbelgium/stark-ui"; +import { StarkAppLogoModule, StarkSvgViewBoxModule } from "@nationalbankbelgium/stark-ui"; import { routerConfigFn } from "./router.config"; import { registerMaterialIconSet } from "./material-icons.config"; import { Deserialize } from "cerialize"; @@ -161,7 +161,8 @@ export const metaReducers: MetaReducer[] = ENV !== "production" ? [logger StarkRoutingModule.forRoot(), SharedModule, DemoModule, - StarkAppLogoModule + StarkAppLogoModule, + StarkSvgViewBoxModule ], /** * Expose our Services and Providers into Angular's dependency injection. diff --git a/showcase/src/app/app.routes.ts b/showcase/src/app/app.routes.ts index f55db4bbb5..e371f6e104 100644 --- a/showcase/src/app/app.routes.ts +++ b/showcase/src/app/app.routes.ts @@ -1,4 +1,4 @@ -import { ActionBarComponent, ExampleViewerComponent, TableComponent } from "./demo"; +import { ActionBarComponent, ButtonComponent, ExampleViewerComponent, TableComponent } from "./demo"; import { HomeComponent } from "./home"; import { NoContentComponent } from "./no-content"; import { Ng2StateDeclaration } from "@uirouter/angular"; @@ -6,6 +6,7 @@ import { Ng2StateDeclaration } from "@uirouter/angular"; export const APP_STATES: Ng2StateDeclaration[] = [ { name: "home", url: "/", component: HomeComponent }, { name: "demo-action-bar", url: "/demo/action-bar", component: ActionBarComponent }, + { name: "demo-button", url: "/demo/button", component: ButtonComponent }, { name: "demo-example-viewer", url: "/demo/example-viewer", component: ExampleViewerComponent }, { name: "demo-table", url: "/demo/table", component: TableComponent }, { name: "otherwise", url: "/otherwise", component: NoContentComponent } diff --git a/showcase/src/app/demo/action-bar/action-bar.component.ts b/showcase/src/app/demo/action-bar/action-bar.component.ts index 4c50dc3958..258d700ad6 100644 --- a/showcase/src/app/demo/action-bar/action-bar.component.ts +++ b/showcase/src/app/demo/action-bar/action-bar.component.ts @@ -17,13 +17,14 @@ export class ActionBarComponent implements OnInit { this.actions = [ { id: "actionValidate", + buttonColor: "success", label: "STARK.ICONS.APPROVE_ITEM", icon: "check", actionCall: ($event: Event, data: any): void => { this.logger.debug($event); this.logger.debug(data); }, - isEnabled: false, + isEnabled: true, isVisible: true }, { @@ -69,6 +70,7 @@ export class ActionBarComponent implements OnInit { this.alternativeActions = [ { id: "actionAdd", + buttonColor: "warn", label: "STARK.ICONS.ADD_ITEM", icon: "account-plus", actionCall: ($event: Event, data: any): void => { diff --git a/showcase/src/app/demo/button/button.component.html b/showcase/src/app/demo/button/button.component.html new file mode 100644 index 0000000000..4b6ef3bd44 --- /dev/null +++ b/showcase/src/app/demo/button/button.component.html @@ -0,0 +1,229 @@ + +
+ + + + + + + + +
+ + + +
+ + + + + + + + +
+ + + +
+ + + + + + + + +
+ + + +
+ + + + + + + + +
+ + + +
+ + + + + + + + +
+ + + +
+ + + + + + + + +
+ + + +
+ + + + + + + + +
+ + + +
+ + + + + + + + +
+ + + +
+ + + + + + + + +
+ + + +
+ + + + + + + + +
+ diff --git a/showcase/src/app/demo/button/button.component.scss b/showcase/src/app/demo/button/button.component.scss new file mode 100644 index 0000000000..d1193371ba --- /dev/null +++ b/showcase/src/app/demo/button/button.component.scss @@ -0,0 +1,14 @@ +.button-row { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.button-row button { + margin-right: 10px; +} + +.dark .example-viewer-body { + background: #333; +} diff --git a/showcase/src/app/demo/button/button.component.ts b/showcase/src/app/demo/button/button.component.ts new file mode 100644 index 0000000000..4e47a1473c --- /dev/null +++ b/showcase/src/app/demo/button/button.component.ts @@ -0,0 +1,12 @@ +import { Component, Inject, ViewEncapsulation } from "@angular/core"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; + +@Component({ + selector: "showcase-demo-button", + templateUrl: "./button.component.html", + styleUrls: ["./button.component.scss"], + encapsulation: ViewEncapsulation.None +}) +export class ButtonComponent { + public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {} +} diff --git a/showcase/src/app/demo/button/index.ts b/showcase/src/app/demo/button/index.ts new file mode 100644 index 0000000000..d0cf0d0daf --- /dev/null +++ b/showcase/src/app/demo/button/index.ts @@ -0,0 +1 @@ +export * from "./button.component"; diff --git a/showcase/src/app/demo/demo.module.ts b/showcase/src/app/demo/demo.module.ts index b2fcbc603b..c2894ebdd4 100644 --- a/showcase/src/app/demo/demo.module.ts +++ b/showcase/src/app/demo/demo.module.ts @@ -3,10 +3,11 @@ import { CommonModule } from "@angular/common"; import { NgModule } from "@angular/core"; import { TranslateModule } from "@ngx-translate/core"; import { ActionBarComponent } from "./action-bar/action-bar.component"; +import { ButtonComponent } from "./button/button.component"; import { ExampleViewerComponent } from "./example-viewer/example-viewer.component"; import { TableComponent } from "./table/table.component"; import { SharedModule } from "../shared/shared.module"; -import { StarkActionBarModule, StarkSliderModule, StarkTableModule } from "@nationalbankbelgium/stark-ui"; +import { StarkActionBarModule, StarkSliderModule, StarkTableModule, StarkSvgViewBoxModule } from "@nationalbankbelgium/stark-ui"; @NgModule({ imports: [ @@ -20,9 +21,10 @@ import { StarkActionBarModule, StarkSliderModule, StarkTableModule } from "@nati SharedModule, StarkActionBarModule, StarkSliderModule, + StarkSvgViewBoxModule, StarkTableModule ], - declarations: [ActionBarComponent, ExampleViewerComponent, TableComponent], - exports: [ActionBarComponent, ExampleViewerComponent, TableComponent] + declarations: [ActionBarComponent, ButtonComponent, ExampleViewerComponent, TableComponent], + exports: [ActionBarComponent, ButtonComponent, ExampleViewerComponent, TableComponent] }) export class DemoModule {} diff --git a/showcase/src/app/demo/index.ts b/showcase/src/app/demo/index.ts index c8f2d5071a..f9d77c5c6e 100644 --- a/showcase/src/app/demo/index.ts +++ b/showcase/src/app/demo/index.ts @@ -1,4 +1,5 @@ export * from "./action-bar"; +export * from "./button"; export * from "./example-viewer"; export * from "./table"; export * from "./demo.module"; diff --git a/showcase/src/app/home/home.component.ts b/showcase/src/app/home/home.component.ts index 5c38ed7c40..0fc3d9cd4c 100644 --- a/showcase/src/app/home/home.component.ts +++ b/showcase/src/app/home/home.component.ts @@ -1,6 +1,5 @@ import { Component, Inject, OnInit } from "@angular/core"; import { STARK_LOGGING_SERVICE, StarkErrorImpl, StarkLoggingService } from "@nationalbankbelgium/stark-core"; - import { AppState } from "../app.service"; @Component({ diff --git a/showcase/src/app/shared/example-viewer/example-viewer.component.html b/showcase/src/app/shared/example-viewer/example-viewer.component.html index e778951bc9..3916c150e8 100644 --- a/showcase/src/app/shared/example-viewer/example-viewer.component.html +++ b/showcase/src/app/shared/example-viewer/example-viewer.component.html @@ -2,7 +2,7 @@

{{ title }}

-
diff --git a/showcase/src/assets/examples/button/accent.css b/showcase/src/assets/examples/button/accent.css new file mode 100644 index 0000000000..7c007c475d --- /dev/null +++ b/showcase/src/assets/examples/button/accent.css @@ -0,0 +1,10 @@ +.button-row { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.button-row button { + margin-right: 10px; +} diff --git a/showcase/src/assets/examples/button/accent.html b/showcase/src/assets/examples/button/accent.html new file mode 100644 index 0000000000..8c0e59e50a --- /dev/null +++ b/showcase/src/assets/examples/button/accent.html @@ -0,0 +1,20 @@ +
+ + + + + + + + +
\ No newline at end of file diff --git a/showcase/src/assets/examples/button/alert.css b/showcase/src/assets/examples/button/alert.css new file mode 100644 index 0000000000..7c007c475d --- /dev/null +++ b/showcase/src/assets/examples/button/alert.css @@ -0,0 +1,10 @@ +.button-row { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.button-row button { + margin-right: 10px; +} diff --git a/showcase/src/assets/examples/button/alert.html b/showcase/src/assets/examples/button/alert.html new file mode 100644 index 0000000000..4928115252 --- /dev/null +++ b/showcase/src/assets/examples/button/alert.html @@ -0,0 +1,20 @@ +
+ + + + + + + + +
\ No newline at end of file diff --git a/showcase/src/assets/examples/button/alt.css b/showcase/src/assets/examples/button/alt.css new file mode 100644 index 0000000000..7c007c475d --- /dev/null +++ b/showcase/src/assets/examples/button/alt.css @@ -0,0 +1,10 @@ +.button-row { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.button-row button { + margin-right: 10px; +} diff --git a/showcase/src/assets/examples/button/alt.html b/showcase/src/assets/examples/button/alt.html new file mode 100644 index 0000000000..896e39c688 --- /dev/null +++ b/showcase/src/assets/examples/button/alt.html @@ -0,0 +1,20 @@ +
+ + + + + + + + +
\ No newline at end of file diff --git a/showcase/src/assets/examples/button/basic.css b/showcase/src/assets/examples/button/basic.css new file mode 100644 index 0000000000..7c007c475d --- /dev/null +++ b/showcase/src/assets/examples/button/basic.css @@ -0,0 +1,10 @@ +.button-row { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.button-row button { + margin-right: 10px; +} diff --git a/showcase/src/assets/examples/button/basic.html b/showcase/src/assets/examples/button/basic.html new file mode 100644 index 0000000000..397cf39839 --- /dev/null +++ b/showcase/src/assets/examples/button/basic.html @@ -0,0 +1,20 @@ +
+ + + + + + + + +
\ No newline at end of file diff --git a/showcase/src/assets/examples/button/disabled.css b/showcase/src/assets/examples/button/disabled.css new file mode 100644 index 0000000000..7c007c475d --- /dev/null +++ b/showcase/src/assets/examples/button/disabled.css @@ -0,0 +1,10 @@ +.button-row { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.button-row button { + margin-right: 10px; +} diff --git a/showcase/src/assets/examples/button/disabled.html b/showcase/src/assets/examples/button/disabled.html new file mode 100644 index 0000000000..8e71e4a6aa --- /dev/null +++ b/showcase/src/assets/examples/button/disabled.html @@ -0,0 +1,20 @@ +
+ + + + + + + + +
\ No newline at end of file diff --git a/showcase/src/assets/examples/button/neutral.css b/showcase/src/assets/examples/button/neutral.css new file mode 100644 index 0000000000..7c007c475d --- /dev/null +++ b/showcase/src/assets/examples/button/neutral.css @@ -0,0 +1,10 @@ +.button-row { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.button-row button { + margin-right: 10px; +} diff --git a/showcase/src/assets/examples/button/neutral.html b/showcase/src/assets/examples/button/neutral.html new file mode 100644 index 0000000000..898e567f09 --- /dev/null +++ b/showcase/src/assets/examples/button/neutral.html @@ -0,0 +1,20 @@ +
+ + + + + + + + +
\ No newline at end of file diff --git a/showcase/src/assets/examples/button/primary.css b/showcase/src/assets/examples/button/primary.css new file mode 100644 index 0000000000..7c007c475d --- /dev/null +++ b/showcase/src/assets/examples/button/primary.css @@ -0,0 +1,10 @@ +.button-row { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.button-row button { + margin-right: 10px; +} diff --git a/showcase/src/assets/examples/button/primary.html b/showcase/src/assets/examples/button/primary.html new file mode 100644 index 0000000000..5d9d094a80 --- /dev/null +++ b/showcase/src/assets/examples/button/primary.html @@ -0,0 +1,20 @@ +
+ + + + + + + + +
\ No newline at end of file diff --git a/showcase/src/assets/examples/button/success.css b/showcase/src/assets/examples/button/success.css new file mode 100644 index 0000000000..7c007c475d --- /dev/null +++ b/showcase/src/assets/examples/button/success.css @@ -0,0 +1,10 @@ +.button-row { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.button-row button { + margin-right: 10px; +} diff --git a/showcase/src/assets/examples/button/success.html b/showcase/src/assets/examples/button/success.html new file mode 100644 index 0000000000..5e634ee801 --- /dev/null +++ b/showcase/src/assets/examples/button/success.html @@ -0,0 +1,20 @@ +
+ + + + + + + + +
\ No newline at end of file diff --git a/showcase/src/assets/examples/button/warn.css b/showcase/src/assets/examples/button/warn.css new file mode 100644 index 0000000000..7c007c475d --- /dev/null +++ b/showcase/src/assets/examples/button/warn.css @@ -0,0 +1,10 @@ +.button-row { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.button-row button { + margin-right: 10px; +} diff --git a/showcase/src/assets/examples/button/warn.html b/showcase/src/assets/examples/button/warn.html new file mode 100644 index 0000000000..8fcea0334c --- /dev/null +++ b/showcase/src/assets/examples/button/warn.html @@ -0,0 +1,20 @@ +
+ + + + + + + + +
\ No newline at end of file diff --git a/showcase/src/assets/examples/button/white.css b/showcase/src/assets/examples/button/white.css new file mode 100644 index 0000000000..7c007c475d --- /dev/null +++ b/showcase/src/assets/examples/button/white.css @@ -0,0 +1,10 @@ +.button-row { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.button-row button { + margin-right: 10px; +} diff --git a/showcase/src/assets/examples/button/white.html b/showcase/src/assets/examples/button/white.html new file mode 100644 index 0000000000..f0554d69fc --- /dev/null +++ b/showcase/src/assets/examples/button/white.html @@ -0,0 +1,20 @@ +
+ + + + + + + + +
\ No newline at end of file