Update snapshots for new VTU version

This commit have changes only in component stubs naming

ee/spec/frontend/alerts_service_settings/components/__snapshots__/alerts_service_form_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AlertsServiceForm with default values renders "authorization-key" input 1`] = `"<glforminput-stub id=\\"authorization-key\\" readonly=\\"true\\" value=\\"abcedfg123\\"></glforminput-stub>"`;
+exports[`AlertsServiceForm with default values renders "authorization-key" input 1`] = `"<gl-form-input-stub id=\\"authorization-key\\" readonly=\\"true\\" value=\\"abcedfg123\\"></gl-form-input-stub>"`;
 
-exports[`AlertsServiceForm with default values renders "url" input 1`] = `"<glforminput-stub id=\\"url\\" readonly=\\"true\\" value=\\"https://gitlab.com/endpoint-url\\"></glforminput-stub>"`;
+exports[`AlertsServiceForm with default values renders "url" input 1`] = `"<gl-form-input-stub id=\\"url\\" readonly=\\"true\\" value=\\"https://gitlab.com/endpoint-url\\"></gl-form-input-stub>"`;
 
-exports[`AlertsServiceForm with default values renders toggle button 1`] = `"<togglebutton-stub id=\\"activated\\"></togglebutton-stub>"`;
+exports[`AlertsServiceForm with default values renders toggle button 1`] = `"<toggle-button-stub id=\\"activated\\"></toggle-button-stub>"`;
 
 exports[`AlertsServiceForm with default values shows description and "Learn More" link 1`] = `"Each alert source must be authorized using the following URL and authorization key. <a href=\\"https://docs.gitlab.com/ee/user/project/integrations/generic_alerts.md\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Learn more</a> about configuring this endpoint to receive alerts."`;

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/metric_chart_spec.js.snap

@@ -18,13 +18,13 @@ exports[`MetricChart component template when isLoading is false and chartData is
 <div>
   <!---->
    
-  <gldropdown-stub
+  <gl-dropdown-stub
     class="mb-4 metric-dropdown"
     menu-class="w-100 mw-100"
     text="Please select a metric"
     toggle-class="dropdown-menu-toggle w-100"
   >
-    <gldropdownitem-stub
+    <gl-dropdown-item-stub
       active-class="is-active"
       class="w-100"
     >
@@ -42,8 +42,8 @@ exports[`MetricChart component template when isLoading is false and chartData is
             Time from last commit to merge
           
       </span>
-    </gldropdownitem-stub>
-    <gldropdownitem-stub
+    </gl-dropdown-item-stub>
+    <gl-dropdown-item-stub
       active-class="is-active"
       class="w-100"
     >
@@ -61,8 +61,8 @@ exports[`MetricChart component template when isLoading is false and chartData is
             Time from first comment to last commit
           
       </span>
-    </gldropdownitem-stub>
-  </gldropdown-stub>
+    </gl-dropdown-item-stub>
+  </gl-dropdown-stub>
    
   <!---->
    
@@ -76,7 +76,7 @@ exports[`MetricChart component template when isLoading is true matches the snaps
 <div>
   <!---->
    
-  <glloadingicon-stub
+  <gl-loading-icon-stub
     class="my-4 py-4"
     color="orange"
     label="Loading"

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/mr_table_row_spec.js.snap

@@ -10,7 +10,7 @@ exports[`MergeRequestTableRow component on creation matches the snapshot 1`] = `
     <div
       class="d-flex mr-md-2"
     >
-      <glavatar-stub
+      <gl-avatar-stub
         alt="avatar"
         entityid="0"
         entityname=""
@@ -25,12 +25,12 @@ exports[`MergeRequestTableRow component on creation matches the snapshot 1`] = `
       <h5
         class="item-title mr-title my-0 d-block str-truncated"
       >
-        <gllink-stub
+        <gl-link-stub
           href="http://gitlab.example.com/gitlab-org/gitlab-test/merge_requests/10"
           target="_blank"
         >
           This is a test MR
-        </gllink-stub>
+        </gl-link-stub>
       </h5>
        
       <ul
@@ -62,13 +62,13 @@ exports[`MergeRequestTableRow component on creation matches the snapshot 1`] = `
   <div
     class="table-section section-50 d-flex flex-row align-items-start js-mr-metrics"
   >
-    <metriccolumn-stub
+    <metric-column-stub
       label="Time to merge"
       type="days_to_merge"
       value="24"
     />
      
-    <metriccolumn-stub
+    <metric-column-stub
       label="Time from first comment to last commit"
       type="time_to_last_commit"
       value="0"

ee/spec/frontend/analytics/productivity_analytics/components/__snapshots__/mr_table_spec.js.snap

@@ -36,13 +36,13 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
               Time to merge
             </span>
              
-            <gldropdown-stub
+            <gl-dropdown-stub
               class="w-100 metric-col"
               menu-class="w-100 mw-100"
               text="Time from first comment to last commit"
               toggle-class="dropdown-menu-toggle w-100"
             >
-              <gldropdownitem-stub
+              <gl-dropdown-item-stub
                 active-class="is-active"
                 class="w-100"
               >
@@ -58,8 +58,8 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                   Time from first commit until first comment
                 
                 </span>
-              </gldropdownitem-stub>
-              <gldropdownitem-stub
+              </gl-dropdown-item-stub>
+              <gl-dropdown-item-stub
                 active-class="is-active"
                 class="w-100"
               >
@@ -75,8 +75,8 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                   Time from first comment to last commit
                 
                 </span>
-              </gldropdownitem-stub>
-              <gldropdownitem-stub
+              </gl-dropdown-item-stub>
+              <gl-dropdown-item-stub
                 active-class="is-active"
                 class="w-100"
               >
@@ -92,8 +92,8 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
                   Time from last commit to merge
                 
                 </span>
-              </gldropdownitem-stub>
-            </gldropdown-stub>
+              </gl-dropdown-item-stub>
+            </gl-dropdown-stub>
           </div>
         </div>
       </div>
@@ -102,12 +102,12 @@ exports[`MergeRequestTable component matches the snapshot 1`] = `
     <div
       class="card-body py-0"
     >
-      <mergerequesttablerow-stub
+      <merge-request-table-row-stub
         mergerequest="[object Object]"
         metriclabel="Time from first comment to last commit"
         metrictype="time_to_last_commit"
       />
-      <mergerequesttablerow-stub
+      <merge-request-table-row-stub
         mergerequest="[object Object]"
         metriclabel="Time from first comment to last commit"
         metrictype="time_to_last_commit"

ee/spec/frontend/billings/components/__snapshots__/app_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SubscriptionApp component on creation matches the snapshot 1`] = `
-<subscriptiontable-stub
+<subscription-table-stub
   customerportalurl="https://customers.gitlab.com/subscriptions"
   namespacename="bronze"
   planupgradehref="/url"

ee/spec/frontend/billings/components/__snapshots__/subscription_table_spec.js.snap

@@ -46,7 +46,7 @@ Array [
 
 exports[`SubscriptionTable component when created matches the snapshot 1`] = `
 <div>
-  <glloadingicon-stub
+  <gl-loading-icon-stub
     class="prepend-top-10 append-bottom-10"
     color="orange"
     label="Loading subscriptions"

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_actions_spec.js.snap

@@ -7,12 +7,12 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
   <div
     class="btn-group flex-grow-1 mr-2"
   >
-    <gldropdown-stub
+    <gl-dropdown-stub
       class="flex-grow-1 text-center"
       right=""
       text="Component name"
     >
-      <gldropdownitem-stub>
+      <gl-dropdown-item-stub>
         <span
           class="d-flex"
         >
@@ -25,8 +25,8 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
           Component name
         
         </span>
-      </gldropdownitem-stub>
-      <gldropdownitem-stub>
+      </gl-dropdown-item-stub>
+      <gl-dropdown-item-stub>
         <span
           class="d-flex"
         >
@@ -39,8 +39,8 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
           Packager
         
         </span>
-      </gldropdownitem-stub>
-      <gldropdownitem-stub>
+      </gl-dropdown-item-stub>
+      <gl-dropdown-item-stub>
         <span
           class="d-flex"
         >
@@ -53,10 +53,10 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
           Severity
         
         </span>
-      </gldropdownitem-stub>
-    </gldropdown-stub>
+      </gl-dropdown-item-stub>
+    </gl-dropdown-stub>
      
-    <glbutton-stub
+    <gl-button-stub
       class="flex-grow-0 js-sort-order"
       title="Sort direction"
     >
@@ -64,10 +64,10 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
         name="sort-lowest"
         size="16"
       />
-    </glbutton-stub>
+    </gl-button-stub>
   </div>
    
-  <glbutton-stub
+  <gl-button-stub
     class="js-download"
     download="dependencies.json"
     href="http://test.host/dependencies.json"
@@ -77,6 +77,6 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
       name="download"
       size="16"
     />
-  </glbutton-stub>
+  </gl-button-stub>
 </div>
 `;

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_table_row_spec.js.snap

@@ -121,7 +121,7 @@ exports[`DependenciesTableRow component when a dependency with no vulnerabilitie
       <div
         class="table-mobile-content"
       >
-        <dependencylicenselinks-stub
+        <dependency-license-links-stub
           licenses=""
           title="left-pad"
         />
@@ -153,7 +153,7 @@ exports[`DependenciesTableRow component when a dependency with vulnerabilities i
       <div
         class="table-mobile-content"
       >
-        <glbutton-stub
+        <gl-button-stub
           class="bold text-warning-700 text-1 text-decoration-none js-vulnerabilities-toggle"
           variant="link"
         >
@@ -165,7 +165,7 @@ exports[`DependenciesTableRow component when a dependency with vulnerabilities i
           
           7 vulnerabilities
         
-        </glbutton-stub>
+        </gl-button-stub>
       </div>
     </div>
      
@@ -256,7 +256,7 @@ exports[`DependenciesTableRow component when a dependency with vulnerabilities i
       <div
         class="table-mobile-content"
       >
-        <dependencylicenselinks-stub
+        <dependency-license-links-stub
           licenses=""
           title="left-pad"
         />
@@ -272,7 +272,7 @@ exports[`DependenciesTableRow component when loading matches the snapshot 1`] =
 <div
   class="gl-responsive-table-row flex-md-column align-items-md-stretch px-2"
 >
-  <glskeletonloading-stub
+  <gl-skeleton-loading-stub
     class="d-flex flex-column justify-content-center h-auto"
     lines="1"
   />
@@ -285,7 +285,7 @@ exports[`DependenciesTableRow component when passed no props matches the snapsho
 <div
   class="gl-responsive-table-row flex-md-column align-items-md-stretch px-2"
 >
-  <glskeletonloading-stub
+  <gl-skeleton-loading-stub
     class="d-flex flex-column justify-content-center h-auto"
     lines="1"
   />

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_table_spec.js.snap

@@ -56,10 +56,10 @@ exports[`DependenciesTable component given a list of dependencies (loaded) match
     </div>
   </div>
    
-  <dependenciestablerow-stub
+  <dependencies-table-row-stub
     dependency="[object Object]"
   />
-  <dependenciestablerow-stub
+  <dependencies-table-row-stub
     dependency="[object Object]"
   />
 </div>
@@ -121,11 +121,11 @@ exports[`DependenciesTable component given a list of dependencies (loading) matc
     </div>
   </div>
    
-  <dependenciestablerow-stub
+  <dependencies-table-row-stub
     dependency="[object Object]"
     isloading="true"
   />
-  <dependenciestablerow-stub
+  <dependencies-table-row-stub
     dependency="[object Object]"
     isloading="true"
   />

ee/spec/frontend/dependencies/components/__snapshots__/dependency_list_incomplete_alert_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DependencyListIncompleteAlert component matches the snapshot 1`] = `
-<glalert-stub
+<gl-alert-stub
   dismissible="true"
   dismisslabel="Dismiss"
   primarybuttonlink=""
@@ -42,5 +42,5 @@ exports[`DependencyListIncompleteAlert component matches the snapshot 1`] = `
       pom.xml
     </li>
   </ul>
-</glalert-stub>
+</gl-alert-stub>
 `;

ee/spec/frontend/dependencies/components/__snapshots__/dependency_list_job_failed_alert_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DependencyListJobFailedAlert component matches the snapshot 1`] = `
-<glalert-stub
+<gl-alert-stub
   dismissible="true"
   dismisslabel="Dismiss"
   primarybuttonlink=""
@@ -18,5 +18,5 @@ exports[`DependencyListJobFailedAlert component matches the snapshot 1`] = `
     </code>
      job has failed and cannot generate the list. Please ensure the job is running properly and run the pipeline again.
   </span>
-</glalert-stub>
+</gl-alert-stub>
 `;

ee/spec/frontend/dependencies/components/__snapshots__/dependency_vulnerability_spec.js.snap

@@ -7,7 +7,7 @@ exports[`DependencyVulnerability component given an vulnerability matches the sn
   <div
     class="w-8em flex-shrink-0 text-right mr-3"
   >
-    <severitybadge-stub
+    <severity-badge-stub
       severity="critical"
     />
   </div>

ee/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Design note component should match the snapshot 1`] = `
-<timelineentryitem-stub
+<timeline-entry-item-stub
   class="design-note note-form"
   id="note_undefined"
 >
-  <useravatarlink-stub
+  <user-avatar-link-stub
     imgalt=""
     imgcssclasses=""
     imgsize="40"
@@ -50,7 +50,7 @@ exports[`Design note component should match the snapshot 1`] = `
       class="note-timestamp system-note-separator"
       href="#note_undefined"
     >
-      <timeagotooltip-stub
+      <time-ago-tooltip-stub
         cssclass=""
         time="2019-07-26T15:02:20Z"
         tooltipplacement="bottom"
@@ -62,5 +62,5 @@ exports[`Design note component should match the snapshot 1`] = `
     class="note-text md"
     data-qa-selector="note_content"
   />
-</timelineentryitem-stub>
+</timeline-entry-item-stub>
 `;

ee/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap

@@ -186,7 +186,7 @@ exports[`Design management list item component with no notes renders item with c
 </router-link-stub>
 `;
 
-exports[`Design management list item component with notes renders item with multiple comments 1`] = `
+exports[`Design management list item component with no notes renders item with no status icon for none event 1`] = `
 <router-link-stub
   class="card cursor-pointer text-plain js-design-list-item design-list-item"
   to="[object Object]"
@@ -230,29 +230,12 @@ exports[`Design management list item component with notes renders item with mult
       </span>
     </div>
      
-    <div
-      class="ml-auto d-flex align-items-center text-secondary"
-    >
-      <icon-stub
-        class="ml-1"
-        name="comments"
-        size="16"
-      />
-       
-      <span
-        aria-label="2 comments"
-        class="ml-1"
-      >
-        
-        2
-      
-      </span>
-    </div>
+    <!---->
   </div>
 </router-link-stub>
 `;
 
-exports[`Design management list item component with no notes renders item with no status icon for none event 1`] = `
+exports[`Design management list item component with no notes renders loading spinner when isLoading is true 1`] = `
 <router-link-stub
   class="card cursor-pointer text-plain js-design-list-item design-list-item"
   to="[object Object]"
@@ -262,11 +245,10 @@ exports[`Design management list item component with no notes renders item with n
   >
     <!---->
      
-    <img
-      alt="test"
-      class="block ml-auto mr-auto mw-100 mh-100 design-img"
-      data-qa-selector="design_image"
-      src="http://via.placeholder.com/300"
+    <gl-loading-icon-stub
+      color="orange"
+      label="Loading"
+      size="md"
     />
   </div>
    
@@ -301,7 +283,7 @@ exports[`Design management list item component with no notes renders item with n
 </router-link-stub>
 `;
 
-exports[`Design management list item component with notes renders item with single comment 1`] = `
+exports[`Design management list item component with notes renders item with multiple comments 1`] = `
 <router-link-stub
   class="card cursor-pointer text-plain js-design-list-item design-list-item"
   to="[object Object]"
@@ -355,11 +337,11 @@ exports[`Design management list item component with notes renders item with sing
       />
        
       <span
-        aria-label="1 comment"
+        aria-label="2 comments"
         class="ml-1"
       >
         
-        1
+        2
       
       </span>
     </div>
@@ -367,7 +349,7 @@ exports[`Design management list item component with notes renders item with sing
 </router-link-stub>
 `;
 
-exports[`Design management list item component with no notes renders loading spinner when isLoading is true 1`] = `
+exports[`Design management list item component with notes renders item with single comment 1`] = `
 <router-link-stub
   class="card cursor-pointer text-plain js-design-list-item design-list-item"
   to="[object Object]"
@@ -377,10 +359,11 @@ exports[`Design management list item component with no notes renders loading spi
   >
     <!---->
      
-    <glloadingicon-stub
-      color="orange"
-      label="Loading"
-      size="md"
+    <img
+      alt="test"
+      class="block ml-auto mr-auto mw-100 mh-100 design-img"
+      data-qa-selector="design_image"
+      src="http://via.placeholder.com/300"
     />
   </div>
    
@@ -410,7 +393,24 @@ exports[`Design management list item component with no notes renders loading spi
       </span>
     </div>
      
-    <!---->
+    <div
+      class="ml-auto d-flex align-items-center text-secondary"
+    >
+      <icon-stub
+        class="ml-1"
+        name="comments"
+        size="16"
+      />
+       
+      <span
+        aria-label="1 comment"
+        class="ml-1"
+      >
+        
+        1
+      
+      </span>
+    </div>
   </div>
 </router-link-stub>
 `;

ee/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap

@@ -35,7 +35,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
     id="1"
   />
    
-  <glbutton-stub
+  <gl-button-stub
     class="mr-2"
     href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
   >
@@ -43,9 +43,9 @@ exports[`Design management toolbar component renders design and updated data 1`]
       name="download"
       size="18"
     />
-  </glbutton-stub>
+  </gl-button-stub>
    
-  <deletebutton-stub
+  <delete-button-stub
     buttonclass=""
     buttonvariant="danger"
     hasselecteddesigns="true"
@@ -54,6 +54,6 @@ exports[`Design management toolbar component renders design and updated data 1`]
       name="remove"
       size="18"
     />
-  </deletebutton-stub>
+  </delete-button-stub>
 </header>
 `;

ee/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap

@@ -12,13 +12,13 @@ exports[`Design management pagination component renders pagination buttons 1`] =
   <div
     class="btn-group ml-3 mr-3"
   >
-    <paginationbutton-stub
+    <pagination-button-stub
       class="js-previous-design"
       iconname="angle-left"
       title="Go to previous design"
     />
      
-    <paginationbutton-stub
+    <pagination-button-stub
       class="js-next-design"
       design="[object Object]"
       iconname="angle-right"

ee/spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap

@@ -4,7 +4,7 @@ exports[`Design management upload button component renders inverted upload desig
 <div
   isinverted="true"
 >
-  <glbutton-stub
+  <gl-button-stub
     title="Adding a design with the same filename replaces the file in a new version."
     variant="success"
   >
@@ -12,7 +12,7 @@ exports[`Design management upload button component renders inverted upload desig
     Add designs
     
     <!---->
-  </glbutton-stub>
+  </gl-button-stub>
    
   <input
     accept="image/*"
@@ -26,7 +26,7 @@ exports[`Design management upload button component renders inverted upload desig
 
 exports[`Design management upload button component renders loading icon 1`] = `
 <div>
-  <glbutton-stub
+  <gl-button-stub
     disabled="true"
     title="Adding a design with the same filename replaces the file in a new version."
     variant="success"
@@ -34,14 +34,14 @@ exports[`Design management upload button component renders loading icon 1`] = `
     
     Add designs
     
-    <glloadingicon-stub
+    <gl-loading-icon-stub
       class="ml-1"
       color="orange"
       inline="true"
       label="Loading"
       size="sm"
     />
-  </glbutton-stub>
+  </gl-button-stub>
    
   <input
     accept="image/*"
@@ -55,7 +55,7 @@ exports[`Design management upload button component renders loading icon 1`] = `
 
 exports[`Design management upload button component renders upload design button 1`] = `
 <div>
-  <glbutton-stub
+  <gl-button-stub
     title="Adding a design with the same filename replaces the file in a new version."
     variant="success"
   >
@@ -63,7 +63,7 @@ exports[`Design management upload button component renders upload design button
     Add designs
     
     <!---->
-  </glbutton-stub>
+  </gl-button-stub>
    
   <input
     accept="image/*"

ee/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Design management design version dropdown component renders design version dropdown button 1`] = `
-<gldropdown-stub
+<gl-dropdown-stub
   class="design-version-dropdown"
   issueiid=""
   projectpath=""
   text="Showing Latest Version"
   variant="link"
 >
-  <gldropdownitem-stub>
+  <gl-dropdown-item-stub>
     <router-link-stub
       class="d-flex js-version-link"
       to="[object Object]"
@@ -31,8 +31,8 @@ exports[`Design management design version dropdown component renders design vers
         class="fa fa-check pull-right"
       />
     </router-link-stub>
-  </gldropdownitem-stub>
-  <gldropdownitem-stub>
+  </gl-dropdown-item-stub>
+  <gl-dropdown-item-stub>
     <router-link-stub
       class="d-flex js-version-link"
       to="[object Object]"
@@ -51,19 +51,19 @@ exports[`Design management design version dropdown component renders design vers
        
       <!---->
     </router-link-stub>
-  </gldropdownitem-stub>
-</gldropdown-stub>
+  </gl-dropdown-item-stub>
+</gl-dropdown-stub>
 `;
 
 exports[`Design management design version dropdown component renders design version list 1`] = `
-<gldropdown-stub
+<gl-dropdown-stub
   class="design-version-dropdown"
   issueiid=""
   projectpath=""
   text="Showing Latest Version"
   variant="link"
 >
-  <gldropdownitem-stub>
+  <gl-dropdown-item-stub>
     <router-link-stub
       class="d-flex js-version-link"
       to="[object Object]"
@@ -86,8 +86,8 @@ exports[`Design management design version dropdown component renders design vers
         class="fa fa-check pull-right"
       />
     </router-link-stub>
-  </gldropdownitem-stub>
-  <gldropdownitem-stub>
+  </gl-dropdown-item-stub>
+  <gl-dropdown-item-stub>
     <router-link-stub
       class="d-flex js-version-link"
       to="[object Object]"
@@ -106,6 +106,6 @@ exports[`Design management design version dropdown component renders design vers
        
       <!---->
     </router-link-stub>
-  </gldropdownitem-stub>
-</gldropdown-stub>
+  </gl-dropdown-item-stub>
+</gl-dropdown-stub>
 `;

ee/spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap

@@ -52,7 +52,7 @@ exports[`Design management index page designs does not render toolbar when there
     </ol>
   </div>
    
-  <routerview-stub
+  <router-view-stub
     name="default"
   />
 </div>
@@ -66,20 +66,20 @@ exports[`Design management index page designs renders designs list and header wi
     <div
       class="d-flex justify-content-between align-items-center w-100"
     >
-      <designversiondropdown-stub />
+      <design-version-dropdown-stub />
        
       <div
         class="d-flex qa-selector-toolbar"
       >
-        <glbutton-stub
+        <gl-button-stub
           class="mr-2 js-select-all"
           variant="link"
         >
           Select all
-        </glbutton-stub>
+        </gl-button-stub>
          
         <div>
-          <deletebutton-stub
+          <delete-button-stub
             buttonclass="btn-danger btn-inverted mr-2"
             buttonvariant=""
           >
@@ -87,10 +87,10 @@ exports[`Design management index page designs renders designs list and header wi
             Delete selected
             
             <!---->
-          </deletebutton-stub>
+          </delete-button-stub>
         </div>
          
-        <uploadbutton-stub />
+        <upload-button-stub />
       </div>
     </div>
   </header>
@@ -152,7 +152,7 @@ exports[`Design management index page designs renders designs list and header wi
     </ol>
   </div>
    
-  <routerview-stub
+  <router-view-stub
     name="default"
   />
 </div>
@@ -174,7 +174,7 @@ exports[`Design management index page designs renders error 1`] = `
     </div>
   </div>
    
-  <routerview-stub
+  <router-view-stub
     name="default"
   />
 </div>
@@ -187,14 +187,14 @@ exports[`Design management index page designs renders loading icon 1`] = `
   <div
     class="mt-4"
   >
-    <glloadingicon-stub
+    <gl-loading-icon-stub
       color="orange"
       label="Loading"
       size="md"
     />
   </div>
    
-  <routerview-stub
+  <router-view-stub
     name="default"
   />
 </div>
@@ -207,13 +207,13 @@ exports[`Design management index page when has no designs renders empty text 1`]
   <div
     class="mt-4"
   >
-    <glemptystate-stub
+    <gl-empty-state-stub
       description="Upload and view the latest designs for this issue. Consistent and easy to find, so everyone is up to date."
       title="The one place for your designs"
     />
   </div>
    
-  <routerview-stub
+  <router-view-stub
     name="default"
   />
 </div>

ee/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

@@ -7,7 +7,7 @@ exports[`Design management design index page renders design index 1`] = `
   <div
     class="d-flex overflow-hidden flex-lg-grow-1 flex-column"
   >
-    <designdestroyer-stub
+    <design-destroyer-stub
       filenames="test.jpg"
       iid="1"
       projectpath=""
@@ -22,12 +22,12 @@ exports[`Design management design index page renders design index 1`] = `
         <!---->
       </div>
        
-      <designimage-stub
+      <design-image-stub
         image="test.jpg"
         name="test.jpg"
       />
        
-      <designoverlay-stub
+      <design-overlay-stub
         notes="[object Object]"
         position="[object Object]"
       />
@@ -37,7 +37,7 @@ exports[`Design management design index page renders design index 1`] = `
   <div
     class="image-notes"
   >
-    <designdiscussion-stub
+    <design-discussion-stub
       designid="1"
       discussion="[object Object]"
       discussionindex="1"
@@ -54,7 +54,7 @@ exports[`Design management design index page sets loading state 1`] = `
 <div
   class="design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
 >
-  <glloadingicon-stub
+  <gl-loading-icon-stub
     class="align-self-center"
     color="orange"
     label="Loading"
@@ -70,7 +70,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
   <div
     class="d-flex overflow-hidden flex-lg-grow-1 flex-column"
   >
-    <designdestroyer-stub
+    <design-destroyer-stub
       filenames="test.jpg"
       iid="1"
       projectpath=""
@@ -82,7 +82,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
       <div
         class="p-3"
       >
-        <glalert-stub
+        <gl-alert-stub
           dismissible="true"
           dismisslabel="Dismiss"
           primarybuttonlink=""
@@ -95,15 +95,15 @@ exports[`Design management design index page with error GlAlert is rendered in c
           
             woops
           
-        </glalert-stub>
+        </gl-alert-stub>
       </div>
        
-      <designimage-stub
+      <design-image-stub
         image="test.jpg"
         name="test.jpg"
       />
        
-      <designoverlay-stub
+      <design-overlay-stub
         notes=""
         position="[object Object]"
       />

ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap

@@ -4,7 +4,7 @@ exports[`dashboard should match the snapshot 1`] = `
 <div
   class="operations-dashboard"
 >
-  <glmodal-stub
+  <gl-modal-stub
     modalclass=""
     modalid="add-projects-modal"
     ok-disabled="true"
@@ -13,12 +13,12 @@ exports[`dashboard should match the snapshot 1`] = `
     title="Add projects"
     titletag="h4"
   >
-    <projectselector-stub
+    <project-selector-stub
       projectsearchresults=""
       selectedprojects=""
       totalresults="0"
     />
-  </glmodal-stub>
+  </gl-modal-stub>
    
   <div
     class="page-title-holder flex-fill d-flex align-items-center"
@@ -31,14 +31,14 @@ exports[`dashboard should match the snapshot 1`] = `
     
     </h1>
      
-    <glbutton-stub
+    <gl-button-stub
       class="js-add-projects-button btn btn-success"
       role="button"
     >
       
       Add projects
     
-    </glbutton-stub>
+    </gl-button-stub>
   </div>
    
   <div

ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap

@@ -7,7 +7,7 @@ exports[`Environment Header has a failed pipeline matches the snapshot 1`] = `
   <div
     class="flex-grow-1 block-truncated"
   >
-    <gllink-stub
+    <gl-link-stub
       class="js-environment-link cgray"
       href="/enivronment/1"
       title="staging"
@@ -17,12 +17,12 @@ exports[`Environment Header has a failed pipeline matches the snapshot 1`] = `
       >
          staging
       </span>
-    </gllink-stub>
+    </gl-link-stub>
      
     <!---->
   </div>
    
-  <reviewapplink-stub
+  <review-app-link-stub
     cssclass="btn btn-default btn-sm"
     iscurrent="true"
     link="http://example.com"
@@ -37,7 +37,7 @@ exports[`Environment Header has errors matches the snapshot 1`] = `
   <div
     class="flex-grow-1 block-truncated"
   >
-    <gllink-stub
+    <gl-link-stub
       class="js-environment-link cgray"
       href="/enivronment/1"
       title="staging"
@@ -47,12 +47,12 @@ exports[`Environment Header has errors matches the snapshot 1`] = `
       >
          staging
       </span>
-    </gllink-stub>
+    </gl-link-stub>
      
     <!---->
   </div>
    
-  <reviewapplink-stub
+  <review-app-link-stub
     cssclass="btn btn-default btn-sm"
     iscurrent="true"
     link="http://example.com"
@@ -67,7 +67,7 @@ exports[`Environment Header renders name and link to app matches the snapshot 1`
   <div
     class="flex-grow-1 block-truncated"
   >
-    <gllink-stub
+    <gl-link-stub
       class="js-environment-link cgray"
       href="/enivronment/1"
       title="staging"
@@ -77,12 +77,12 @@ exports[`Environment Header renders name and link to app matches the snapshot 1`
       >
          staging
       </span>
-    </gllink-stub>
+    </gl-link-stub>
      
     <!---->
   </div>
    
-  <reviewapplink-stub
+  <review-app-link-stub
     cssclass="btn btn-default btn-sm"
     iscurrent="true"
     link="http://example.com"
@@ -97,7 +97,7 @@ exports[`Environment Header with environments grouped into a folder matches the
   <div
     class="flex-grow-1 block-truncated"
   >
-    <gllink-stub
+    <gl-link-stub
       class="js-environment-link cgray"
       href="/enivronment/1"
       title="review/testing"
@@ -107,14 +107,14 @@ exports[`Environment Header with environments grouped into a folder matches the
       >
          review/testing
       </span>
-    </gllink-stub>
+    </gl-link-stub>
      
-    <glbadge-stub
+    <gl-badge-stub
       class="dashboard-card-icon"
       pill="true"
     >
       5
-    </glbadge-stub>
+    </gl-badge-stub>
   </div>
    
   <icon-stub

ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_spec.js.snap

@@ -4,7 +4,7 @@ exports[`Environment matchs the snapshot 1`] = `
 <div
   class="dashboard-card card border-0"
 >
-  <environmentheader-stub
+  <environment-header-stub
     environment="[object Object]"
     haserrors="true"
   />
@@ -18,7 +18,7 @@ exports[`Environment matchs the snapshot 1`] = `
       <div
         class="col-1 align-self-center"
       >
-        <useravatarlink-stub
+        <user-avatar-link-stub
           imgalt=""
           imgcssclasses=""
           imgsize="32"
@@ -41,14 +41,14 @@ exports[`Environment matchs the snapshot 1`] = `
             size="16"
           />
            
-          <gllink-stub
+          <gl-link-stub
             class="str-truncated"
             href="/root/minimal-ruby-app/-/jobs/1097"
           >
             
             production #1097
           
-          </gllink-stub>
+          </gl-link-stub>
         </div>
          
         <commit-stub
@@ -65,7 +65,7 @@ exports[`Environment matchs the snapshot 1`] = `
       <div
         class="col-sm-4 mt-0 pl-5 pl-sm-0 offset-1 offset-sm-0 text-sm-right align-self-center col-12 d-sm-block"
       >
-        <timeago-stub
+        <time-ago-stub
           time="2019-02-20T16:15:40.122Z"
           tooltiptext="Finished"
         />

ee/spec/frontend/environments_dashboard/components/__snapshots__/project_header_spec.js.snap

@@ -7,13 +7,13 @@ exports[`Project Header matches the snapshot 1`] = `
   <div
     class="d-flex align-items-center"
   >
-    <projectavatar-stub
+    <project-avatar-stub
       class="flex-shrink-0"
       project="[object Object]"
       size="20"
     />
      
-    <gllink-stub
+    <gl-link-stub
       class="js-namespace-link text-secondary"
       href="/hello"
     >
@@ -22,7 +22,7 @@ exports[`Project Header matches the snapshot 1`] = `
       >
          hello 
       </span>
-    </gllink-stub>
+    </gl-link-stub>
      
     <span
       class="append-right-8"
@@ -30,13 +30,13 @@ exports[`Project Header matches the snapshot 1`] = `
       &gt;
     </span>
      
-    <projectavatar-stub
+    <project-avatar-stub
       class="flex-shrink-0"
       project="[object Object]"
       size="20"
     />
      
-    <gllink-stub
+    <gl-link-stub
       class="js-project-link text-secondary"
     >
       <span
@@ -44,7 +44,7 @@ exports[`Project Header matches the snapshot 1`] = `
       >
          world 
       </span>
-    </gllink-stub>
+    </gl-link-stub>
   </div>
    
   <div
@@ -67,7 +67,7 @@ exports[`Project Header matches the snapshot 1`] = `
       class="dropdown-menu dropdown-menu-right"
     >
       <li>
-        <glbutton-stub
+        <gl-button-stub
           class="js-remove-button"
         >
           <span
@@ -75,7 +75,7 @@ exports[`Project Header matches the snapshot 1`] = `
           >
              Remove 
           </span>
-        </glbutton-stub>
+        </gl-button-stub>
       </li>
     </ul>
   </div>

ee/spec/frontend/epic/components/sidebar_items/__snapshots__/sidebar_date_picker_spec.js.snap

@@ -4,7 +4,7 @@ exports[`SidebarDatePicker renders expected template 1`] = `
 <div
   class="block date epic-date"
 >
-  <collapsedcalendaricon-stub
+  <collapsed-calendar-icon-stub
     class="sidebar-collapsed-icon"
     containerclass=""
     showicon="true"
@@ -30,14 +30,14 @@ exports[`SidebarDatePicker renders expected template 1`] = `
         tabindex="0"
       />
        
-      <glbutton-stub
+      <gl-button-stub
         class="btn-sidebar-action"
         variant="link"
       >
         
         Edit
       
-      </glbutton-stub>
+      </gl-button-stub>
        
       <!---->
     </div>

ee/spec/frontend/licenses/components/__snapshots__/license_cards_list_spec.js.snap

@@ -9,7 +9,7 @@ exports[`InstanceCardsList renders a list of license cards 1`] = `
       Instance license
     </h4>
      
-    <glbutton-stub
+    <gl-button-stub
       class="my-3 js-add-license"
       href="/newLicensePath"
       variant="success"
@@ -17,20 +17,20 @@ exports[`InstanceCardsList renders a list of license cards 1`] = `
       
       Add license
     
-    </glbutton-stub>
+    </gl-button-stub>
   </div>
    
   <ul
     class="license-list list-unstyled"
   >
     <li>
-      <licensecard-stub
+      <license-card-stub
         iscurrentlicense="true"
         license="[object Object]"
       />
     </li>
     <li>
-      <licensecard-stub
+      <license-card-stub
         license="[object Object]"
       />
     </li>
@@ -47,7 +47,7 @@ exports[`InstanceCardsList renders a message when there are no licenses 1`] = `
       Instance license
     </h4>
      
-    <glbutton-stub
+    <gl-button-stub
       class="my-3 js-add-license"
       href="/newLicensePath"
       variant="success"
@@ -55,7 +55,7 @@ exports[`InstanceCardsList renders a message when there are no licenses 1`] = `
       
       Add license
     
-    </glbutton-stub>
+    </gl-button-stub>
   </div>
    
   <ul
@@ -81,7 +81,7 @@ exports[`InstanceCardsList renders a skeleton loading card if loading licenses 1
       Instance license
     </h4>
      
-    <glbutton-stub
+    <gl-button-stub
       class="my-3 js-add-license"
       href="/newLicensePath"
       variant="success"
@@ -89,14 +89,14 @@ exports[`InstanceCardsList renders a skeleton loading card if loading licenses 1
       
       Add license
     
-    </glbutton-stub>
+    </gl-button-stub>
   </div>
    
   <ul
     class="license-list list-unstyled"
   >
     <li>
-      <skeletonlicensecard-stub />
+      <skeleton-license-card-stub />
     </li>
   </ul>
 </div>

ee/spec/frontend/licenses/components/cards/__snapshots__/license_card_body_spec.js.snap

@@ -10,7 +10,7 @@ exports[`LicenseCardBody renders a license card body 1`] = `
     <div
       class="license-row d-flex"
     >
-      <headercell-stub
+      <header-cell-stub
         icon="monitor"
         title="Usage"
       />
@@ -21,19 +21,19 @@ exports[`LicenseCardBody renders a license card body 1`] = `
         value="10"
       />
        
-      <infocell-stub
+      <info-cell-stub
         popovercontent="Users with a Guest role or those who don't belong to any projects or groups don't count towards seats in use."
         title="Seats currently in use"
         value="2"
       />
        
-      <infocell-stub
+      <info-cell-stub
         popovercontent="This is the maximum number of users that have existed at the same time since the license started. This is the minimum number of seats you will need to buy when you renew your license."
         title="Max seats used"
         value="20"
       />
        
-      <infocell-stub
+      <info-cell-stub
         popovercontent="GitLab allows you to continue using your license even if you exceed the number of seats you purchased. You will be required to pay for these seats when you renew your license."
         title="Users outside of license"
         value="5"
@@ -43,25 +43,25 @@ exports[`LicenseCardBody renders a license card body 1`] = `
     <div
       class="license-row d-flex"
     >
-      <headercell-stub
+      <header-cell-stub
         icon="calendar"
         title="Validity"
       />
        
-      <datecell-stub
+      <date-cell-stub
         datenow="2017/10/10"
         title="Start date"
         value="2013/10/10"
       />
        
-      <datecell-stub
+      <date-cell-stub
         datenow="2017/10/10"
         isexpirable="true"
         title="End date"
         value="2015/10/10"
       />
        
-      <datecell-stub
+      <date-cell-stub
         datenow="2017/10/10"
         title="Uploaded on"
       />
@@ -70,7 +70,7 @@ exports[`LicenseCardBody renders a license card body 1`] = `
     <div
       class="license-row d-flex"
     >
-      <headercell-stub
+      <header-cell-stub
         icon="user"
         title="Registration"
       />
@@ -107,7 +107,7 @@ exports[`LicenseCardBody renders a license card body without free user info for
     <div
       class="license-row d-flex"
     >
-      <headercell-stub
+      <header-cell-stub
         icon="monitor"
         title="Usage"
       />
@@ -125,13 +125,13 @@ exports[`LicenseCardBody renders a license card body without free user info for
         value="10"
       />
        
-      <infocell-stub
+      <info-cell-stub
         popovercontent="This is the maximum number of users that have existed at the same time since the license started. This is the minimum number of seats you will need to buy when you renew your license."
         title="Max seats used"
         value="20"
       />
        
-      <infocell-stub
+      <info-cell-stub
         popovercontent="GitLab allows you to continue using your license even if you exceed the number of seats you purchased. You will be required to pay for these seats when you renew your license."
         title="Users outside of license"
         value="5"
@@ -141,25 +141,25 @@ exports[`LicenseCardBody renders a license card body without free user info for
     <div
       class="license-row d-flex"
     >
-      <headercell-stub
+      <header-cell-stub
         icon="calendar"
         title="Validity"
       />
        
-      <datecell-stub
+      <date-cell-stub
         datenow="2017/10/10"
         title="Start date"
         value="2013/10/10"
       />
        
-      <datecell-stub
+      <date-cell-stub
         datenow="2017/10/10"
         isexpirable="true"
         title="End date"
         value="2015/10/10"
       />
        
-      <datecell-stub
+      <date-cell-stub
         datenow="2017/10/10"
         title="Uploaded on"
       />
@@ -168,7 +168,7 @@ exports[`LicenseCardBody renders a license card body without free user info for
     <div
       class="license-row d-flex"
     >
-      <headercell-stub
+      <header-cell-stub
         icon="user"
         title="Registration"
       />
@@ -226,7 +226,7 @@ exports[`LicenseCardBody renders fallback licensee values 1`] = `
     <div
       class="license-row d-flex"
     >
-      <headercell-stub
+      <header-cell-stub
         icon="monitor"
         title="Usage"
       />
@@ -237,19 +237,19 @@ exports[`LicenseCardBody renders fallback licensee values 1`] = `
         value="10"
       />
        
-      <infocell-stub
+      <info-cell-stub
         popovercontent="Users with a Guest role or those who don't belong to any projects or groups don't count towards seats in use."
         title="Seats currently in use"
         value="2"
       />
        
-      <infocell-stub
+      <info-cell-stub
         popovercontent="This is the maximum number of users that have existed at the same time since the license started. This is the minimum number of seats you will need to buy when you renew your license."
         title="Max seats used"
         value="20"
       />
        
-      <infocell-stub
+      <info-cell-stub
         popovercontent="GitLab allows you to continue using your license even if you exceed the number of seats you purchased. You will be required to pay for these seats when you renew your license."
         title="Users outside of license"
         value="5"
@@ -259,25 +259,25 @@ exports[`LicenseCardBody renders fallback licensee values 1`] = `
     <div
       class="license-row d-flex"
     >
-      <headercell-stub
+      <header-cell-stub
         icon="calendar"
         title="Validity"
       />
        
-      <datecell-stub
+      <date-cell-stub
         datenow="2017/10/10"
         title="Start date"
         value="2013/10/10"
       />
        
-      <datecell-stub
+      <date-cell-stub
         datenow="2017/10/10"
         isexpirable="true"
         title="End date"
         value="2015/10/10"
       />
        
-      <datecell-stub
+      <date-cell-stub
         datenow="2017/10/10"
         title="Uploaded on"
       />
@@ -286,7 +286,7 @@ exports[`LicenseCardBody renders fallback licensee values 1`] = `
     <div
       class="license-row d-flex"
     >
-      <headercell-stub
+      <header-cell-stub
         icon="user"
         title="Registration"
       />

ee/spec/frontend/licenses/components/cards/__snapshots__/license_card_spec.js.snap

@@ -16,25 +16,25 @@ exports[`LicenseCard renders license card with a delete button and license body
       
       </h4>
        
-      <gldropdown-stub
+      <gl-dropdown-stub
         class="js-manage-license"
         right=""
         text="Manage"
       >
         <!---->
          
-        <gldropdownitem-stub
+        <gl-dropdown-item-stub
           class="js-delete-license text-danger"
         >
           
           Delete license
         
-        </gldropdownitem-stub>
-      </gldropdown-stub>
+        </gl-dropdown-item-stub>
+      </gl-dropdown-stub>
     </div>
   </div>
    
-  <licensecardbody-stub
+  <license-card-body-stub
     activeusercount="10"
     guestusercount="8"
     license="[object Object]"

ee/spec/frontend/licenses/components/cards/__snapshots__/skeleton_license_card_spec.js.snap

@@ -7,7 +7,7 @@ exports[`SkeletonLicenseCard renders a skeleton license card 1`] = `
   <div
     class="card-header d-flex justify-content-between align-items-center py-3"
   >
-    <glskeletonloading-stub
+    <gl-skeleton-loading-stub
       class="w-75 skeleton-bar"
       lines="1"
     />
@@ -22,39 +22,39 @@ exports[`SkeletonLicenseCard renders a skeleton license card 1`] = `
       <div
         class="license-row d-flex"
       >
-        <skeletonheadercell-stub />
+        <skeleton-header-cell-stub />
          
-        <skeletoncell-stub />
+        <skeleton-cell-stub />
          
-        <skeletoncell-stub />
+        <skeleton-cell-stub />
          
-        <skeletoncell-stub />
+        <skeleton-cell-stub />
          
-        <skeletoncell-stub />
+        <skeleton-cell-stub />
       </div>
        
       <div
         class="license-row d-flex"
       >
-        <skeletonheadercell-stub />
+        <skeleton-header-cell-stub />
          
-        <skeletoncell-stub />
+        <skeleton-cell-stub />
          
-        <skeletoncell-stub />
+        <skeleton-cell-stub />
          
-        <skeletoncell-stub />
+        <skeleton-cell-stub />
       </div>
        
       <div
         class="license-row d-flex"
       >
-        <skeletonheadercell-stub />
+        <skeleton-header-cell-stub />
          
-        <skeletoncell-stub />
+        <skeleton-cell-stub />
          
-        <skeletoncell-stub />
+        <skeleton-cell-stub />
          
-        <skeletoncell-stub />
+        <skeleton-cell-stub />
       </div>
     </div>
   </div>

ee/spec/frontend/licenses/components/cells/__snapshots__/info_cell_spec.js.snap

@@ -24,7 +24,7 @@ exports[`InfoCell renders a number value 1`] = `
       />
     </button>
      
-    <glpopover-stub
+    <gl-popover-stub
       content="popoverContent"
       cssclasses=""
       placement="bottom"
@@ -58,7 +58,7 @@ exports[`InfoCell renders a title and string value with an info popover through
       />
     </button>
      
-    <glpopover-stub
+    <gl-popover-stub
       content="popoverContent"
       cssclasses=""
       placement="bottom"

ee/spec/frontend/licenses/components/cells/__snapshots__/skeleton_cell_spec.js.snap

@@ -4,12 +4,12 @@ exports[`SkeletonCell renders a skeleton cell with a title and value loading bar
 <cell-stub
   isflexible="true"
 >
-  <glskeletonloading-stub
+  <gl-skeleton-loading-stub
     class="w-75 skeleton-bar"
     lines="1"
   />
    
-  <glskeletonloading-stub
+  <gl-skeleton-loading-stub
     class="w-50 skeleton-bar"
     lines="1"
   />

ee/spec/frontend/licenses/components/cells/__snapshots__/skeleton_header_cell_spec.js.snap

@@ -4,7 +4,7 @@ exports[`SkeletonHeaderCell renders a skeleton cell with a single title loading
 <cell-stub
   class="license-header-cell"
 >
-  <glskeletonloading-stub
+  <gl-skeleton-loading-stub
     class="w-75 skeleton-bar"
     lines="1"
   />

ee/spec/frontend/security_configuration/components/__snapshots__/app_spec.js.snap

@@ -55,7 +55,7 @@ exports[`Security Configuration App features table displays a given feature 1`]
               
             </div>
              
-            <gllink-stub
+            <gl-link-stub
               aria-label="Feature documentation"
               class="d-inline-flex ml-1"
               href="link-feature-0"
@@ -65,7 +65,7 @@ exports[`Security Configuration App features table displays a given feature 1`]
                 name="external-link"
                 size="16"
               />
-            </gllink-stub>
+            </gl-link-stub>
           </div>
            
           <div

ee/spec/frontend/threat_monitoring/components/__snapshots__/app_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ThreatMonitoringApp component given there is a default environment shows the alert 1`] = `
-<glalert-stub
+<gl-alert-stub
   class="my-3"
   dismissible="true"
   dismisslabel="Dismiss"
@@ -15,5 +15,5 @@ exports[`ThreatMonitoringApp component given there is a default environment show
   
     The graph below is an overview of traffic coming to your application as tracked by the Web Application Firewall (WAF). View the docs for instructions on how to access the WAF logs to see what type of malicious traffic is trying to access your app. The docs link is also accessible by clicking the "?" icon next to the title below.
   
-</glalert-stub>
+</gl-alert-stub>
 `;

ee/spec/frontend/vue_shared/security_reports/__snapshots__/card_security_reports_app_spec.js.snap

@@ -13,4 +13,8 @@ Object {
 }
 `;
 
-exports[`Card security reports app Headline renders renders branch and commit information 1`] = `"<span class=\\"js-security-dashboard-right pull-right\\"><svg aria-hidden=\\"true\\" class=\\"s16 ic-branch\\"><use xlink:href=\\"#branch\\"></use></svg> <a href=\\"http://test.host/branch\\" class=\\"monospace\\">master</a> <span class=\\"text-muted prepend-left-5 append-right-5\\">·</span> <svg aria-hidden=\\"true\\" class=\\"s16 ic-commit\\"><use xlink:href=\\"#commit\\"></use></svg> <a href=\\"http://test.host/commit\\" class=\\"monospace\\">1234adf</a></span>"`;
+exports[`Card security reports app Headline renders renders branch and commit information 1`] = `
+"<span class=\\"js-security-dashboard-right pull-right\\"><svg aria-hidden=\\"true\\" class=\\"s16 ic-branch\\"><use xlink:href=\\"#branch\\"></use></svg> <a href=\\"http://test.host/branch\\" class=\\"monospace\\">master</a> <span class=\\"text-muted prepend-left-5 append-right-5\\">·</span> <svg aria-hidden=\\"true\\" class=\\"s16 ic-commit\\">
+  <use xlink:href=\\"#commit\\"></use>
+</svg> <a href=\\"http://test.host/commit\\" class=\\"monospace\\">1234adf</a></span>"
+`;

package.json

@@ -146,7 +146,7 @@
     "@gitlab/eslint-config": "^2.0.0",
     "@gitlab/eslint-plugin-i18n": "^1.1.0",
     "@gitlab/eslint-plugin-vue-i18n": "^1.2.0",
-    "@vue/test-utils": "^1.0.0-beta.25",
+    "@vue/test-utils": "^1.0.0-beta.30",
     "axios-mock-adapter": "^1.15.0",
     "babel-jest": "^24.1.0",
     "babel-plugin-dynamic-import-node": "^2.2.0",
@@ -201,7 +201,7 @@
   },
   "resolutions": {
     "vue-jest/ts-jest": "24.0.0",
-    "monaco-editor" : "0.18.1"
+    "monaco-editor": "0.18.1"
   },
   "engines": {
     "node": ">=8.10.0",

spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap

@@ -5,7 +5,7 @@ exports[`Branch divergence graph component renders ahead and behind count 1`] =
   class="divergence-graph px-2 d-none d-md-block"
   title="10 commits behind master, 10 commits ahead"
 >
-  <graphbar-stub
+  <graph-bar-stub
     count="10"
     maxcommits="100"
     position="left"
@@ -15,7 +15,7 @@ exports[`Branch divergence graph component renders ahead and behind count 1`] =
     class="graph-separator pull-left mt-1"
   />
    
-  <graphbar-stub
+  <graph-bar-stub
     count="10"
     maxcommits="100"
     position="right"
@@ -28,7 +28,7 @@ exports[`Branch divergence graph component renders distance count 1`] = `
   class="divergence-graph px-2 d-none d-md-block"
   title="More than 900 commits different with master"
 >
-  <graphbar-stub
+  <graph-bar-stub
     count="900"
     maxcommits="100"
     position="full"

spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap

@@ -18,11 +18,11 @@ exports[`Confidential merge request project form group component renders empty s
         No forks are available to you.
       <br />
        
-      <glsprintf-stub
+      <gl-sprintf-stub
         message="To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private."
       />
        
-      <gllink-stub
+      <gl-link-stub
         class="w-auto p-0 d-inline-block text-primary bg-transparent"
         href="/help"
         target="_blank"
@@ -37,7 +37,7 @@ exports[`Confidential merge request project form group component renders empty s
           aria-hidden="true"
           class="fa fa-question-circle"
         />
-      </gllink-stub>
+      </gl-link-stub>
     </p>
   </div>
 </div>
@@ -61,11 +61,11 @@ exports[`Confidential merge request project form group component renders fork dr
         No forks are available to you.
       <br />
        
-      <glsprintf-stub
+      <gl-sprintf-stub
         message="To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private."
       />
        
-      <gllink-stub
+      <gl-link-stub
         class="w-auto p-0 d-inline-block text-primary bg-transparent"
         href="/help"
         target="_blank"
@@ -80,7 +80,7 @@ exports[`Confidential merge request project form group component renders fork dr
           aria-hidden="true"
           class="fa fa-question-circle"
         />
-      </gllink-stub>
+      </gl-link-stub>
     </p>
   </div>
 </div>

spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap

@@ -17,7 +17,11 @@ exports[`Contributors charts should render charts when loading completed and the
       <glareachart-stub
         data="[object Object]"
         height="264"
+        includelegendavgmax="true"
+        legendaveragetext="Avg"
+        legendmaxtext="Max"
         option="[object Object]"
+        thresholds=""
       />
     </div>
      
@@ -38,7 +42,11 @@ exports[`Contributors charts should render charts when loading completed and the
         <glareachart-stub
           data="[object Object]"
           height="216"
+          includelegendavgmax="true"
+          legendaveragetext="Avg"
+          legendmaxtext="Max"
           option="[object Object]"
+          thresholds=""
         />
       </div>
     </div>

spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap

@@ -16,11 +16,11 @@ exports[`grafana integration component default state to match the default snapsh
     
     </h4>
      
-    <glbutton-stub
+    <gl-button-stub
       class="js-settings-toggle"
     >
       Expand
-    </glbutton-stub>
+    </gl-button-stub>
      
     <p
       class="js-section-sub-header"
@@ -35,32 +35,32 @@ exports[`grafana integration component default state to match the default snapsh
     class="settings-content"
   >
     <form>
-      <glformcheckbox-stub
+      <gl-form-checkbox-stub
         class="mb-4"
         id="grafana-integration-enabled"
       >
         
         Active
       
-      </glformcheckbox-stub>
+      </gl-form-checkbox-stub>
        
-      <glformgroup-stub
+      <gl-form-group-stub
         description="Enter the base URL of the Grafana instance."
         label="Grafana URL"
         label-for="grafana-url"
       >
-        <glforminput-stub
+        <gl-form-input-stub
           id="grafana-url"
           placeholder="https://my-url.grafana.net/"
           value="http://test.host"
         />
-      </glformgroup-stub>
+      </gl-form-group-stub>
        
-      <glformgroup-stub
+      <gl-form-group-stub
         label="API Token"
         label-for="grafana-token"
       >
-        <glforminput-stub
+        <gl-form-input-stub
           id="grafana-token"
           value="someToken"
         />
@@ -86,15 +86,15 @@ exports[`grafana integration component default state to match the default snapsh
             />
           </a>
         </p>
-      </glformgroup-stub>
+      </gl-form-group-stub>
        
-      <glbutton-stub
+      <gl-button-stub
         variant="success"
       >
         
         Save Changes
       
-      </glbutton-stub>
+      </gl-button-stub>
     </form>
   </div>
 </section>

spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap

@@ -7,7 +7,7 @@ exports[`IDE pipeline stage renders stage details & icon 1`] = `
   <div
     class="card-header"
   >
-    <ciicon-stub
+    <ci-icon-stub
       cssclasses=""
       size="24"
       status="[object Object]"

spec/frontend/ide/components/pipelines/__snapshots__/list_spec.js.snap

@@ -6,7 +6,7 @@ exports[`IDE pipelines list when loaded renders empty state when no latestPipeli
 >
   <!---->
    
-  <emptystate-stub
+  <empty-state-stub
     cansetci="true"
     emptystatesvgpath="http://test.host"
     helppagepath="http://test.host"

spec/frontend/issuables_list/components/__snapshots__/issuables_list_app_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Issuables list component with empty issues response with all state should display a catch-all if there are no issues to show 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   description="The Issue Tracker is the place to add things that need to be improved or solved in a project. You can register or sign in to create issues for this project."
   svgpath="/emptySvg"
   title="There are no issues to show"

spec/frontend/monitoring/components/__snapshots__/empty_state_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EmptyState shows gettingStarted state 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   description="Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments."
   primarybuttonlink="/clustersPath"
   primarybuttontext="Install on clusters"
@@ -13,7 +13,7 @@ exports[`EmptyState shows gettingStarted state 1`] = `
 `;
 
 exports[`EmptyState shows loading state 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   description="Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available."
   primarybuttonlink="/documentationPath"
   primarybuttontext="View documentation"
@@ -25,7 +25,7 @@ exports[`EmptyState shows loading state 1`] = `
 `;
 
 exports[`EmptyState shows unableToConnect state 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   description="Ensure connectivity is available from the GitLab server to the Prometheus server"
   primarybuttonlink="/documentationPath"
   primarybuttontext="View documentation"

spec/frontend/monitoring/components/__snapshots__/group_empty_state_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`GroupEmptyState Renders an empty state for BAD_QUERY 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   primarybuttonlink="/path/to/settings"
   primarybuttontext="Verify configuration"
@@ -13,7 +13,7 @@ exports[`GroupEmptyState Renders an empty state for BAD_QUERY 1`] = `
 exports[`GroupEmptyState Renders an empty state for BAD_QUERY 2`] = `"The Prometheus server responded with \\"bad request\\". Please check your queries are correct and are supported in your Prometheus version. <a href=\\"/path/to/docs\\">More information</a>"`;
 
 exports[`GroupEmptyState Renders an empty state for CONNECTION_FAILED 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   description="We couldn't reach the Prometheus server. Either the server no longer exists or the configuration details need updating."
   primarybuttonlink="/path/to/settings"
@@ -26,7 +26,7 @@ exports[`GroupEmptyState Renders an empty state for CONNECTION_FAILED 1`] = `
 exports[`GroupEmptyState Renders an empty state for CONNECTION_FAILED 2`] = `undefined`;
 
 exports[`GroupEmptyState Renders an empty state for FOO STATE 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   description="An error occurred while loading the data. Please try again."
   svgpath="/path/to/empty-group-illustration.svg"
@@ -37,7 +37,7 @@ exports[`GroupEmptyState Renders an empty state for FOO STATE 1`] = `
 exports[`GroupEmptyState Renders an empty state for FOO STATE 2`] = `undefined`;
 
 exports[`GroupEmptyState Renders an empty state for LOADING 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   description="Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available."
   svgpath="/path/to/empty-group-illustration.svg"
@@ -48,7 +48,7 @@ exports[`GroupEmptyState Renders an empty state for LOADING 1`] = `
 exports[`GroupEmptyState Renders an empty state for LOADING 2`] = `undefined`;
 
 exports[`GroupEmptyState Renders an empty state for NO_DATA 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   svgpath="/path/to/empty-group-illustration.svg"
   title="No data to display"
@@ -58,7 +58,7 @@ exports[`GroupEmptyState Renders an empty state for NO_DATA 1`] = `
 exports[`GroupEmptyState Renders an empty state for NO_DATA 2`] = `"The data source is connected, but there is no data to display. <a href=\\"/path/to/docs\\">More information</a>"`;
 
 exports[`GroupEmptyState Renders an empty state for TIMEOUT 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   svgpath="/path/to/empty-group-illustration.svg"
   title="Connection timed out"
@@ -68,7 +68,7 @@ exports[`GroupEmptyState Renders an empty state for TIMEOUT 1`] = `
 exports[`GroupEmptyState Renders an empty state for TIMEOUT 2`] = `"Charts can't be displayed as the request for data has timed out. <a href=\\"/path/to/docs\\">More information</a>"`;
 
 exports[`GroupEmptyState Renders an empty state for UNKNOWN_ERROR 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   description="An error occurred while loading the data. Please try again."
   svgpath="/path/to/empty-group-illustration.svg"

spec/frontend/mr_popover/__snapshots__/mr_popover_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MR Popover loaded state matches the snapshot 1`] = `
-<glpopover-stub
+<gl-popover-stub
   boundary="viewport"
   cssclasses=""
   placement="top"
@@ -35,7 +35,7 @@ exports[`MR Popover loaded state matches the snapshot 1`] = `
         </span>
       </div>
        
-      <ciicon-stub
+      <ci-icon-stub
         cssclasses=""
         size="16"
         status="[object Object]"
@@ -56,11 +56,11 @@ exports[`MR Popover loaded state matches the snapshot 1`] = `
     
     </div>
   </div>
-</glpopover-stub>
+</gl-popover-stub>
 `;
 
 exports[`MR Popover shows skeleton-loader while apollo is loading 1`] = `
-<glpopover-stub
+<gl-popover-stub
   boundary="viewport"
   cssclasses=""
   placement="top"
@@ -71,7 +71,7 @@ exports[`MR Popover shows skeleton-loader while apollo is loading 1`] = `
     class="mr-popover"
   >
     <div>
-      <glskeletonloading-stub
+      <gl-skeleton-loading-stub
         class="animation-container-small mt-1"
         lines="1"
       />
@@ -91,5 +91,5 @@ exports[`MR Popover shows skeleton-loader while apollo is loading 1`] = `
     
     </div>
   </div>
-</glpopover-stub>
+</gl-popover-stub>
 `;

spec/frontend/pages/admin/users/components/__snapshots__/delete_user_modal_spec.js.snap

@@ -29,7 +29,7 @@ exports[`User Operation confirmation modal renders modal with form included 1`]
       value="csrf"
     />
      
-    <glforminput-stub
+    <gl-form-input-stub
       autocomplete="off"
       autofocus=""
       name="username"
@@ -38,26 +38,26 @@ exports[`User Operation confirmation modal renders modal with form included 1`]
     />
   </form>
    
-  <glbutton-stub
+  <gl-button-stub
     variant="secondary"
   >
     Cancel
-  </glbutton-stub>
+  </gl-button-stub>
    
-  <glbutton-stub
+  <gl-button-stub
     disabled="true"
     variant="warning"
   >
     
       secondaryAction
     
-  </glbutton-stub>
+  </gl-button-stub>
    
-  <glbutton-stub
+  <gl-button-stub
     disabled="true"
     variant="danger"
   >
     action
-  </glbutton-stub>
+  </gl-button-stub>
 </div>
 `;

spec/frontend/pages/admin/users/components/__snapshots__/user_operation_confirmation_modal_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`User Operation confirmation modal renders modal with form included 1`] = `
-<glmodal-stub
+<gl-modal-stub
   modalclass=""
   modalid="user-operation-modal"
   ok-title="action"
@@ -29,5 +29,5 @@ exports[`User Operation confirmation modal renders modal with form included 1`]
       value="csrf"
     />
   </form>
-</glmodal-stub>
+</gl-modal-stub>
 `;

spec/frontend/registry/settings/components/__snapshots__/registry_settings_app_spec.js.snap

@@ -20,6 +20,6 @@ exports[`Registry Settings App renders 1`] = `
     </li>
   </ul>
    
-  <settingsform-stub />
+  <settings-form-stub />
 </div>
 `;

spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap

@@ -16,7 +16,7 @@ exports[`Settings Form renders 1`] = `
     <div
       class="card-body"
     >
-      <glformgroup-stub
+      <gl-form-group-stub
         id="expiration-policy-toggle-group"
         label="Expiration policy:"
         label-align="right"
@@ -26,7 +26,7 @@ exports[`Settings Form renders 1`] = `
         <div
           class="d-flex align-items-start"
         >
-          <gltoggle-stub
+          <gl-toggle-stub
             id="expiration-policy-toggle"
             labeloff="Toggle Status: OFF"
             labelon="Toggle Status: ON"
@@ -41,16 +41,16 @@ exports[`Settings Form renders 1`] = `
             </strong>
           </span>
         </div>
-      </glformgroup-stub>
+      </gl-form-group-stub>
        
-      <glformgroup-stub
+      <gl-form-group-stub
         id="expiration-policy-interval-group"
         label="Expiration interval:"
         label-align="right"
         label-cols="3"
         label-for="expiration-policy-interval"
       >
-        <glformselect-stub
+        <gl-form-select-stub
           id="expiration-policy-interval"
         >
           <option
@@ -64,17 +64,17 @@ exports[`Settings Form renders 1`] = `
           >
             Option 2
           </option>
-        </glformselect-stub>
-      </glformgroup-stub>
+        </gl-form-select-stub>
+      </gl-form-group-stub>
        
-      <glformgroup-stub
+      <gl-form-group-stub
         id="expiration-policy-schedule-group"
         label="Expiration schedule:"
         label-align="right"
         label-cols="3"
         label-for="expiration-policy-schedule"
       >
-        <glformselect-stub
+        <gl-form-select-stub
           id="expiration-policy-schedule"
         >
           <option
@@ -88,17 +88,17 @@ exports[`Settings Form renders 1`] = `
           >
             Option 2
           </option>
-        </glformselect-stub>
-      </glformgroup-stub>
+        </gl-form-select-stub>
+      </gl-form-group-stub>
        
-      <glformgroup-stub
+      <gl-form-group-stub
         id="expiration-policy-latest-group"
         label="Expiration latest:"
         label-align="right"
         label-cols="3"
         label-for="expiration-policy-latest"
       >
-        <glformselect-stub
+        <gl-form-select-stub
           id="expiration-policy-latest"
         >
           <option
@@ -112,10 +112,10 @@ exports[`Settings Form renders 1`] = `
           >
             Option 2
           </option>
-        </glformselect-stub>
-      </glformgroup-stub>
+        </gl-form-select-stub>
+      </gl-form-group-stub>
        
-      <glformgroup-stub
+      <gl-form-group-stub
         id="expiration-policy-name-matching-group"
         invalid-feedback="The value of this input should be less than 255 characters"
         label="Expire Docker tags with name matching:"
@@ -123,32 +123,32 @@ exports[`Settings Form renders 1`] = `
         label-cols="3"
         label-for="expiration-policy-name-matching"
       >
-        <glformtextarea-stub
+        <gl-form-textarea-stub
           id="expiration-policy-name-matching"
           placeholder=".*"
           trim=""
           value=""
         />
-      </glformgroup-stub>
+      </gl-form-group-stub>
     </div>
      
     <div
       class="card-footer text-right"
     >
-      <glbutton-stub
+      <gl-button-stub
         type="reset"
       >
         Cancel
-      </glbutton-stub>
+      </gl-button-stub>
        
-      <glbutton-stub
+      <gl-button-stub
         type="submit"
         variant="success"
       >
         
         Save Expiration Policy
       
-      </glbutton-stub>
+      </gl-button-stub>
     </div>
   </form>
 </div>

spec/frontend/repository/components/__snapshots__/directory_download_links_spec.js.snap

@@ -16,22 +16,22 @@ exports[`Repository directory download links component renders downloads links f
     <div
       class="btn-group ml-0 w-100"
     >
-      <gllink-stub
+      <gl-link-stub
         class="btn btn-xs btn-primary"
         href="http://test.com/?path=app"
       >
         
         zip
       
-      </gllink-stub>
-      <gllink-stub
+      </gl-link-stub>
+      <gl-link-stub
         class="btn btn-xs"
         href="http://test.com/?path=app"
       >
         
         tar
       
-      </gllink-stub>
+      </gl-link-stub>
     </div>
   </div>
 </section>
@@ -53,22 +53,22 @@ exports[`Repository directory download links component renders downloads links f
     <div
       class="btn-group ml-0 w-100"
     >
-      <gllink-stub
+      <gl-link-stub
         class="btn btn-xs btn-primary"
         href="http://test.com/?path=app/assets"
       >
         
         zip
       
-      </gllink-stub>
-      <gllink-stub
+      </gl-link-stub>
+      <gl-link-stub
         class="btn btn-xs"
         href="http://test.com/?path=app/assets"
       >
         
         tar
       
-      </gllink-stub>
+      </gl-link-stub>
     </div>
   </div>
 </section>

spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap

@@ -4,7 +4,7 @@ exports[`Repository last commit component renders commit widget 1`] = `
 <div
   class="info-well d-none d-sm-flex project-last-commit commit p-3"
 >
-  <useravatarlink-stub
+  <user-avatar-link-stub
     class="avatar-cell"
     imgalt=""
     imgcssclasses=""
@@ -22,32 +22,32 @@ exports[`Repository last commit component renders commit widget 1`] = `
     <div
       class="commit-content qa-commit-content"
     >
-      <gllink-stub
+      <gl-link-stub
         class="commit-row-message item-title"
         href="https://test.com/commit/123"
       >
         
           Commit title
         
-      </gllink-stub>
+      </gl-link-stub>
        
       <!---->
        
       <div
         class="committer"
       >
-        <gllink-stub
+        <gl-link-stub
           class="commit-author-link js-user-link"
           href="https://test.com/test"
         >
           
             Test
           
-        </gllink-stub>
+        </gl-link-stub>
         
           authored
           
-        <timeagotooltip-stub
+        <timeago-tooltip-stub
           cssclass=""
           time="2019-01-01"
           tooltipplacement="bottom"
@@ -65,18 +65,18 @@ exports[`Repository last commit component renders commit widget 1`] = `
       <div
         class="ci-status-link"
       >
-        <gllink-stub
+        <gl-link-stub
           class="js-commit-pipeline"
           href="https://test.com/pipeline"
           title="Commit: failed"
         >
-          <ciicon-stub
+          <ci-icon-stub
             aria-label="Commit: failed"
             cssclasses=""
             size="24"
             status="[object Object]"
           />
-        </gllink-stub>
+        </gl-link-stub>
       </div>
        
       <div
@@ -90,7 +90,7 @@ exports[`Repository last commit component renders commit widget 1`] = `
           
         </div>
          
-        <clipboardbutton-stub
+        <clipboard-button-stub
           cssclass="btn-default"
           text="123456789"
           title="Copy commit SHA"
@@ -106,7 +106,7 @@ exports[`Repository last commit component renders the signature HTML as returned
 <div
   class="info-well d-none d-sm-flex project-last-commit commit p-3"
 >
-  <useravatarlink-stub
+  <user-avatar-link-stub
     class="avatar-cell"
     imgalt=""
     imgcssclasses=""
@@ -124,32 +124,32 @@ exports[`Repository last commit component renders the signature HTML as returned
     <div
       class="commit-content qa-commit-content"
     >
-      <gllink-stub
+      <gl-link-stub
         class="commit-row-message item-title"
         href="https://test.com/commit/123"
       >
         
           Commit title
         
-      </gllink-stub>
+      </gl-link-stub>
        
       <!---->
        
       <div
         class="committer"
       >
-        <gllink-stub
+        <gl-link-stub
           class="commit-author-link js-user-link"
           href="https://test.com/test"
         >
           
             Test
           
-        </gllink-stub>
+        </gl-link-stub>
         
           authored
           
-        <timeagotooltip-stub
+        <timeago-tooltip-stub
           cssclass=""
           time="2019-01-01"
           tooltipplacement="bottom"
@@ -171,18 +171,18 @@ exports[`Repository last commit component renders the signature HTML as returned
       <div
         class="ci-status-link"
       >
-        <gllink-stub
+        <gl-link-stub
           class="js-commit-pipeline"
           href="https://test.com/pipeline"
           title="Commit: failed"
         >
-          <ciicon-stub
+          <ci-icon-stub
             aria-label="Commit: failed"
             cssclasses=""
             size="24"
             status="[object Object]"
           />
-        </gllink-stub>
+        </gl-link-stub>
       </div>
        
       <div
@@ -196,7 +196,7 @@ exports[`Repository last commit component renders the signature HTML as returned
           
         </div>
          
-        <clipboardbutton-stub
+        <clipboard-button-stub
           cssclass="btn-default"
           text="123456789"
           title="Copy commit SHA"

spec/frontend/repository/components/last_commit_spec.js

@@ -116,12 +116,16 @@ describe('Repository last commit component', () => {
   it('expands commit description when clicking expander', () => {
     factory(createCommitData({ description: 'Test description' }));
 
-    vm.find('.text-expander').vm.$emit('click');
-
-    return vm.vm.$nextTick().then(() => {
-      expect(vm.find('.commit-row-description').isVisible()).toBe(true);
-      expect(vm.find('.text-expander').classes('open')).toBe(true);
-    });
+    return vm.vm
+      .$nextTick()
+      .then(() => {
+        vm.find('.text-expander').vm.$emit('click');
+        return vm.vm.$nextTick();
+      })
+      .then(() => {
+        expect(vm.find('.commit-row-description').isVisible()).toBe(true);
+        expect(vm.find('.text-expander').classes('open')).toBe(true);
+      });
   });
 
   it('renders the signature HTML as returned by the backend', () => {

spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap

@@ -15,13 +15,13 @@ exports[`Repository file preview component renders file HTML 1`] = `
         class="fa fa-file-text-o fa-fw"
       />
        
-      <gllink-stub
+      <gl-link-stub
         href="http://test.com"
       >
         <strong>
           README.md
         </strong>
-      </gllink-stub>
+      </gl-link-stub>
     </div>
   </div>
    

spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap

@@ -32,7 +32,7 @@ exports[`Repository table row component renders table row 1`] = `
   <td
     class="d-none d-sm-table-cell tree-commit"
   >
-    <glskeletonloading-stub
+    <gl-skeleton-loading-stub
       class="h-auto"
       lines="1"
     />
@@ -41,7 +41,7 @@ exports[`Repository table row component renders table row 1`] = `
   <td
     class="tree-time-ago text-right"
   >
-    <glskeletonloading-stub
+    <gl-skeleton-loading-stub
       class="ml-auto h-auto w-50"
       lines="1"
     />

spec/frontend/sidebar/__snapshots__/todo_spec.js.snap

@@ -26,7 +26,7 @@ exports[`SidebarTodo template renders component container element with proper da
     Mark as done
   </span>
    
-  <glloadingicon-stub
+  <gl-loading-icon-stub
     color="orange"
     inline="true"
     label="Loading"

spec/frontend/vue_shared/components/__snapshots__/expand_button_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Expand button on click when short text is provided renders button after text 1`] = `"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <!----> <span><p>Expanded!</p></span> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button></span>"`;
+exports[`Expand button on click when short text is provided renders button after text 1`] = `
+"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <!----> <span><p>Expanded!</p></span> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\">
+    <use xlink:href=\\"#ellipsis_h\\"></use>
+  </svg></button></span>"
+`;
 
-exports[`Expand button when short text is provided renders button before text 1`] = `"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <span><p>Short</p></span> <!----> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button></span>"`;
+exports[`Expand button when short text is provided renders button before text 1`] = `
+"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <span><p>Short</p></span>
+<!----> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\">
+    <use xlink:href=\\"#ellipsis_h\\"></use>
+  </svg></button></span>"
+`;

spec/frontend/vue_shared/components/__snapshots__/memory_graph_spec.js.snap

@@ -5,7 +5,7 @@ exports[`MemoryGraph Render chart should draw container with chart 1`] = `
   class="memory-graph-container p-1"
   style="width: 100px;"
 >
-  <glsparklinechart-stub
+  <gl-sparkline-chart-stub
     data="Nov 12 2019 19:17:33,2.87,Nov 12 2019 19:18:33,2.78,Nov 12 2019 19:19:33,2.78,Nov 12 2019 19:20:33,3.01"
     height="25"
     tooltiplabel="MB"

spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SplitButton renders actionItems 1`] = `
-<gldropdown-stub
+<gl-dropdown-stub
   menu-class="dropdown-menu-selectable "
   split="true"
   text="professor"
   variant="secondary"
 >
-  <gldropdownitem-stub
+  <gl-dropdown-item-stub
     active="true"
     active-class="is-active"
   >
@@ -18,10 +18,10 @@ exports[`SplitButton renders actionItems 1`] = `
     <div>
       very symphonic
     </div>
-  </gldropdownitem-stub>
+  </gl-dropdown-item-stub>
    
-  <gldropdowndivider-stub />
-  <gldropdownitem-stub
+  <gl-dropdown-divider-stub />
+  <gl-dropdown-item-stub
     active-class="is-active"
   >
     <strong>
@@ -31,8 +31,8 @@ exports[`SplitButton renders actionItems 1`] = `
     <div>
       warp drive
     </div>
-  </gldropdownitem-stub>
+  </gl-dropdown-item-stub>
    
   <!---->
-</gldropdown-stub>
+</gl-dropdown-stub>
 `;

yarn.lock

@@ -1067,7 +1067,7 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
-"@types/node@*", "@types/node@>=6", "@types/node@^10.11.7":
+"@types/node@*", "@types/node@>=6":
   version "10.12.9"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.9.tgz#a07bfa74331471e1dc22a47eb72026843f7b95c8"
   integrity sha512-eajkMXG812/w3w4a1OcBlaTwsFPO5F7fJ/amy+tieQxEMWBlbV1JGSjkFM+zkHNf81Cad+dfIRA+IBkvmvdAeA==
@@ -1077,11 +1077,6 @@
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.0.tgz#9ae2106efc443d7c1e26570aa8247828c9c80f11"
   integrity sha512-J5D3z703XTDIGQFYXsnU9uRCW9e9mMEFO0Kpe6kykyiboqziru/RlZ0hM2P+PKTG4NHG1SjLrqae/NrV2iJApQ==
 
-"@types/semver@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-5.5.0.tgz#146c2a29ee7d3bae4bf2fcb274636e264c813c45"
-  integrity sha512-41qEJgBH/TWgo5NFSvBCJ1qkoi3Q6ONSF2avrHq1LVEZfYpdHmj0y9SuTK+u9ZhG1sYQKBL1AWXKyLWP4RaUoQ==
-
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -1172,12 +1167,14 @@
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.9.0"
 
-"@vue/test-utils@^1.0.0-beta.25":
-  version "1.0.0-beta.25"
-  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.25.tgz#4703076de3076bac42cdd242cd53e6fb8752ed8c"
-  integrity sha512-mfvguEmEpAn0BuT4u+qm+0J1NTKgQS+ffUyWHY1QeSovIkJcy98fj1rO+PJgiZSEvGjjnDNX+qmofYFPLrofbA==
+"@vue/test-utils@^1.0.0-beta.30":
+  version "1.0.0-beta.30"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.30.tgz#d5f26d1e2411fdb7fa7fdedb61b4b4ea4194c49d"
+  integrity sha512-Wyvcha9fNk8+kzTDwb3xWGjPkCPzHSYSwKP6MplrPTG/auhqoad7JqUEceZLc6u7AU4km2pPQ8/m9s0RgCZ0NA==
   dependencies:
-    lodash "^4.17.4"
+    dom-event-types "^1.0.0"
+    lodash "^4.17.15"
+    pretty "^2.0.0"
 
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
@@ -2840,6 +2837,15 @@ concat-stream@^1.5.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+condense-newlines@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/condense-newlines/-/condense-newlines-0.2.1.tgz#3de985553139475d32502c83b02f60684d24c55f"
+  integrity sha1-PemFVTE5R10yUCyDsC9gaE0kxV8=
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-whitespace "^0.3.0"
+    kind-of "^3.0.2"
+
 config-chain@^1.1.12:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
@@ -3873,6 +3879,11 @@ document-register-element@1.13.1:
   dependencies:
     lightercollective "^0.1.0"
 
+dom-event-types@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dom-event-types/-/dom-event-types-1.0.0.tgz#5830a0a29e1bf837fe50a70cd80a597232813cae"
+  integrity sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==
+
 dom-serialize@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"
@@ -3980,15 +3991,13 @@ editions@^1.3.3:
   resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.4.tgz#3662cb592347c3168eb8e498a0ff73271d67f50b"
   integrity sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg==
 
-editorconfig@^0.15.2:
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.2.tgz#047be983abb9ab3c2eefe5199cb2b7c5689f0702"
-  integrity sha512-GWjSI19PVJAM9IZRGOS+YKI8LN+/sjkSjNyvxL5ucqP9/IqtYNXBaQ/6c/hkPNYQHyOHra2KoXZI/JVpuqwmcQ==
+editorconfig@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
+  integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
   dependencies:
-    "@types/node" "^10.11.7"
-    "@types/semver" "^5.5.0"
     commander "^2.19.0"
-    lru-cache "^4.1.3"
+    lru-cache "^4.1.5"
     semver "^5.6.0"
     sigmund "^1.0.1"
 
@@ -6180,6 +6189,11 @@ is-whitespace-character@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz#ede53b4c6f6fb3874533751ec9280d01928d03ed"
   integrity sha512-SzM+T5GKUCtLhlHFKt2SDAX2RFzfS6joT91F2/WSi9LxgFdsnhfPK/UIA+JhRR2xuyLdrCys2PiFDrtn1fU5hQ==
 
+is-whitespace@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
+  integrity sha1-Fjnssb4DauxppUy7QBz77XEUq38=
+
 is-windows@^1.0.1, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -6746,15 +6760,15 @@ js-base64@^2.1.8:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
   integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==
 
-js-beautify@^1.8.8:
-  version "1.8.9"
-  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.8.9.tgz#08e3c05ead3ecfbd4f512c3895b1cda76c87d523"
-  integrity sha512-MwPmLywK9RSX0SPsUJjN7i+RQY9w/yC17Lbrq9ViEefpLRgqAR2BgrMN2AbifkUuhDV8tRauLhLda/9+bE0YQA==
+js-beautify@^1.6.12, js-beautify@^1.8.8:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.10.2.tgz#88c9099cd6559402b124cfab18754936f8a7b178"
+  integrity sha512-ZtBYyNUYJIsBWERnQP0rPN9KjkrDfJcMjuVGcvXOUJrD1zmOGwhRwQ4msG+HJ+Ni/FA7+sRQEMYVzdTQDvnzvQ==
   dependencies:
     config-chain "^1.1.12"
-    editorconfig "^0.15.2"
+    editorconfig "^0.15.3"
     glob "^7.1.3"
-    mkdirp "~0.5.0"
+    mkdirp "~0.5.1"
     nopt "~4.0.1"
 
 js-cookie@^2.1.3:
@@ -7350,7 +7364,7 @@ lowlight@^1.11.0:
     fault "^1.0.2"
     highlight.js "~9.13.0"
 
-lru-cache@4.1.x, lru-cache@^4.0.1, lru-cache@^4.1.2, lru-cache@^4.1.3:
+lru-cache@4.1.x, lru-cache@^4.0.1, lru-cache@^4.1.2, lru-cache@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
   integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
@@ -7796,7 +7810,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@0.5.x, mkdirp@0.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+mkdirp@0.5.x, mkdirp@0.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
@@ -8985,6 +8999,15 @@ pretty-format@^24.8.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
+pretty@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5"
+  integrity sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU=
+  dependencies:
+    condense-newlines "^0.2.1"
+    extend-shallow "^2.0.1"
+    js-beautify "^1.6.12"
+
 prismjs@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.6.0.tgz#118d95fb7a66dba2272e343b345f5236659db365"