feat: Adding properties to Title Content (#1235)

* feat: Adding properties to Title Content

* feat: Fixing comments

* feat: fixing comments

Co-authored-by: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>

Author: palbizu

projects/components/src/public-api.ts

@@ -317,7 +317,12 @@ 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,
+  TitledContentTitleStyle,
+  TitledContentHeaderJustify
+} from './titled-content/titled-content.component';
 export { TitledContentModule } from './titled-content/titled-content.module';
 
 // Toggle Button

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

projects/components/src/titled-content/titled-content.component.ts

@@ -10,13 +10,18 @@ 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.headerJustifyContent" [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
             [label]="this.linkLabel"
-            role="${ButtonRole.Primary}"
-            display="${ButtonStyle.Text}"
+            role="${ButtonRole.Quaternary}"
+            display="${ButtonStyle.Solid}"
             size="${ButtonSize.ExtraSmall}"
             icon="${IconType.ChevronRight}"
             [trailingIcon]="true"
@@ -29,8 +34,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 +47,18 @@ export class TitledContentComponent {
   @Input()
   public titlePosition: TitlePosition = TitlePosition.Header;
 
+  @Input()
+  public titleStyle: TitledContentTitleStyle = TitledContentTitleStyle.Regular;
+
   @Input()
   public hideTitle: boolean = false;
 
   @Input()
   public link?: string;
 
+  @Input()
+  public headerJustifyContent: TitledContentHeaderJustify = TitledContentHeaderJustify.Center;
+
   @Input()
   public linkLabel?: string;
 
@@ -75,3 +86,14 @@ export const enum TitlePosition {
   Header = 'header',
   Footer = 'footer'
 }
+
+// Regular title (black) and GrayedOut new style (gray)
+export const enum TitledContentTitleStyle {
+  Regular = 'regular',
+  GrayedOut = 'grayed-out'
+}
+
+export const enum TitledContentHeaderJustify {
+  Center = 'center',
+  SpaceBetween = 'space-between'
+}