feat(small-stage): introduce component (#71)

projects/ng-aquila/documentation/examples/examples-shared.module.ts

@@ -64,6 +64,7 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { NxToolbarModule } from '@aposin/ng-aquila/toolbar';
 import { NxTimefieldModule } from '@aposin/ng-aquila/timefield';
 import { NxSidepanelModule } from '@aposin/ng-aquila/sidepanel';
+import { NxSmallStageModule } from '@aposin/ng-aquila/small-stage';
 import { NxOverlayModule } from '@aposin/ng-aquila/overlay';
 
 // Collect all imports and exports here
@@ -138,7 +139,8 @@ const EXPORTED_MODULES = [
   NxLabelModule,
   NxFileUploaderModule,
   NxToolbarModule,
-  NxTimefieldModule
+  NxTimefieldModule,
+  NxSmallStageModule,
 ];
 
 @NgModule({

projects/ng-aquila/documentation/examples/small-stage-content-variation/small-stage-content-variation-example.html

@@ -0,0 +1,17 @@
+<div class="nx-margin-bottom-m">
+  <nx-small-stage
+    imageUrl="assets/images/small-stage-illustration.png"
+  >
+    <p nxHeadline="subsection-xsmall" class="nx-margin-bottom-xs">Topline text</p>
+    <h2 nxHeadline="section" class="nx-margin-0">Headline text</h2>
+  </nx-small-stage>
+</div>
+
+<div>
+  <nx-small-stage
+    imageUrl="assets/images/small-stage-illustration.png"
+  >
+    <p nxHeadline="subsection-xsmall" class="nx-margin-bottom-xs">Topline text</p>
+    <h2 nxHeadline="section" class="nx-margin-0">Headline text with some extra words that will eventually break into multiple lines</h2>
+  </nx-small-stage>
+</div>

projects/ng-aquila/documentation/examples/small-stage-content-variation/small-stage-content-variation-example.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+/**
+* @title Small stage content variation example
+*/
+@Component({
+  templateUrl: './small-stage-content-variation-example.html'
+})
+export class SmallStageContentVariationExampleComponent {
+}

projects/ng-aquila/documentation/examples/small-stage-default/small-stage-default-example.html

@@ -0,0 +1,17 @@
+<div class="nx-margin-bottom-m">
+  <nx-small-stage
+    imageUrl="assets/images/small-stage-illustration.png"
+  >
+    <p nxCopytext="large" class="nx-margin-bottom-xs">Topline text</p>
+    <h2 nxHeadline="subsection-large" class="nx-margin-0">Headline text</h2>
+  </nx-small-stage>
+</div>
+
+<div>
+  <nx-small-stage
+    imageUrl="assets/images/small-stage-illustration.png"
+  >
+    <p nxCopytext="large" class="nx-margin-bottom-xs">Topline text</p>
+    <h2 nxHeadline="subsection-large" class="nx-margin-0">Headline text with some extra words that will eventually break into multiple lines</h2>
+  </nx-small-stage>
+</div>

projects/ng-aquila/documentation/examples/small-stage-default/small-stage-default-example.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+/**
+* @title Small stage default example
+*/
+@Component({
+  templateUrl: './small-stage-default-example.html'
+})
+export class SmallStageDefaultExampleComponent {
+}

projects/ng-aquila/documentation/examples/small-stage-image-offset/small-stage-image-offset-example.html

@@ -0,0 +1,19 @@
+<div class="nx-margin-bottom-m">
+  <nx-small-stage
+    imageUrl="assets/images/small-stage-illustration.png"
+    offsetEnd
+  >
+    <p nxCopytext="large" class="nx-margin-bottom-xs">Topline text</p>
+    <h2 nxHeadline="subsection-large" class="nx-margin-0">Headline text</h2>
+  </nx-small-stage>
+</div>
+
+<div>
+  <nx-small-stage
+    imageUrl="assets/images/small-stage-illustration.png"
+    offsetEnd
+  >
+    <p nxCopytext="large" class="nx-margin-bottom-xs">Topline text</p>
+    <h2 nxHeadline="subsection-large" class="nx-margin-0">Headline text with some extra words that will eventually break into multiple lines</h2>
+  </nx-small-stage>
+</div>

projects/ng-aquila/documentation/examples/small-stage-image-offset/small-stage-image-offset-example.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+/**
+* @title Small stage image offset example
+*/
+@Component({
+  templateUrl: './small-stage-image-offset-example.html'
+})
+export class SmallStageImageOffsetExampleComponent {
+}

projects/ng-aquila/documentation/examples/small-stage-text-narrow/small-stage-text-narrow-example.html

@@ -0,0 +1,19 @@
+<div class="nx-margin-bottom-m">
+  <nx-small-stage
+    imageUrl="assets/images/small-stage-illustration.png"
+    contentNarrow
+  >
+    <p nxCopytext="large" class="nx-margin-bottom-xs">Topline text</p>
+    <h2 nxHeadline="subsection-large" class="nx-margin-0">Headline text</h2>
+  </nx-small-stage>
+</div>
+
+<div>
+  <nx-small-stage
+    imageUrl="assets/images/small-stage-illustration.png"
+    contentNarrow
+  >
+    <p nxCopytext="large" class="nx-margin-bottom-xs">Topline text</p>
+    <h2 nxHeadline="subsection-large" class="nx-margin-0">Headline text with some extra words that will eventually break into multiple lines</h2>
+  </nx-small-stage>
+</div>

projects/ng-aquila/documentation/examples/small-stage-text-narrow/small-stage-text-narrow-example.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+/**
+* @title Small stage narrow content example
+*/
+@Component({
+  templateUrl: './small-stage-text-narrow-example.html'
+})
+export class SmallStageTextNarrowExampleComponent {
+}

projects/ng-aquila/src/shared-styles/theming/tokens.scss

@@ -1090,6 +1090,15 @@ $nx-theme: (
 
   slider-negative-background-color: negative-dimmed,
 
+  small-stage-background-color: ui-03,
+
+  small-stage-image-min-height: 64px,
+  small-stage-image-min-width: 116px,
+
+  small-stage-image-container-padding-top: 40px,
+  small-stage-image-container-padding-start: 40px,
+  small-stage-image-container-offset-end: 25%,
+
   rating-icon-color: text-01,
   rating-icon-size: 40px,
   rating-label-color: text-01,

projects/ng-aquila/src/small-stage/package.json

@@ -0,0 +1,7 @@
+{
+  "ngPackage": {
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+  }
+}

projects/ng-aquila/src/small-stage/public-api.ts

@@ -0,0 +1,3 @@
+
+export * from './small-stage.module';
+export * from './small-stage.component';

projects/ng-aquila/src/small-stage/small-stage.component.html

@@ -0,0 +1,6 @@
+<div class="content-container">
+  <ng-content></ng-content>
+</div>
+<div class="image-container">
+  <div class="image-container__inner" [style]="_imageInlineStyle"></div>
+</div>

projects/ng-aquila/src/small-stage/small-stage.component.scss

@@ -0,0 +1,107 @@
+@import '../shared-styles/index';
+
+$image-container-offset-end: var(--small-stage-image-container-offset-end);
+$image-container-padding-start: var(--small-stage-image-container-padding-start);
+$image-container-padding-top: var(--small-stage-image-container-padding-top);
+
+:host {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 2fr 1fr;
+  grid-template-columns: 2fr 1fr;
+  padding: 0 nx-spacer(2m);
+  background-color: var(--small-stage-background-color);
+
+  &.nx-small-stage--content-narrow {
+    -ms-grid-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @include media-breakpoint-response(mobile) {
+    -ms-grid-columns: 1fr;
+    grid-template-columns: 1fr;
+
+    &.nx-small-stage--content-narrow {
+      -ms-grid-columns: 1fr;
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+.content-container {
+  padding: nx-spacer(3m) 0 nx-spacer(2m);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  -ms-grid-row: 1;
+  -ms-grid-column: 1;
+}
+
+.image-container {
+  min-height: var(--small-stage-image-min-height);
+  padding-left: $image-container-padding-start;
+  padding-top: $image-container-padding-top;
+  position: relative;
+  -ms-grid-row: 1;
+  -ms-grid-column: 2;
+
+  :host(.nx-small-stage--w-end-offset) & {
+    padding-right: $image-container-offset-end;
+  }
+
+  @include media-breakpoint-response(mobile) {
+    -ms-grid-row: 2;
+    -ms-grid-column: 1;
+    padding-top: 0;
+
+    :host(.nx-small-stage--w-end-offset) & {
+      padding-right: 0;
+    }
+  }
+
+  &__inner {
+    position: absolute;
+    min-width: var(--small-stage-image-min-width);
+    width: calc(100% - #{$image-container-padding-start});
+    height: calc(100% - #{$image-container-padding-top});
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center bottom;
+
+    :host(.nx-small-stage--w-end-offset) & {
+      width: calc(100% - #{$image-container-offset-end} - #{$image-container-padding-start});
+    }
+
+    @include media-breakpoint-response(mobile) {
+      background-position: right bottom;
+      width: calc(100% - #{$image-container-padding-start});
+      height: 100%;
+
+      :host(.nx-small-stage--w-end-offset) & {
+        width: calc(100% - #{$image-container-padding-start});
+      }
+    }
+  }
+
+  :host-context([dir="rtl"]) {
+    .image-container {
+      padding-right: $image-container-padding-start;
+      padding-left: 0;
+    }
+
+    &.nx-small-stage--w-end-offset .image-container {
+      padding-left: $image-container-offset-end;
+
+      @include media-breakpoint-response(mobile) {
+        padding-left: 0;
+      }
+    }
+
+    .image-container__inner {
+      @include media-breakpoint-response(mobile) {
+        background-position: left bottom;
+      }
+    }
+  }
+}
+

projects/ng-aquila/src/small-stage/small-stage.component.spec.ts

@@ -0,0 +1,87 @@
+import { Component, DebugElement, Type, ViewChild, Directive } from '@angular/core';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import * as axe from 'axe-core';
+
+import { NxSmallStageComponent } from './small-stage.component';
+import { NxSmallStageModule } from './small-stage.module';
+import { By } from '@angular/platform-browser';
+
+// For better readablity here, We can safely ignore some conventions in our specs
+// tslint:disable:component-class-suffix
+
+@Directive()
+abstract class SmallStageTest {
+  @ViewChild(NxSmallStageComponent) smallStageInstance: NxSmallStageComponent;
+}
+
+describe('NxSmallStageComponent', () => {
+  let fixture: ComponentFixture<SmallStageTest>;
+  let testInstance: SmallStageTest;
+  let smallStageInstance: NxSmallStageComponent;
+  let smallStageDebugElement: DebugElement;
+
+  const createTestComponent = (component: Type<SmallStageTest>) => {
+    fixture = TestBed.createComponent(component);
+    fixture.detectChanges();
+    testInstance = fixture.componentInstance;
+    smallStageInstance = testInstance.smallStageInstance;
+    smallStageDebugElement = fixture.debugElement.query(By.directive(NxSmallStageComponent));
+  };
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        BasicSmallStage,
+        DynamicSmallStage,
+      ],
+      imports: [
+        NxSmallStageModule,
+      ]
+    }).compileComponents();
+  }));
+
+  it('creates the small stage', waitForAsync(() => {
+    createTestComponent(BasicSmallStage);
+    expect(smallStageInstance).toBeTruthy();
+  }));
+
+  it('should change class when input changes', () => {
+    createTestComponent(DynamicSmallStage);
+    (testInstance as DynamicSmallStage).contentNarrow = true;
+    fixture.detectChanges();
+    expect(smallStageDebugElement.nativeElement.classList.contains('nx-small-stage--content-narrow')).toBe(true);
+  });
+
+  describe('a11y', () => {
+    it('has no accessbility violations', function (done) {
+      createTestComponent(BasicSmallStage);
+
+      axe.run(fixture.nativeElement, {}, (error: Error, results: axe.AxeResults) => {
+        expect(results.violations.length).toBe(0);
+        // const violationMessages = results.violations.map(item => item.description);
+        done();
+      });
+    });
+  });
+});
+
+@Component({
+  template: `
+    <nx-small-stage>
+      <p>text</p>
+    </nx-small-stage>
+  `
+})
+class BasicSmallStage extends SmallStageTest {
+}
+
+@Component({
+  template: `
+    <nx-small-stage [contentNarrow]="contentNarrow">
+      <p>text</p>
+    </nx-small-stage>
+  `
+})
+class DynamicSmallStage extends SmallStageTest {
+  contentNarrow = false;
+}