Merge branch 'ag-rename-convdev-css' into 'master'

[Style] Rename ConvDev Index to DevOps Score

See merge request gitlab-org/gitlab!20648

app/assets/stylesheets/pages/convdev_index.scss

 $space-between-cards: 8px;
 
-.convdev-empty svg {
+.devops-empty svg {
   margin: 64px auto 32px;
   max-width: 420px;
 }
 
-.convdev-header {
+.devops-header {
   margin-top: $gl-padding;
   margin-bottom: $gl-padding;
   padding: 0 4px;
   display: flex;
   align-items: center;
 
-  .convdev-header-title {
+  .devops-header-title {
     font-size: 48px;
     line-height: 1;
     margin: 0;
   }
 
-  .convdev-header-subtitle {
+  .devops-header-subtitle {
     font-size: 22px;
     line-height: 1;
     color: $gl-text-color-secondary;
@@ -36,13 +36,13 @@ $space-between-cards: 8px;
   }
 }
 
-.convdev-cards {
+.devops-cards {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }
 
-.convdev-card-wrapper {
+.devops-card-wrapper {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -70,7 +70,7 @@ $space-between-cards: 8px;
   }
 }
 
-.convdev-card {
+.devops-card {
   border: solid 1px $border-color;
   border-radius: 3px;
   border-top-width: 3px;
@@ -79,7 +79,7 @@ $space-between-cards: 8px;
   flex-grow: 1;
 }
 
-.convdev-card-low {
+.devops-card-low {
   border-top-color: $red-400;
 
   .board-card-score-big {
@@ -87,7 +87,7 @@ $space-between-cards: 8px;
   }
 }
 
-.convdev-card-average {
+.devops-card-average {
   border-top-color: $orange-400;
 
   .board-card-score-big {
@@ -95,7 +95,7 @@ $space-between-cards: 8px;
   }
 }
 
-.convdev-card-high {
+.devops-card-high {
   border-top-color: $green-400;
 
   .board-card-score-big {
@@ -103,7 +103,7 @@ $space-between-cards: 8px;
   }
 }
 
-.convdev-card-title {
+.devops-card-title {
   margin: $gl-padding auto auto;
   max-width: 100px;
 
@@ -170,7 +170,7 @@ $space-between-cards: 8px;
   }
 }
 
-.convdev-steps {
+.devops-steps {
   margin-top: $gl-padding;
   height: 1px;
   min-width: 100%;
@@ -179,7 +179,7 @@ $space-between-cards: 8px;
   background: $border-color;
 }
 
-.convdev-step {
+.devops-step {
   $step-positions: 5% 10% 30% 42% 48% 55% 60% 70% 75% 90%;
   @each $pos in $step-positions {
     $i: index($step-positions, $pos);
@@ -212,7 +212,7 @@ $space-between-cards: 8px;
     height: auto;
     width: auto;
 
-    .convdev-step-title {
+    .devops-step-title {
       max-height: 2em;
       opacity: 1;
       transition: opacity 0.2s;
@@ -233,7 +233,7 @@ $space-between-cards: 8px;
   }
 }
 
-.convdev-step-title {
+.devops-step-title {
   max-height: 0;
   opacity: 0;
   text-transform: uppercase;
@@ -242,14 +242,14 @@ $space-between-cards: 8px;
   font-size: 12px;
 }
 
-.convdev-high-score {
+.devops-high-score {
   color: $green-400;
 }
 
-.convdev-average-score {
+.devops-average-score {
   color: $orange-400;
 }
 
-.convdev-low-score {
+.devops-low-score {
   color: $red-400;
 }

app/assets/stylesheets/pages/profile.scss

@@ -349,7 +349,7 @@ table.u2f-registrations {
         vertical-align: top;
       }
 
-      &.convdev {
+      &.devops {
         margin: 0 0 0 30px;
 
         svg {
@@ -382,7 +382,7 @@ table.u2f-registrations {
           height: 75px;
         }
 
-        &.convdev {
+        &.devops {
           margin: $gl-padding auto 0;
 
           svg {

app/views/instance_statistics/conversational_development_index/_callout.html.haml

@@ -9,5 +9,5 @@
         = _('Introducing Your Conversational Development Index')
       %p
         = _('Your Conversational Development Index gives an overview of how you are using GitLab from a feature perspective. View how you compare with other organizations, discover features you are not using, and learn best practices through blog posts and white papers.')
-    .svg-container.convdev
+    .svg-container.devops
       = custom_icon('convdev_overview')

app/views/instance_statistics/conversational_development_index/_card.html.haml

-.convdev-card-wrapper
-  .convdev-card{ class: "convdev-card-#{score_level(card.percentage_score)}" }
-    .convdev-card-title
+.devops-card-wrapper
+  .devops-card{ class: "devops-card-#{score_level(card.percentage_score)}" }
+    .devops-card-title
       %h3
         = card.title
       .light-text

app/views/instance_statistics/conversational_development_index/_disabled.html.haml

-.container.convdev-empty
+.container.devops-empty
   .col-sm-12.justify-content-center.text-center
     = custom_icon('convdev_no_index')
     %h4= _('Usage ping is not enabled')

app/views/instance_statistics/conversational_development_index/_no_data.html.haml

-.container.convdev-empty
+.container.devops-empty
   .col-sm-12.justify-content-center.text-center
     = custom_icon('convdev_no_data')
     %h4= _('Data is still calculating...')

app/views/instance_statistics/conversational_development_index/index.html.haml

@@ -11,23 +11,23 @@
   - elsif @metric.blank?
     = render 'no_data'
   - else
-    .convdev
-      .convdev-header
-        %h2.convdev-header-title{ class: "convdev-#{score_level(@metric.average_percentage_score)}-score" }
+    .devops
+      .devops-header
+        %h2.devops-header-title{ class: "devops-#{score_level(@metric.average_percentage_score)}-score" }
           = number_to_percentage(@metric.average_percentage_score, precision: 1)
-        .convdev-header-subtitle
+        .devops-header-subtitle
           = _('index')
           %br
           = _('score')
           = link_to icon('question-circle', 'aria-hidden' => 'true'), help_page_path('user/instance_statistics/convdev')
 
-      .convdev-cards.board-card-container
+      .devops-cards.board-card-container
         - @metric.cards.each do |card|
           = render 'card', card: card
 
-      .convdev-steps.d-none.d-lg-block.d-xl-block
+      .devops-steps.d-none.d-lg-block.d-xl-block
         - @metric.idea_to_production_steps.each_with_index do |step, index|
-          .convdev-step{ class: "convdev-#{score_level(step.percentage_score)}-score" }
+          .devops-step{ class: "devops-#{score_level(step.percentage_score)}-score" }
             = custom_icon("i2p_step_#{index + 1}")
-            %h4.convdev-step-title
+            %h4.devops-step-title
               = step.title