refactor: 💡 update text span elements with Hds::Text::Body (#2779)

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-16864

addons/rose/addon/components/rose/dropdown/button/index.hbs

@@ -12,9 +12,9 @@
     {{if @iconOnly "has-icon-only"}}'
 >
   <span class='rose-dropdown-button-wrapper'>
-    <span class='rose-dropdown-button-body'>
+    <Hds::Text::Body>
       {{yield}}
-    </span>
+    </Hds::Text::Body>
 
     {{#if @iconOnly}}
       <Rose::Icon @name={{@iconOnly}} @size='medium' />

addons/rose/addon/components/rose/dropdown/index.hbs

@@ -23,7 +23,9 @@
     {{/if}}
 
     <span class='rose-dropdown-trigger-text'>
-      {{@text}}
+      <Hds::Text::Body @weight='medium'>
+        {{@text}}
+      </Hds::Text::Body>
       {{#if @count}}
         <Hds::BadgeCount @text={{@count}} @size='small' />
       {{/if}}

addons/rose/addon/components/rose/form/checkbox/index.hbs

@@ -21,7 +21,7 @@
   />
 
   <label class='rose-form-checkbox-label' for={{this.id}}>
-    <span class='rose-form-checkbox-label-text'>{{@label}}</span>
+    <Hds::Text::Body>{{@label}}</Hds::Text::Body>
     {{#if @description}}
       <p class='rose-form-checkbox-label-description'>{{@description}}</p>
     {{/if}}

addons/rose/addon/components/rose/nav/sidebar/index.hbs

@@ -12,9 +12,11 @@
 >
 
   {{#if @title}}
-    <span class='rose-nav-title' id='title-{{this.id}}'>
+    {{! Updated span however this is hidden by default in the desktop,
+    once side nav refactor is done this will ultimately be removed }}
+    <Hds::Text::Body class='rose-nav-title' id='title-{{this.id}}'>
       {{@title}}
-    </span>
+    </Hds::Text::Body>
   {{/if}}
 
   {{yield (hash link=(component 'rose/nav/link'))}}

addons/rose/tests/integration/components/rose/form/checkbox-test.js

@@ -23,7 +23,7 @@ module('Integration | Component | rose/form/checkbox', function (hooks) {
       hbs`<Rose::Form::Checkbox @label="Label" @description="Hello world" />`,
     );
     assert.strictEqual(
-      find('.rose-form-checkbox-label-text').textContent.trim(),
+      find('.rose-form-checkbox-label span').textContent.trim(),
       'Label',
     );
     assert.strictEqual(

ui/admin/app/components/ordered-series-diagram/item/index.hbs

@@ -7,9 +7,13 @@
 
   <div class='ordered-series-diagram-item-content'>
     <Hds::IconTile @icon={{@icon}} @size='large' @color='hcp' />
-    <span class='ordered-series-diagram-item-title'>
+    <Hds::Text::Body
+      @weight='semibold'
+      @size='300'
+      class='ordered-series-diagram-item-title'
+    >
       {{yield}}
-    </span>
+    </Hds::Text::Body>
   </div>
 
   <div class='ordered-series-diagram-separator-icon'>

ui/admin/app/styles/app.scss

@@ -217,10 +217,6 @@
     .create-resources-item-controller {
       margin-top: sizing.rems(xl);
 
-      .create-resources-item-controller-label {
-        color: var(--ui-gray);
-      }
-
       .create-resources-item-controller-copyable {
         margin: sizing.rems(xxs) 0 sizing.rems(l) 0;
       }
@@ -469,7 +465,6 @@
     }
 
     &-title {
-      font-weight: var(--token-typography-font-weight-semibold);
       margin-top: 0.5rem;
       width: 4rem;
     }

ui/admin/app/templates/onboarding/success.hbs

@@ -61,9 +61,9 @@
           <Hds::Text::Display @tag='h4'>
             {{t 'onboarding.success.titles.controller'}}
           </Hds::Text::Display>
-          <span class='create-resources-item-controller-label'>{{t
+          <Hds::Text::Body @color='faint'>{{t
               'onboarding.success.descriptions.controller'
-            }}</span>
+            }}</Hds::Text::Body>
           <div class='create-resources-item-controller-copyable'>
             <Hds::Copy::Snippet @textToCopy={{this.model.clusterUrl}} />
           </div>

ui/admin/app/templates/scopes/scope/groups/group/members.hbs

@@ -46,7 +46,7 @@
         <:body as |B|>
           <B.Tr>
             <B.Td>
-              <span class='hds-font-weight-semibold'>{{#if
+              <Hds::Text::Body @weight='semibold'>{{#if
                   (can 'read group' B.data)
                 }}
                   {{B.data.displayName}}
@@ -54,7 +54,7 @@
                     <br /><Hds::Badge @text={{B.data.accountName}} />
                   {{/if}}
                 {{/if}}
-              </span>
+              </Hds::Text::Body>
             </B.Td>
             <B.Td>
               <Hds::Copy::Snippet

ui/admin/app/templates/scopes/scope/session-recordings/index.hbs

@@ -144,11 +144,11 @@
               {{! Created Time }}
               <B.Td>
                 {{#if B.data.created_time}}
-                  <span class='hds-foreground-faint'>
+                  <Hds::Text::Body @color='faint'>
                     <time datetime={{format-date-iso B.data.created_time}}>
                       {{format-date-iso B.data.created_time}}
                     </time>
-                  </span>
+                  </Hds::Text::Body>
                 {{/if}}
               </B.Td>
               {{! Status }}

ui/admin/app/templates/scopes/scope/users/user/accounts.hbs

@@ -46,7 +46,7 @@
         <:body as |B|>
           <B.Tr>
             <B.Td>
-              <span class='hds-font-weight-semibold'>
+              <Hds::Text::Body @weight='semibold'>
                 {{#if (can 'read accounts' B.data)}}
                   <LinkTo
                     @route='scopes.scope.auth-methods.auth-method.accounts.account'
@@ -57,7 +57,7 @@
                 {{else}}
                   {{B.data.displayName}}
                 {{/if}}
-              </span>
+              </Hds::Text::Body>
 
               <p>{{B.data.description}}</p>
             </B.Td>

ui/desktop/app/components/credentials-panel/index.hbs

@@ -64,7 +64,9 @@
         {{#if credential.secrets}}
           {{#each (order-by credential.secrets this.customOrder) as |secret|}}
             <li class='secret-container'>
-              <span class='secret-key'>{{secret.key}}</span>
+              <Hds::Text::Body
+                @weight='semibold'
+              >{{secret.key}}</Hds::Text::Body>
               <HiddenSecret @secret={{secret.value}} />
             </li>
           {{/each}}

ui/desktop/app/components/hidden-secret/index.hbs

@@ -16,7 +16,7 @@
     {{#if this.isHidden}}
       <pre>{{this.displaySecretValue}}</pre>
     {{else}}
-      <span class='secret-mask'>{{this.textMask}}</span>
+      <Hds::Text::Body @color='disabled'>{{this.textMask}}</Hds::Text::Body>
     {{/if}}
   </div>
 

ui/desktop/app/styles/app.scss

@@ -316,10 +316,6 @@
   display: flex;
   align-items: center;
 
-  .secret-mask {
-    color: var(--ui-gray-subtler-2);
-  }
-
   .secret-content {
     display: flex;
     width: 100%;
@@ -472,10 +468,6 @@
         border-bottom: 0;
       }
 
-      .secret-key {
-        font-weight: var(--token-typography-font-weight-semibold);
-      }
-
       .hidden-secret {
         margin: 0.25rem 0;
       }

ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs

@@ -95,7 +95,7 @@
     <:body as |B|>
       <B.Tr>
         <B.Td>
-          <span class='hds-font-weight-semibold'>
+          <Hds::Text::Body @weight='semibold'>
             {{#if (can 'read model' B.data)}}
               <LinkTo
                 data-test-visit-target={{B.data.id}}
@@ -111,7 +111,7 @@
             {{#if B.data.description}}
               <p>{{B.data.description}}</p>
             {{/if}}
-          </span>
+          </Hds::Text::Body>
         </B.Td>
         <B.Td data-test-target-aliases={{B.data.id}}>
           {{truncate-list 'actions.more' B.data.associatedAliases}}

ui/desktop/tests/integration/components/credentials-panel-test.js

@@ -74,7 +74,7 @@ module('Integration | Component | credentials-panel', function (hooks) {
     `);
     assert.dom('.credential-name').hasText('Credential Library 2');
     assert.dom('.secret-container').isVisible();
-    assert.dom('.secret-key').hasText('username');
+    assert.dom('.secret-container span').hasText('username');
   });
 
   test('it shows code editor when toggle clicked', async function (assert) {