From 12804e74edc37c1bde327902a000bc366e449815 Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Wed, 4 Sep 2024 15:01:43 -0400 Subject: [PATCH 01/12] create color picker --- libs/design-system/color-picker/README.md | 3 + .../color-picker/ng-package.json | 5 + libs/design-system/color-picker/src/index.ts | 1 + .../src/lib/color-picker.component.html | 21 +++ .../src/lib/color-picker.component.scss | 166 ++++++++++++++++++ .../src/lib/color-picker.component.spec.ts | 30 ++++ .../src/lib/color-picker.component.ts | 32 ++++ .../src/lib/color-picker.stories.ts | 32 ++++ .../color-picker/src/lib/color-utils.ts | 25 +++ libs/design-system/package.json | 3 +- tsconfig.base.json | 3 + 11 files changed, 320 insertions(+), 1 deletion(-) create mode 100644 libs/design-system/color-picker/README.md create mode 100644 libs/design-system/color-picker/ng-package.json create mode 100644 libs/design-system/color-picker/src/index.ts create mode 100644 libs/design-system/color-picker/src/lib/color-picker.component.html create mode 100644 libs/design-system/color-picker/src/lib/color-picker.component.scss create mode 100644 libs/design-system/color-picker/src/lib/color-picker.component.spec.ts create mode 100644 libs/design-system/color-picker/src/lib/color-picker.component.ts create mode 100644 libs/design-system/color-picker/src/lib/color-picker.stories.ts create mode 100644 libs/design-system/color-picker/src/lib/color-utils.ts diff --git a/libs/design-system/color-picker/README.md b/libs/design-system/color-picker/README.md new file mode 100644 index 000000000..810e6309e --- /dev/null +++ b/libs/design-system/color-picker/README.md @@ -0,0 +1,3 @@ +# @hra-ui/design-system/color-picker + +Secondary entry point of `@hra-ui/design-system`. It can be used by importing from `@hra-ui/design-system/color-picker`. diff --git a/libs/design-system/color-picker/ng-package.json b/libs/design-system/color-picker/ng-package.json new file mode 100644 index 000000000..c781f0df4 --- /dev/null +++ b/libs/design-system/color-picker/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "src/index.ts" + } +} diff --git a/libs/design-system/color-picker/src/index.ts b/libs/design-system/color-picker/src/index.ts new file mode 100644 index 000000000..970f64b86 --- /dev/null +++ b/libs/design-system/color-picker/src/index.ts @@ -0,0 +1 @@ +export * from './lib/color-picker.component'; diff --git a/libs/design-system/color-picker/src/lib/color-picker.component.html b/libs/design-system/color-picker/src/lib/color-picker.component.html new file mode 100644 index 000000000..3a89627aa --- /dev/null +++ b/libs/design-system/color-picker/src/lib/color-picker.component.html @@ -0,0 +1,21 @@ + diff --git a/libs/design-system/color-picker/src/lib/color-picker.component.scss b/libs/design-system/color-picker/src/lib/color-picker.component.scss new file mode 100644 index 000000000..9d0794f68 --- /dev/null +++ b/libs/design-system/color-picker/src/lib/color-picker.component.scss @@ -0,0 +1,166 @@ +:host { + display: flex; + height: 2rem; + align-items: center; + + .color-pick { + height: 1.25rem; + width: 1.25rem; + display: inline-block; + border-radius: 50%; + vertical-align: middle; + margin: 0.25rem 0.5rem 0.25rem 0.25rem; + position: relative; + cursor: pointer; + } +} + +::ng-deep { + color-picker { + div.color-picker { + border-radius: 0.5rem; + border: none; + box-shadow: 0px 5px 16px 0px #201e3d3d; + + .saturation-lightness { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; + } + + .hex-text { + display: flex !important; + flex-direction: row-reverse; + justify-content: flex-end; + gap: 0.25rem; + padding: 0 0.75rem 1rem 0.75rem; + + .box { + width: 100%; + align-items: center; + + &:not(:has(input)) { + padding: 0; + width: auto; + div { + margin: 0 1.5rem; + font-size: 0.75rem; + font-family: 'Metropolis'; + line-height: 1.375rem; + letter-spacing: 0.005em; + color: #201e3d; + font-weight: 500; + text-transform: uppercase; + } + } + + &:has(input) { + padding: 0; + margin-right: 0; + } + + input { + border: none; + height: 2.5rem; + padding: 0.5625rem 0; + font: var(--sys-label-small); + border-bottom: solid 1px var(--sys-secondary); + background-color: var(--sys-surface-container); + } + } + } + + .arrow.arrow-right, + .type-policy { + display: none; + } + + .button-area { + display: flex; + justify-content: space-between; + padding: 0; + margin: 0 0.75rem 0.75rem 0.75rem; + + .accept-button, + .cancel-button { + margin: 0; + border-radius: 0.25rem; + cursor: pointer; + border: none; + background-color: transparent; + font-size: 0.875rem; + letter-spacing: 0.005em; + line-height: 1.3125rem; + font-family: 'Metropolis'; + padding: 0.25rem 0.5rem; + font-weight: 500; + color: #201e3d; + &:focus-visible { + outline: solid 2px var(--sys-tertiary); + } + } + + .cancel-button { + &:hover { + background-color: color-mix(in srgb, var(--sys-secondary) 4%, transparent); + } + + &:active { + background-color: color-mix(in srgb, var(--sys-secondary) 8%, transparent); + } + } + + .accept-button { + color: var(--sys-on-tertiary-fixed); + + &:hover { + background-color: color-mix(in srgb, var(--sys-on-tertiary-fixed) 4%, transparent); + } + + &:active { + background-color: color-mix(in srgb, var(--sys-on-tertiary-fixed) 8%, transparent); + } + + &:focus-visible { + color: var(--sys-secondary); + } + } + } + .cursor { + border-color: white; + border-width: 0.25rem; + box-shadow: 0px 5px 16px 0px #201e3d3d; + } + + .selected-color { + border: none; + box-shadow: 1px 1px 4px 0px #201e3d3d; + top: 0; + left: 0; + } + + .hue-alpha { + padding: 0; + margin: 1rem 1.125rem; + + .left { + padding: 0; + } + + .right { + padding: 0.375rem 0 0.375rem 0.5rem; + } + + .cursor { + height: 0.5rem; + width: 0.5rem; + border-width: 0.125rem; + } + .hue, + .alpha { + border-radius: 0.25rem; + height: 0.5rem; + } + } + } + } +} diff --git a/libs/design-system/color-picker/src/lib/color-picker.component.spec.ts b/libs/design-system/color-picker/src/lib/color-picker.component.spec.ts new file mode 100644 index 000000000..ce0013355 --- /dev/null +++ b/libs/design-system/color-picker/src/lib/color-picker.component.spec.ts @@ -0,0 +1,30 @@ +import { render } from '@testing-library/angular'; +import { ColorPickerComponent } from './color-picker.component'; + +describe('ColorPickerComponent', () => { + it('should update color when selectColor is called', async () => { + const { + fixture: { componentInstance: instance }, + } = await render(ColorPickerComponent, { + componentInputs: { + color: [0, 0, 0], + }, + }); + + instance.selectColor('#ffffff'); + expect(instance.color()).toEqual([255, 255, 255]); + }); + + it('should not update color if same color picked', async () => { + const { + fixture: { componentInstance: instance }, + } = await render(ColorPickerComponent, { + componentInputs: { + color: [255, 255, 255], + }, + }); + + instance.selectColor('#ffffff'); + expect(instance.color()).toEqual([255, 255, 255]); + }); +}); diff --git a/libs/design-system/color-picker/src/lib/color-picker.component.ts b/libs/design-system/color-picker/src/lib/color-picker.component.ts new file mode 100644 index 000000000..84aeb9378 --- /dev/null +++ b/libs/design-system/color-picker/src/lib/color-picker.component.ts @@ -0,0 +1,32 @@ +import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component, model, output, signal } from '@angular/core'; +import { colorEquals, hexToRgb, Rgb } from './color-utils'; +import { ColorPickerDirective, ColorPickerModule } from 'ngx-color-picker'; + +/** Color Picker Component */ +@Component({ + selector: 'hra-color-picker', + standalone: true, + imports: [CommonModule, ColorPickerModule], + templateUrl: './color-picker.component.html', + styleUrl: './color-picker.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ColorPickerComponent { + /** The RGB color value */ + readonly color = model.required(); + + /** Emits when the color picker is opened or closed */ + readonly colorPickerOpen = output(); + + /** Hex representation of the color */ + readonly hexColor = signal('#000000'); + + /** Select a new color from the color picker */ + selectColor(hex: string): void { + const rgb = hexToRgb(hex); + if (!colorEquals(this.color(), rgb)) { + this.color.set(rgb); + } + } +} diff --git a/libs/design-system/color-picker/src/lib/color-picker.stories.ts b/libs/design-system/color-picker/src/lib/color-picker.stories.ts new file mode 100644 index 000000000..aeffafd84 --- /dev/null +++ b/libs/design-system/color-picker/src/lib/color-picker.stories.ts @@ -0,0 +1,32 @@ +import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular'; +import { ColorPickerModule } from 'ngx-color-picker'; +import { ColorPickerComponent } from './color-picker.component'; + +const meta: Meta = { + component: ColorPickerComponent, + title: 'ColorPickerComponent', + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Explorer-Components?node-id=1117-10518', + }, + }, + decorators: [ + applicationConfig({ + providers: [], + }), + moduleMetadata({ + imports: [ColorPickerModule], + }), + ], + args: { + color: [170, 220, 223], + }, + render: (args) => ({ + props: args, + }), +}; +export default meta; +type Story = StoryObj; + +export const Primary: Story = {}; diff --git a/libs/design-system/color-picker/src/lib/color-utils.ts b/libs/design-system/color-picker/src/lib/color-utils.ts new file mode 100644 index 000000000..c4fa2e983 --- /dev/null +++ b/libs/design-system/color-picker/src/lib/color-utils.ts @@ -0,0 +1,25 @@ +/** Type representing an RGB color as a tuple of three numbers */ +export type Rgb = [red: number, green: number, blue: number]; + +/** Converts an RGB color to its hexadecimal string representation */ +export function rgbToHex(rgb: Rgb): string { + const channels = rgb.map((channel) => channel.toString(16).padStart(2, '0')); + return `#${channels.join('')}`; +} + +/** Converts a hexadecimal color string to an RGB color */ +export function hexToRgb(hex: string): Rgb { + const channels: number[] = []; + for (let offset = 1; offset < hex.length; offset += 2) { + channels.push(Number.parseInt(hex.slice(offset, offset + 2), 16)); + } + + return channels as Rgb; +} + +/** Compares two RGB colors for equality */ +export function colorEquals(color1: Rgb, color2: Rgb): boolean { + const [r1, g1, b1] = color1; + const [r2, g2, b2] = color2; + return r1 === r2 && g1 === g2 && b1 === b2; +} diff --git a/libs/design-system/package.json b/libs/design-system/package.json index 3a0da7c57..0c71141ac 100644 --- a/libs/design-system/package.json +++ b/libs/design-system/package.json @@ -26,7 +26,8 @@ "@angular/common": "18.2.1", "@angular/core": "18.2.1", "@angular/material": "18.2.1", - "ngx-scrollbar": "^15.1.0" + "ngx-scrollbar": "^15.1.0", + "ngx-color-picker": "^17.0.0" }, "dependencies": {}, "sideEffects": false diff --git a/tsconfig.base.json b/tsconfig.base.json index 5793ebef8..a354dfebd 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -80,6 +80,9 @@ "@hra-ui/design-system/button-toggle": [ "libs/design-system/button-toggle/src/index.ts" ], + "@hra-ui/design-system/color-picker": [ + "libs/design-system/color-picker/src/index.ts" + ], "@hra-ui/design-system/footer": [ "libs/design-system/footer/src/index.ts" ], From 9d06bcb68fd9add6b26dcafade809fc64755dbb1 Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Thu, 5 Sep 2024 15:26:41 -0400 Subject: [PATCH 02/12] update button size directive --- .../lib/button-size/button-size.directive.ts | 13 ++--- .../button-styles.component.scss | 48 +++++++++++++++++-- 2 files changed, 52 insertions(+), 9 deletions(-) diff --git a/libs/design-system/button/src/lib/button-size/button-size.directive.ts b/libs/design-system/button/src/lib/button-size/button-size.directive.ts index 4f5363d60..8e0b21745 100644 --- a/libs/design-system/button/src/lib/button-size/button-size.directive.ts +++ b/libs/design-system/button/src/lib/button-size/button-size.directive.ts @@ -39,12 +39,13 @@ const BUTTON_CONFIG: Record = { selector: '[hraButtonSize]', standalone: true, host: { - '[style.--mdc-text-button-container-height.rem]': 'buttonSize()', - '[style.font]': 'fontVar()', - '[style.--mat-text-button-horizontal-padding.rem]': 'padding()', - '[style.--mdc-filled-button-container-height.rem]': 'buttonSize()', - '[style.--mat-filled-button-horizontal-padding.rem]': 'padding()', - '[style.--mat-standard-button-toggle-height.rem]': 'buttonSize()', + // '[style.--mdc-text-button-container-height.rem]': 'buttonSize()', + // '[style.font]': 'fontVar()', + // '[style.--mat-text-button-horizontal-padding.rem]': 'padding()', + // '[style.--mdc-filled-button-container-height.rem]': 'buttonSize()', + // '[style.--mat-filled-button-horizontal-padding.rem]': 'padding()', + // '[style.--mat-standard-button-toggle-height.rem]': 'buttonSize()', + '[class]': '"button-size-"+size()', }, }) export class ButtonSizeDirective { diff --git a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss index 5197439e5..b61920fcf 100644 --- a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss +++ b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss @@ -17,10 +17,11 @@ $y-multiplier: 0.4566; white-space: nowrap; direction: ltr; } + // Basic Primary & Secondary :is(a, button)[mat-button] { min-width: unset; - font: var(--sys-title-small); + font: var(--sys-label-large); --mdc-text-button-label-text-color: var(--sys-on-tertiary-fixed); --mat-text-button-state-layer-color: var(--sys-on-tertiary-fixed); --mat-text-button-hover-state-layer-opacity: 0.04; @@ -28,7 +29,6 @@ $y-multiplier: 0.4566; --mat-text-button-focus-state-layer-opacity: 0; --mdc-text-button-container-shape: 0.25rem; --mat-text-button-horizontal-padding: 1rem; - padding: 0.25rem var(--mat-text-button-horizontal-padding); &:focus-visible { outline: solid 2px var(--sys-tertiary); @@ -41,6 +41,30 @@ $y-multiplier: 0.4566; } } +// Custom Class for basic primary and secondary +:is(a, button)[mat-button] { + &.button-size-large { + --mat-text-button-horizontal-padding: 1rem; + --mdc-text-button-container-height: 2.5rem; + font: var(--sys-label-large); + padding: 0.5rem var(--mat-text-button-horizontal-padding); + } + + &.button-size-medium { + --mat-text-button-horizontal-padding: 0.75rem; + --mdc-text-button-container-height: 2rem; + font: var(--sys-label-medium); + padding: 5.5px var(--mat-text-button-horizontal-padding); + } + + &.button-size-small { + --mat-text-button-horizontal-padding: 0.5rem; + --mdc-text-button-container-height: 1.75rem; + font: var(--sys-label-small); + padding: 5px var(--mat-text-button-horizontal-padding); + } +} + // Flat Primary & Secondary :is(a, button)[mat-flat-button] { font: var(--sys-title-small); @@ -48,7 +72,7 @@ $y-multiplier: 0.4566; --mdc-filled-button-container-color: var(--sys-tertiary); --mat-filled-button-horizontal-padding: 1rem; --mat-filled-button-pressed-state-layer-opacity: 0.16; - padding: 0.5rem var(--mat-filled-button-horizontal-padding); + --mdc-filled-button-container-height: 2rem; &:focus-visible { --mdc-filled-button-container-color: var(--sys-on-primary); @@ -63,6 +87,7 @@ $y-multiplier: 0.4566; --mat-filled-button-pressed-state-layer-opacity: 0.16; --mat-filled-button-state-layer-color: var(--sys-on-tertiary-fixed); outline: solid 1px var(--sys-on-tertiary-fixed); + padding: 7.5px var(--mat-filled-button-horizontal-padding); &:focus-visible { --mat-filled-button-state-layer-color: var(--sys-on-primary); @@ -72,6 +97,23 @@ $y-multiplier: 0.4566; } } +// Custom class for Flat primary & Seconday +:is(a, button)[mat-flat-button] { + &.button-size-large { + --mat-filled-button-horizontal-padding: 1rem; + --mdc-filled-button-container-height: 2.5rem; + font: var(--sys-label-large); + padding: 0.5rem var(--mat-filled-button-horizontal-padding); + } + + &.button-size-medium { + --mat-filled-button-horizontal-padding: 0.75rem; + --mdc-filled-button-container-height: 2rem; + font: var(--sys-label-medium); + padding: 5.5px var(--mat-filled-button-horizontal-padding); + } +} + // CTA Primary :is(a, button)[mat-flat-button]:not(.secondary-button).cta-button { --mdc-filled-button-container-shape: 0; From 40b33c034f2792ac343b225878f8161a01feb232 Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Fri, 6 Sep 2024 12:02:16 -0400 Subject: [PATCH 03/12] convert px to rem --- .../src/lib/button-styles/button-styles.component.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss index 2f7bd728d..2ca76679f 100644 --- a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss +++ b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss @@ -54,14 +54,14 @@ $y-multiplier: 0.4566; --mat-text-button-horizontal-padding: 0.75rem; --mdc-text-button-container-height: 2rem; font: var(--sys-label-medium); - padding: 5.5px var(--mat-text-button-horizontal-padding); + padding: 0.3438rem var(--mat-text-button-horizontal-padding); } &.button-size-small { --mat-text-button-horizontal-padding: 0.5rem; --mdc-text-button-container-height: 1.75rem; font: var(--sys-label-small); - padding: 5px var(--mat-text-button-horizontal-padding); + padding: 0.3125rem var(--mat-text-button-horizontal-padding); } } @@ -87,7 +87,7 @@ $y-multiplier: 0.4566; --mat-filled-button-pressed-state-layer-opacity: 0.16; --mat-filled-button-state-layer-color: var(--sys-on-tertiary-fixed); outline: solid 1px var(--sys-on-tertiary-fixed); - padding: 7.5px var(--mat-filled-button-horizontal-padding); + padding: 0.4688rem var(--mat-filled-button-horizontal-padding); &:focus-visible { --mat-filled-button-state-layer-color: var(--sys-on-primary); @@ -110,7 +110,7 @@ $y-multiplier: 0.4566; --mat-filled-button-horizontal-padding: 0.75rem; --mdc-filled-button-container-height: 2rem; font: var(--sys-label-medium); - padding: 5.5px var(--mat-filled-button-horizontal-padding); + padding: 0.3438rem var(--mat-filled-button-horizontal-padding); } } @@ -183,7 +183,7 @@ mat-button-toggle.mat-button-toggle-standalone.mat-button-toggle-appearance-stan --mat-standard-button-toggle-height: 1.3125rem; font: var(--sys-label-medium); .mat-button-toggle-label-content { - padding: 5.5px 0.5rem; + padding: 0.3438rem 0.5rem; } } From 4dd93ed3234baa5704783ef26e4e6558085b8bf2 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Tue, 10 Sep 2024 15:34:49 -0400 Subject: [PATCH 04/12] Add step indicator stories --- .../src/lib/step-indicator.stories.ts | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 libs/design-system/src/lib/step-indicator.stories.ts diff --git a/libs/design-system/src/lib/step-indicator.stories.ts b/libs/design-system/src/lib/step-indicator.stories.ts new file mode 100644 index 000000000..ff7e998c4 --- /dev/null +++ b/libs/design-system/src/lib/step-indicator.stories.ts @@ -0,0 +1,46 @@ +import { applicationConfig, Meta, StoryObj } from '@storybook/angular'; + +import { provideDesignSystem } from './providers'; + +const meta: Meta = { + title: 'StepIndicator', + decorators: [ + applicationConfig({ + providers: [provideDesignSystem()], + }), + ], +}; +export default meta; +type Story = StoryObj; + +export const StepIndicator: Story = { + args: { + value: 1, + }, + argTypes: { + value: { + type: 'number', + description: 'Number', + }, + }, + render: (args) => ({ + props: args, + template: ` + ${args['value']} + `, + styles: [ + `.step-number { + display: flex; + width: 2rem; + height: 2rem; + border-radius: 50%; + justify-content: center; + align-items: center; + background-color: var(--sys-inverse-surface); + color: var(--sys-on-primary); + font: var(--sys-label-large); + letter-spacing: var(--sys-label-large-tracking); + }`, + ], + }), +}; From 70a401758f2119ae75518dfbc7ad9b42f7f2f703 Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Wed, 11 Sep 2024 14:17:27 -0400 Subject: [PATCH 05/12] remove discarded states --- .../button-styles.component.scss | 28 ++--------- .../src/lib/button.component.stories.ts | 47 ++----------------- 2 files changed, 9 insertions(+), 66 deletions(-) diff --git a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss index 33eb56e33..a23083f40 100644 --- a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss +++ b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss @@ -79,22 +79,6 @@ $y-multiplier: 0.4566; --mdc-filled-button-label-text-color: var(--sys-secondary); outline: solid 2px var(--sys-tertiary); } - - &.secondary-button { - --mdc-filled-button-label-text-color: var(--sys-on-tertiary-fixed); - --mdc-filled-button-container-color: var(--sys-on-primary); - --mat-filled-button-hover-state-layer-opacity: 0.08; - --mat-filled-button-pressed-state-layer-opacity: 0.16; - --mat-filled-button-state-layer-color: var(--sys-on-tertiary-fixed); - outline: solid 1px var(--sys-on-tertiary-fixed); - padding: 0.4688rem var(--mat-filled-button-horizontal-padding); - - &:focus-visible { - --mat-filled-button-state-layer-color: var(--sys-on-primary); - --mdc-filled-button-label-text-color: var(--sys-secondary); - outline: solid 2px var(--sys-tertiary); - } - } } // Custom class for Flat primary & Seconday @@ -105,13 +89,6 @@ $y-multiplier: 0.4566; font: var(--sys-label-large); padding: 0.5rem var(--mat-filled-button-horizontal-padding); } - - &.button-size-medium { - --mat-filled-button-horizontal-padding: 0.75rem; - --mdc-filled-button-container-height: 2rem; - font: var(--sys-label-medium); - padding: 0.3438rem var(--mat-filled-button-horizontal-padding); - } } // CTA Primary @@ -125,6 +102,11 @@ $y-multiplier: 0.4566; /* Bottom right x-axis */ calc(100% - $corner-width) 100% ); + &:hover { + --mat-filled-button-hover-state-layer-opacity: 0; + box-shadow: 1px 2px 16px 10px rgb(from var(--sys-tertiary) r g b / 0.56); + } + &:focus-visible { --mdc-filled-button-container-color: var(--sys-tertiary); } diff --git a/libs/design-system/button/src/lib/button.component.stories.ts b/libs/design-system/button/src/lib/button.component.stories.ts index 54dd74895..ff5eb6753 100644 --- a/libs/design-system/button/src/lib/button.component.stories.ts +++ b/libs/design-system/button/src/lib/button.component.stories.ts @@ -77,40 +77,11 @@ export const FlatPrimary: Story = { }), }; -export const FlatSecondary: Story = { - args: { - size: 'large', - }, - argTypes: { - size: { - control: 'select', - options: ['large', 'medium'], - }, - }, - render: (args) => ({ - props: args, - template: ` - - `, - }), -}; - export const CtaFlatPrimary: Story = { - args: { - size: 'large', - }, - argTypes: { - size: { - control: 'select', - options: ['large', 'medium'], - }, - }, - render: (args) => ({ - props: args, + render: () => ({ template: ` `, @@ -123,20 +94,10 @@ export const CtaFlatPrimary: Story = { }; export const CtaFlatSecondary: Story = { - args: { - size: 'large', - }, - argTypes: { - size: { - control: 'select', - options: ['large', 'medium'], - }, - }, - render: (args) => ({ - props: args, + render: () => ({ template: ` `, From 951b6d6920f88ec6260127808788bf134e41d3dd Mon Sep 17 00:00:00 2001 From: edlu77 Date: Wed, 11 Sep 2024 18:11:10 -0400 Subject: [PATCH 06/12] Make step indicator component --- .../src/lib/step-indicator.stories.ts | 46 ------------------- .../step-indicator/ng-package.json | 5 ++ .../design-system/step-indicator/src/index.ts | 1 + .../src/lib/step-indicator.component.html | 1 + .../src/lib/step-indicator.component.scss | 14 ++++++ .../lib/step-indicator.component.stories.ts | 22 +++++++++ .../src/lib/step-indicator.component.ts | 18 ++++++++ tsconfig.base.json | 3 ++ 8 files changed, 64 insertions(+), 46 deletions(-) delete mode 100644 libs/design-system/src/lib/step-indicator.stories.ts create mode 100644 libs/design-system/step-indicator/ng-package.json create mode 100644 libs/design-system/step-indicator/src/index.ts create mode 100644 libs/design-system/step-indicator/src/lib/step-indicator.component.html create mode 100644 libs/design-system/step-indicator/src/lib/step-indicator.component.scss create mode 100644 libs/design-system/step-indicator/src/lib/step-indicator.component.stories.ts create mode 100644 libs/design-system/step-indicator/src/lib/step-indicator.component.ts diff --git a/libs/design-system/src/lib/step-indicator.stories.ts b/libs/design-system/src/lib/step-indicator.stories.ts deleted file mode 100644 index ff7e998c4..000000000 --- a/libs/design-system/src/lib/step-indicator.stories.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { applicationConfig, Meta, StoryObj } from '@storybook/angular'; - -import { provideDesignSystem } from './providers'; - -const meta: Meta = { - title: 'StepIndicator', - decorators: [ - applicationConfig({ - providers: [provideDesignSystem()], - }), - ], -}; -export default meta; -type Story = StoryObj; - -export const StepIndicator: Story = { - args: { - value: 1, - }, - argTypes: { - value: { - type: 'number', - description: 'Number', - }, - }, - render: (args) => ({ - props: args, - template: ` - ${args['value']} - `, - styles: [ - `.step-number { - display: flex; - width: 2rem; - height: 2rem; - border-radius: 50%; - justify-content: center; - align-items: center; - background-color: var(--sys-inverse-surface); - color: var(--sys-on-primary); - font: var(--sys-label-large); - letter-spacing: var(--sys-label-large-tracking); - }`, - ], - }), -}; diff --git a/libs/design-system/step-indicator/ng-package.json b/libs/design-system/step-indicator/ng-package.json new file mode 100644 index 000000000..c781f0df4 --- /dev/null +++ b/libs/design-system/step-indicator/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "src/index.ts" + } +} diff --git a/libs/design-system/step-indicator/src/index.ts b/libs/design-system/step-indicator/src/index.ts new file mode 100644 index 000000000..967c85dac --- /dev/null +++ b/libs/design-system/step-indicator/src/index.ts @@ -0,0 +1 @@ +export * from './lib/step-indicator.component'; diff --git a/libs/design-system/step-indicator/src/lib/step-indicator.component.html b/libs/design-system/step-indicator/src/lib/step-indicator.component.html new file mode 100644 index 000000000..c2a531f37 --- /dev/null +++ b/libs/design-system/step-indicator/src/lib/step-indicator.component.html @@ -0,0 +1 @@ +{{ value() }} diff --git a/libs/design-system/step-indicator/src/lib/step-indicator.component.scss b/libs/design-system/step-indicator/src/lib/step-indicator.component.scss new file mode 100644 index 000000000..1d23a5ce2 --- /dev/null +++ b/libs/design-system/step-indicator/src/lib/step-indicator.component.scss @@ -0,0 +1,14 @@ +:host { + .step-number { + font: var(--sys-label-large); + letter-spacing: var(--sys-label-large-tracking); + background-color: var(--sys-inverse-surface); + color: var(--sys-on-primary); + display: flex; + width: 2rem; + height: 2rem; + border-radius: 50%; + justify-content: center; + align-items: center; + } +} diff --git a/libs/design-system/step-indicator/src/lib/step-indicator.component.stories.ts b/libs/design-system/step-indicator/src/lib/step-indicator.component.stories.ts new file mode 100644 index 000000000..da4172c38 --- /dev/null +++ b/libs/design-system/step-indicator/src/lib/step-indicator.component.stories.ts @@ -0,0 +1,22 @@ +import { applicationConfig, Meta, StoryObj } from '@storybook/angular'; + +import { provideDesignSystem } from '../../../src/lib/providers'; +import { StepIndicatorComponent } from './step-indicator.component'; + +const meta: Meta = { + component: StepIndicatorComponent, + title: 'StepIndicatorComponent', + decorators: [ + applicationConfig({ + providers: [provideDesignSystem()], + }), + ], +}; +export default meta; +type Story = StoryObj; + +export const StepIndicator: Story = { + args: { + value: 1, + }, +}; diff --git a/libs/design-system/step-indicator/src/lib/step-indicator.component.ts b/libs/design-system/step-indicator/src/lib/step-indicator.component.ts new file mode 100644 index 000000000..b55cc2485 --- /dev/null +++ b/libs/design-system/step-indicator/src/lib/step-indicator.component.ts @@ -0,0 +1,18 @@ +import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; + +/** + * Step indicator for module components that have multiple steps + */ +@Component({ + selector: 'hra-step-indicator', + standalone: true, + imports: [CommonModule], + templateUrl: './step-indicator.component.html', + styleUrl: './step-indicator.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class StepIndicatorComponent { + /** Step value */ + value = input.required(); +} diff --git a/tsconfig.base.json b/tsconfig.base.json index 7fc9f905c..900e7809a 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -113,6 +113,9 @@ "@hra-ui/design-system/social-media-button": [ "libs/design-system/social-media-button/src/index.ts" ], + "@hra-ui/design-system/step-indicator": [ + "libs/design-system/step-indicator/src/index.ts" + ], "@hra-ui/design-system/table": [ "libs/design-system/table/src/index.ts" ], From 67c76e5c6716b1adcb26421d6b44deaa51d42b4c Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Thu, 12 Sep 2024 15:25:46 -0400 Subject: [PATCH 07/12] update css for all button stories --- libs/design-system/button/src/index.ts | 1 - .../button-styles.component.scss | 228 ++++++++++-------- .../src/lib/button.component.stories.ts | 109 +++++---- .../button/src/lib/button.module.ts | 7 +- .../directives/nav-item-button.directive.ts | 11 - 5 files changed, 201 insertions(+), 155 deletions(-) delete mode 100644 libs/design-system/button/src/lib/directives/nav-item-button.directive.ts diff --git a/libs/design-system/button/src/index.ts b/libs/design-system/button/src/index.ts index 5204f3a6a..a0da06133 100644 --- a/libs/design-system/button/src/index.ts +++ b/libs/design-system/button/src/index.ts @@ -4,7 +4,6 @@ export * from './lib/button.module'; export * from './lib/button-size/button-size.directive'; export * from './lib/directives/call-to-action-button.directive'; -export * from './lib/directives/nav-item-button.directive'; export * from './lib/directives/navigation-category-button.directive'; export * from './lib/directives/primary-button.directive'; export * from './lib/directives/secondary-button.directive'; diff --git a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss index a23083f40..cc209370e 100644 --- a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss +++ b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss @@ -17,63 +17,114 @@ $y-multiplier: 0.4566; white-space: nowrap; direction: ltr; } +* { + --mat-filled-button-pressed-state-layer-opacity: 0.16; + --mdc-filled-button-container-color: var(--sys-tertiary); + --mdc-filled-button-disabled-label-text-color: color-mix(in srgb, var(--sys-on-surface) 40%, transparent); +} -// Basic Primary & Secondary -:is(a, button)[mat-button] { - min-width: unset; - font: var(--sys-label-large); - --mdc-text-button-label-text-color: var(--sys-on-tertiary-fixed); - --mat-text-button-state-layer-color: var(--sys-on-tertiary-fixed); - --mat-text-button-hover-state-layer-opacity: 0.04; - --mat-text-button-pressed-state-layer-opacity: 0.08; - --mat-text-button-focus-state-layer-opacity: 0; - --mdc-text-button-container-shape: 0.25rem; - --mat-text-button-horizontal-padding: 1rem; +// CTA Primary +:is(a, button)[mat-flat-button]:not(.secondary-button).cta-button { + --mdc-filled-button-container-color: var(--sys-tertiary); + --mdc-filled-button-container-shape: 0; + clip-path: polygon( + /* Bottom left */ 0 100%, + /* Top left */ 0 0, + /* Top right */ 100% 0%, + /* Bottom right y-axis */ 100% calc(100% - $corner-height), + /* Bottom right x-axis */ calc(100% - $corner-width) 100% + ); + + &:hover { + background-color: transparent; + clip-path: unset; + box-shadow: unset; + filter: drop-shadow(0px 0px 16px color-mix(in srgb, var(--sys-tertiary) 56%, transparent)); + + &:before { + content: ''; + position: absolute; + z-index: -1; + inset: 0; + background: var(--mdc-filled-button-container-color); + clip-path: polygon( + /* Bottom left */ 0 100%, + /* Top left */ 0 0, + /* Top right */ 100% 0%, + /* Bottom right y-axis */ 100% calc(100% - $corner-height), + /* Bottom right x-axis */ calc(100% - $corner-width) 100% + ); + } + } &:focus-visible { - outline: solid 2px var(--sys-tertiary); - --mdc-text-button-label-text-color: var(--sys-secondary); + --mdc-filled-button-label-text-color: var(--sys-secondary); + outline: unset; } - &.secondary-button { - --mat-text-button-state-layer-color: var(--sys-secondary); - --mdc-text-button-label-text-color: var(--sys-secondary); + &:focus-visible::after { + content: ''; + position: absolute; + background-color: var(--sys-on-primary); + inset: 0; + z-index: -1; + clip-path: polygon( + /* Bottom left */ $border-width calc(100% - $border-width), + /* Top left */ $border-width $border-width, + /* Top right */ calc(100% - $border-width) $border-width, + /* Bottom right y-axis */ calc(100% - $border-width) calc(100% - $corner-height - $border-width * $y-multiplier), + /* Bottom right x-axis */ calc(100% - $corner-width - $border-width * $x-multiplier) calc(100% - $border-width) + ); } } -// Custom Class for basic primary and secondary -:is(a, button)[mat-button] { - &.button-size-large { - --mat-text-button-horizontal-padding: 1rem; - --mdc-text-button-container-height: 2.5rem; - font: var(--sys-label-large); - padding: 0.5rem var(--mat-text-button-horizontal-padding); +// CTA Secondary +:is(a, button)[mat-flat-button].cta-button.secondary-button { + --mdc-filled-button-container-color: var(--sys-on-primary); + --mdc-filled-button-label-text-color: var(--sys-on-tertiary-fixed); + --mat-filled-button-hover-state-layer-opacity: 0.08; + --mat-filled-button-pressed-state-layer-opacity: 0.16; + --mat-filled-button-state-layer-color: var(--sys-on-tertiary-fixed); + --mdc-filled-button-container-shape: 0; + --mdc-filled-button-disabled-container-color: var(--sys-on-primary); + + &:hover { + box-shadow: none; } - &.button-size-medium { - --mat-text-button-horizontal-padding: 0.75rem; - --mdc-text-button-container-height: 2rem; - font: var(--sys-label-medium); - padding: 0.3438rem var(--mat-text-button-horizontal-padding); + &:focus-visible { + --mat-filled-button-state-layer-color: var(--sys-on-primary); + --mdc-filled-button-label-text-color: var(--sys-secondary); + outline: solid 2px var(--sys-tertiary); } +} - &.button-size-small { - --mat-text-button-horizontal-padding: 0.5rem; - --mdc-text-button-container-height: 1.75rem; - font: var(--sys-label-small); - padding: 0.3125rem var(--mat-text-button-horizontal-padding); +// This css clips the focus, hover, ripple states of the button for the Primary CTA +.mat-mdc-unelevated-button.cta-button:not(.secondary-button) { + .mat-mdc-button-persistent-ripple, + .mat-mdc-button-ripple, + &:hover .mat-mdc-button-persistent-ripple::before { + clip-path: polygon( + /* Bottom left */ 0 100%, + /* Top left */ 0 0, + /* Top right */ 100% 0%, + /* Bottom right y-axis */ 100% calc(100% - $corner-height), + /* Bottom right x-axis */ calc(100% - $corner-width) 100% + ); } } -// Flat Primary & Secondary +// Flat Round :is(a, button)[mat-flat-button] { font: var(--sys-title-small); --mdc-filled-button-container-shape: 0.25rem; - --mdc-filled-button-container-color: var(--sys-tertiary); --mat-filled-button-horizontal-padding: 1rem; - --mat-filled-button-pressed-state-layer-opacity: 0.16; --mdc-filled-button-container-height: 2rem; + &:hover { + box-shadow: 1px 2px 16px 0px rgb(from var(--sys-tertiary) r g b / 0.56); + } + &:focus-visible { --mdc-filled-button-container-color: var(--sys-on-primary); --mdc-filled-button-label-text-color: var(--sys-secondary); @@ -86,63 +137,69 @@ $y-multiplier: 0.4566; &.button-size-large { --mat-filled-button-horizontal-padding: 1rem; --mdc-filled-button-container-height: 2.5rem; - font: var(--sys-label-large); + font: var(--sys-label-medium); padding: 0.5rem var(--mat-filled-button-horizontal-padding); } } -// CTA Primary -:is(a, button)[mat-flat-button]:not(.secondary-button).cta-button { - --mdc-filled-button-container-shape: 0; - clip-path: polygon( - /* Bottom left */ 0 100%, - /* Top left */ 0 0, - /* Top right */ 100% 0%, - /* Bottom right y-axis */ 100% calc(100% - $corner-height), - /* Bottom right x-axis */ calc(100% - $corner-width) 100% - ); +// Basic Primary & Secondary +:is(a, button)[mat-button] { + min-width: unset; + font: var(--sys-label-large); + --mdc-text-button-label-text-color: var(--sys-on-tertiary-fixed); + --mat-text-button-state-layer-color: var(--sys-on-tertiary-fixed); + --mdc-text-button-disabled-label-text-color: color-mix(in srgb, var(--sys-on-surface) 40%, transparent); + --mat-text-button-pressed-state-layer-opacity: 0.16; + --mat-text-button-focus-state-layer-opacity: 0; + --mdc-text-button-container-shape: 0.25rem; + --mat-text-button-horizontal-padding: 1rem; - &:hover { - --mat-filled-button-hover-state-layer-opacity: 0; - box-shadow: 1px 2px 16px 10px rgb(from var(--sys-tertiary) r g b / 0.56); + &:focus-visible { + outline: solid 2px var(--sys-tertiary); + --mdc-text-button-label-text-color: var(--sys-secondary); } - &:focus-visible { - --mdc-filled-button-container-color: var(--sys-tertiary); + &.secondary-button { + --mat-text-button-state-layer-color: var(--sys-secondary); + --mdc-text-button-label-text-color: var(--sys-secondary); } - &:focus-visible::after { - content: ''; - position: absolute; - background-color: var(--sys-on-primary); - inset: 0; - z-index: -1; - clip-path: polygon( - /* Bottom left */ $border-width calc(100% - $border-width), - /* Top left */ $border-width $border-width, - /* Top right */ calc(100% - $border-width) $border-width, - /* Bottom right y-axis */ calc(100% - $border-width) calc(100% - $corner-height - $border-width * $y-multiplier), - /* Bottom right x-axis */ calc(100% - $corner-width - $border-width * $x-multiplier) calc(100% - $border-width) - ); + &:has(mat-icon).mat-mdc-button { + padding: 0 1rem 0 0.75rem; + mat-icon { + margin-right: 0.5rem; + } } } -// CTA Secondary -:is(a, button)[mat-flat-button].cta-button.secondary-button { - clip-path: unset; - outline: unset; - --mdc-filled-button-container-shape: 0; +// Custom Class for basic primary and secondary +:is(a, button)[mat-button] { + &.button-size-medium { + --mat-text-button-horizontal-padding: 1rem; + --mdc-text-button-container-height: 2.5rem; + font: var(--sys-label-medium); + padding: 0.5rem var(--mat-text-button-horizontal-padding); + } - &:focus-visible { - outline: solid 2px var(--sys-tertiary); + &.button-size-small { + --mat-text-button-horizontal-padding: 0.5rem; + --mdc-text-button-container-height: 1.75rem; + font: var(--sys-label-small); + padding: 0.3125rem var(--mat-text-button-horizontal-padding); } } // Toggle mat-button-toggle.mat-button-toggle-standalone.mat-button-toggle-appearance-standard { --mat-standard-button-toggle-shape: 0; - --mat-standard-button-toggle-hover-state-layer-opacity: 0.04; + --mat-standard-button-toggle-hover-state-layer-opacity: 0.08; --mat-standard-button-toggle-selected-state-text-color: var(--sys-secondary); + --mat-standard-button-toggle-disabled-state-text-color: color-mix(in srgb, var(--sys-on-surface) 40%, transparent); + --mat-standard-button-toggle-disabled-state-background-color: color-mix( + in srgb, + var(--sys-on-surface) 12%, + transparent + ); border: none; font: var(--sys-label-large); @@ -163,7 +220,7 @@ mat-button-toggle.mat-button-toggle-standalone.mat-button-toggle-appearance-stan &:active { .mat-button-toggle-focus-overlay { - opacity: 0.08; + opacity: 0.16; } } @@ -174,8 +231,7 @@ mat-button-toggle.mat-button-toggle-standalone.mat-button-toggle-appearance-stan } &.mat-button-toggle-checked:not(.nav-cat-button) { - --mat-standard-button-toggle-selected-state-text-color: var(--sys-on-primary); - background-color: var(--sys-tertiary); + background-color: color-mix(in srgb, var(--sys-tertiary) 24%, transparent); } } @@ -197,7 +253,7 @@ mat-button-toggle.mat-button-toggle-checked.nav-cat-button { } mat-button-toggle.mat-button-toggle-standalone.nav-cat-button { - font: var(--sys-title-small); + font: var(--sys-label-large); --mat-standard-button-toggle-hover-state-layer-opacity: 0; --mat-standard-button-toggle-selected-state-background-color: var(--sys-on-primary); :is(:hover, :active) { @@ -216,21 +272,3 @@ mat-button-toggle.mat-button-toggle-standalone.nav-cat-button { } } } - -// Nav Item -button[mat-button].nav-item-button { - --mat-text-button-hover-state-layer-opacity: 0; - --mat-text-button-pressed-state-layer-opacity: 0; - --mdc-text-button-container-shape: 0; - --mdc-text-button-label-text-color: var(--sys-secondary); - - &:is(:hover, :active) { - .label { - border-bottom: solid 1px var(--sys-tertiary); - } - } - - &:focus-visible { - outline: solid 2px var(--sys-tertiary); - } -} diff --git a/libs/design-system/button/src/lib/button.component.stories.ts b/libs/design-system/button/src/lib/button.component.stories.ts index ff5eb6753..1a5f5bed9 100644 --- a/libs/design-system/button/src/lib/button.component.stories.ts +++ b/libs/design-system/button/src/lib/button.component.stories.ts @@ -24,64 +24,101 @@ type Story = StoryObj; export const BasicPrimary: Story = { args: { - size: 'large', + size: 'medium', + disabled: false, }, argTypes: { size: { control: 'select', - options: ['small', 'medium', 'large'], + options: ['small', 'medium'], + }, + disabled: { + control: 'boolean', }, }, render: (args) => ({ props: args, template: ` - + `, }), }; export const BasicSecondary: Story = { args: { - size: 'large', + size: 'medium', + disabled: false, }, argTypes: { size: { control: 'select', - options: ['small', 'medium', 'large'], + options: ['small', 'medium'], }, }, render: (args) => ({ props: args, template: ` - + `, }), }; -export const FlatPrimary: Story = { +export const BasicIcon: Story = { args: { - size: 'large', + disabled: false, + iconName: 'download', }, argTypes: { - size: { + disabled: { + control: 'boolean', + }, + iconName: { control: 'select', - options: ['large', 'medium'], + options: ['upload'], }, }, render: (args) => ({ props: args, template: ` - + + `, + }), +}; + +export const FlatRound: Story = { + args: { + disabled: false, + }, + argTypes: { + disabled: { + control: 'boolean', + }, + }, + render: (args) => ({ + props: args, + template: ` + `, }), }; export const CtaFlatPrimary: Story = { - render: () => ({ + args: { + disabled: false, + }, + argTypes: { + disabled: { + control: 'boolean', + }, + }, + render: (args) => ({ + props: args, template: ` - `, @@ -94,10 +131,19 @@ export const CtaFlatPrimary: Story = { }; export const CtaFlatSecondary: Story = { - render: () => ({ + args: { + disabled: false, + }, + argTypes: { + disabled: { + control: 'boolean', + }, + }, + render: (args) => ({ + props: args, template: ` - `, @@ -119,7 +165,7 @@ export const ToggleButton: Story = { render: (args) => ({ props: args, template: ` - Button @@ -140,7 +186,7 @@ export const NavigationCategoryButton: Story = { render: (args) => ({ props: args, template: ` - + Button `, @@ -151,26 +197,3 @@ export const NavigationCategoryButton: Story = { ], }), }; - -export const NavigationItemButton: Story = { - args: { - size: 'large', - }, - argTypes: { - size: { - control: 'select', - options: ['large', 'medium'], - }, - }, - render: (args) => ({ - props: args, - template: ` - - `, - }), -}; diff --git a/libs/design-system/button/src/lib/button.module.ts b/libs/design-system/button/src/lib/button.module.ts index 45c03b08b..3c0334fba 100644 --- a/libs/design-system/button/src/lib/button.module.ts +++ b/libs/design-system/button/src/lib/button.module.ts @@ -2,12 +2,11 @@ import { NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { ButtonSizeDirective } from './button-size/button-size.directive'; import { CallToActionButtonDirective } from './directives/call-to-action-button.directive'; +import { NavigationCategoryButtonDirective } from './directives/navigation-category-button.directive'; import { PrimaryButtonDirective } from './directives/primary-button.directive'; import { SecondaryButtonDirective } from './directives/secondary-button.directive'; -import { NavigationCategoryButtonDirective } from './directives/navigation-category-button.directive'; -import { NavigationItemButtonDirective } from './directives/nav-item-button.directive'; -import { ButtonSizeDirective } from './button-size/button-size.directive'; /** Module exporting button and related utilities */ @NgModule({ @@ -16,7 +15,6 @@ import { ButtonSizeDirective } from './button-size/button-size.directive'; PrimaryButtonDirective, SecondaryButtonDirective, NavigationCategoryButtonDirective, - NavigationItemButtonDirective, ButtonSizeDirective, ], exports: [ @@ -26,7 +24,6 @@ import { ButtonSizeDirective } from './button-size/button-size.directive'; PrimaryButtonDirective, SecondaryButtonDirective, NavigationCategoryButtonDirective, - NavigationItemButtonDirective, ButtonSizeDirective, ], }) diff --git a/libs/design-system/button/src/lib/directives/nav-item-button.directive.ts b/libs/design-system/button/src/lib/directives/nav-item-button.directive.ts deleted file mode 100644 index 89ceb03de..000000000 --- a/libs/design-system/button/src/lib/directives/nav-item-button.directive.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Directive } from '@angular/core'; - -/** Directive for navigation item button */ -@Directive({ - selector: '[hraNavItemButton]', - standalone: true, - host: { - class: 'nav-item-button', - }, -}) -export class NavigationItemButtonDirective {} From ad9437268817372272130d0374b8cfc8e87fecdc Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Thu, 12 Sep 2024 15:35:24 -0400 Subject: [PATCH 08/12] add letter spacing to the buttons --- .../lib/button-styles/button-styles.component.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss index f9716f2d5..9a881d061 100644 --- a/libs/design-system/button/src/lib/button-styles/button-styles.component.scss +++ b/libs/design-system/button/src/lib/button-styles/button-styles.component.scss @@ -117,7 +117,8 @@ $y-multiplier: 0.4566; // Flat Round :is(a, button)[mat-flat-button] { - font: var(--sys-title-small); + font: var(--sys-label-medium); + letter-spacing: var(--sys-label-medium-tracking); --mdc-filled-button-container-shape: 0.25rem; --mat-filled-button-horizontal-padding: 1rem; --mdc-filled-button-container-height: 2rem; @@ -139,6 +140,7 @@ $y-multiplier: 0.4566; --mat-filled-button-horizontal-padding: 1rem; --mdc-filled-button-container-height: 2.5rem; font: var(--sys-label-medium); + letter-spacing: var(--sys-label-medium-tracking); padding: 0.5rem var(--mat-filled-button-horizontal-padding); } } @@ -146,7 +148,8 @@ $y-multiplier: 0.4566; // Basic Primary & Secondary :is(a, button)[mat-button] { min-width: unset; - font: var(--sys-label-large); + font: var(--sys-label-medium); + letter-spacing: var(--sys-label-medium-tracking); --mdc-text-button-label-text-color: var(--sys-on-tertiary-fixed); --mat-text-button-state-layer-color: var(--sys-on-tertiary-fixed); --mdc-text-button-disabled-label-text-color: color-mix(in srgb, var(--sys-on-surface) 40%, transparent); @@ -179,6 +182,7 @@ $y-multiplier: 0.4566; --mat-text-button-horizontal-padding: 1rem; --mdc-text-button-container-height: 2.5rem; font: var(--sys-label-medium); + letter-spacing: var(--sys-label-medium-tracking); padding: 0.5rem var(--mat-text-button-horizontal-padding); } @@ -186,6 +190,7 @@ $y-multiplier: 0.4566; --mat-text-button-horizontal-padding: 0.5rem; --mdc-text-button-container-height: 1.75rem; font: var(--sys-label-small); + letter-spacing: var(--sys-label-small-tracking); padding: 0.3125rem var(--mat-text-button-horizontal-padding); } } @@ -203,6 +208,7 @@ mat-button-toggle.mat-button-toggle-standalone.mat-button-toggle-appearance-stan ); border: none; font: var(--sys-label-large); + letter-spacing: var(--sys-label-large-tracking); &.button-size-large { --mat-standard-button-toggle-height: 1.5rem; @@ -214,6 +220,7 @@ mat-button-toggle.mat-button-toggle-standalone.mat-button-toggle-appearance-stan &.button-size-medium { --mat-standard-button-toggle-height: 1.3125rem; font: var(--sys-label-medium); + letter-spacing: var(--sys-label-medium-tracking); .mat-button-toggle-label-content { padding: 0.3438rem 0.5rem; } @@ -255,6 +262,7 @@ mat-button-toggle.mat-button-toggle-checked.nav-cat-button { mat-button-toggle.mat-button-toggle-standalone.nav-cat-button { font: var(--sys-label-large); + letter-spacing: var(--sys-label-large-tracking); --mat-standard-button-toggle-hover-state-layer-opacity: 0; --mat-standard-button-toggle-selected-state-background-color: var(--sys-on-primary); :is(:hover, :active) { From 2e65d427de2601214abb479ea0853cc413bc7e2f Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Tue, 17 Sep 2024 14:01:36 -0400 Subject: [PATCH 09/12] update color picker css --- .../src/lib/color-picker.component.html | 2 +- .../src/lib/color-picker.component.scss | 70 +++++++++++++------ 2 files changed, 48 insertions(+), 24 deletions(-) diff --git a/libs/design-system/color-picker/src/lib/color-picker.component.html b/libs/design-system/color-picker/src/lib/color-picker.component.html index 3a89627aa..f21a6cdb3 100644 --- a/libs/design-system/color-picker/src/lib/color-picker.component.html +++ b/libs/design-system/color-picker/src/lib/color-picker.component.html @@ -2,7 +2,7 @@ class="color-pick" [style.background]="hexColor()" [colorPicker]="hexColor()" - cpWidth="264px" + cpWidth="252px" cpOutputFormat="hex" cpPositionOffset="-17%" [cpOKButton]="true" diff --git a/libs/design-system/color-picker/src/lib/color-picker.component.scss b/libs/design-system/color-picker/src/lib/color-picker.component.scss index 9d0794f68..ecae33a1f 100644 --- a/libs/design-system/color-picker/src/lib/color-picker.component.scss +++ b/libs/design-system/color-picker/src/lib/color-picker.component.scss @@ -28,11 +28,8 @@ } .hex-text { - display: flex !important; - flex-direction: row-reverse; - justify-content: flex-end; - gap: 0.25rem; padding: 0 0.75rem 1rem 0.75rem; + width: 86%; .box { width: 100%; @@ -42,13 +39,11 @@ padding: 0; width: auto; div { + --sys-label-small-tracking: 0.005em; + font: var(--sys-label-small); + color: var(--sys-secondary); margin: 0 1.5rem; - font-size: 0.75rem; - font-family: 'Metropolis'; - line-height: 1.375rem; - letter-spacing: 0.005em; - color: #201e3d; - font-weight: 500; + margin-top: 0.25rem; text-transform: uppercase; } } @@ -59,19 +54,52 @@ } input { - border: none; - height: 2.5rem; + border-radius: 0.25rem; + height: 2rem; padding: 0.5625rem 0; font: var(--sys-label-small); - border-bottom: solid 1px var(--sys-secondary); - background-color: var(--sys-surface-container); + color: var(--sys-primary-fixed); + width: 90%; + border: solid 1px var(--sys-outline-variant); + text-transform: uppercase; + } + } + } + + .rgba-text, + .hsla-text { + .box { + padding-bottom: 0.25rem; + input { + border-radius: 0.25rem; + border-color: var(--sys-outline-variant); + max-width: 2.25rem; + } + + &:not(:has(input)) { + div { + max-width: 2.25rem; + font: var(--sys-label-small); + color: var(--sys-secondary); + } + } + + input { + font: var(--sys-label-small); + color: var(--sys-primary-fixed); } } } - .arrow.arrow-right, .type-policy { - display: none; + top: 13.25rem; + right: 1.5625rem; + } + + .hex-text, + .rgba-text, + .hsla-text { + padding-left: 1.5rem; } .button-area { @@ -82,18 +110,14 @@ .accept-button, .cancel-button { + --sys-label-medium-tracking: 0.005em; + font: var(--sys-label-medium); margin: 0; border-radius: 0.25rem; cursor: pointer; border: none; background-color: transparent; - font-size: 0.875rem; - letter-spacing: 0.005em; - line-height: 1.3125rem; - font-family: 'Metropolis'; - padding: 0.25rem 0.5rem; - font-weight: 500; - color: #201e3d; + padding: 0.3438rem 0.5rem; &:focus-visible { outline: solid 2px var(--sys-tertiary); } From 9a9c534d2e05a223f5d1138d40021c16308e2335 Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Tue, 17 Sep 2024 14:37:17 -0400 Subject: [PATCH 10/12] fix color format padding --- .../color-picker/src/lib/color-picker.component.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/libs/design-system/color-picker/src/lib/color-picker.component.scss b/libs/design-system/color-picker/src/lib/color-picker.component.scss index ecae33a1f..7276f9186 100644 --- a/libs/design-system/color-picker/src/lib/color-picker.component.scss +++ b/libs/design-system/color-picker/src/lib/color-picker.component.scss @@ -74,6 +74,7 @@ border-radius: 0.25rem; border-color: var(--sys-outline-variant); max-width: 2.25rem; + height: 2rem; } &:not(:has(input)) { @@ -100,6 +101,7 @@ .rgba-text, .hsla-text { padding-left: 1.5rem; + padding-top: 0; } .button-area { From 3fe780c7673f6ce64f3adbcc684f2b6095e646dd Mon Sep 17 00:00:00 2001 From: Daniel Bolin Date: Thu, 26 Sep 2024 14:41:54 -0400 Subject: [PATCH 11/12] feat: :rocket: Deploy storybook builds under /ui[--staging]/storybook --- .github/workflows/production-build.yml | 1 + .github/workflows/staging-build.yml | 1 + 2 files changed, 2 insertions(+) diff --git a/.github/workflows/production-build.yml b/.github/workflows/production-build.yml index ab25b7f67..94874c296 100644 --- a/.github/workflows/production-build.yml +++ b/.github/workflows/production-build.yml @@ -37,6 +37,7 @@ jobs: - name: Deploy to S3 run: | aws s3 sync --delete deploy/apps/ s3://${{ secrets.AWS_S3_BUCKET_NAME }}/ui/ + aws s3 sync deploy/storybook/ s3://${{ secrets.AWS_S3_BUCKET_NAME }}/ui/storybook/ aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_DISTRIBUTION_ID }} --paths "/ui/*" aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_HUMANATLAS_IO_DISTRIBUTION_ID }} --paths "/*" diff --git a/.github/workflows/staging-build.yml b/.github/workflows/staging-build.yml index 1a75ee0a8..af2e41be4 100644 --- a/.github/workflows/staging-build.yml +++ b/.github/workflows/staging-build.yml @@ -37,6 +37,7 @@ jobs: - name: Deploy to S3 run: | aws s3 sync --delete deploy/apps/ s3://${{ secrets.AWS_S3_BUCKET_NAME }}/ui--staging/ + aws s3 sync deploy/storybook/ s3://${{ secrets.AWS_S3_BUCKET_NAME }}/ui--staging/storybook/ aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_DISTRIBUTION_ID }} --paths "/ui--staging/*" - name: Publish From 17bd9c88fd244983f03dfb5bb05444dfacc8fa8e Mon Sep 17 00:00:00 2001 From: Daniel Bolin Date: Thu, 26 Sep 2024 14:51:51 -0400 Subject: [PATCH 12/12] chore: Enable storybook builds for staging/production --- .github/workflows/production-build.yml | 1 - .github/workflows/staging-build.yml | 1 - 2 files changed, 2 deletions(-) diff --git a/.github/workflows/production-build.yml b/.github/workflows/production-build.yml index 94874c296..af73f4037 100644 --- a/.github/workflows/production-build.yml +++ b/.github/workflows/production-build.yml @@ -25,7 +25,6 @@ jobs: app-configuration: production nx-command: run-many build-compodoc: false - build-storybook: false - name: Configure AWS credentials uses: aws-actions/configure-aws-credentials@v1 diff --git a/.github/workflows/staging-build.yml b/.github/workflows/staging-build.yml index af2e41be4..97f5ce905 100644 --- a/.github/workflows/staging-build.yml +++ b/.github/workflows/staging-build.yml @@ -25,7 +25,6 @@ jobs: app-configuration: staging nx-command: run-many build-compodoc: false - build-storybook: false - name: Configure AWS credentials uses: aws-actions/configure-aws-credentials@v1