Resolve "Remove hyphen in To-Do in Design Management"

app/assets/javascripts/design_management/components/design_sidebar.vue

@@ -126,7 +126,7 @@ export default {
       v-if="showTodoButton"
       class="gl-py-4 gl-mb-4 gl-display-flex gl-justify-content-space-between gl-align-items-center gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
     >
-      <span>{{ __('To-Do') }}</span>
+      <span>{{ __('To Do') }}</span>
       <design-todo-button :design="design" @error="$emit('todoError', $event)" />
     </div>
     <h2 class="gl-font-weight-bold gl-mt-0">

app/assets/javascripts/vue_shared/components/todo_button.vue

@@ -15,7 +15,7 @@ export default {
   },
   computed: {
     buttonLabel() {
-      return this.isTodo ? __('Mark as done') : __('Add a To-Do');
+      return this.isTodo ? __('Mark as done') : __('Add a To Do');
     },
   },
 };

spec/frontend/design_management/components/design_todo_button_spec.js

@@ -111,7 +111,7 @@ describe('Design management design todo button', () => {
     });
 
     it('renders correct button text', () => {
-      expect(wrapper.text()).toBe('Add a To-Do');
+      expect(wrapper.text()).toBe('Add a To Do');
     });
 
     describe('when clicked', () => {

spec/frontend/vue_shared/components/todo_button_spec.js

@@ -33,7 +33,7 @@ describe('Todo Button', () => {
   it.each`
     label             | isTodo
     ${'Mark as done'} | ${true}
-    ${'Add a To-Do'}  | ${false}
+    ${'Add a To Do'}  | ${false}
   `('sets correct label when isTodo is $isTodo', ({ label, isTodo }) => {
     createComponent({ isTodo });