Feature/kirby flag (#1088)

* Added Flag Component * ✅ Add Flag Component tests * Fixed styling to please tests * 📝 Update flag examples * 💄 📝 Fix showcase-properties inputValues formatting * 💄 📝 Add wrapping to avatar color examples * 💄 Add `xxxxs` size * 💄 Replace hardcoded px values with tokens * 📝 Use flag component in item examples * 💄 Refactor styling * ♻️ Replace size directive with HostBinding * ✅ Update tests * ⏪ Revert * 🎨 Clean up Co-authored-by: Christian K. Ibsen <jb7612@jyskebank.dk> Co-authored-by: Jakob Engelbrecht <jakob@basher.dk>
kirbydesign · Jul 2, 2020 · a3e249e · a3e249e
1 parent 9b847fc
commit a3e249e
Show file tree

Hide file tree

Showing 27 changed files with 382 additions and 14 deletions.
diff --git a/apps/cookbook/src/app/examples/avatar-example/examples/colors.ts b/apps/cookbook/src/app/examples/avatar-example/examples/colors.ts
@@ -47,6 +47,8 @@ const config = {
   selector: config.selector,
   template: config.template,
   styleUrls: ['./avatar-examples.shared.scss'],
+  // tslint:disable-next-line: no-host-metadata-property
+  host: { '[class.wrap]': 'true' },
 })
 export class AvatarExampleColorsComponent {
   template: string = config.template;

diff --git a/apps/cookbook/src/app/examples/examples.common.ts b/apps/cookbook/src/app/examples/examples.common.ts
@@ -49,6 +49,7 @@ import { ReorderListExampleComponent } from './reorder-list/reorder-list-example
 import { DropdownExampleComponent } from '~/app/examples/dropdown-example/dropdown-example.component';
 import { StockChartExampleComponent } from './stock-chart-example/stock-chart-example.component';
 import { ProgressCircleExampleComponent } from './progress-circle-example/progress-circle-example.component';
+import { FlagExampleComponent } from './flag-example/flag-example.component';
 
 // Example of "custom" icons
 export const iconSettings: IconSettings = {
@@ -114,6 +115,7 @@ export const COMPONENT_DECLARATIONS: any[] = [
   DropdownExampleComponent,
   StockChartExampleComponent,
   ProgressCircleExampleComponent,
+  FlagExampleComponent,
 ];
 
 // Configure custom icons (used by example to show the usage of custom icons)

diff --git a/apps/cookbook/src/app/examples/examples.module.ts b/apps/cookbook/src/app/examples/examples.module.ts
@@ -16,6 +16,7 @@ import { SegmentedControlExampleModule } from './segmented-control-example/segme
 import { ChartExampleModule } from './chart-example/chart-example.module';
 import { ProgressCircleExampleModule } from './progress-circle-example/progress-circle-example.module';
 import { AvatarExampleModule } from './avatar-example/avatar-example.module';
+import { FlagExampleModule } from './flag-example/flag-example.module';
 
 @NgModule({
   imports: [
@@ -29,6 +30,7 @@ import { AvatarExampleModule } from './avatar-example/avatar-example.module';
     ChartExampleModule,
     ProgressCircleExampleModule,
     AvatarExampleModule,
+    FlagExampleModule,
   ],
   declarations: COMPONENT_DECLARATIONS,
   exports: [
@@ -41,6 +43,7 @@ import { AvatarExampleModule } from './avatar-example/avatar-example.module';
     ChartExampleModule,
     ProgressCircleExampleModule,
     AvatarExampleModule,
+    FlagExampleModule,
   ],
   providers: [PROVIDER_DECLARATIONS],
   entryComponents: [

diff --git a/apps/cookbook/src/app/examples/examples.routes.ts b/apps/cookbook/src/app/examples/examples.routes.ts
@@ -51,6 +51,7 @@ import { ReorderListExampleComponent } from './reorder-list/reorder-list-example
 import { DropdownExampleComponent } from '~/app/examples/dropdown-example/dropdown-example.component';
 import { StockChartExampleComponent } from './stock-chart-example/stock-chart-example.component';
 import { ProgressCircleExampleComponent } from './progress-circle-example/progress-circle-example.component';
+import { FlagExampleComponent } from './flag-example/flag-example.component';
 
 export const routes: Routes = [
   {
@@ -263,6 +264,10 @@ export const routes: Routes = [
     path: 'badge',
     component: BadgeExampleComponent,
   },
+  {
+    path: 'flag',
+    component: FlagExampleComponent,
+  },
   {
     path: 'icon',
     component: IconExampleComponent,

diff --git a/apps/cookbook/src/app/examples/flag-example/examples/colors.ts b/apps/cookbook/src/app/examples/flag-example/examples/colors.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-flag-example-colors',
+  template: `<kirby-flag themeColor="success">Success</kirby-flag>
+<kirby-flag themeColor="warning">Warning</kirby-flag>
+<kirby-flag themeColor="danger">Danger</kirby-flag>
+<kirby-flag themeColor="semi-light">Semi-Light</kirby-flag>
+<kirby-flag themeColor="transparent" title="(default)">Transparent</kirby-flag>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+  styleUrls: ['./flag-examples.shared.scss'],
+})
+export class FlagExampleColorsComponent {
+  template: string = config.template;
+}
diff --git a/apps/cookbook/src/app/examples/flag-example/examples/flag-examples.shared.scss b/apps/cookbook/src/app/examples/flag-example/examples/flag-examples.shared.scss
@@ -0,0 +1,40 @@
+@import './libs/designsystem/src/lib/scss/utils';
+
+:host {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: size('s');
+
+  > * {
+    margin-right: size('s');
+    margin-bottom: size('s');
+  }
+
+  flex-wrap: wrap;
+
+  &.align-top {
+    align-items: flex-start;
+  }
+}
+
+kirby-flag {
+  position: relative;
+}
+
+kirby-flag[title] {
+  margin-bottom: size('s');
+
+  &::before {
+    content: '';
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    transform: translateY(100%);
+    font-size: font-size('xs');
+    text-align: center;
+  }
+
+  &[title='(default)']::before {
+    content: '(default)';
+  }
+}
diff --git a/apps/cookbook/src/app/examples/flag-example/examples/sizes.ts b/apps/cookbook/src/app/examples/flag-example/examples/sizes.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-flag-example-sizes',
+  template: `<kirby-flag size="xs">Extra Small (xs)</kirby-flag>
+<kirby-flag size="sm">Small (sm)</kirby-flag>
+<kirby-flag size="md" title="(default)">Medium (md)</kirby-flag>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+  styleUrls: ['./flag-examples.shared.scss'],
+})
+export class FlagExampleSizesComponent {
+  template: string = config.template;
+}
diff --git a/apps/cookbook/src/app/examples/flag-example/flag-example.component.html b/apps/cookbook/src/app/examples/flag-example/flag-example.component.html
@@ -0,0 +1,5 @@
+<h2>Colors</h2>
+<cookbook-flag-example-colors></cookbook-flag-example-colors>
+
+<h2>Sizes</h2>
+<cookbook-flag-example-sizes></cookbook-flag-example-sizes>
diff --git a/apps/cookbook/src/app/examples/flag-example/flag-example.component.scss b/apps/cookbook/src/app/examples/flag-example/flag-example.component.scss
@@ -0,0 +1 @@
+@import '../examples.shared';
diff --git a/apps/cookbook/src/app/examples/flag-example/flag-example.component.ts b/apps/cookbook/src/app/examples/flag-example/flag-example.component.ts
@@ -0,0 +1,8 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'cookbook-flag-example',
+  templateUrl: './flag-example.component.html',
+  styleUrls: ['./flag-example.component.scss'],
+})
+export class FlagExampleComponent {}
diff --git a/apps/cookbook/src/app/examples/flag-example/flag-example.module.ts b/apps/cookbook/src/app/examples/flag-example/flag-example.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { KirbyModule } from '@kirbydesign/designsystem';
+
+import { FlagExampleColorsComponent } from './examples/colors';
+import { FlagExampleSizesComponent } from './examples/sizes';
+
+const COMPONENT_DECLARATIONS = [FlagExampleColorsComponent, FlagExampleSizesComponent];
+
+@NgModule({
+  imports: [CommonModule, KirbyModule],
+  declarations: COMPONENT_DECLARATIONS,
+  exports: COMPONENT_DECLARATIONS,
+})
+export class FlagExampleModule {}
diff --git a/apps/cookbook/src/app/examples/item-example/examples/avatar/flagged.ts b/apps/cookbook/src/app/examples/item-example/examples/avatar/flagged.ts
@@ -17,7 +17,9 @@ const config = {
     <h3>Lorem ipsum quam notem andamus gepulowitzh onga bonga bimmelon sid est insula</h3>
     <p detail>Phone, Internet, Streaming services og other</p>
   </kirby-label>
-  <data slot="end" value="300.00">EUR 300,00</data>
+  <kirby-flag slot="end" themeColor="success">
+    <data value="300.00">EUR 300,00</data>
+  </kirby-flag>
 </kirby-item>`,
   styles: [
     `.flag {
@@ -34,11 +36,6 @@ const config = {
     `.flag:not(:last-child) {
       margin-bottom: 2px;
     }`,
-    `data {
-      background-color: var(--kirby-success);
-      border-radius: 4px;
-      padding: 2px 8px;
-    }`,
   ],
 };
 

diff --git a/apps/cookbook/src/app/examples/item-example/examples/flagged.ts b/apps/cookbook/src/app/examples/item-example/examples/flagged.ts
@@ -11,9 +11,9 @@ const config = {
     <h3 class="kirby-text-bold">Title</h3>
     <p detail>Detail</p>
   </kirby-label>
-  <kirby-label slot="end">
+  <kirby-flag slot="end" themeColor="success">
     <data value="60.0">60</data>
-  </kirby-label>
+  </kirby-flag>
 </kirby-item>`,
   styles: [
     `.flag {
@@ -30,11 +30,6 @@ const config = {
     `.flag:not(:last-child) {
       margin-bottom: 2px;
     }`,
-    `data {
-      background-color: var(--kirby-success);
-      border-radius: 4px;
-      padding: 2px 8px;
-    }`,
   ],
 };
 

diff --git a/apps/cookbook/src/app/page/side-nav/side-nav.component.html b/apps/cookbook/src/app/page/side-nav/side-nav.component.html
@@ -91,6 +91,7 @@
     <ul class="side-nav side-nav--sub">
       <li><a routerLink="showcase/avatar" [routerLinkActive]="'is-selected'" class="side-nav__item">Avatar</a></li>
       <li><a routerLink="showcase/badge" [routerLinkActive]="'is-selected'" class="side-nav__item">Badge</a></li>
+      <li><a routerLink="showcase/flag" [routerLinkActive]="'is-selected'" class="side-nav__item">Flag</a></li>
       <li><a routerLink="showcase/chart" [routerLinkActive]="'is-selected'" class="side-nav__item">Charts</a></li>
       <li><a routerLink="showcase/stock-chart" [routerLinkActive]="'is-selected'" class="side-nav__item">Stock Chart</a></li>
       <li><a routerLink="showcase/colors" [routerLinkActive]="'is-selected'" class="side-nav__item">Colors</a></li>

diff --git a/apps/cookbook/src/app/shared/showcase-properties/showcase-properties.component.html b/apps/cookbook/src/app/shared/showcase-properties/showcase-properties.component.html
@@ -12,7 +12,12 @@
       </td>
       <td *ngIf="columns.Description">{{ prop.description }}</td>
       <td *ngIf="columns.Type">
-        <pre><code>{{ prop.inputValues ? prop.inputValues.join(' | ') : '' }}</code></pre>
+        <ng-container *ngIf="!prop.preserveInputValuesWhitespaces">
+          <code>{{ prop.inputValues ? prop.inputValues.join(' | ') : '' }}</code>
+        </ng-container>
+        <pre
+          *ngIf="prop.preserveInputValuesWhitespaces"
+        ><code>{{ prop.inputValues ? prop.inputValues.join(' | ') : '' }}</code></pre>
       </td>
       <td *ngIf="columns.Default">
         <code>{{ prop.defaultValue }}</code>

diff --git a/apps/cookbook/src/app/shared/showcase-properties/showcase-property.ts b/apps/cookbook/src/app/shared/showcase-properties/showcase-property.ts
@@ -3,4 +3,5 @@ export interface ShowcaseProperty {
   defaultValue?: string;
   description?: string;
   inputValues?: string[];
+  preserveInputValuesWhitespaces?: boolean;
 }
diff --git a/apps/cookbook/src/app/showcase/flag-showcase/flag-showcase.component.html b/apps/cookbook/src/app/showcase/flag-showcase/flag-showcase.component.html
@@ -0,0 +1,13 @@
+<div class="example">
+  <h2>Colors</h2>
+  <cookbook-example-viewer [html]="colorsExample.template">
+    <cookbook-flag-example-colors #colorsExample></cookbook-flag-example-colors>
+  </cookbook-example-viewer>
+  <h2>Sizes</h2>
+  <cookbook-example-viewer [html]="sizesExample.template">
+    <cookbook-flag-example-sizes #sizesExample></cookbook-flag-example-sizes>
+  </cookbook-example-viewer>
+
+  <h4>Properties:</h4>
+  <cookbook-showcase-properties [properties]="properties"></cookbook-showcase-properties>
+</div>
diff --git a/apps/cookbook/src/app/showcase/flag-showcase/flag-showcase.component.scss b/apps/cookbook/src/app/showcase/flag-showcase/flag-showcase.component.scss
@@ -0,0 +1 @@
+@import '../showcase.shared';
diff --git a/apps/cookbook/src/app/showcase/flag-showcase/flag-showcase.component.ts b/apps/cookbook/src/app/showcase/flag-showcase/flag-showcase.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+import { ShowcaseProperty } from '~/app/shared/showcase-properties/showcase-property';
+
+@Component({
+  selector: 'cookbook-flag-showcase',
+  templateUrl: './flag-showcase.component.html',
+  styleUrls: ['./flag-showcase.component.scss'],
+})
+export class FlagShowcaseComponent {
+  properties: ShowcaseProperty[] = [
+    {
+      name: 'themeColor',
+      description: 'Sets which color the flag should use.',
+      defaultValue: 'transparent',
+      inputValues: ['success', 'warning', 'danger', 'semi-light', 'transparent'],
+    },
+    {
+      name: 'size',
+      description: 'Sets the size of the flag.',
+      defaultValue: 'md',
+      inputValues: ['xs', 'sm', 'md'],
+    },
+  ];
+}
diff --git a/...kbook/src/app/showcase/segmented-control-showcase/segmented-control-showcase.component.ts b/...kbook/src/app/showcase/segmented-control-showcase/segmented-control-showcase.component.ts
@@ -37,6 +37,7 @@ export class SegmentedControlShowcaseComponent {
   }
 }]`,
       ],
+      preserveInputValuesWhitespaces: true,
     },
     {
       name: 'value',

diff --git a/apps/cookbook/src/app/showcase/showcase.common.ts b/apps/cookbook/src/app/showcase/showcase.common.ts
@@ -38,6 +38,7 @@ import { DividerShowcaseComponent } from '../showcase/divider-showcase/divider-s
 import { DropdownShowcaseComponent } from '~/app/showcase/dropdown-showcase/dropdown-showcase.component';
 import { ReorderListShowcaseComponent } from '../showcase/reorder-list-showcase/reorder-list-showcase.component';
 import { StockChartShowcaseComponent } from './stock-chart-showcase/stock-chart-showcase.component';
+import { FlagShowcaseComponent } from './flag-showcase/flag-showcase.component';
 
 export const COMPONENT_IMPORTS: any[] = [ExamplesModule, ShowcaseRoutingModule];
 
@@ -79,6 +80,7 @@ export const COMPONENT_EXPORTS: any[] = [
   DropdownShowcaseComponent,
   StockChartShowcaseComponent,
   ProgressCircleShowcaseComponent,
+  FlagShowcaseComponent,
 ];
 
 export const COMPONENT_DECLARATIONS: any[] = [...COMPONENT_EXPORTS, ShowcaseComponent];
diff --git a/apps/cookbook/src/app/showcase/showcase.routes.ts b/apps/cookbook/src/app/showcase/showcase.routes.ts
@@ -38,6 +38,7 @@ import { DropdownShowcaseComponent } from '~/app/showcase/dropdown-showcase/drop
 import { ReorderListShowcaseComponent } from './reorder-list-showcase/reorder-list-showcase.component';
 import { StockChartShowcaseComponent } from './stock-chart-showcase/stock-chart-showcase.component';
 import { ProgressCircleShowcaseComponent } from './progress-circle-showcase/progress-circle-showcase.component';
+import { FlagShowcaseComponent } from './flag-showcase/flag-showcase.component';
 
 export const routes: Routes = [
   {
@@ -149,6 +150,10 @@ export const routes: Routes = [
         path: 'badge',
         component: BadgeShowcaseComponent,
       },
+      {
+        path: 'flag',
+        component: FlagShowcaseComponent,
+      },
       {
         path: 'icon',
         component: IconShowcaseComponent,

diff --git a/libs/designsystem/src/lib/components/flag/flag.component.scss b/libs/designsystem/src/lib/components/flag/flag.component.scss
@@ -0,0 +1,42 @@
+@import '../../scss/utils';
+
+:host {
+  display: inline-block;
+  background-color: var(--kirby-flag-background-color, transparent);
+  color: var(--kirby-flag-color, get-color('white-contrast'));
+  border: 1px solid var(--kirby-flag-border-color, get-color('medium'));
+  border-radius: size('xxxs');
+
+  font-size: font-size('n');
+
+  padding-top: size('xxxxs');
+  padding-bottom: size('xxxxs');
+  padding-left: size('xxs');
+  padding-right: size('xxs');
+
+  &.sm {
+    font-size: font-size('s');
+  }
+
+  &.xs {
+    font-size: font-size('xs');
+    padding-left: size('xxxs');
+    padding-right: size('xxxs');
+  }
+}
+
+@each $color-name,
+  $color-value
+    in map-merge(
+      $notification-colors,
+      (
+        'semi-light': get-color('semi-light'),
+      )
+    )
+{
+  :host(.#{$color-name}) {
+    --kirby-flag-background-color: #{get-color($color-name)};
+    --kirby-flag-color: #{get-color($color-name + '-contrast')};
+    --kirby-flag-border-color: #{get-color($color-name)};
+  }
+}