Badge, BadgeCount: convert components to gts format

.changeset/smart-llamas-say.md

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

packages/components/src/components.ts

@@ -67,11 +67,11 @@ 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
-export { default as HdsBadgeCount } from './components/hds/badge-count/index.ts';
+export { default as HdsBadgeCount } from './components/hds/badge-count/index.gts';
 export * from './components/hds/badge-count/types.ts';
 
 // Breadcrumb

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

@@ -41,15 +41,7 @@ export interface HdsBadgeCountSignature {
 }
 
 export default class HdsBadgeCount extends Component<HdsBadgeCountSignature> {
-  /**
-   * Sets the size for the component
-   * Accepted sizes: small, medium, large
-   *
-   * @param size
-   * @type {string}
-   * @default 'medium'
-   */
-  get size(): HdsBadgeCountSizes {
+  get size() {
     const { size = DEFAULT_SIZE } = this.args;
 
     assert(
@@ -62,15 +54,7 @@ export default class HdsBadgeCount extends Component<HdsBadgeCountSignature> {
     return size;
   }
 
-  /**
-   * Sets the type of the component
-   * Accepted values: filled, inverted, outlined
-   *
-   * @param type
-   * @type {string}
-   * @default 'filled'
-   */
-  get type(): HdsBadgeCountTypes {
+  get type() {
     const { type = DEFAULT_TYPE } = this.args;
 
     assert(
@@ -83,15 +67,7 @@ export default class HdsBadgeCount extends Component<HdsBadgeCountSignature> {
     return type;
   }
 
-  /**
-   * Sets the color scheme for the component
-   * Accepted colors: neutral, neutral-dark-mode
-   *
-   * @param color
-   * @type {string}
-   * @default 'neutral'
-   */
-  get color(): HdsBadgeCountColors {
+  get color() {
     const { color = DEFAULT_COLOR } = this.args;
 
     assert(
@@ -104,23 +80,21 @@ export default class HdsBadgeCount extends Component<HdsBadgeCountSignature> {
     return color;
   }
 
-  /**
-   * Get the class names to apply to the component.
-   * @method BadgeCount#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames(): string {
+  get classNames() {
     const classes = ['hds-badge-count'];
 
-    // add a class based on the @size argument
     classes.push(`hds-badge-count--size-${this.size}`);
 
-    // add a class based on the @type argument
     classes.push(`hds-badge-count--type-${this.type}`);
 
-    // add a class based on the @color argument
     classes.push(`hds-badge-count--color-${this.color}`);
 
     return classes.join(' ');
   }
+
+  <template>
+    <div class={{this.classNames}} ...attributes>
+      {{@text}}
+    </div>
+  </template>
 }

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

@@ -6,12 +6,12 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
+import HdsIcon from '../icon/index.gts';
 import {
   HdsBadgeColorValues,
   HdsBadgeSizeValues,
   HdsBadgeTypeValues,
 } from './types.ts';
-
 import type { HdsBadgeColors, HdsBadgeSizes, HdsBadgeTypes } from './types.ts';
 import type { HdsIconSignature } from '../icon';
 
@@ -35,15 +35,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 +48,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 +61,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 +74,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 +85,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 +107,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>
 }