added support for @tag argument to support dynamic tag generation

Author: didoo

packages/components/src/components/hds/layout/flex/index.hbs

@@ -2,7 +2,8 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-{{! ADD YOUR TEMPLATE CONTENT HERE }}
-<div class={{this.classNames}} ...attributes>
-  {{yield}}
-</div>
+{{#if (eq this.componentTag "div")}}
+  <div class={{this.classNames}} ...attributes>{{yield}}</div>
+{{else}}
+  {{#let (element this.componentTag) as |Tag|}}<Tag class={{this.classNames}} ...attributes>{{yield}}</Tag>{{/let}}
+{{/if}}

packages/components/src/components/hds/layout/flex/index.ts

@@ -22,8 +22,14 @@ export const DIRECTIONS: string[] = Object.values(HdsLayoutFlexDirectionValues);
 export const JUSTIFYS: string[] = Object.values(HdsLayoutFlexJustifyValues);
 export const ALIGNS: string[] = Object.values(HdsLayoutFlexAlignValues);
 
+// A list of all existing tag names in the HTMLElementTagNameMap interface
+type AvailableTagNames = keyof HTMLElementTagNameMap;
+// A union of all types in the HTMLElementTagNameMap interface
+type AvailableElements = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
 export interface HdsLayoutFlexSignature {
   Args: {
+    tag?: AvailableTagNames;
     direction?: HdsLayoutFlexDirections;
     justify?: HdsLayoutFlexJustifys;
     align?: HdsLayoutFlexAligns;
@@ -33,10 +39,14 @@ export interface HdsLayoutFlexSignature {
   Blocks: {
     default: [];
   };
-  Element: HTMLDivElement;
+  Element: AvailableElements;
 }
 
 export default class HdsLayoutFlex extends Component<HdsLayoutFlexSignature> {
+  get componentTag(): AvailableTagNames {
+    return this.args.tag ?? 'div';
+  }
+
   get direction(): HdsLayoutFlexDirections {
     return this.args.direction ?? DEFAULT_DIRECTION;
   }