rename component - tidy css

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;
+}

src/interface/src/styleguide/expander/expander.component.ts → 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
    */

src/interface/src/styleguide/expander/expander.stories.ts → 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<ExpanderComponent> = {
-  title: 'Components/Expander',
-  component: ExpanderComponent,
+const meta: Meta<TreatmentExpanderComponent> = {
+  title: 'Components/Treatment Expander',
+  component: TreatmentExpanderComponent,
   decorators: [
     applicationConfig({
       providers: [provideAnimations()],
@@ -23,12 +23,12 @@ const meta: Meta<ExpanderComponent> = {
   tags: ['autodocs'],
   render: ({ ...args }) => ({
     props: args,
-    template: `<div ${containerStyle}><div style="width:400px;"><sg-expander ${argsToTemplate(args)}></sg-expander></div>`,
+    template: `<div ${containerStyle}><div style="width:400px;"><sg-treatment-expander ${argsToTemplate(args)}></sg-treatment-expander></div>`,
   }),
 };
 
 export default meta;
-type Story = StoryObj<ExpanderComponent>;
+type Story = StoryObj<TreatmentExpanderComponent>;
 
 export const Default: Story = {
   args: {