Merge pull request ceph#64631 from rhcs-dashboard/details-card-component

mgr/dashboard: introduce details card component

Reviewed-by: Naman Munet <[email protected]>
Reviewed-by: Pedro Gonzalez Gomez <[email protected]>

Author: afreen23

src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts

@@ -37,7 +37,8 @@ import {
   ComboBoxModule,
   ProgressIndicatorModule,
   PanelModule,
-  LayoutModule
+  LayoutModule,
+  TilesModule
 } from 'carbon-components-angular';
 import EditIcon from '@carbon/icons/es/edit/20';
 import CodeIcon from '@carbon/icons/es/code/16';
@@ -87,6 +88,7 @@ import { SidePanelComponent } from './side-panel/side-panel.component';
 import { ChartsModule } from '@carbon/charts-angular';
 import { InlineMessageComponent } from './inline-message/inline-message.component';
 import { IconComponent } from './icon/icon.component';
+import { DetailsCardComponent } from './details-card/details-card.component';
 
 // Icons
 import InfoIcon from '@carbon/icons/es/information/16';
@@ -135,7 +137,8 @@ import CloseIcon from '@carbon/icons/es/close/16';
     BaseChartDirective,
     PanelModule,
     ChartsModule,
-    LayoutModule
+    LayoutModule,
+    TilesModule
   ],
   declarations: [
     SparklineComponent,
@@ -180,7 +183,8 @@ import CloseIcon from '@carbon/icons/es/close/16';
     ProgressComponent,
     SidePanelComponent,
     IconComponent,
-    InlineMessageComponent
+    InlineMessageComponent,
+    DetailsCardComponent
   ],
   providers: [provideCharts(withDefaultRegisterables())],
   exports: [
@@ -222,7 +226,8 @@ import CloseIcon from '@carbon/icons/es/close/16';
     ProgressComponent,
     SidePanelComponent,
     IconComponent,
-    InlineMessageComponent
+    InlineMessageComponent,
+    DetailsCardComponent
   ]
 })
 export class ComponentsModule {

src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.html

@@ -0,0 +1,12 @@
+<cds-tile>
+  <div class="details-card-header">
+    <span class="cds--type-heading-03"
+          i18n>{{ cardTitle }}</span>
+  </div>
+
+  <div class="details-card-body">
+    <div cdsRow>
+      <ng-content select=".details-body-content"></ng-content>
+    </div>
+  </div>
+</cds-tile>

src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.scss

@@ -0,0 +1,17 @@
+@use '@carbon/layout';
+
+.details-card-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: layout.$spacing-05;
+  position: relative;
+}
+
+::ng-deep .cds--label {
+  display: block;
+}
+
+.cds--row {
+  row-gap: layout.$spacing-05;
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsCardComponent } from './details-card.component';
+
+describe('DetailsCardComponent', () => {
+  let component: DetailsCardComponent;
+  let fixture: ComponentFixture<DetailsCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DetailsCardComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DetailsCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/shared/components/details-card/details-card.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'cd-details-card',
+  templateUrl: './details-card.component.html',
+  styleUrl: './details-card.component.scss'
+})
+export class DetailsCardComponent {
+  @Input()
+  cardTitle: string;
+}