added sample components from design kit

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

.github/workflows/deploy-github-pages.yml

@@ -5,12 +5,12 @@ name: Build and Publish Storybook to GitHub Pages
 
 on:
   # temp only so we can skip this build
-  push:
-    tags:
-      - v*
   # push:
-  #   branches:
-  #     - main
+  #   tags:
+  #     - v*
+  push:
+    branches:
+      - main
 
 permissions:
   contents: read

package.json

@@ -6,8 +6,10 @@
     "build-palette": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-palette.ts",
     "build-typography": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-typography.ts",
     "build-colors": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-colors.ts",
+    "build-constants": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-constants.ts",
     "start": "ng serve",
-    "build": "yarn run build-typography && yarn run build-colors && ng build",
+    "prebuild": "yarn run build-constants && yarn run build-typography && yarn run build-colors",
+    "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "storybook": "ng run lfx-component-lib:storybook",

projects/lfx-component-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emlimlf/lfx-component-lib",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "peerDependencies": {
     "@angular/common": "^18.1.0",
     "@angular/core": "^18.1.0"

projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts

@@ -4,7 +4,7 @@ import { SectionsComponent } from '../sections.component';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta: Meta<SectionsComponent> = {
-  title: 'Example/Containers/Sections',
+  title: 'LFX Components/Containers/Sections',
   component: SectionsComponent,
   tags: ['autodocs'],
   argTypes: {

projects/lfx-component-lib/src/lib/containers/sections/sections.component.scss

@@ -1,8 +1,11 @@
+@import "../../styles/constants.scss";
+
+// TODO: This should be auto generated from the design tokens
+// TODO: use alias instead of the direct primitive values
 section {
-  background-color: #fff;
-  padding: 20px;
-  border: 1px solid;
-  border-radius: 10px;
-  margin-right: 16px;
-  margin-bottom: 16px;
+  background-color: $grey-0;
+  padding: $dim-24;
+  border-radius: $dim-8;
+  margin-right: $dim-16;
+  margin-bottom: $dim-16;
 }

projects/lfx-component-lib/src/lib/containers/notice/__docs__/notice.stories.ts → projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts

@@ -1,28 +1,29 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { NoticeComponent } from '../notice.component';
+import { ToastComponent } from '../toast.component';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta: Meta<NoticeComponent> = {
-  title: 'Example/Containers/Notice',
-  component: NoticeComponent,
+const meta: Meta<ToastComponent> = {
+  title: 'LFX Components/Containers/Toast',
+  component: ToastComponent,
   tags: ['autodocs'],
   argTypes: {
     type: {
       control: 'select',
-      options: ['info', 'warning', 'success', 'error'],
+      options: ['notice', 'warning', 'success', 'error'],
+      defaultValue: 'notice',
     },
   },
 };
 
 export default meta;
-type Story = StoryObj<NoticeComponent>;
+type Story = StoryObj<ToastComponent>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Info: Story = {
   render: (args: any) => ({
-    template: `<lfx-notice type="${args.type}">
+    template: `<lfx-toast type="${args.type}">
       <h1>Title</h1>
       <p>Body paragraph</p>
-    </lfx-notice>`,
+    </lfx-toast>`,
   }),
 };

projects/lfx-component-lib/src/lib/containers/toast/toast.component.html

@@ -0,0 +1,3 @@
+<div [class]="'lfx-toast ' + type()">
+  <ng-content />
+</div>

projects/lfx-component-lib/src/lib/containers/toast/toast.component.scss

@@ -0,0 +1,27 @@
+@import "../../styles/constants.scss";
+
+// TODO: This should be auto generated from the design tokens
+// TODO: use alias instead of the direct primitive values
+.lfx-toast {
+  padding: $dim-24 $dim-32;
+  border-radius: $dim-8;
+  border-left-width: $dim-8;
+  border-left-style: solid;
+
+  &.notice {
+    background-color: $blue-50;
+    border-left-color: $blue-500;
+  }
+  &.warning {
+    background-color: $orange-50;
+    border-left-color: $orange-500;
+  }
+  &.success {
+    background-color: $green-50;
+    border-left-color: $green-500;
+  }
+  &.error {
+    background-color: $red-50;
+    border-left-color: $red-500;
+  }
+}

projects/lfx-component-lib/src/lib/containers/notice/notice.component.spec.ts → projects/lfx-component-lib/src/lib/containers/toast/toast.component.spec.ts

@@ -1,18 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NoticeComponent } from './notice.component';
+import { ToastComponent } from './toast.component';
 
-describe('NoticeComponent', () => {
-  let component: NoticeComponent;
-  let fixture: ComponentFixture<NoticeComponent>;
+describe('ToastComponent', () => {
+  let component: ToastComponent;
+  let fixture: ComponentFixture<ToastComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [NoticeComponent]
-    })
-    .compileComponents();
+      imports: [ToastComponent],
+    }).compileComponents();
 
-    fixture = TestBed.createComponent(NoticeComponent);
+    fixture = TestBed.createComponent(ToastComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

projects/lfx-component-lib/src/lib/containers/toast/toast.component.ts

@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+
+type IType = 'notice' | 'warning' | 'success' | 'error';
+@Component({
+  selector: 'lfx-toast',
+  standalone: true,
+  imports: [],
+  templateUrl: './toast.component.html',
+  styleUrl: './toast.component.scss',
+})
+export class ToastComponent {
+  type = input<IType>('notice');
+}

projects/lfx-component-lib/src/lib/styles/constants.scss

@@ -0,0 +1,93 @@
+$grey-0: #fafcfe;
+$grey-50: #f2f3f4;
+$grey-100: #d8dbdd;
+$grey-200: #c5cacc;
+$grey-300: #aab1b5;
+$grey-400: #99a2a7;
+$grey-500: #808b91;
+$grey-600: #747e84;
+$grey-700: #5b6367;
+$grey-800: #464c50;
+$grey-900: #363a3d;
+$grey-1000: #282e32;
+$blue-50: #ebf5fc;
+$blue-100: #c0e0f5;
+$blue-200: #a2d1f0;
+$blue-300: #78bbe9;
+$blue-400: #5daee5;
+$blue-500: #359ade;
+$blue-600: #308cca;
+$blue-700: #266d9e;
+$blue-800: #1d557a;
+$blue-900: #16415d;
+$blue-1000: #0f2d40;
+$green-50: #ecfaf5;
+$green-100: #c4efe0;
+$green-200: #a7e7d1;
+$green-300: #7fdbbd;
+$green-400: #66d5b0;
+$green-500: #40ca9c;
+$green-600: #3ab88e;
+$green-700: #2d8f6f;
+$green-800: #236f56;
+$green-900: #1b5542;
+$green-1000: #133b2e;
+$red-50: #faece8;
+$red-100: #efc4b6;
+$red-200: #e7a893;
+$red-300: #db8062;
+$red-400: #d56744;
+$red-500: #ca4115;
+$red-600: #b83b13;
+$red-700: #8f2e0f;
+$red-800: #6f240c;
+$red-900: #551b09;
+$red-1000: #3b1206;
+$yellow-50: #fef8e8;
+$yellow-100: #faeab9;
+$yellow-200: #f8df97;
+$yellow-300: #f5d168;
+$yellow-400: #f3c84a;
+$yellow-500: #f0ba1d;
+$yellow-600: #daa91a;
+$yellow-700: #aa8415;
+$yellow-800: #846610;
+$yellow-900: #654e0c;
+$yellow-1000: #463608;
+$orange-50: #fcf1e6;
+$orange-100: #f5d5b0;
+$orange-200: #f0c08a;
+$orange-300: #e9a455;
+$orange-400: #e59234;
+$orange-500: #de7701;
+$orange-600: #ca6c01;
+$orange-700: #9e5401;
+$orange-800: #7a4101;
+$orange-900: #5d3200;
+$orange-1000: #402300;
+$overlay-grey-0-50: #fafcfe80;
+$overlay-grey-1000-50: #282e3280;
+
+$dim-0: 0px;
+$dim-1: 1px;
+$dim-2: 2px;
+$dim-4: 4px;
+$dim-6: 6px;
+$dim-8: 8px;
+$dim-11: 11px;
+$dim-12: 12px;
+$dim-14: 14px;
+$dim-16: 16px;
+$dim-18: 18px;
+$dim-22: 22px;
+$dim-24: 24px;
+$dim-27: 27px;
+$dim-32: 32px;
+$dim-40: 40px;
+$dim-48: 48px;
+$dim-56: 56px;
+$dim-64: 64px;
+$dim-88: 88px;
+$dim-104: 104px;
+$dim-144: 144px;
+$dim-160: 160px;

projects/lfx-component-lib/src/public-api.ts

@@ -3,4 +3,5 @@
  */
 
 export * from './lib/lfx-component-lib.service';
-export * from './lib/lfx-component-lib.component';
+export * from './lib/containers/sections/sections.component';
+export * from './lib/containers/toast/toast.component';