@mozaic-ds/angular 0.23.0 → 0.23.1

package/projects/kit/components/segmented-control/segmented-control-size.ts

@@ -0,0 +1,2 @@
+export type SegmentedControlSize = 's' | 'm';
+export const segmentedControlSizeDefault: SegmentedControlSize = 's';

package/projects/kit/components/segmented-control/segmented-control.component.html

@@ -0,0 +1,6 @@
+<div class="mc-segmented-control"
+     [class.mc-segmented-control--m]="size ==='m'"
+     [class.mc-segmented-control--full]="full"
+     [class.mc-segmented-control--nowrap]="nowrap">
+    <ng-content></ng-content>
+</div>

package/projects/kit/components/segmented-control/segmented-control.component.scss

@@ -0,0 +1,21 @@
+@import 'settings-tools/all-settings';
+@import 'components/_c.segmented-control';
+
+.mc-segmented-control {
+  $mcSegmentedControl: &;
+  box-sizing: border-box;
+
+  & * {
+    box-sizing: border-box;
+  }
+
+  &__segment {
+    display: flex;
+  }
+
+  &--nowrap {
+    #{$mcSegmentedControl}__label {
+      white-space: nowrap;
+    }
+  }
+}

package/projects/kit/components/segmented-control/segmented-control.component.spec.ts

@@ -0,0 +1,71 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { SegmentedControlComponent } from './segmented-control.component';
+import { DebugElement } from '@angular/core';
+
+describe('SegmentedControlComponent', () => {
+  let component: SegmentedControlComponent;
+  let fixture: ComponentFixture<SegmentedControlComponent>;
+  let segmentedControlElt: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SegmentedControlComponent],
+    });
+    fixture = TestBed.createComponent(SegmentedControlComponent);
+    component = fixture.componentInstance;
+    segmentedControlElt = fixture.debugElement.query(By.css('.mc-segmented-control'));
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('before initialisation', () => {
+    beforeEach(() => fixture.detectChanges());
+    it('by default class mc-segmented-control--m is not provide', () => {
+      expect(segmentedControlElt.classes['mc-segmented-control--m']).toBeFalsy();
+    });
+    it('by default class mc-segmented-control--full is not provide', () => {
+      expect(segmentedControlElt.classes['mc-segmented-control--full']).toBeFalsy();
+    });
+  });
+
+  describe('detection of class mc-segmented-control--m', () => {
+    it('when size is m, is provide', () => {
+      component.size = 'm';
+      fixture.detectChanges();
+      expect(segmentedControlElt.classes['mc-segmented-control--m']).toBeTruthy();
+    });
+    it('when size is s, is not provide', () => {
+      component.size = 's';
+      fixture.detectChanges();
+      expect(segmentedControlElt.classes['mc-segmented-control--m']).toBeFalsy();
+    });
+  });
+  describe('detection of class mc-segmented-control--full', () => {
+    it('when full is true, is provide', () => {
+      component.full = true;
+      fixture.detectChanges();
+      expect(segmentedControlElt.classes['mc-segmented-control--full']).toBeTruthy();
+    });
+    it('when full is false, is not provide', () => {
+      component.full = false;
+      fixture.detectChanges();
+      expect(segmentedControlElt.classes['mc-segmented-control--full']).toBeFalsy();
+    });
+  });
+  describe('detection of class mc-segmented-control--nowrap', () => {
+    it('when full is true, is provide', () => {
+      component.nowrap = true;
+      fixture.detectChanges();
+      expect(segmentedControlElt.classes['mc-segmented-control--nowrap']).toBeTruthy();
+    });
+    it('when full is false, is not provide', () => {
+      component.nowrap = false;
+      fixture.detectChanges();
+      expect(segmentedControlElt.classes['mc-segmented-control--nowrap']).toBeFalsy();
+    });
+  });
+});

package/projects/kit/components/segmented-control/segmented-control.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { SegmentedControlSize, segmentedControlSizeDefault } from './segmented-control-size';
+
+@Component({
+  selector: 'moz-segmented-control',
+  templateUrl: './segmented-control.component.html',
+  styleUrls: ['./segmented-control.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class SegmentedControlComponent {
+  @Input() size: SegmentedControlSize = segmentedControlSizeDefault;
+  @Input() full = false;
+  @Input() nowrap = false;
+}

package/projects/kit/components/segmented-control/segmented-control.module.ts

@@ -0,0 +1,13 @@
+import { SegmentedControlComponent } from './segmented-control.component';
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { SegmentedControlButtonComponent } from './segmented-control-button/segmented-control-button.component';
+
+@NgModule({
+  declarations: [SegmentedControlComponent, SegmentedControlButtonComponent],
+  imports: [CommonModule],
+  exports: [SegmentedControlComponent, SegmentedControlButtonComponent],
+})
+export class SegmentedControlModule {}

package/projects/kit/components/segmented-control/segmented-control.stories.ts

@@ -0,0 +1,55 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { SegmentedControlModule } from './segmented-control.module';
+import { SegmentedControlComponent } from './segmented-control.component';
+import { RouterTestingModule } from '@angular/router/testing';
+
+export default {
+  component: SegmentedControlComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [SegmentedControlModule, RouterTestingModule],
+    }),
+  ],
+  argTypes: {
+    size: {
+      options: ['s', 'm'],
+      control: { type: 'radio', defaultValue: 's' },
+    },
+    full: {
+      defaultValue: false,
+      control: { type: 'boolean' },
+    },
+    nowrap: {
+      defaultValue: false,
+      control: { type: 'boolean' },
+    },
+  },
+  title: 'Action/Segmented control',
+} as Meta;
+
+const Template: Story = ({ size, full, nowrap }: any = {}) => {
+  const isActive: number = 1;
+
+  return {
+    props: {
+      size,
+      full,
+      nowrap,
+      isActive,
+    },
+    template: `
+      <moz-segmented-control [size]="size" [full]="full" [nowrap]="nowrap">
+        <moz-segmented-control-button (click)="isActive = 1" [class.is-active]="isActive === 1">
+            Upload my data
+        </moz-segmented-control-button>
+        <moz-segmented-control-button (click)="isActive = 2" [class.is-active]="isActive === 2">
+            My file history
+        </moz-segmented-control-button>
+        <moz-segmented-control-button (click)="isActive = 3" [class.is-active]="isActive === 3">
+            My Adeo data
+        </moz-segmented-control-button>
+    </moz-segmented-control>`,
+  };
+};
+
+export const Default = Template.bind({});

package/projects/kit/components/select/select-size.ts

@@ -0,0 +1,6 @@
+export enum SELECT_SIZE {
+  S = 's',
+  M = 'm',
+}
+
+export type SelectSize = 's' | 'm';

package/projects/kit/components/select/select.component.html

@@ -0,0 +1 @@
+<ng-content select="option"></ng-content>

package/projects/kit/components/select/select.component.scss

@@ -0,0 +1,3 @@
+@import 'settings-tools/all-settings';
+
+@import 'components/_c.select';

package/projects/kit/components/select/select.component.ts

@@ -0,0 +1,27 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { SelectSize } from './select-size';
+
+@Component({
+  selector: 'select[moz-`select`]',
+  templateUrl: './select.component.html',
+  styleUrls: ['./select.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class SelectComponent {
+  @Input() size: SelectSize = 's';
+
+  @HostBinding('class')
+  public get hostCssClasses() {
+    const staticClasses = 'mc-select';
+    const sizeCssClass = `mc-select--${this.size}`;
+    const dynamicClasses = `${sizeCssClass}`;
+    return `${staticClasses} ${dynamicClasses}`;
+  }
+}

package/projects/kit/components/select/select.module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SelectComponent } from './select.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [SelectComponent],
+  exports: [SelectComponent],
+})
+export class SelectModule {}

package/projects/kit/components/select/select.stories.ts

@@ -0,0 +1,39 @@
+import { FormsModule } from '@angular/forms';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { SelectComponent } from './select.component';
+import { SelectModule } from './select.module';
+
+export default {
+  component: SelectComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [SelectModule, FormsModule],
+    }),
+  ],
+  title: 'Form/Select',
+} as Meta;
+
+const Template: Story = ({}: any = {}) => ({
+  props: {
+    selected: { title: 4, value: 4 },
+    options: [
+      { title: 1, value: 1 },
+      { title: 2, value: 2 },
+      { title: 3, value: 3 },
+      { title: 4, value: 4 },
+    ],
+    compareElements: (a: any, b: any) => {
+      return a?.value === b?.value;
+    },
+  },
+  template: `
+    <select moz-select [(ngModel)]="selected" [compareWith]="compareElements">
+     <option *ngFor="let option of options" [ngValue]="option">{{option.title}}</option>
+    </select>
+    <br/>
+    <br/>
+    {{selected|json}}
+    `,
+});
+
+export const Default = Template.bind({});

package/projects/kit/components/stepper/step.component.html

@@ -0,0 +1,14 @@
+<span class="mc-stepper__indicator" aria-hidden="true">
+  <moz-icon
+    *ngIf="validated"
+    class="mc-stepper__icon"
+    iconName="Navigation_Notification_Available_16px"
+  ></moz-icon>
+  <ng-container *ngIf="isCurrent">{{ indicator }}</ng-container>
+</span>
+<div class="mc-stepper__detail">
+  <span class="mc-stepper__title">{{ title }}</span>
+  <span class="mc-stepper__label">
+    <ng-content></ng-content>
+  </span>
+</div>

package/projects/kit/components/stepper/step.component.ts

@@ -0,0 +1,61 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { StepState } from './step-state';
+
+@Component({
+  selector: 'moz-step',
+  templateUrl: './step.component.html',
+  styleUrls: ['./stepper.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class StepComponent {
+  @Input() public title = '';
+
+  private _state: StepState = '';
+
+  private _index = 0;
+
+  public get validated(): boolean {
+    return this.state === 'validated';
+  }
+  public get isCurrent(): boolean {
+    return this.state === 'current';
+  }
+
+  public get indicator() {
+    return this.index + 1;
+  }
+
+  public get index() {
+    return this._index;
+  }
+
+  public set index(newIndex: number) {
+    this._index = newIndex;
+    this.cd.markForCheck();
+  }
+
+  public get state() {
+    return this._state;
+  }
+
+  public set state(newState: StepState) {
+    this._state = newState;
+    this.cd.markForCheck();
+  }
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  @HostBinding('class')
+  public get hostCssClasses() {
+    const stateClass = this.state ? `mc-stepper__item--${this.state}` : '';
+    return `mc-stepper__item ${stateClass}`;
+  }
+}

package/projects/kit/components/stepper/stepper.component.html

@@ -0,0 +1,3 @@
+<ol class="mc-stepper__list">
+  <ng-content select="moz-step"></ng-content>
+</ol>

package/projects/kit/components/stepper/stepper.component.scss

@@ -0,0 +1,3 @@
+@import 'settings-tools/all-settings';
+
+@import 'components/_c.stepper';

package/projects/kit/components/stepper/stepper.component.ts

@@ -0,0 +1,95 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  ElementRef,
+  HostBinding,
+  Input,
+  OnChanges,
+  QueryList,
+  SimpleChanges,
+} from '@angular/core';
+import { StepState } from './step-state';
+import { StepComponent } from './step.component';
+
+@Component({
+  selector: 'moz-stepper',
+  templateUrl: './stepper.component.html',
+  styleUrls: ['./stepper.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StepperComponent implements AfterViewInit, OnChanges {
+  @Input() selectStepIndex: number = 0;
+
+  @Input() viewCompact = false;
+
+  @ContentChildren(StepComponent) private steps?: QueryList<StepComponent>;
+  @ContentChildren(StepComponent, { read: ElementRef })
+  private stepElements?: QueryList<ElementRef>;
+
+  public ngAfterViewInit() {
+    if (!this.steps) return;
+    this.initStepIndex(this.steps);
+    this.selectStep(this.steps, this.selectStepIndex);
+    this.initCssVariablesForSteps(this.stepElements!);
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    this.updateSelectStepAtChanges(changes);
+  }
+
+  @HostBinding('class')
+  public get hostCssClasses() {
+    const viewCompactClass = this.viewCompact ? `mc-stepper--compact` : '';
+    return `mc-stepper ${viewCompactClass}`;
+  }
+
+  private initStepIndex(steps: QueryList<StepComponent>) {
+    steps.forEach((step, index) => (step.index = index));
+  }
+
+  private initCssVariablesForSteps(stepElements: QueryList<ElementRef>) {
+    stepElements.forEach(this.initCssVariablesForStep);
+  }
+
+  private initCssVariablesForStep(
+    elementRef: ElementRef,
+    currentIndex: number,
+    elementRefs: ElementRef[]
+  ): void {
+    elementRef.nativeElement.style = `--steps: ${elementRefs.length}; --current: ${
+      currentIndex + 1
+    }`;
+  }
+
+  private selectStep(steps: QueryList<StepComponent>, selectStepIndex: number) {
+    steps.forEach((step) => this.updateStateStep(step, selectStepIndex));
+  }
+
+  private updateStateStep(step: StepComponent, selectStepIndex: number) {
+    const oldState = step.state;
+    const newState = this.stateDefinitionForStep(step.index, selectStepIndex);
+    const hasChanges = oldState !== newState;
+    if (!hasChanges) return;
+    step.state = newState;
+  }
+
+  private stateDefinitionForStep(stepIndex: number, selectStepIndex: number): StepState {
+    const isCurrentStep = stepIndex === selectStepIndex;
+    const isValidatedStep = stepIndex < selectStepIndex;
+    if (isCurrentStep) return 'current';
+    if (isValidatedStep) return 'validated';
+    return '';
+  }
+
+  private updateSelectStepAtChanges({ selectStepIndex }: SimpleChanges) {
+    if (
+      !this.steps ||
+      !selectStepIndex ||
+      selectStepIndex.currentValue === selectStepIndex.previousValue
+    )
+      return;
+    this.selectStep(this.steps, selectStepIndex.currentValue);
+  }
+}

package/projects/kit/components/stepper/stepper.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { IconModule } from '../public-api';
+import { StepComponent } from './step.component';
+import { StepperComponent } from './stepper.component';
+
+@NgModule({
+  imports: [CommonModule, IconModule],
+  declarations: [StepperComponent, StepComponent],
+  exports: [StepperComponent, StepComponent],
+})
+export class StepperModule {}

package/projects/kit/components/stepper/stepper.stories.ts

@@ -0,0 +1,33 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { StepperComponent } from './stepper.component';
+import { StepperModule } from './stepper.module';
+
+export default {
+  component: StepperComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [StepperModule],
+    }),
+  ],
+  argTypes: {
+    selectStepIndex: { type: 'number', defaultValue: 0, control: { type: 'number' } },
+    viewCompact: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+  },
+  title: 'Indicator/Stepper',
+} as Meta;
+
+const Template: Story = ({ selectStepIndex, viewCompact }: any = {}) => ({
+  props: {
+    selectStepIndex,
+    viewCompact,
+  },
+  template: `
+   <moz-stepper [selectStepIndex]="selectStepIndex" [viewCompact]="viewCompact">
+    <moz-step title="Title for step 1">Step label 1</moz-step>
+    <moz-step title="Title for step 2">Step label 2</moz-step>
+    <moz-step title="Title for step 3">Step label 3</moz-step>
+   </moz-stepper>
+    `,
+});
+
+export const Default = Template.bind({});

package/projects/kit/components/tabs/index.ts

@@ -0,0 +1 @@
+export * from './tabs.module';

package/projects/kit/components/tabs/tab-selectors.ts

@@ -0,0 +1,2 @@
+export const TAB_SELECTORS = 'a,div,span';
+export const TABS_SELECTOR = 'moz-tabs';

package/projects/kit/components/tabs/tab.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/projects/kit/components/tabs/tab.component.scss

@@ -0,0 +1,16 @@
+@import 'settings-tools/_all-settings';
+
+@include import-font-families();
+
+@import 'components/_c.tabs';
+
+.mc-tabs__link {
+  font-weight: 400;
+  &:active,
+  &--selected {
+    font-weight: 400;
+  }
+  &:focus::after {
+    box-shadow: none;
+  }
+}

package/projects/kit/components/tabs/tab.component.spec.ts

@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TabComponent } from './tab.component';
+
+describe('TabComponent', () => {
+  let component: TabComponent;
+  let fixture: ComponentFixture<TabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TabComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/kit/components/tabs/tab.component.ts

@@ -0,0 +1,56 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Inject,
+  Input,
+  Optional,
+  ViewEncapsulation,
+} from '@angular/core';
+import { RouterLinkActive, RouterLinkWithHref } from '@angular/router';
+
+@Component({
+  selector: `a[moz-tab],span[moz-tab],div[moz-tab]`,
+  templateUrl: './tab.component.html',
+  styleUrls: ['./tab.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class.mc-tabs__item]': 'true',
+    '[class.mc-tabs__link]': 'true',
+    '[class.mc-tabs__link--outline]': 'true',
+    '[class.mc-tabs__link--selected]': 'selected',
+    '[class.mc-tabs__link--disabled]': 'disabled',
+  },
+})
+export class TabComponent<T = any> {
+  @HostBinding('attr.tab-index')
+  public index: number = 0;
+
+  @Input() public disabled = false;
+
+  @Input() public data: T | null = null;
+
+  public selected = false;
+
+  constructor(
+    @Optional()
+    @Inject(RouterLinkActive)
+    public readonly routerLinkActive: RouterLinkActive | null,
+    @Optional()
+    @Inject(RouterLinkWithHref)
+    public readonly routerLink: RouterLinkWithHref | null
+  ) {}
+
+  public get isAvailableTabForSelection() {
+    return !this.selected && !this.disabled;
+  }
+
+  public get isActiveTab() {
+    return !!this.routerLinkActive?.isActive;
+  }
+
+  public get link() {
+    return this.routerLink?.href || null;
+  }
+}

package/projects/kit/components/tabs/tabs.component.html

@@ -0,0 +1 @@
+<ng-content select="[moz-tab]"></ng-content>

package/projects/kit/components/tabs/tabs.component.scss

@@ -0,0 +1,9 @@
+@import 'settings-tools/_all-settings';
+
+@include import-font-families();
+
+@import 'components/_c.tabs';
+
+.mc-tab--hide-shadow::before {
+  box-shadow: none !important;
+}

package/projects/kit/components/tabs/tabs.component.spec.ts

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