Merge pull request #701 from dxc-technology/setup-storybook

Adding config storybook chromatic

Author: mawelCaballero

.github/workflows/chromatic.yml

@@ -0,0 +1,27 @@
+name: "Chromatic"
+
+on:
+  push:
+    branches:
+      - storybook
+  pull_request:
+
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Install lib dependencies
+        run: cd projects/dxc-ngx-cdk && npm install
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitOnceUploaded: true
+          exitZeroOnChanges: true
+          workingDir: projects/dxc-ngx-cdk

.vscode/settings.json

@@ -1,13 +1,13 @@
 {
     "workbench.colorCustomizations": {
-        "activityBar.activeBackground": "#8cb761",
+        "activityBar.activeBackground": "#073caf",
         "activityBar.activeBorder": "#e9eff5",
-        "activityBar.background": "#8cb761",
+        "activityBar.background": "#ec5fa6",
         "activityBar.foreground": "#15202b",
         "activityBar.inactiveForeground": "#15202b99",
         "activityBarBadge.background": "#e9eff5",
         "activityBarBadge.foreground": "#15202b",
-        "statusBar.background": "#739d48",
+        "statusBar.background": "#ec5fa6",
         "statusBar.foreground": "#15202b",
         "statusBarItem.hoverBackground": "#597a38",
         "titleBar.activeBackground": "#739d48",

package-lock.json

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ExampleContainerComponent } from "./example-container/example-container.component";
+import { TitleComponent } from "./title/title.component";
+import { DarkSectionComponent } from "./dark-section/dark-section.component";
+
+@NgModule({
+  declarations: [
+    TitleComponent,
+    ExampleContainerComponent,
+    DarkSectionComponent,
+  ],
+  imports: [CommonModule],
+  exports: [TitleComponent, ExampleContainerComponent, DarkSectionComponent],
+})
+export class ComponentsModule {}

projects/dxc-ngx-cdk/.storybook/components/components.module.ts

@@ -0,0 +1,3 @@
+.dark-section{
+  background-color: #333333;
+}

projects/dxc-ngx-cdk/.storybook/components/dark-section/dark-section.component.css

@@ -0,0 +1,3 @@
+<div class="dark-section">
+  <ng-content></ng-content>
+</div>

projects/dxc-ngx-cdk/.storybook/components/dark-section/dark-section.component.html

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

projects/dxc-ngx-cdk/.storybook/components/dark-section/dark-section.component.spec.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "sb-dark-container",
+  templateUrl: "./dark-section.component.html",
+  styleUrls: ["./dark-section.component.css"],
+})
+export class DarkSectionComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

projects/dxc-ngx-cdk/.storybook/components/dark-section/dark-section.component.ts

@@ -0,0 +1,3 @@
+<div class="example-container">
+  <ng-content></ng-content>
+</div>