summaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/components
diff options
context:
space:
mode:
Diffstat (limited to 'stories/ng2-component-lab/components')
-rw-r--r--stories/ng2-component-lab/components/colors-table.component.ts26
-rw-r--r--stories/ng2-component-lab/components/modal-consumer.component.ts106
-rw-r--r--stories/ng2-component-lab/components/modal-inner-content-example.component.ts16
-rw-r--r--stories/ng2-component-lab/components/notifications-example.component.ts57
-rw-r--r--stories/ng2-component-lab/components/svg-icons-table.component.ts189
5 files changed, 394 insertions, 0 deletions
diff --git a/stories/ng2-component-lab/components/colors-table.component.ts b/stories/ng2-component-lab/components/colors-table.component.ts
new file mode 100644
index 0000000..fc7bd2f
--- /dev/null
+++ b/stories/ng2-component-lab/components/colors-table.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+ selector: "colors-table",
+ template: `
+
+ <h1>{{tableTitle}}</h1>
+ <div class="colors-table">
+ <div class="color-section" *ngFor="let color of tableMapColors | keys">
+ <div class='sdc-bc-{{color}} color-circle'></div>
+ <div>{{color}}</div>
+ <div>{{tableMapColors[color]}}</div>
+ </div>
+ </div>
+`
+})
+export class ColorsTable {
+
+ @Input() tableTitle:string;
+ @Input() tableMapColors: Object;
+
+ constructor() {
+
+ }
+
+}
diff --git a/stories/ng2-component-lab/components/modal-consumer.component.ts b/stories/ng2-component-lab/components/modal-consumer.component.ts
new file mode 100644
index 0000000..e4a3977
--- /dev/null
+++ b/stories/ng2-component-lab/components/modal-consumer.component.ts
@@ -0,0 +1,106 @@
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { ModalService } from "../../../src/angular/modals/modal.service";
+import { IModalConfig, ModalType, ModalSize } from "../../../src/angular/modals/models/modal-config";
+import { ModalInnerContent } from "./modal-inner-content-example.component";
+import { ButtonComponent } from "../../../src/angular/buttons/button.component";
+import { ModalButtonComponent } from './../../../src/angular/modals/modal-button.component';
+import { Placement } from "../../../src/angular/common/enums";
+import { ModalComponent } from "../../../src/angular/components";
+
+const MODAL_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' +
+'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra';
+
+@Component({
+ selector: 'modal-consumer',
+ template: `<sdc-button [text]="'View Modal'" (click)="openModal()"></sdc-button>`
+})
+export class ModalConsumer {
+ @Input() action: string;
+
+ constructor(private modalService: ModalService) {
+ }
+
+ private openModal = (): void => {
+ if (this[this.action]) {
+ this[this.action]();
+ }
+ }
+
+ private openErrorModal = (): void => {
+ this.modalService.openErrorModal(MODAL_CONTENT, "sampleTestId");
+ }
+
+ private openAlertModal = (): void => {
+ this.modalService.openAlertModal("Alert Title", MODAL_CONTENT, 'Continue', this.onConfirmAction, 'sampleTestId');
+ }
+
+ private openActionModal = (): void => {
+ this.modalService.openActionModal('Standard Modal', MODAL_CONTENT, "OK", this.onConfirmAction, "sampleTestId");
+ }
+
+ private onConfirmAction = (): void => {
+ alert("Action has been confirmed");
+ }
+
+ private openCustomModal1 = (): void => {
+ const modalConfig = {
+ size: ModalSize.medium,
+ title: 'Title',
+ type: ModalType.custom,
+ testId: 'sampleTestIdModal1',
+ buttons: [
+ {id: "saveButton", text: "Save", callback: this.customModalOnSave1, closeModal: false},
+ {id: "cancelButton", text: "Cancel", size: 'x-small', type: 'secondary', closeModal: true}
+ ] as ModalButtonComponent[]
+ } as IModalConfig;
+ this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
+ }
+
+ private customModalOnSave1 = (): void => {
+ const currentInstance: ModalComponent = this.modalService.getCurrentInstance();
+ const saveButton: ModalButtonComponent = currentInstance.getButtonById("saveButton");
+ saveButton.show_spinner = true;
+ saveButton.spinner_position = Placement.right;
+
+ // Show spinner for 2 seconds
+ console.log('Saving example, please wait ...');
+ window.setTimeout((button: ModalButtonComponent) => {
+ button.show_spinner = false;
+ console.log('Finish saving');
+ }, 2000, saveButton);
+ }
+
+ private openCustomModal2 = (): void => {
+ const modalConfig = {
+ size: ModalSize.medium,
+ title: 'Title',
+ type: ModalType.custom,
+ testId: 'sampleTestIdModal2',
+ buttons: [
+ {text: "Change title", callback: this.customModalChangeTitle2, closeModal: false},
+ {text: "Change buttons", callback: this.customModalUpdateButtons2, closeModal: false},
+ {text: "Disable close", callback: this.customModalUDisableClose2, closeModal: false}
+ ]
+ } as IModalConfig;
+ this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
+ }
+
+ private customModalUDisableClose2 = (): void => {
+ const currentInstance: ModalComponent = this.modalService.getCurrentInstance();
+ currentInstance.getCloseButton().disabled = true;
+ }
+
+ private customModalChangeTitle2 = (): void => {
+ const currentInstance: ModalComponent = this.modalService.getCurrentInstance();
+ currentInstance.setTitle('New title');
+ }
+
+ private customModalUpdateButtons2 = (): void => {
+ const currentInstance: ModalComponent = this.modalService.getCurrentInstance();
+ const newButtons = [
+ {text: "Change title", callback: this.customModalChangeTitle2, closeModal: false},
+ {text: "Do nothing", closeModal: false}
+ ] as ModalButtonComponent[];
+ currentInstance.setButtons(newButtons);
+ }
+}
diff --git a/stories/ng2-component-lab/components/modal-inner-content-example.component.ts b/stories/ng2-component-lab/components/modal-inner-content-example.component.ts
new file mode 100644
index 0000000..1b6bed0
--- /dev/null
+++ b/stories/ng2-component-lab/components/modal-inner-content-example.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+ selector: "inner-content",
+ template: `
+ <div>
+ <sdc-input [label]="'Enter value'" [(value)]="name"> </sdc-input>
+ <sdc-input [label]="'Enter value'" [(value)]="name"> </sdc-input>
+ <sdc-input [label]="'Enter value'" [(value)]="name"> </sdc-input>
+ </div>
+`
+})
+export class ModalInnerContent {
+
+ @Input() name:string;
+}
diff --git a/stories/ng2-component-lab/components/notifications-example.component.ts b/stories/ng2-component-lab/components/notifications-example.component.ts
new file mode 100644
index 0000000..91dd95e
--- /dev/null
+++ b/stories/ng2-component-lab/components/notifications-example.component.ts
@@ -0,0 +1,57 @@
+import { Component, Input, ViewChild } from "@angular/core";
+import { NotificationsService } from "../../../src/angular/notifications/services/notifications.service";
+import { NotificationSettings } from "../../../src/angular/notifications/utilities/notification.config";
+import { InnerNotifContent } from "../../../src/angular/notifications/notification-inner-content-example.component";
+
+@Component({
+ selector: "notifications-example",
+ template: `
+ <div>
+ <span>Send Success Notification</span>
+ <sdc-button (click)="sendSuccessNotif()" text="Click Me!"></sdc-button>
+ </div>
+ <div>
+ <span>Send Warning Notification</span>
+ <sdc-button (click)="sendWarnNotif()" text="Click Me!"></sdc-button>
+ </div>
+ <div>
+ <span>Send Info Notification</span>
+ <sdc-button (click)="sendInfoNotif()" text="Click Me!"></sdc-button>
+ </div>
+ <div>
+ <span>Send Success MultipleLine Notification</span>
+ <sdc-button (click)="sendMultipleLinesSuceessNotif()" text="Click Me!"></sdc-button>
+ </div>
+ <div>
+ <span>Send Success Custom Notification</span>
+ <sdc-button (click)="sendSuccessCustomNotif()" text="Click Me!"></sdc-button>
+ </div>
+ <sdc-notification-container>
+ </sdc-notification-container>
+`
+})
+export class NotificationsExample {
+
+ constructor(private notifsService : NotificationsService) {
+ }
+
+ sendSuccessNotif() {
+ this.notifsService.push(new NotificationSettings("success", 'notif success message test', 'Notif Title Success'));
+ }
+
+ sendMultipleLinesSuceessNotif() {
+ this.notifsService.push(new NotificationSettings("success", 'notif success message test with a lot of test so we can test multiple line case lets just add blabla bcdesfg hijklmnop qrstuvw xyz abcdesfg hijklmnop qrstuvw xyz', 'Notif Title Success'));
+ }
+
+ sendWarnNotif() {
+ this.notifsService.push(new NotificationSettings("warn", 'notif warn message test', 'Notif Title Warn'));
+ }
+
+ sendInfoNotif() {
+ this.notifsService.push(new NotificationSettings("info", 'notif info message test', 'Notif Title Info'));
+ }
+
+ sendSuccessCustomNotif() {
+ this.notifsService.push(new NotificationSettings( "info", 'notif XYZ', 'Notif Custom XYZ', 10000, false, true, InnerNotifContent, { notifyText : "notif info custom inner message test", notifyTitle : "Notif Custom Inner Title Info"}));
+ }
+}
diff --git a/stories/ng2-component-lab/components/svg-icons-table.component.ts b/stories/ng2-component-lab/components/svg-icons-table.component.ts
new file mode 100644
index 0000000..732650d
--- /dev/null
+++ b/stories/ng2-component-lab/components/svg-icons-table.component.ts
@@ -0,0 +1,189 @@
+import { Component } from "@angular/core";
+import { Mode, Placement, Size } from "../../../src/angular/common/enums";
+import { SvgIconComponent } from "../../../src/angular/svg-icon/svg-icon.component";
+import { IDropDownOption, DropDownOptionType, DropDownTypes } from "../../../src/angular/form-elements/dropdown/dropdown-models";
+
+const options1: IDropDownOption[] = [
+ {
+ label: 'First Option',
+ value: 'First Option',
+ },
+ {
+ label: 'Second Option',
+ value: 'Second Option',
+ },
+ {
+ label: 'Third Option',
+ value: 'Third Option',
+ type: DropDownOptionType.Simple
+ }
+];
+
+@Component({
+ selector: "svg-icons-table",
+ template: `
+ <div class="icon-showcase">
+ <div>
+ <svg-icon [name]="selectedIcon" [mode]="defaultIconSettings.mode" [size]="defaultIconSettings.size"></svg-icon>
+ Selected icon: <b *ngIf="selectedIcon">{{selectedIcon}}</b><i *ngIf="!selectedIcon">None</i>
+ </div>
+
+ <div class="icon-options-wrapper">
+
+ <div class="icon-options">
+ <div class="icon-options-dropdowns">
+ <sdc-dropdown label="Mode" [selectedOption]="{'value': mode, 'label': mode}" [options]="modeOptions" (changed)="mode = $event.value"></sdc-dropdown>
+ <sdc-dropdown label="Label Placement" [selectedOption]="{'value': labelPlacement, 'label': labelPlacement}" [options]="labelPlacementOptions" [selectedOption]="labelPlacement" (changed)="labelPlacement = $event.value"></sdc-dropdown>
+ <sdc-dropdown label="Size" [selectedOption]="{'value': size, 'label': size}" [options]="sizeOptions" [selectedOption]="size" (changed)="size = $event.value"></sdc-dropdown>
+ </div>
+ <div class="icon-options-checkboxes-wrapper">
+ <div class="icon-options-checkboxes">
+ <sdc-checkbox label="Clickable" [checked]="clickable" (checkedChange)="clickable = $event"></sdc-checkbox>
+ <sdc-checkbox label="Disabled" [checked]="disabled" (checkedChange)="disabled = $event"></sdc-checkbox>
+ </div>
+ <div class="icon-options-label">
+ <sdc-input label="Label" [(value)]="label"></sdc-input>
+ </div>
+ <svg-icon-label [name]="selectedIcon" [mode]="mode" [size]="size" [clickable]="clickable" [disabled]="disabled" [label]="label" [labelPlacement]="labelPlacement"></svg-icon-label>
+ </div>
+ </div>
+
+ <div class="icon-code">
+ <pre>
+ &lt;svg-icon-label
+ [name]="{{selectedIcon}}"
+ [mode]="{{mode}}"
+ [size]="{{size}}"
+ [clickable]="{{clickable}}"
+ [disabled]="{{disabled}}"
+ [label]="{{label}}"
+ [labelPlacement]="{{labelPlacement}}"&gt;
+ &lt;/svg-icon-label&gt;
+ </pre>
+ </div>
+ </div>
+
+ </div>
+ <div class="svg-icons-table">
+ <div *ngFor="let iconName of iconsNames" class="svg-icon-cell" [ngClass]="{'selected': selectedIcon === iconName}" (click)="selectIcon(iconName)">
+ <svg-icon-label [name]="iconName" [label]="iconName" labelPlacement="right"></svg-icon-label>
+ </div>
+ </div>
+`,
+ styles: [`
+ .svg-icons-table {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: flex-start;
+ align-items: stretch;
+ overflow-y: auto;
+ }
+ .svg-icons-table .svg-icon-cell {
+ border: 1px solid #999;
+ padding: 5px;
+ margin: 5px;
+ width: 250px;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ }
+ .svg-icons-table .svg-icon-cell.selected {
+ border-color: #1eb9f3;
+ background-color: #1eb9f3;
+ }
+ .icon-showcase {
+ margin: 20px 10px;
+ padding: 10px;
+ border: 1px solid #999;
+ background: #eee;
+ }
+ .icon-options-wrapper {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: flex-start;
+ margin-top: 10px;
+ }
+
+ .icon-options-checkboxes-wrapper {
+ display: flex;
+ flex-flow: row;
+ margin-top: 10px;
+ }
+
+ .icon-options-checkboxes {
+ margin-top: 27px;
+ margin-right: 30px;
+ }
+
+ .icon-options-label {
+ margin-right: 30px;
+ }
+
+ .icon-code pre {
+ user-select: text;
+ }
+
+ sdc-dropdown {
+ display: inline-block;
+ min-width: 160px;
+ }
+
+ sdc-dropdown .sdc-dropdown {
+ }
+`]
+})
+export class SvgIconsTableComponent {
+ public iconsNames: string[];
+ public selectedIcon: string;
+
+ public modeOptions;
+ public sizeOptions;
+ public labelPlacementOptions;
+
+ private mode: Mode;
+ private size: Size;
+ private labelPlacement: Placement;
+ private clickable: boolean;
+ private disabled: boolean;
+ private label: string;
+
+ private defaultIconSettings: {mode: Mode, size: Size};
+
+ constructor() {
+ this.iconsNames = Object.keys(SvgIconComponent.Icons);
+ this.mode = null;
+ this.size = Size.medium;
+ this.clickable = false;
+ this.disabled = false;
+ this.defaultIconSettings = { mode: Mode.info, size: Size.small };
+
+ this.modeOptions = [{value: null, label: 'NONE'}].concat(Object.keys(Mode).map((modeKey) => ({
+ value: modeKey,
+ label: Mode[modeKey]
+ })));
+
+ this.sizeOptions = Object.keys(Size).map((sizeKey) => ({
+ value: sizeKey,
+ label: Size[sizeKey]
+ }));
+
+ this.labelPlacementOptions = Object.keys(Placement).map((placementKey) => ({
+ value: placementKey,
+ label: Placement[placementKey]
+ }));
+
+ this.setDefaults();
+ }
+
+ private setDefaults = (): void => {
+ this.label = 'Some label';
+ this.selectedIcon = "attachment";
+ this.mode = Mode.primary;
+ this.labelPlacement = Placement.right;
+ }
+
+ public selectIcon(iconName) {
+ this.selectedIcon = iconName;
+ }
+}