feat(ui): create metadata card component EBS-1516 (#234)

* feat(ui): create metadata card component EBS-1516

* feat(ui): refactor metadata component styles and rename variable EBS-1516

* feat(ui): lint refactor EBS-1516

---------

Co-authored-by: Mihkel.Paloots <[email protected]>

apps/ui-e2e/src/component/metadata-card.component.cy.ts

@@ -0,0 +1,47 @@
+describe('MetadataCardComponent', () => {
+  before(() => {
+    cy.visitStorybook();
+  });
+
+  it('Renders metadata card with default severity', () => {
+    cy.loadStory('Angular Metadata Card', 'Default');
+    cy.shouldHaveCSSVar(
+      'cvi-ng-metadata-card',
+      '--cvi-metadata-card-left-border-color',
+      '#005aa3'
+    );
+  });
+
+  it('Renders metadata card with success severity', () => {
+    cy.loadStory('Angular Metadata Card', 'Default')
+      .get('cvi-ng-metadata-card')
+      .changeArg('severity', 'success');
+    cy.shouldHaveCSSVar(
+      'cvi-ng-metadata-card',
+      '--cvi-metadata-card-left-border-color',
+      '#2c7a4c'
+    );
+  });
+
+  it('Renders metadata card with warning severity', () => {
+    cy.loadStory('Angular Metadata Card', 'Default')
+      .get('cvi-ng-metadata-card')
+      .changeArg('severity', 'warning');
+    cy.shouldHaveCSSVar(
+      'cvi-ng-metadata-card',
+      '--cvi-metadata-card-left-border-color',
+      '#ffb511'
+    );
+  });
+
+  it('Renders metadata card with error severity', () => {
+    cy.loadStory('Angular Metadata Card', 'Default')
+      .get('cvi-ng-metadata-card')
+      .changeArg('severity', 'error');
+    cy.shouldHaveCSSVar(
+      'cvi-ng-metadata-card',
+      '--cvi-metadata-card-left-border-color',
+      '#d73e3e'
+    );
+  });
+});

libs/styles/src/lib/scss/_apply.scss

@@ -129,3 +129,7 @@
 .cvi-labeled-item {
   @include cvi-labeled-item;
 }
+
+.cvi-metadata-card {
+  @include cvi-metadata-card;
+}

libs/styles/src/lib/scss/components/_metadata-card.scss

@@ -0,0 +1,27 @@
+@mixin cvi-metadata-card($base: &) {
+  --comment: 'A card with a coloured left border and content';
+
+  display: flex;
+  border-radius: var(--cvi-radius-s);
+  border-left: 6px solid var(--cvi-metadata-card-left-border-color);
+
+  @include cvi-breakpoint-up(sm) {
+    box-shadow: var(--cvi-shadow-beta);
+  }
+
+  #{$base}__content {
+    padding-inline: get-spacing('kuressaare');
+    padding-block: get-spacing('haapsalu');
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+
+    @include cvi-breakpoint-down(sm) {
+      border: 1px solid get-color(black-coral-2);
+      border-left: none;
+      border-top-right-radius: var(--cvi-radius-s);
+      border-bottom-right-radius: var(--cvi-radius-s);
+    }
+  }
+}
+

libs/styles/src/lib/scss/main.scss

@@ -57,6 +57,7 @@
 @import 'components/table-responsive';
 @import 'components/table-card';
 @import 'components/labeled-item';
+@import "components/metadata-card";
 
 @import 'apply';
 

libs/ui/src/index.ts

@@ -80,3 +80,4 @@ export * from './lib/circle/circle.component';
 export * from './lib/table-card/table-card.component';
 export * from './lib/table-responsive/table-responsive.component';
 export * from './lib/labeled-item/labeled-item.component';
+export * from './lib/metadata-card/metadata-card.component';

libs/ui/src/lib/metadata-card/metadata-card.component.html

@@ -0,0 +1,5 @@
+<div class="cvi-metadata-card">
+  <div class="cvi-metadata-card__content">
+    <ng-content></ng-content>
+  </div>
+</div>

libs/ui/src/lib/metadata-card/metadata-card.component.md

@@ -0,0 +1,18 @@
+## General description
+
+Feature | Description
+- | -
+Selector | `cvi-ng-metadata-card`
+Component name | `MetadataCardComponent`
+Design system module | -
+Content | no
+Permitted parent/ancestors | any
+Permitted children | -
+
+## Where to use
+
+Use if you need to display metadata information in a card-like format with coloured left border.
+
+## How to use
+
+Pass `--cvi-metadata-card-left-border-color` CSS variable to the Sass component. (See example colors in `metadata-card.ts`.)

libs/ui/src/lib/metadata-card/metadata-card.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MetadataCardComponent } from '@egov/cvi-ng';
+
+describe('MetadataCardComponent', () => {
+  let component: MetadataCardComponent;
+  let fixture: ComponentFixture<MetadataCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MetadataCardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MetadataCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/ui/src/lib/metadata-card/metadata-card.component.stories.ts

@@ -0,0 +1,77 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import notes from './metadata-card.component.md';
+import { MetadataCardComponent } from './metadata-card.component';
+
+export default {
+  title: 'Angular/Metadata Card',
+  component: MetadataCardComponent,
+  parameters: {
+    docs: {
+      description: {
+        component: notes,
+      },
+    },
+  },
+  argTypes: {
+    severity: {
+      name: 'Severity style',
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    severity: 'info',
+  },
+} as Meta<MetadataCardComponent>;
+
+type Story = StoryObj<MetadataCardComponent>;
+
+export const Default: Story = {
+  render: (args: MetadataCardComponent) => ({
+    props: {
+      ...args,
+      html: '<div class="cvi-html-section__content-elements"><cvi-web-track gap="4" layout="flex" flex-direction="vertical"><a href="https://www.siseministeerium.ee/maakonnakeskuse-kohalikud-omavalitsused-rahvastiku-toimingute-valdkonnas" target="_blank" class="external-link" rel="noopener noreferrer">Maakonnakeskuse kohalikud omavalitsused</a><a href="https://www.notar.ee/et/notarid/nimekiri" target="_blank" class="external-link" rel="noopener noreferrer">Notarid</a><a href="https://www.siseministeerium.ee/abielu-solmimise-oigust-omavad-vaimulikud" target="_blank" class="external-link" rel="noopener noreferrer">Abielu sõlmimise õigust omavad vaimulikud</a></cvi-web-track></div></div>',
+    },
+    template: `
+    <cvi-ng-track [gap]="4" [flexIsMultiline]="true" horizontalAlignment="left">
+      <div style="width: 300px">
+        <cvi-ng-metadata-card [severity]="severity">
+          <cvi-ng-labeled-item label="Item 1">How do you do?</cvi-ng-labeled-item>
+          <cvi-ng-labeled-item
+            label="Item 2, so long it does not fit ever even one line. needs breaking into next line in order to fit">
+            Hello!
+          </cvi-ng-labeled-item>
+          <cvi-ng-labeled-item label="Item 3">Some text</cvi-ng-labeled-item>
+        </cvi-ng-metadata-card>
+      </div>
+      <div>
+        <cvi-ng-metadata-card [severity]="severity">
+          <cvi-ng-html-section html="{{html}}">
+          </cvi-ng-html-section>
+        </cvi-ng-metadata-card>
+      </div>
+    </cvi-ng-track>
+    `,
+  }),
+};
+
+export const WithCustomStyle: Story = {
+  render: (args: MetadataCardComponent) => ({
+    props: args,
+    template: `
+      <cvi-ng-metadata-card style="--cvi-metadata-card-left-border-color: var(--cvi-color-sea-green-10)">
+        <cvi-ng-labeled-item label="Item 1">How do you do?</cvi-ng-labeled-item>
+        <cvi-ng-labeled-item label="Item 2">Hello!</cvi-ng-labeled-item>
+        <cvi-ng-labeled-item label="Item 3">Some text</cvi-ng-labeled-item>
+      </cvi-ng-metadata-card>
+    `,
+  }),
+};
+
+export const Mobile: Story = {
+  ...Default,
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphone12mini',
+    },
+  },
+};

libs/ui/src/lib/metadata-card/metadata-card.component.ts

@@ -0,0 +1,41 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+} from '@angular/core';
+import {
+  MetadataCardCustomProperties,
+  MetadataCardCustomPropertyGroup,
+  metadataCardCustomPropertyGroups,
+  MetadataCardSeverity,
+} from './metadata-card';
+
+@Component({
+  selector: 'cvi-ng-metadata-card',
+  templateUrl: './metadata-card.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetadataCardComponent {
+  @Input() severity: MetadataCardSeverity = 'info';
+
+  @HostBinding('style.--cvi-metadata-card-left-border-color')
+  get hostStyleLeftBorderColor(): string | null {
+    return this.getCustomProperty('--cvi-metadata-card-left-border-color');
+  }
+
+  getCustomProperty(
+    propName: keyof MetadataCardCustomProperties
+  ): string | null {
+    const item = metadataCardCustomPropertyGroups.find(
+      (group: MetadataCardCustomPropertyGroup) =>
+        group.severity === this.severity
+    );
+    if (item) {
+      return `var(${
+        item.customProperties[propName as keyof MetadataCardCustomProperties]
+      })`;
+    }
+    return null;
+  }
+}

libs/ui/src/lib/metadata-card/metadata-card.ts

@@ -0,0 +1,39 @@
+export type MetadataCardSeverity = 'info' | 'success' | 'warning' | 'error';
+
+export const metadataCardCustomPropertyGroups: MetadataCardCustomPropertyGroup[] =
+  [
+    {
+      severity: 'info',
+      customProperties: {
+        '--cvi-metadata-card-left-border-color': '--cvi-color-sapphire-blue-10',
+      },
+    },
+    {
+      severity: 'success',
+      customProperties: {
+        '--cvi-metadata-card-left-border-color': '--cvi-color-sea-green-11',
+      },
+    },
+    {
+      severity: 'warning',
+      customProperties: {
+        '--cvi-metadata-card-left-border-color':
+          '--cvi-color-dark-tangerine-10',
+      },
+    },
+    {
+      severity: 'error',
+      customProperties: {
+        '--cvi-metadata-card-left-border-color': '--cvi-color-jasper-10',
+      },
+    },
+  ];
+
+export type MetadataCardCustomPropertyGroup = {
+  severity: MetadataCardSeverity;
+  customProperties: MetadataCardCustomProperties;
+};
+
+export type MetadataCardCustomProperties = {
+  '--cvi-metadata-card-left-border-color': string;
+};

libs/ui/src/lib/ui.module.ts

@@ -108,6 +108,7 @@ import { FormMessageSeverityToHeaderIconPipe } from './form-message/form-message
 import { TableCardComponent } from './table-card/table-card.component';
 import { TableResponsiveComponent } from './table-responsive/table-responsive.component';
 import { LabeledItemComponent } from './labeled-item/labeled-item.component';
+import { MetadataCardComponent } from './metadata-card/metadata-card.component';
 
 const components = [
   TrackComponent,
@@ -172,6 +173,7 @@ const components = [
   TableCardComponent,
   TableResponsiveComponent,
   LabeledItemComponent,
+  MetadataCardComponent,
 ];
 
 const pipes = [