Merge pull request #39150 from code-dot-org/cforkish/LP-1739-add-csa-…

…upsell-banner

added CSA to course explorer table

shared/css/course-explorer.scss

@@ -72,6 +72,11 @@ $color_border_invisible: rgba(170, 170, 170, 0);
     &.lighter {
     }
 
+    &.announcement {
+      font-size: 12px;
+      padding: 3px 10px;
+    }
+
     .arrow-down {
       font-size: 28px;
       margin-top: 7px;

shared/haml/course_explorer_table.haml

@@ -44,7 +44,36 @@
     }
 
 :ruby
+  show_csa = DCDO.get("courses_show_csa", false)
   courses = []
+  csa_offset = show_csa ? 1 : 0
+
+  if show_csa
+    courses << {
+      id: "csa",
+      name: "CSA",
+      starts: 10,
+      ends: 12,
+      range: "Grades 10-12",
+      regular_order: 0,
+      responsive_small_order: 0,
+      subtitle: "Full year course",
+      link: CDO.code_org_url('/educate/csa'),
+      img: "/shared/images/teacher-announcement/csa-upsell.png",
+      announcement: "<i>Coming in 2022</i>",
+      description: "
+        <p>In Computer Science A, students learn object-oriented
+        programming using Java. Students take on the role of software engineers,
+        and practice skills that are used in the field.</p>
+
+        <p>The Code.org CSA course is designed for any high school student who
+        wishes to continue their computer science education after completing an
+        introductory course such as Computer Science Principles (CSP) or Computer
+        Science Discoveries (CSD).</p>
+
+        <p>More information coming soon!</p>"
+    }
+  end
 
   csp_pl_link = CDO.code_org_url('/educate/professional-learning/middle-high')
   courses << {
@@ -53,8 +82,8 @@
     starts: 9,
     ends: 12,
     range: "Grades 9-12",
-    regular_order: 0,
-    responsive_small_order: 2,
+    regular_order: 0 + csa_offset,
+    responsive_small_order: 0 + csa_offset,
     subtitle: "Full year course",
     link: CDO.code_org_url("/educate/csp"),
     course_link: CDO.studio_url("/courses/csp"),
@@ -77,8 +106,8 @@
     starts: 6,
     ends: 10,
     range: "Grades 6-10",
-    regular_order: 1,
-    responsive_small_order: 1,
+    regular_order: 1 + csa_offset,
+    responsive_small_order: 1 + csa_offset,
     subtitle: "Semester or full year course",
     link: CDO.code_org_url("/educate/csd"),
     course_link: CDO.studio_url("/courses/csd"),
@@ -100,8 +129,8 @@
     name: "CS Fundamentals",
     starts: 0,
     ends: 5,
-    regular_order: 2,
-    responsive_small_order: 0,
+    regular_order: 2 + csa_offset,
+    responsive_small_order: 2 + csa_offset,
     range: "Grades K-5",
     subtitle: "12+ lesson courses for each grade can be taught once a week",
     link: CDO.code_org_url("/educate/curriculum/elementary-school"),
@@ -124,8 +153,8 @@
     starts: 0,
     ends: 2,
     range: "Grades K-2",
-    regular_order: 3,
-    responsive_small_order: 3,
+    regular_order: 3 + csa_offset,
+    responsive_small_order: 4 + csa_offset,
     subtitle: "",
     course_link: CDO.studio_url("/s/pre-express"),
     img: "/shared/images/courses/logo_tall_pre-express.jpg",
@@ -147,8 +176,8 @@
     starts: 3,
     ends: 12,
     range: "Grades 3-12",
-    regular_order: 4,
-    responsive_small_order: 4,
+    regular_order: 4 + csa_offset,
+    responsive_small_order: 3 + csa_offset,
     subtitle: "Condensed version of curriculum in one 30 hour course for older students",
     link: CDO.code_org_url("/educate/curriculum/express-course"),
     course_link: CDO.studio_url("/s/express"),
@@ -201,7 +230,7 @@
 -#
   We support two courses on the same line.  This is the index of the first of
   those two courses.
-- index_course_first_same_line = 3
+- index_course_first_same_line = 3 + csa_offset
 
 - if responsive
   .courseexplorer.courses.smallresponsive{style: "margin-left: 0px; margin-top: 30px;"}
@@ -216,9 +245,10 @@
               .arrow
                 %i.arrow-down{class: "fa fa-caret-down"}
                 %i.arrow-up{class: "fa fa-caret-up"}
-              - if course[:range]
+              - if course[:range] || course[:announcement]
                 %br/
                 = course[:range]
+                != course[:announcement]
           = detail_containers[course[:regular_order]]
           .cleardiv{style: "clear: both"}
       .professional-learning{style: "width: 100%; height: 56px"}
@@ -265,8 +295,11 @@
                 &nbsp;
             - courserow_class = "courserow clicktag bar-#{course[:ends] - course[:starts] + 1}"
             - courserow_class += " lighter" if course[:lighter]
+            - courserow_class += " announcement" if course[:announcement]
             %div{id: "click-#{course[:id]}", class: courserow_class}
               .left
+                - if course[:announcement]
+                  != course[:announcement]
                 .title
                   =course[:name]
               .arrow