Add preparing state icons

Added the preparing stage icons and icons colors

app/assets/stylesheets/framework/icons.scss

@@ -31,7 +31,16 @@
   }
 }
 
-.ci-status-icon-preparing,
+.ci-status-icon-preparing {
+  svg {
+    fill: $gray-500;
+  }
+
+  &.add-border {
+    @include borderless-status-icon($gray-500);
+  }
+}
+
 .ci-status-icon-running {
   svg {
     fill: $blue-400;

app/assets/stylesheets/pages/status.scss

@@ -37,6 +37,10 @@
     }
   }
 
+  &.ci-preparing {
+    @include status-color($gray-100, $gray-500, $gray-600);
+  }
+
   &.ci-pending,
   &.ci-failed-with-warnings,
   &.ci-success-with-warnings {
@@ -44,7 +48,6 @@
   }
 
   &.ci-info,
-  &.ci-preparing,
   &.ci-running {
     @include status-color($blue-100, $blue-500, $blue-600);
   }

app/helpers/ci_status_helper.rb

@@ -77,6 +77,8 @@ module CiStatusHelper
         'status_failed'
       when 'pending'
         'status_pending'
+      when 'preparing'
+        'status_preparing'
       when 'running'
         'status_running'
       when 'play'

changelogs/unreleased/update-preparing-stage-icon.yml

+---
+title: Add pipeline preparing status icons
+merge_request: 17923
+author:
+type: added

lib/gitlab/badge/pipeline/template.rb

@@ -15,7 +15,7 @@ module Gitlab
           failed: '#e05d44',
           running: '#dfb317',
           pending: '#dfb317',
-          preparing: '#dfb317',
+          preparing: '#a7a7a7',
           canceled: '#9f9f9f',
           skipped: '#9f9f9f',
           unknown: '#9f9f9f'

lib/gitlab/ci/status/preparing.rb

@@ -12,20 +12,12 @@ module Gitlab
           s_('CiStatusLabel|preparing')
         end
 
-        ##
-        # TODO: shared with 'created'
-        # until we get one for 'preparing'
-        #
         def icon
-          'status_created'
+          'status_preparing'
         end
 
-        ##
-        # TODO: shared with 'created'
-        # until we get one for 'preparing'
-        #
         def favicon
-          'favicon_status_created'
+          'favicon_status_preparing'
         end
       end
     end

package.json

@@ -37,7 +37,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/preset-env": "^7.6.2",
-    "@gitlab/svgs": "^1.75.0",
+    "@gitlab/svgs": "^1.76.0",
     "@gitlab/ui": "5.27.0",
     "@gitlab/visual-review-tools": "1.0.3",
     "apollo-cache-inmemory": "^1.5.1",

spec/lib/gitlab/badge/pipeline/template_spec.rb

@@ -67,7 +67,7 @@ describe Gitlab::Badge::Pipeline::Template do
       end
 
       it 'has expected color' do
-        expect(template.value_color).to eq '#dfb317'
+        expect(template.value_color).to eq '#a7a7a7'
       end
     end
 

spec/lib/gitlab/ci/status/preparing_spec.rb

@@ -16,11 +16,11 @@ describe Gitlab::Ci::Status::Preparing do
   end
 
   describe '#icon' do
-    it { expect(subject.icon).to eq 'status_created' }
+    it { expect(subject.icon).to eq 'status_preparing' }
   end
 
   describe '#favicon' do
-    it { expect(subject.favicon).to eq 'favicon_status_created' }
+    it { expect(subject.favicon).to eq 'favicon_status_preparing' }
   end
 
   describe '#group' do

spec/lib/gitlab/favicon_spec.rb

@@ -57,6 +57,7 @@ RSpec.describe Gitlab::Favicon, :request_store do
         favicon_status_manual
         favicon_status_not_found
         favicon_status_pending
+        favicon_status_preparing
         favicon_status_running
         favicon_status_scheduled
         favicon_status_skipped

yarn.lock

@@ -990,10 +990,10 @@
   dependencies:
     vue-eslint-parser "^6.0.4"
 
-"@gitlab/svgs@^1.75.0":
-  version "1.75.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.75.0.tgz#93f9e6bdef78dd84ac88d8273711dc1f25e4e5ac"
-  integrity sha512-hOCfF73++yG+KTYxaQNMkbDUg0XKije41g6XR2dgj7466rzZmebG/nt6pUXonmlqy/NLGaRUPBKs0zuM7tcLhA==
+"@gitlab/svgs@^1.76.0":
+  version "1.76.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.76.0.tgz#2def3b5542d23259e81c889c75059a5d1f1e3f61"
+  integrity sha512-wTCNSq3CxNrEzrJdEbf8GwHfhzEsUMJNEuGTBGGhe1qc0sY5z/U3s3HG7tdAOrB5pec9JarRXzc7g5ax9bsopQ==
 
 "@gitlab/ui@5.27.0":
   version "5.27.0"