From 7b81658cf8dd030210fe8859a1a4bd60f0c60fb5 Mon Sep 17 00:00:00 2001 From: lastminutediorama Date: Thu, 29 Aug 2024 15:49:31 -0500 Subject: [PATCH] rename component - tidy css --- .../expander/expander.component.scss | 136 ------------------ .../treatment-expander.component.html} | 0 .../treatment-expander.component.scss | 123 ++++++++++++++++ .../treatment-expander.component.ts} | 8 +- .../treatment-expander.stories.ts} | 12 +- 5 files changed, 133 insertions(+), 146 deletions(-) delete mode 100644 src/interface/src/styleguide/expander/expander.component.scss rename src/interface/src/styleguide/{expander/expander.component.html => treatment-expander/treatment-expander.component.html} (100%) create mode 100644 src/interface/src/styleguide/treatment-expander/treatment-expander.component.scss rename src/interface/src/styleguide/{expander/expander.component.ts => treatment-expander/treatment-expander.component.ts} (94%) rename src/interface/src/styleguide/{expander/expander.stories.ts => treatment-expander/treatment-expander.stories.ts} (85%) diff --git a/src/interface/src/styleguide/expander/expander.component.scss b/src/interface/src/styleguide/expander/expander.component.scss deleted file mode 100644 index 049788495..000000000 --- a/src/interface/src/styleguide/expander/expander.component.scss +++ /dev/null @@ -1,136 +0,0 @@ -@import 'mixins'; -@import 'colors'; - -:host { - --mat-expansion-header-hover-state-layer-color: $color-white; - --mat-expansion-header-focus-state-layer-color: $color-white; - --mat-expansion-header-expanded-state-height: 48px; - --mat-expansion-header-hover-state-layer-color: $color-white; - - ::ng-deep .mat-expansion-panel { - box-shadow: none; - border: 1px $color-light-gray solid; - border-radius: 0; - } - ::ng-deep .mat-expansion-panel.selected { - border: 1px $color-original-purple solid; - background-color: $color-soft-purple; - // --mat-expansion-container-background-color: $color-soft-purple; - } - ::ng-deep .mat-expansion-panel:not([class*='mat-elevation-z']) { - box-shadow: none; - border: 1px $color-light-gray solid; - border-radius: 0; - } - ::ng-deep .mat-expansion-panel:hover:not([class*='selected']) { - border: 1px $color-original-purple solid; - background-color: $color-white; - } - -} - - -::ng-deep .sg-expander-panel .mat-expansion-panel-header .mat-content { - display: flex; - justify-content: space-between; - flex-direction: row; - align-items: center; - cursor: pointer; - width: 100%; -} - -::ng-deep - .sg-expander-panel - .mat-expansion-panel-header - .mat-expansion-indicator { - padding-bottom: 6px; -} - -::ng-deep - .sg-expander-panel - .mat-expansion-panel-header - .mat-expansion-indicator::after { - color: $color-black; -} - -::ng-deep .sg-expander-panel .mat-expansion-panel-body { - padding: 0 24px 16px; - display: flex; - flex-direction: column; - gap: 10px; -} - -.header-content { - padding: 0 20px 0 8px; -} - -.left-content { - @include xs-label(); - display: flex; - align-items: center; - flex-direction: row; - justify-content: space-between; - gap: 8px; - margin-left: 4px; - line-height: 0px; -} - -.right-content { - @include xs-label(); - color: $color-md-gray; - width: 100px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: right; - gap: 8px; - padding-right: 10px; -} - -.treatment-detail { - height: 22px; - display: flex; - align-items: center; - flex-direction: row; - justify-content: flex-start; - gap: 4px; - padding: 0 24px 0 24px; -} - -.treatment-detail-name { - @include xs-label(); - font-weight: 600; - line-height: 14px; - text-align: left; -} - -.treatment-detail-value { - @include small-paragraph(); -} - -.stand-count { - color: $color-dark-gray; -} - -.treatment-hexagon { - color: $color-dark-gray; -} - -.rx-detail { - height: 22px; - display: flex; - align-items: center; - flex-direction: row; - justify-content: flex-start; - gap: 4px; - padding: 0 0 0 24px; -} - -.rx-detail-name { - @include small-paragraph(); -} - -.rx-detail-value { - @include small-paragraph(); - color: $color-md-gray; -} diff --git a/src/interface/src/styleguide/expander/expander.component.html b/src/interface/src/styleguide/treatment-expander/treatment-expander.component.html similarity index 100% rename from src/interface/src/styleguide/expander/expander.component.html rename to src/interface/src/styleguide/treatment-expander/treatment-expander.component.html diff --git a/src/interface/src/styleguide/treatment-expander/treatment-expander.component.scss b/src/interface/src/styleguide/treatment-expander/treatment-expander.component.scss new file mode 100644 index 000000000..006a4c82b --- /dev/null +++ b/src/interface/src/styleguide/treatment-expander/treatment-expander.component.scss @@ -0,0 +1,123 @@ +@import 'mixins'; +@import 'colors'; + +:host { + --mat-expansion-header-hover-state-layer-color: $color-white; + --mat-expansion-header-focus-state-layer-color: $color-white; + --mat-expansion-header-expanded-state-height: 48px; + + ::ng-deep { + .mat-expansion-panel { + box-shadow: none; + border: 1px $color-light-gray solid; + border-radius: 0; + } + + .mat-expansion-panel.selected { + border-color: $color-soft-purple; + background-color: $color-soft-purple; + } + + .mat-expansion-panel:not([class*='mat-elevation-z']) { + box-shadow: none; + } + + .mat-expansion-panel:hover:not([class*='selected']) { + border-color: $color-original-purple; + background-color: $color-white; + } + } +} + +.sg-expander-panel { + ::ng-deep { + .mat-expansion-panel-header .mat-content { + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + width: 100%; + } + + .mat-expansion-panel-header .mat-expansion-indicator { + padding-bottom: 6px; + } + + .mat-expansion-panel-header .mat-expansion-indicator::after { + color: $color-black; + } + + .mat-expansion-panel-body { + padding: 0 24px 16px; + display: flex; + flex-direction: column; + gap: 10px; + } + } +} + +.header-content { + padding: 0 20px 0 8px; +} + +.left-content { + @include xs-label(); + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + margin-left: 4px; + line-height: 0; +} + +.right-content { + @include xs-label(); + color: $color-md-gray; + width: 100px; + display: flex; + align-items: center; + justify-content: right; + gap: 8px; + padding-right: 10px; +} + +.treatment-detail { + height: 22px; + display: flex; + align-items: center; + gap: 4px; + padding: 0 24px; +} + +.treatment-detail-name { + @include xs-label(); + font-weight: 600; + line-height: 14px; + text-align: left; +} + +.treatment-detail-value { + @include small-paragraph(); +} + +.stand-count, +.treatment-hexagon { + color: $color-dark-gray; +} + +.rx-detail { + height: 22px; + display: flex; + align-items: center; + gap: 4px; + padding-left: 24px; +} + +.rx-detail-name { + @include small-paragraph(); +} + +.rx-detail-value { + @include small-paragraph(); + color: $color-md-gray; +} \ No newline at end of file diff --git a/src/interface/src/styleguide/expander/expander.component.ts b/src/interface/src/styleguide/treatment-expander/treatment-expander.component.ts similarity index 94% rename from src/interface/src/styleguide/expander/expander.component.ts rename to src/interface/src/styleguide/treatment-expander/treatment-expander.component.ts index 34dfdfada..92d7c299e 100644 --- a/src/interface/src/styleguide/expander/expander.component.ts +++ b/src/interface/src/styleguide/treatment-expander/treatment-expander.component.ts @@ -32,7 +32,7 @@ export type TreatmentType = * NOTE: this expects *either* a treatmentType OR a sequenceNumber to determine appearance */ @Component({ - selector: 'sg-expander', + selector: 'sg-treatment-expander', standalone: true, imports: [ MatExpansionModule, @@ -43,10 +43,10 @@ export type TreatmentType = SequenceIconComponent, TreatmentTypeIconComponent, ], - templateUrl: './expander.component.html', - styleUrl: './expander.component.scss', + templateUrl: './treatment-expander.component.html', + styleUrl: './treatment-expander.component.scss', }) -export class ExpanderComponent { +export class TreatmentExpanderComponent { /** * Optional title text -- explicitly overrides the derived title */ diff --git a/src/interface/src/styleguide/expander/expander.stories.ts b/src/interface/src/styleguide/treatment-expander/treatment-expander.stories.ts similarity index 85% rename from src/interface/src/styleguide/expander/expander.stories.ts rename to src/interface/src/styleguide/treatment-expander/treatment-expander.stories.ts index 6be35a4ab..c69b535ca 100644 --- a/src/interface/src/styleguide/expander/expander.stories.ts +++ b/src/interface/src/styleguide/treatment-expander/treatment-expander.stories.ts @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/angular'; import { applicationConfig, argsToTemplate } from '@storybook/angular'; -import { ExpanderComponent } from './expander.component'; +import { TreatmentExpanderComponent } from './treatment-expander.component'; import { provideAnimations } from '@angular/platform-browser/animations'; const containerStyle = `style="display: flex; @@ -12,9 +12,9 @@ const containerStyle = `style="display: flex; padding: 10px; flex-direction: column;"`; -const meta: Meta = { - title: 'Components/Expander', - component: ExpanderComponent, +const meta: Meta = { + title: 'Components/Treatment Expander', + component: TreatmentExpanderComponent, decorators: [ applicationConfig({ providers: [provideAnimations()], @@ -23,12 +23,12 @@ const meta: Meta = { tags: ['autodocs'], render: ({ ...args }) => ({ props: args, - template: `
`, + template: `
`, }), }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: {