new: Datagrid compontent (#1118)

src/pages/_data/docs.yml

@@ -93,6 +93,9 @@ components:
     carousel:
       title: Carousel
       url: docs/carousel.html
+    datagrid:
+      title: Data grid
+      url: docs/datagrid.html
     dropdowns:
       title: Dropdowns
       url: docs/dropdowns.html

src/pages/_data/menu.yml

@@ -37,6 +37,10 @@ base:
     colors:
       url: colors.html
       title: Colors
+    datagrid:
+      url: datagrid.html
+      title: Data grid
+      badge: New
     datatables:
       url: datatables.html
       title: Datatables

src/pages/_docs/datagrid.md

@@ -0,0 +1,10 @@
+---
+title: Data grid
+menu: docs.components.datagrid
+description: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
+---
+
+{% capture code %}
+{% include parts/datagrid.html %}
+{% endcapture %}
+{% include example.html code=code wrapper="demo-dividers" %}

src/pages/_includes/parts/datagrid.html

@@ -0,0 +1,72 @@
+<div class="datagrid">
+	<div class="datagrid-item">
+		<div class="datagrid-title">Registrar</div>
+		<div class="datagrid-content">Third Party</div>
+	</div>
+	<div class="datagrid-item">
+		<div class="datagrid-title">Nameservers</div>
+		<div class="datagrid-content">Third Party</div>
+	</div>
+	<div class="datagrid-item">
+		<div class="datagrid-title">Port number</div>
+		<div class="datagrid-content">3306</div>
+	</div>
+	<div class="datagrid-item">
+		<div class="datagrid-title">Expiration date</div>
+		<div class="datagrid-content">–</div>
+	</div>
+	<div class="datagrid-item">
+		<div class="datagrid-title">Creator</div>
+		<div class="datagrid-content">
+			{% assign creator = site.data.people[0] %}
+			<div class="d-flex align-items-center">
+				{% include ui/avatar.html person=creator rounded=true size="xs" class="me-2" %}
+				{{ creator.full_name }}
+			</div>
+		</div>
+	</div>
+	<div class="datagrid-item">
+		<div class="datagrid-title">Age</div>
+		<div class="datagrid-content">15 days</div>
+	</div>
+	<div class="datagrid-item">
+		<div class="datagrid-title">Edge network</div>
+		<div class="datagrid-content">
+			{% include ui/status.html text="Active" color="green" %}
+		</div>
+	</div>
+	<div class="datagrid-item">
+		<div class="datagrid-title">Avatars list</div>
+		<div class="datagrid-content">
+			{% include ui/avatar-list.html stacked=true text="+3" size="xs" %}
+		</div>
+	</div>
+	<div class="datagrid-item">
+		<div class="datagrid-title">Checkbox</div>
+		<div class="datagrid-content">
+			<label class="form-check">
+				<input class="form-check-input" type="checkbox" checked>
+				<span class="form-check-label">Click me</span>
+			</label>
+		</div>
+	</div>
+	<div class="datagrid-item">
+		<div class="datagrid-title">Icon</div>
+		<div class="datagrid-content">
+			{% include ui/icon.html icon="check" color="green" %}
+			Checked
+		</div>
+	</div>
+	<div class="datagrid-item">
+		<div class="datagrid-title">Form control</div>
+		<div class="datagrid-content">
+			<input type="text" class="form-control form-control-flush" placeholder="Input placeholder">
+		</div>
+	</div>
+	<div class="datagrid-item">
+		<div class="datagrid-title">Longer description</div>
+		<div class="datagrid-content">
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+		</div>
+	</div>
+</div>

src/pages/datagrid.html

@@ -0,0 +1,14 @@
+---
+title: Data grid
+page-header: Data grid
+menu: base.datagrid
+---
+
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Base info</h3>
+	</div>
+	<div class="card-body">
+		{% include parts/datagrid.html %}
+	</div>
+</div>

src/scss/_core.scss

@@ -20,6 +20,7 @@
 @import "ui/cards";
 @import "ui/close";
 @import "ui/dropdowns";
+@import "ui/datagrid";
 @import "ui/empty";
 @import "ui/grid";
 @import "ui/icons";

src/scss/_variables.scss

@@ -395,11 +395,14 @@ $carousel-indicator-thumb-width: 4rem !default;
 
 $carousel-indicator-dot-width: .5rem !default;
 
-
 //close
 $btn-close-width: .75rem !default;
 $btn-close-opacity: .3 !default;
 
+// datagrid
+$datagrid-padding: 1.5rem !default;
+$datagrid-item-width: 15rem !default;
+
 //dropdown
 $dropdown-item-padding-x: .75rem !default;
 $dropdown-item-padding-y: .5rem !default;
@@ -530,6 +533,7 @@ $pagination-disabled-color: rgba($text-muted, .5) !default;
 
 //statuses
 $status-dot-size: .5rem !default;
+$status-height: 1.5rem !default;
 
 //steps
 $steps-border-width: 2px !default;

src/scss/ui/_datagrid.scss

@@ -0,0 +1,17 @@
+//
+// Base styles
+//
+
+.datagrid {
+  --#{$variable-prefix}datagrid-padding: #{$datagrid-padding};
+  --#{$variable-prefix}datagrid-item-width: #{$datagrid-item-width};
+
+  display: grid;
+  grid-gap: var(--#{$variable-prefix}datagrid-padding);
+  grid-template-columns: repeat(auto-fit, minmax(var(--#{$variable-prefix}datagrid-item-width), 1fr));
+}
+
+.datagrid-title {
+  @include subheader;
+  margin-bottom: .25rem;
+}

src/scss/ui/_status.scss

@@ -40,13 +40,14 @@
 // Status
 //
 .status {
+  --#{$variable-prefix}status-height: #{$status-height};
   --#{$variable-prefix}status-color: #{$text-muted};
   --#{$variable-prefix}status-color-rgb: #{to-rgb($text-muted)};
 
   display: inline-flex;
   align-items: center;
-  height: 2rem;
+  height: var(--#{$variable-prefix}status-height);
-  padding: .5rem .75rem;
+  padding: .25rem .75rem;
   gap: .5rem;
   color: var(--#{$variable-prefix}status-color);
   background: rgba(var(--#{$variable-prefix}status-color-rgb), .1);