feat(core/grid): add grid component (#721)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
siemens · Sep 4, 2023 · d82ef06 · d82ef06
1 parent 2cad394
commit d82ef06
Show file tree

Hide file tree

Showing 105 changed files with 2,915 additions and 417 deletions.
diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -45,6 +45,10 @@ import EventListCustomItemHeight from 'src/preview-examples/event-list-custom-it
 import EventListSelected from 'src/preview-examples/event-list-selected';
 import ExpandingSearch from 'src/preview-examples/expanding-search';
 import FlipTile from 'src/preview-examples/flip-tile';
+import Grid from 'src/preview-examples/grid';
+import GridFixed from 'src/preview-examples/grid-fixed';
+import GridFluid from 'src/preview-examples/grid-fluid';
+import GridSize from 'src/preview-examples/grid-size';
 import Group from 'src/preview-examples/group';
 import GroupContextMenu from 'src/preview-examples/group-context-menu';
 import GroupCustomEntry from 'src/preview-examples/group-custom-entry';
@@ -357,6 +361,10 @@ const routes: Routes = [
       { path: 'key-value-list-with-icon', component: KeyValueListWithIcon },
       { path: 'key-value-list-striped', component: KeyValueListStriped },
       { path: 'menu-category', component: MenuCategory },
+      { path: 'grid', component: Grid },
+      { path: 'grid-size', component: GridSize },
+      { path: 'grid-fluid', component: GridFluid },
+      { path: 'grid-fixed', component: GridFixed },
     ],
   },
 ];

diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
@@ -52,6 +52,10 @@ import EventListCustomItemHeight from 'src/preview-examples/event-list-custom-it
 import EventListSelected from 'src/preview-examples/event-list-selected';
 import ExpandingSearch from 'src/preview-examples/expanding-search';
 import FlipTile from 'src/preview-examples/flip-tile';
+import Grid from 'src/preview-examples/grid';
+import GridFixed from 'src/preview-examples/grid-fixed';
+import GridFluid from 'src/preview-examples/grid-fluid';
+import GridSize from 'src/preview-examples/grid-size';
 import Group from 'src/preview-examples/group';
 import GroupContextMenu from 'src/preview-examples/group-context-menu';
 import GroupCustomEntry from 'src/preview-examples/group-custom-entry';
@@ -236,6 +240,10 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     ContentHeader,
     ContentHeaderNoBack,
     MenuCategory,
+    Grid,
+    GridSize,
+    GridFluid,
+    GridFixed,
   ],
   imports: [
     BrowserModule,

diff --git a/packages/angular-test-app/src/preview-examples/grid-fixed.html b/packages/angular-test-app/src/preview-examples/grid-fixed.html
@@ -0,0 +1,55 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<h5>fixed: sm</h5>
+<ix-grid fixed="fixed-sm">
+  <ix-row>
+    <ix-col>1</ix-col>
+    <ix-col>2</ix-col>
+    <ix-col>3</ix-col>
+    <ix-col>4</ix-col>
+    <ix-col>5</ix-col>
+    <ix-col>6</ix-col>
+  </ix-row>
+</ix-grid>
+
+<h5>fixed</h5>
+<ix-grid fixed>
+  <ix-row>
+    <ix-col>1</ix-col>
+    <ix-col>2</ix-col>
+    <ix-col>3</ix-col>
+    <ix-col>4</ix-col>
+    <ix-col>5</ix-col>
+    <ix-col>6</ix-col>
+  </ix-row>
+</ix-grid>
+
+<h5>fixed: md</h5>
+<ix-grid fixed="fixed-md">
+  <ix-row>
+    <ix-col>1</ix-col>
+    <ix-col>2</ix-col>
+    <ix-col>3</ix-col>
+    <ix-col>4</ix-col>
+    <ix-col>5</ix-col>
+    <ix-col>6</ix-col>
+  </ix-row>
+</ix-grid>
+
+<h5>fixed: lg</h5>
+<ix-grid fixed="fixed-lg">
+  <ix-row>
+    <ix-col>1</ix-col>
+    <ix-col>2</ix-col>
+    <ix-col>3</ix-col>
+    <ix-col>4</ix-col>
+    <ix-col>5</ix-col>
+    <ix-col>6</ix-col>
+  </ix-row>
+</ix-grid>
diff --git a/packages/angular-test-app/src/preview-examples/grid-fixed.ts b/packages/angular-test-app/src/preview-examples/grid-fixed.ts
@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './grid-fixed.html',
+  styles: [
+    `
+      ix-grid {
+        margin-bottom: 1rem;
+      }
+
+      ix-col {
+        background-color: var(--theme-color-primary);
+        border: var(--theme-std-bdr-2);
+        text-align: center;
+        color: var(--theme-color-inv-contrast-text);
+      }
+    `,
+  ],
+})
+export default class GridFixed {}
diff --git a/packages/angular-test-app/src/preview-examples/grid-fluid.html b/packages/angular-test-app/src/preview-examples/grid-fluid.html
@@ -0,0 +1,45 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<div class="example-parent">
+  <h4>Non fluid (default)</h4>
+  <ix-grid>
+    <ix-row>
+      <ix-col>1</ix-col>
+      <ix-col>2</ix-col>
+      <ix-col>3</ix-col>
+      <ix-col>4</ix-col>
+      <ix-col>5</ix-col>
+      <ix-col>6</ix-col>
+      <ix-col>7</ix-col>
+      <ix-col>8</ix-col>
+      <ix-col>9</ix-col>
+      <ix-col>10</ix-col>
+      <ix-col>11</ix-col>
+      <ix-col>12</ix-col>
+    </ix-row>
+  </ix-grid>
+
+  <h4>fluid</h4>
+  <ix-grid fluid>
+    <ix-row>
+      <ix-col>1</ix-col>
+      <ix-col>2</ix-col>
+      <ix-col>3</ix-col>
+      <ix-col>4</ix-col>
+      <ix-col>5</ix-col>
+      <ix-col>6</ix-col>
+      <ix-col>7</ix-col>
+      <ix-col>8</ix-col>
+      <ix-col>9</ix-col>
+      <ix-col>10</ix-col>
+      <ix-col>11</ix-col>
+      <ix-col>12</ix-col>
+    </ix-row>
+  </ix-grid>
+</div>
diff --git a/packages/angular-test-app/src/preview-examples/grid-fluid.ts b/packages/angular-test-app/src/preview-examples/grid-fluid.ts
@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './grid-fluid.html',
+  styles: [
+    `
+      ix-grid {
+        margin-bottom: 1rem;
+      }
+
+      ix-col {
+        background-color: var(--theme-color-primary);
+        border: var(--theme-std-bdr-2);
+        text-align: center;
+        color: var(--theme-color-inv-contrast-text);
+      }
+
+      .example-parent {
+        padding-top: 1rem;
+        padding-bottom: 0.25rem;
+        background-color: var(--theme-color-info-40);
+      }
+    `,
+  ],
+})
+export default class GridFluid {}
diff --git a/packages/angular-test-app/src/preview-examples/grid-size.html b/packages/angular-test-app/src/preview-examples/grid-size.html
@@ -0,0 +1,29 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<h4>Column 6 takes up more space to a max of 12 columns total</h4>
+<ix-grid>
+  <ix-row>
+    <ix-col>1</ix-col>
+    <ix-col>2</ix-col>
+    <ix-col>3</ix-col>
+    <ix-col>4</ix-col>
+    <ix-col>5</ix-col>
+    <ix-col size="6">6</ix-col>
+  </ix-row>
+</ix-grid>
+
+<h4>Stack columns on smaller screens</h4>
+<ix-grid>
+  <ix-row>
+    <ix-col size="12" size-md="3">1</ix-col>
+    <ix-col size="12" size-md="3">2</ix-col>
+    <ix-col size="12" size-md="3">3</ix-col>
+    <ix-col size="12" size-md="3">4</ix-col>
+  </ix-row>
+</ix-grid>
diff --git a/packages/angular-test-app/src/preview-examples/grid-size.ts b/packages/angular-test-app/src/preview-examples/grid-size.ts
@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './grid-size.html',
+  styles: [
+    `
+      ix-grid {
+        margin-bottom: 1rem;
+      }
+
+      ix-col {
+        background-color: var(--theme-color-primary);
+        border: var(--theme-std-bdr-2);
+        text-align: center;
+        color: var(--theme-color-inv-contrast-text);
+      }
+    `,
+  ],
+})
+export default class GridSize {}
diff --git a/packages/angular-test-app/src/preview-examples/grid.html b/packages/angular-test-app/src/preview-examples/grid.html
@@ -0,0 +1,35 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-grid>
+  <ix-row>
+    <ix-col>1</ix-col>
+    <ix-col>2</ix-col>
+    <ix-col>3</ix-col>
+    <ix-col>4</ix-col>
+    <ix-col>5</ix-col>
+    <ix-col>6</ix-col>
+  </ix-row>
+</ix-grid>
+
+<ix-grid>
+  <ix-row>
+    <ix-col>1</ix-col>
+    <ix-col>2</ix-col>
+    <ix-col>3</ix-col>
+    <ix-col>4</ix-col>
+    <ix-col>5</ix-col>
+    <ix-col>6</ix-col>
+    <ix-col>7</ix-col>
+    <ix-col>8</ix-col>
+    <ix-col>9</ix-col>
+    <ix-col>10</ix-col>
+    <ix-col>11</ix-col>
+    <ix-col>12</ix-col>
+  </ix-row>
+</ix-grid>
diff --git a/packages/angular-test-app/src/preview-examples/grid.ts b/packages/angular-test-app/src/preview-examples/grid.ts
@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './grid.html',
+  styles: [
+    `
+      ix-grid {
+        margin-bottom: 1rem;
+      }
+
+      ix-col {
+        background-color: var(--theme-color-primary);
+        border: var(--theme-std-bdr-2);
+        text-align: center;
+        color: var(--theme-color-inv-contrast-text);
+      }
+    `,
+  ],
+})
+export default class Grid {}