#2490 Convert Buttons to SkillsButtons

NationalSecurityAgency · Jan 25, 2024 · 898fbd2 · 898fbd2
1 parent bda8ef2
commit 898fbd2
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 37 deletions.
diff --git a/dashboard-prime/src/components/projects/ProjectCardControls.vue b/dashboard-prime/src/components/projects/ProjectCardControls.vue
@@ -40,39 +40,44 @@ const focusOnDelete = () => {
 
 <template>
   <div class="flex justify-content-end">
-    <Button
+    <SkillsButton
         :to="{ name:'Subjects', params: { projectId: project.projectId, project: project }}"
         size="small" class="border-1 border-black-alpha-90 mr-2"
         :data-cy="'projCard_' + project.projectId + '_manageBtn'"
+        :label="readOnlyProject ? 'View' : 'Manage'"
+        icon="fas fa-arrow-circle-right ml-1"
         :aria-label="'manage project + project.name'">
-      <span v-if="readOnlyProject">View</span><span v-else>Manage</span> <i class="fas fa-arrow-circle-right ml-1" aria-hidden="true"/>
-    </Button>
-    <Button v-if="isRootUser"
+    </SkillsButton>
+    <SkillsButton v-if="isRootUser"
             class="border-1 border-black-alpha-90 mr-2" @click="emit('unpin-project')" data-cy="unpin" size="small"
               aria-label="'remove pin for project '+ project.name"
+              label="Unpin" icon="fas fa-ban"
               :aria-pressed="project.pinned">
       <span class="d-none d-sm-inline mr-1">Unpin</span> <i class="fas fa-ban" aria-hidden="true"/>
-    </Button>
+    </SkillsButton>
       <span class="p-buttonset mr-2" v-if="!readOnlyProject">
-        <Button ref="editBtn"
+        <SkillsButton ref="editBtn"
                 class="border-1 border-black-alpha-90"
                 size="small"
                 @click="emit('edit-project')"
                 title="Edit Project"
                 :aria-label="'Edit Project ' + project.name"
                 role="button"
-                data-cy="editProjBtn"><i class="fas fa-edit" aria-hidden="true"/></Button>
+                label="" icon="fas fa-edit"
+                data-cy="editProjBtn"></SkillsButton>
 
-        <Button ref="copyBtn"
+        <SkillsButton ref="copyBtn"
                 class="border-1 border-black-alpha-90"
                 size="small"
                 @click="emit('copy-project')"
                 title="Copy Project"
                 :aria-label="'Copy Project ' + project.name"
                 role="button"
-                data-cy="copyProjBtn"><i class="fas fa-copy" aria-hidden="true"/></Button>
+                icon="fas fa-copy"
+                label=""
+                data-cy="copyProjBtn"></SkillsButton>
 
-          <Button variant="outline-primary"
+          <SkillsButton variant="outline-primary"
                   class="border-1 border-black-alpha-90"
                   ref="deleteBtn"
                   size="small"
@@ -82,7 +87,9 @@ const focusOnDelete = () => {
                   title="Delete Project"
                   :aria-label="'Delete Project ' + project.name"
                   role="button"
-                  data-cy="deleteProjBtn"><i class="text-warning fas fa-trash" aria-hidden="true"/></Button>
+                  label=""
+                  icon="text-warning fas fa-trash"
+                  data-cy="deleteProjBtn"></SkillsButton>
       </span>
 
   </div>

diff --git a/dashboard-prime/src/components/projects/ProjectPage.vue b/dashboard-prime/src/components/projects/ProjectPage.vue
@@ -250,12 +250,9 @@ const setProject = (newProject) => {
               fromExpirationDate()
             }}</b>.
           </span>
-        <Button @click="keepIt" data-cy="keepIt" size="small" variant="alert"
-                  :aria-label="'Keep Project '+ project.value.name">
-          <span class="d-none d-sm-inline">Keep It</span>
-          <SkillsSpinner v-if="cancellingExpiration" small style="font-size:1rem"/>
-          <i v-if="!cancellingExpiration" :class="'fas fa-shield-alt'" style="font-size: 1rem;" aria-hidden="true"/>
-        </Button>
+        <SkillsButton @click="keepIt" data-cy="keepIt" size="small" variant="alert"
+                  :aria-label="'Keep Project '+ project.value.name" label="Keep It" :icon="!cancellingExpiration ? 'fas fa-shield-alt' : ''">
+        </SkillsButton>
       </div>
       <template #subTitle v-if="project">
         <div v-if="project.userCommunity" class="mb-3" data-cy="userCommunity">
@@ -269,31 +266,30 @@ const setProject = (newProject) => {
           <i class="fas fa-fingerprint text-info" aria-hidden="true"/></span> <span class="font-italic text-muted">Project ID</span>: {{ project.projectId }}</div>
       </template>
       <template #subSubTitle v-if="project">
-        <span class="p-buttonset mr-2" v-if="!isReadOnlyProj">
-          <Button @click="displayEditProject"
+        <span class="p-SkillsButtonset mr-2" v-if="!isReadOnlyProj">
+          <SkillsButton @click="displayEditProject"
                     ref="editProjectButton"
                     class="border-1 border-black-alpha-90"
                     size="small"
                     data-cy="btn_edit-project"
+                    label="Edit" icon="fas fa-edit"
                     :aria-label="'edit Project '+project.projectId">
-            <span>Edit </span> <i class="fas fa-edit" aria-hidden="true"/>
-          </Button>
-          <Button target="_blank" v-if="project" :to="{ name:'MyProjectSkills', params: { projectId: project.projectId } }"
-                    data-cy="projectPreview" size="small"
+          </SkillsButton>
+          <SkillsButton target="_blank" v-if="project" :to="{ name:'MyProjectSkills', params: { projectId: project.projectId } }"
+                    data-cy="projectPreview" size="small" label="Preview" icon="fas fa-eye"
                    class="border-1 border-black-alpha-90" :aria-label="'preview client display for project'+project.name">
 <!--            v-skills="'PreviewProjectClientDisplay'" -->
-            <span>Preview</span> <i class="fas fa-eye" style="font-size:1rem;" aria-hidden="true"/>
-          </Button>
-          <Button v-if="isProjConfigDiscoverable"
+          </SkillsButton>
+          <SkillsButton v-if="isProjConfigDiscoverable"
                     ref="shareProjectButton"
                     size="small"
                     @click="copyAndDisplayShareProjInfo"
                     data-cy="shareProjBtn"
                     class="border-1 border-black-alpha-90"
+                    label="Share" icon="fas fa-share-alt"
                     :aria-label="`Share ${project.name} with new users`">
 <!--            v-skills="'ShareProject'" -->
-            <span>Share</span> <i class="fas fa-share-alt" style="font-size:1rem;" aria-hidden="true"/>
-          </Button>
+          </SkillsButton>
         </span>
         <div data-cy="projectCreated">
           <i class="fas fa-clock text-success header-status-icon" aria-hidden="true" /> <ProjectDates :created="project.created" :load-last-reported-date="true"/>

diff --git a/dashboard-prime/src/components/utils/cards/CardNavigateAndEditControls.vue b/dashboard-prime/src/components/utils/cards/CardNavigateAndEditControls.vue
@@ -34,33 +34,38 @@ const focusOnDelete = () => {
 <template>
   <div class="flex" :class="{ 'justify-content-center' : isReadOnlyProj }">
     <div class="col-auto">
-      <Button
+      <SkillsButton
           :to="options.navTo"
           class="border-1 border-black-alpha-90" size="small"
           :aria-label="`Manage ${options.type} ${options.name}`"
+          icon="fas fa-arrow-circle-right"
+          :label="isReadOnlyProj ? 'View' : 'Manage'"
           :data-cy="`manageBtn_${options.id}`">
-        <span v-if="isReadOnlyProj">View</span><span v-else>Manage</span> <i class="fas fa-arrow-circle-right" aria-hidden="true"/>
-      </Button>
+      </SkillsButton>
     </div>
 
     <div v-if="!isReadOnlyProj" class="col text-right">
       <span class="p-buttonset">
-        <Button v-if="options.showShare === true"
+        <SkillsButton v-if="options.showShare === true"
                 ref="shareBtn"
                 size="small"
+                label=""
+                :icon="shareBtnIcon"
                 class="border-1 border-black-alpha-90"
                 @click="handleShareClick"
-                :title="shareTitle"><i :class="shareBtnIcon" aria-hidden="true"/></Button>
-        <Button ref="editBtn"
+                :title="shareTitle"></SkillsButton>
+        <SkillsButton ref="editBtn"
                 size="small"
                 class="border-1 border-black-alpha-90"
                 @click="emit('edit')"
                 :title="`Edit ${options.type}`"
                 :aria-label="`Edit ${options.type} ${options.name}`"
                 role="button"
-                data-cy="editBtn"><i class="fas fa-edit" aria-hidden="true"/></Button>
+                label=""
+                icon="fas fa-edit"
+                data-cy="editBtn"><i class="fas fa-edit" aria-hidden="true"/></SkillsButton>
 
-          <Button variant="outline-primary"
+          <SkillsButton variant="outline-primary"
                   class="border-1 border-black-alpha-90"
                   v-tooltip="options.deleteDisabledText"
                   ref="deleteBtn"
@@ -70,7 +75,8 @@ const focusOnDelete = () => {
                   :title="`Delete ${options.type}`"
                   :aria-label="options.deleteDisabledText ? options.deleteDisabledText : `Delete ${options.type} ${options.name}`"
                   role="button"
-                  data-cy="deleteBtn"><i class="text-warning fas fa-trash" aria-hidden="true"/></Button>
+                  label="" icon="text-warning fas fa-trash"
+                  data-cy="deleteBtn"></SkillsButton>
       </span>
     </div>
   </div>