feat: added dbx-content-pit

dereekb · Jan 31, 2023 · cbce68a · cbce68a
1 parent 4661508
commit cbce68a
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 2 deletions.
diff --git a/apps/demo/src/app/modules/doc/modules/layout/container/content.component.html b/apps/demo/src/app/modules/doc/modules/layout/container/content.component.html
@@ -60,6 +60,30 @@ <h4>Growth can be customized.</h4>
         <p>This content is in a box that is not elevated.</p>
       </dbx-content-box>
     </doc-feature-example>
+    <doc-feature-example header=".dbx-content-pit" hint="Content with a background, margin and internal label with space for content.">
+      <dbx-content-pit>
+        <p>This content is in pit.</p>
+      </dbx-content-pit>
+      <h4>Examples</h4>
+      <p>Example of a dbx-content-pit with dbx-label-block and content.</p>
+      <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
+        <dbx-content-pit style="border-radius: 20px; width: 140px; height: 140px">
+          <dbx-label-block header="Example Label">
+            <div class="dbx-primary" style="text-align: center; font-size: 4.4em; font-weight: bold">100</div>
+          </dbx-label-block>
+        </dbx-content-pit>
+        <dbx-content-pit style="border-radius: 20px; width: 140px; height: 140px">
+          <dbx-label-block header="Example Label">
+            <div class="dbx-accent" style="text-align: center; font-size: 4.4em; font-weight: bold">100</div>
+          </dbx-label-block>
+        </dbx-content-pit>
+        <dbx-content-pit style="border-radius: 20px; width: 140px; height: 140px">
+          <dbx-label-block header="Example Label">
+            <div class="dbx-warn" style="text-align: center; font-size: 4.4em; font-weight: bold">100</div>
+          </dbx-label-block>
+        </dbx-content-pit>
+      </div>
+    </doc-feature-example>
     <doc-feature-example header=".dbx-content" hint="This view/class sets the height to be the height of the page, minus the top and (if known) content navigation bars.">
       <dbx-content>
         <div style="background: grey; height: 100%"></div>

diff --git a/packages/dbx-web/src/lib/layout/content/_content.scss b/packages/dbx-web/src/lib/layout/content/_content.scss
@@ -13,6 +13,8 @@ $max-small-content-container-width: calc($content-max-width / 3);
 $max-medium-content-container-width: calc($content-max-width / 2);
 $max-content-container-width: $content-max-width;
 
+$pit-padding: theming.$padding-4;
+
 $content-container-padding: theming.$padding-4;
 $content-container-padding-small-screen: theming.$padding-2;
 
@@ -41,6 +43,14 @@ $scroll-content-bottom-padding: 42px;
     }
   }
 
+  .dbx-content-pit {
+    padding: $pit-padding;
+  }
+
+  .dbx-content-pit > .dbx-label-block > .dbx-label {
+    opacity: 0.66; // increase opacity slightly to make it easier to read against background
+  }
+
   .dbx-content-end {
     margin-bottom: $content-end-margin;
   }
@@ -142,6 +152,10 @@ $scroll-content-bottom-padding: 42px;
     background: $content-background;
   }
 
+  .dbx-content-pit {
+    background: $content-border-background;
+  }
+
   .dbx-content-border {
     // border-radius: 6px;
     border: 3px dashed $content-border-background;

diff --git a/packages/dbx-web/src/lib/layout/content/content.layout.module.ts b/packages/dbx-web/src/lib/layout/content/content.layout.module.ts
@@ -6,13 +6,25 @@ import { DbxContentBorderDirective } from './content.border.directive';
 import { DbxContentContainerDirective } from './content.container.directive';
 import { DbxContentBoxDirective } from './content.box.directive';
 import { DbxContentPageDirective } from './content.page.directive';
+import { DbxContentPitDirective } from './content.pit.directive';
+
+const declarations = [
+  //
+  DbxContentDirective,
+  DbxContentContainerDirective,
+  DbxContentBorderDirective,
+  DbxContentElevateDirective,
+  DbxContentBoxDirective,
+  DbxContentPageDirective,
+  DbxContentPitDirective
+];
 
 /**
  * Module for container-type components.
  */
 @NgModule({
   imports: [CommonModule],
-  declarations: [DbxContentDirective, DbxContentContainerDirective, DbxContentBorderDirective, DbxContentElevateDirective, DbxContentBoxDirective, DbxContentPageDirective],
-  exports: [DbxContentDirective, DbxContentContainerDirective, DbxContentBorderDirective, DbxContentElevateDirective, DbxContentBoxDirective, DbxContentPageDirective]
+  declarations,
+  exports: declarations
 })
 export class DbxContentLayoutModule {}
diff --git a/packages/dbx-web/src/lib/layout/content/content.pit.directive.ts b/packages/dbx-web/src/lib/layout/content/content.pit.directive.ts
@@ -0,0 +1,12 @@
+import { Component, Directive, Input } from '@angular/core';
+
+/**
+ * Component used to wrap content in a pit with a label.
+ */
+@Directive({
+  selector: 'dbx-content-pit, [dbxContentPit]',
+  host: {
+    class: 'd-block dbx-content-pit'
+  }
+})
+export class DbxContentPitDirective {}
diff --git a/packages/dbx-web/src/lib/layout/content/index.ts b/packages/dbx-web/src/lib/layout/content/index.ts
@@ -5,3 +5,4 @@ export * from './content.container.directive';
 export * from './content.elevate.directive';
 export * from './content.layout.module';
 export * from './content.page.directive';
+export * from './content.pit.directive';