From 82909918e7be3ff29d456b8c9e27a19091b7ac6f Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Fri, 5 Nov 2021 18:13:55 -0300
Subject: [PATCH 1/3] feat: Adding properties to Title Content

---
 projects/components/src/public-api.ts         |  8 ++-
 .../titled-content.component.scss             | 44 ++++++++++++++---
 .../titled-content.component.ts               | 49 +++++++++++++++++--
 3 files changed, 89 insertions(+), 12 deletions(-)

diff --git a/projects/components/src/public-api.ts b/projects/components/src/public-api.ts
index dbb069ead..40e6aeb08 100644
--- a/projects/components/src/public-api.ts
+++ b/projects/components/src/public-api.ts
@@ -317,7 +317,13 @@ export * from './time-range/time-range.component';
 export * from './time-range/time-range.module';
 
 // Titled Content
-export { TitledContentComponent, TitlePosition } from './titled-content/titled-content.component';
+export {
+  TitledContentComponent,
+  TitlePosition,
+  TitleStyle,
+  LinkButtonStyle,
+  HeaderPosition
+} from './titled-content/titled-content.component';
 export { TitledContentModule } from './titled-content/titled-content.module';
 
 // Toggle Button
diff --git a/projects/components/src/titled-content/titled-content.component.scss b/projects/components/src/titled-content/titled-content.component.scss
index 67ed84691..9df610662 100644
--- a/projects/components/src/titled-content/titled-content.component.scss
+++ b/projects/components/src/titled-content/titled-content.component.scss
@@ -11,11 +11,24 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-items: center;
+
+    &.center {
+      justify-items: center;
+    }
+
+    &.space-between {
+      justify-content: space-between;
+    }
 
     .link {
-      margin-left: 20px;
-      margin-top: 14px;
+      &.regular {
+        margin-left: 20px;
+        margin-top: 14px;
+      }
+
+      &.grayed-out {
+        margin: 0 16px 12px 16px;
+      }
     }
 
     .controls {
@@ -26,11 +39,23 @@
     }
 
     .title {
-      @include overline($gray-9);
-      margin-top: 16px;
+      &.regular {
+        @include overline($gray-9);
+        margin-top: 16px;
+      }
+
+      &.grayed-out {
+        @include overline($gray-5);
+        height: 12px;
+        margin-bottom: 12px;
+      }
     }
   }
 
+  .header:has(.title .grayed-out) {
+    margin-bottom: 12px;
+  }
+
   .content {
     height: 100%;
     width: 100%;
@@ -40,8 +65,15 @@
 
   .footer {
     .title {
-      @include overline($gray-4);
       margin-top: 8px;
     }
+
+    &.regular {
+      @include overline($gray-4);
+    }
+
+    &.grayed-out {
+      @include overline($gray-5);
+    }
   }
 }
diff --git a/projects/components/src/titled-content/titled-content.component.ts b/projects/components/src/titled-content/titled-content.component.ts
index c193133ba..7313d1177 100644
--- a/projects/components/src/titled-content/titled-content.component.ts
+++ b/projects/components/src/titled-content/titled-content.component.ts
@@ -10,10 +10,16 @@ import { TitledHeaderControlDirective } from './header-controls/titled-header-co
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="titled-content-container">
-      <div class="header" [htLayoutChangeTrigger]="this.shouldShowHeader">
-        <ht-label *ngIf="this.shouldShowTitleInHeader" [label]="this.title" class="title"></ht-label>
-        <ht-link [paramsOrUrl]="this.link" class="link" *ngIf="this.link">
+      <div class="header" [ngClass]="this.headerPosition" [htLayoutChangeTrigger]="this.shouldShowHeader">
+        <ht-label
+          *ngIf="this.shouldShowTitleInHeader"
+          [ngClass]="this.titleStyle"
+          [label]="this.title"
+          class="title"
+        ></ht-label>
+        <ht-link [paramsOrUrl]="this.link" class="link" [ngClass]="this.titleStyle" *ngIf="this.link">
           <ht-button
+            *ngIf="this.linkButtonStyle === '${LinkButtonStyle.Primary}'"
             [label]="this.linkLabel"
             role="${ButtonRole.Primary}"
             display="${ButtonStyle.Text}"
@@ -21,6 +27,15 @@ import { TitledHeaderControlDirective } from './header-controls/titled-header-co
             icon="${IconType.ChevronRight}"
             [trailingIcon]="true"
           ></ht-button>
+          <ht-button
+            *ngIf="this.linkButtonStyle === '${LinkButtonStyle.Quaternary}'"
+            [label]="this.linkLabel"
+            role="${ButtonRole.Quaternary}"
+            display="${ButtonStyle.Solid}"
+            size="${ButtonSize.ExtraSmall}"
+            icon="${IconType.ChevronRight}"
+            [trailingIcon]="true"
+          ></ht-button>
         </ht-link>
         <div *ngIf="!!this.headerControl" class="controls">
           <ng-container *ngTemplateOutlet="this.headerControl!.getTemplateRef()"></ng-container>
@@ -29,8 +44,8 @@ import { TitledHeaderControlDirective } from './header-controls/titled-header-co
       <div class="content">
         <ng-content></ng-content>
       </div>
-      <div class="footer">
-        <ht-label *ngIf="this.shouldShowTitleInFooter" [label]="this.title" class="title"></ht-label>
+      <div class="footer" *ngIf="this.shouldShowTitleInFooter">
+        <ht-label [ngClass]="this.titleStyle" [label]="this.title" class="title"></ht-label>
       </div>
     </div>
   `
@@ -42,12 +57,21 @@ export class TitledContentComponent {
   @Input()
   public titlePosition: TitlePosition = TitlePosition.Header;
 
+  @Input()
+  public titleStyle: TitleStyle = TitleStyle.Regular;
+
   @Input()
   public hideTitle: boolean = false;
 
   @Input()
   public link?: string;
 
+  @Input()
+  public linkButtonStyle: LinkButtonStyle = LinkButtonStyle.Primary;
+
+  @Input()
+  public headerPosition: HeaderPosition = HeaderPosition.Center;
+
   @Input()
   public linkLabel?: string;
 
@@ -75,3 +99,18 @@ export const enum TitlePosition {
   Header = 'header',
   Footer = 'footer'
 }
+
+export const enum TitleStyle {
+  Regular = 'regular',
+  GrayedOut = 'grayed-out'
+}
+
+export const enum LinkButtonStyle {
+  Primary = 'primary',
+  Quaternary = 'quaternary'
+}
+
+export const enum HeaderPosition {
+  Center = 'center',
+  SpaceBetween = 'space-between'
+}

From 04b6b80552a97d2e6c0220f35c7b29d880d4cf46 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Thu, 11 Nov 2021 11:56:00 -0300
Subject: [PATCH 2/3] feat: Fixing comments

---
 projects/components/src/public-api.ts         |  5 ++--
 .../titled-content.component.ts               | 26 +++----------------
 2 files changed, 6 insertions(+), 25 deletions(-)

diff --git a/projects/components/src/public-api.ts b/projects/components/src/public-api.ts
index a6789fdb5..b9f887434 100644
--- a/projects/components/src/public-api.ts
+++ b/projects/components/src/public-api.ts
@@ -320,9 +320,8 @@ export * from './time-range/time-range.module';
 export {
   TitledContentComponent,
   TitlePosition,
-  TitleStyle,
-  LinkButtonStyle,
-  HeaderPosition
+  TitledContentTitleStyle,
+  TitledContentHeaderJustify
 } from './titled-content/titled-content.component';
 export { TitledContentModule } from './titled-content/titled-content.module';
 
diff --git a/projects/components/src/titled-content/titled-content.component.ts b/projects/components/src/titled-content/titled-content.component.ts
index 7313d1177..88aa6215a 100644
--- a/projects/components/src/titled-content/titled-content.component.ts
+++ b/projects/components/src/titled-content/titled-content.component.ts
@@ -19,16 +19,6 @@ import { TitledHeaderControlDirective } from './header-controls/titled-header-co
         ></ht-label>
         <ht-link [paramsOrUrl]="this.link" class="link" [ngClass]="this.titleStyle" *ngIf="this.link">
           <ht-button
-            *ngIf="this.linkButtonStyle === '${LinkButtonStyle.Primary}'"
-            [label]="this.linkLabel"
-            role="${ButtonRole.Primary}"
-            display="${ButtonStyle.Text}"
-            size="${ButtonSize.ExtraSmall}"
-            icon="${IconType.ChevronRight}"
-            [trailingIcon]="true"
-          ></ht-button>
-          <ht-button
-            *ngIf="this.linkButtonStyle === '${LinkButtonStyle.Quaternary}'"
             [label]="this.linkLabel"
             role="${ButtonRole.Quaternary}"
             display="${ButtonStyle.Solid}"
@@ -58,7 +48,7 @@ export class TitledContentComponent {
   public titlePosition: TitlePosition = TitlePosition.Header;
 
   @Input()
-  public titleStyle: TitleStyle = TitleStyle.Regular;
+  public titleStyle: TitledContentTitleStyle = TitledContentTitleStyle.Regular;
 
   @Input()
   public hideTitle: boolean = false;
@@ -67,10 +57,7 @@ export class TitledContentComponent {
   public link?: string;
 
   @Input()
-  public linkButtonStyle: LinkButtonStyle = LinkButtonStyle.Primary;
-
-  @Input()
-  public headerPosition: HeaderPosition = HeaderPosition.Center;
+  public headerPosition: TitledContentHeaderJustify = TitledContentHeaderJustify.Center;
 
   @Input()
   public linkLabel?: string;
@@ -100,17 +87,12 @@ export const enum TitlePosition {
   Footer = 'footer'
 }
 
-export const enum TitleStyle {
+export const enum TitledContentTitleStyle {
   Regular = 'regular',
   GrayedOut = 'grayed-out'
 }
 
-export const enum LinkButtonStyle {
-  Primary = 'primary',
-  Quaternary = 'quaternary'
-}
-
-export const enum HeaderPosition {
+export const enum TitledContentHeaderJustify {
   Center = 'center',
   SpaceBetween = 'space-between'
 }

From 211e725c9098ba9e9a4c85753d69a382bd55444f Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Mon, 15 Nov 2021 10:47:07 -0300
Subject: [PATCH 3/3] feat: fixing comments

---
 .../src/titled-content/titled-content.component.ts           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/titled-content/titled-content.component.ts b/projects/components/src/titled-content/titled-content.component.ts
index 88aa6215a..785cdb882 100644
--- a/projects/components/src/titled-content/titled-content.component.ts
+++ b/projects/components/src/titled-content/titled-content.component.ts
@@ -10,7 +10,7 @@ import { TitledHeaderControlDirective } from './header-controls/titled-header-co
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div class="titled-content-container">
-      <div class="header" [ngClass]="this.headerPosition" [htLayoutChangeTrigger]="this.shouldShowHeader">
+      <div class="header" [ngClass]="this.headerJustifyContent" [htLayoutChangeTrigger]="this.shouldShowHeader">
         <ht-label
           *ngIf="this.shouldShowTitleInHeader"
           [ngClass]="this.titleStyle"
@@ -57,7 +57,7 @@ export class TitledContentComponent {
   public link?: string;
 
   @Input()
-  public headerPosition: TitledContentHeaderJustify = TitledContentHeaderJustify.Center;
+  public headerJustifyContent: TitledContentHeaderJustify = TitledContentHeaderJustify.Center;
 
   @Input()
   public linkLabel?: string;
@@ -87,6 +87,7 @@ export const enum TitlePosition {
   Footer = 'footer'
 }
 
+// Regular title (black) and GrayedOut new style (gray)
 export const enum TitledContentTitleStyle {
   Regular = 'regular',
   GrayedOut = 'grayed-out'