Shw Grid - Convert components to gts (HDS-3833) (#2492)

Co-authored-by: Cristiano Rastelli <[email protected]>

showcase/app/components/shw/grid/index.ts → showcase/app/components/shw/grid/index.gts

@@ -6,10 +6,14 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
 import { assert } from '@ember/debug';
+import { hash } from '@ember/helper';
+
+import ShwGridItem from './item';
+import ShwLabel from '../label';
 
 import type { ComponentLike } from '@glint/template';
-import type { ShwLabelSignature } from '../label';
 import type { SafeString } from '@ember/template';
+import type { ShwLabelSignature } from '../label';
 import type { ShwGridItemSignature } from './item';
 
 interface ShwGridSignature {
@@ -31,7 +35,7 @@ interface ShwGridSignature {
   Element: HTMLDivElement;
 }
 
-export default class ShwGridComponent extends Component<ShwGridSignature> {
+export default class ShwGrid extends Component<ShwGridSignature> {
   get columns(): number {
     const { columns } = this.args;
 
@@ -54,4 +58,16 @@ export default class ShwGridComponent extends Component<ShwGridSignature> {
 
     return classes.join(' ');
   }
+
+  <template>
+    <div class={{this.classNames}}>
+      {{#if @label}}
+        <ShwLabel>{{@label}}</ShwLabel>
+      {{/if}}
+      {{yield (hash Label=ShwLabel)}}
+      <div class="shw-grid__items" style={{this.itemsStyle}} ...attributes>
+        {{yield (hash Item=ShwGridItem)}}
+      </div>
+    </div>
+  </template>
 }

showcase/app/components/shw/grid/item.ts → showcase/app/components/shw/grid/item.gts

@@ -4,6 +4,9 @@
  */
 
 import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
+
+import ShwLabel from '../label';
 
 import type { ComponentLike } from '@glint/template';
 import type { ShwLabelSignature } from '../label';
@@ -24,7 +27,7 @@ export interface ShwGridItemSignature {
   Element: HTMLDivElement;
 }
 
-export default class ShwGridItemComponent extends Component<ShwGridItemSignature> {
+export default class ShwGridItem extends Component<ShwGridItemSignature> {
   get classNames(): string {
     const classes = ['shw-grid__item'];
 
@@ -40,4 +43,13 @@ export default class ShwGridItemComponent extends Component<ShwGridItemSignature
 
     return classes.join(' ');
   }
+
+  <template>
+    <div class={{this.classNames}} ...attributes>
+      {{#if @label}}
+        <ShwLabel>{{@label}}</ShwLabel>
+      {{/if}}
+      {{yield (hash Label=ShwLabel)}}
+    </div>
+  </template>
 }

showcase/types/template-registry.ts

@@ -8,7 +8,7 @@ import ShwDivider from '../app/components/shw/divider/index';
 import ShwFlex from '../app/components/shw/flex/index';
 import ShwFlexItem from '../app/components/shw/flex/item';
 import ShwFrame from '../app/components/shw/frame/index';
-import ShwGrid from '../app/components/shw/grid';
+import ShwGrid from '../app/components/shw/grid/index';
 import ShwGridItem from '../app/components/shw/grid/item';
 import ShwLabel from '../app/components/shw/label/index';
 import ShwLogoDesignSystem from '../app/components/shw/logo/design-system';