Badge, Icon: convert to gts format

.changeset/slick-glasses-behave.md

@@ -0,0 +1,11 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+<!-- START components/badge -->
+`Badge` - Converted `Badge` to `gts` format
+<!-- END -->
+
+<!-- START components/icon -->
+`Icon` - Converted `Icon` to `gts` format
+<!-- END -->

packages/components/src/components.ts

@@ -67,7 +67,7 @@ export { default as HdsApplicationStateMedia } from './components/hds/applicatio
 export * from './components/hds/application-state/types.ts';
 
 // Badge
-export { default as HdsBadge } from './components/hds/badge/index.ts';
+export { default as HdsBadge } from './components/hds/badge/index.gts';
 export * from './components/hds/badge/types.ts';
 
 // BadgeCount
@@ -223,7 +223,7 @@ export { default as HdsFormToggleField } from './components/hds/form/toggle/fiel
 export { default as HdsFormToggleGroup } from './components/hds/form/toggle/group.ts';
 
 // Icon
-export { default as HdsIcon } from './components/hds/icon/index.ts';
+export { default as HdsIcon } from './components/hds/icon/index.gts';
 export * from './components/hds/icon/types.ts';
 
 // IconTile

packages/components/src/components/hds/badge/index.ts → packages/components/src/components/hds/badge/index.gts

@@ -12,6 +12,8 @@ import {
   HdsBadgeTypeValues,
 } from './types.ts';
 
+import HdsIcon from '../icon/index.gts';
+
 import type { HdsBadgeColors, HdsBadgeSizes, HdsBadgeTypes } from './types.ts';
 import type { HdsIconSignature } from '../icon';
 
@@ -35,15 +37,7 @@ export interface HdsBadgeSignature {
 }
 
 export default class HdsBadge extends Component<HdsBadgeSignature> {
-  /**
-   * Sets the size for the component
-   * Accepted values: small, medium, large
-   *
-   * @param size
-   * @type {HdsBadgeSizes}
-   * @default 'medium'
-   */
-  get size(): HdsBadgeSizes {
+  get size() {
     const { size = DEFAULT_SIZE } = this.args;
 
     assert(
@@ -56,15 +50,7 @@ export default class HdsBadge extends Component<HdsBadgeSignature> {
     return size;
   }
 
-  /**
-   * Sets the type of the component
-   * Accepted values: filled, inverted, outlined
-   *
-   * @param type
-   * @type {HdsBadgeTypes}
-   * @default 'filled'
-   */
-  get type(): HdsBadgeTypes {
+  get type() {
     const { type = DEFAULT_TYPE } = this.args;
 
     assert(
@@ -77,15 +63,7 @@ export default class HdsBadge extends Component<HdsBadgeSignature> {
     return type;
   }
 
-  /**
-   * Sets the color scheme for the component
-   * Accepted values: neutral, neutral-dark-mode, highlight, success, warning, critical
-   *
-   * @param color
-   * @type {HdsBadgeColors}
-   * @default 'neutral'
-   */
-  get color(): HdsBadgeColors {
+  get color() {
     const { color = DEFAULT_COLOR } = this.args;
 
     assert(
@@ -98,12 +76,7 @@ export default class HdsBadge extends Component<HdsBadgeSignature> {
     return color;
   }
 
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the badge. If `isIconOnly` is set to `true`, the text will be visually hidden but still available to assistive technology. If no text value is defined, an error will be thrown.
-   */
-  get text(): string | number {
+  get text() {
     const { text } = this.args;
 
     assert(
@@ -114,26 +87,15 @@ export default class HdsBadge extends Component<HdsBadgeSignature> {
     return text;
   }
 
-  /**
-   * @param isIconOnly
-   * @type {boolean}
-   * @default false
-   * @description Indicates if the badge will only contain an icon; component will also ensure that accessible text is still applied to the component.
-   */
-  get isIconOnly(): boolean {
+  get isIconOnly() {
     if (this.args.icon) {
       return this.args.isIconOnly ?? false;
     }
 
     return false;
   }
 
-  /**
-   * Get the class names to apply to the component.
-   * @method Badge#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames(): string {
+  get classNames() {
     const classes = ['hds-badge'];
 
     // add a class based on the @size argument
@@ -147,4 +109,21 @@ export default class HdsBadge extends Component<HdsBadgeSignature> {
 
     return classes.join(' ');
   }
+
+  <template>
+    <div class={{this.classNames}} ...attributes>
+      {{#if @icon}}
+        <div class="hds-badge__icon">
+          <HdsIcon @name={{@icon}} @size="16" @stretched={{true}} />
+        </div>
+      {{/if}}
+      {{#if this.isIconOnly}}
+        <span class="sr-only">{{this.text}}</span>
+      {{else}}
+        <div class="hds-badge__text">
+          {{this.text}}
+        </div>
+      {{/if}}
+    </div>
+  </template>
 }

packages/components/src/components/hds/icon/index.ts → packages/components/src/components/hds/icon/index.gts

@@ -44,11 +44,11 @@ export default class HdsIcon extends Component<HdsIconSignature> {
     }
   }
 
-  get isInline(): boolean {
+  get isInline() {
     return this.args.isInline ?? false;
   }
 
-  get predefinedColor(): HdsIconColors | undefined {
+  get predefinedColor() {
     const { color } = this.args;
 
     if (color && COLORS.includes(color as HdsIconColors)) {
@@ -58,15 +58,15 @@ export default class HdsIcon extends Component<HdsIconSignature> {
     }
   }
 
-  get fillColor(): string {
+  get fillColor() {
     if (this.predefinedColor !== undefined) {
       return 'currentColor';
     } else {
       return this.args.color ?? 'currentColor';
     }
   }
 
-  get size(): string {
+  get size() {
     return this.args.size ?? HdsIconSizeValues.Sixteen;
   }
 
@@ -77,15 +77,15 @@ export default class HdsIcon extends Component<HdsIconSignature> {
     };
   }
 
-  get title(): string | null {
+  get title() {
     return this.args.title ?? null;
   }
 
-  get role(): string | null {
+  get role() {
     return this.args.title ? 'img' : null;
   }
 
-  get ariaLabelledby(): string | null {
+  get ariaLabelledby() {
     return this.args.title ? this._titleId : null;
   }
 
@@ -112,4 +112,30 @@ export default class HdsIcon extends Component<HdsIconSignature> {
 
     return classes.join(' ');
   }
+
+  <template>
+    <svg
+      class={{this.classNames}}
+      ...attributes
+      aria-hidden={{if @title "false" "true"}}
+      aria-labelledby={{this.ariaLabelledby}}
+      data-test-icon={{@name}}
+      fill={{this.fillColor}}
+      id={{this._iconId}}
+      role={{this.role}}
+      width={{this.svgSize.width}}
+      height={{this.svgSize.height}}
+      viewBox="0 0 {{this.size}} {{this.size}}"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {{~#if @title~}}
+        <title id={{this._titleId}}>{{@title}}</title>
+        <g role="presentation">
+          <use href="#flight-{{@name}}-{{this.size}}" />
+        </g>
+      {{~else~}}
+        <use href="#flight-{{@name}}-{{this.size}}" />
+      {{~/if~}}
+    </svg>
+  </template>
 }