Merge pull request #23902 from code-dot-org/courses-international-gra…

…de-bands

Courses: international users see grade blocks for en courses

apps/i18n/common/en_us.json

@@ -254,6 +254,14 @@
   "courseBlocksGradeBandsMiddleDescription": "Our new middle school course can be offered as a semester or year-long introduction to computer science for all students.",
   "courseBlocksGradeBandsUniversity": "University+",
   "courseBlocksGradeBandsUniversityDescription": "Go beyond Code.org and take university courses online or learn a new programming language.",
+  "courseBlocksInternationalGradeBandsContainerDescription": "Below is the catalog of all of our courses and great options from third parties. Please note that some of these are only in English. Don't worry -- we're working on getting these courses translated into your language. Thanks for your patience!",
+  "courseBlocksInternationalGradeBandsContainerHeading": "Full course catalog (English only)",
+  "courseBlocksInternationalGradeBandsElementary": "Ages 4-11",
+  "courseBlocksInternationalGradeBandsElementaryDescription": "CS Fundamentals offers a variety of courses for students to explore programming concepts, computational thinking, digital citizenship, and to develop interactive games and stories.",
+  "courseBlocksInternationalGradeBandsHigh": "Ages 14-18+",
+  "courseBlocksInternationalGradeBandsHighDescription": "We offer two courses for secondary school: CS Discoveries and CS Principles. Both are designed to broaden participation in computer science.",
+  "courseBlocksInternationalGradeBandsMiddle": "Ages 10-16",
+  "courseBlocksInternationalGradeBandsMiddleDescription": "As flexible courses that can be taught in a unit, semester, or full year, CS Discoveries and CS Fundamentals Express introduce students to app design, JavaScript programming, physical computing, and more.",
   "courseBlocksToolsTitleTeacher": "Tools and resources for your classroom",
   "courseBlocksToolsTitleNonEn": "Tools for middle and high school (English only)",
   "courseBlocksToolsDescription": "In addition to our courses, teachers can use tools to teach students how to create apps, animations, games, or websites. We also have lessons and widgets to teach encryption, text compression, and other computer science concepts. Browse our other resources to inspire students with posters, videos, or by inviting guest speakers.",

apps/src/templates/studioHomepages/CourseBlocks.jsx

@@ -3,6 +3,7 @@ import React, {Component, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import ContentContainer from '../ContentContainer';
 import CourseBlocksTools from './CourseBlocksTools';
+import CourseBlocksInternationalGradeBands from './CourseBlocksInternationalGradeBands';
 import ProtectedStatefulDiv from '../ProtectedStatefulDiv';
 import i18n from "@cdo/locale";
 import {pegasus} from '@cdo/apps/lib/util/urlHelpers';
@@ -176,6 +177,10 @@ export class CourseBlocksAll extends Component {
           <CourseBlocksHoc rowCount={1}/>
         </ContentContainer>
 
+        {!this.props.isEnglish && (
+          <CourseBlocksInternationalGradeBands/>
+        )}
+
         <CourseBlocksTools
           isEnglish={this.props.isEnglish}
         />

apps/src/templates/studioHomepages/CourseBlocksInternationalGradeBands.jsx

@@ -0,0 +1,45 @@
+import React, {Component} from 'react';
+import ContentContainer from '../ContentContainer';
+import CourseBlocksGradeBands from './CourseBlocksGradeBands';
+import i18n from "@cdo/locale";
+
+class CourseBlocksInternationalGradeBands extends Component {
+  cards = [
+    {
+      linkId: 'course-block-international-grade-band-4-10',
+      linkClass: 'linktag',
+      heading: i18n.courseBlocksInternationalGradeBandsElementary(),
+      description: i18n.courseBlocksInternationalGradeBandsElementaryDescription(),
+      path: '/educate/curriculum/elementary-school'
+    },
+    {
+      linkId: 'course-block-international-grade-band-10-14',
+      linkClass: 'linktag',
+      heading: i18n.courseBlocksInternationalGradeBandsMiddle(),
+      description: i18n.courseBlocksInternationalGradeBandsMiddleDescription(),
+      path: '/educate/curriculum/middle-school'
+    },
+    {
+      linkId: 'course-block-international-grade-band-12-18',
+      linkClass: 'linktag',
+      heading: i18n.courseBlocksInternationalGradeBandsHigh(),
+      description: i18n.courseBlocksInternationalGradeBandsHighDescription(),
+      path: '/educate/curriculum/high-school'
+    }
+  ];
+
+  render() {
+    return (
+      <ContentContainer
+        heading={i18n.courseBlocksInternationalGradeBandsContainerHeading()}
+        description={i18n.courseBlocksInternationalGradeBandsContainerDescription()}
+      >
+        <CourseBlocksGradeBands
+          cards={this.cards}
+        />
+      </ContentContainer>
+    );
+  }
+}
+
+export default CourseBlocksInternationalGradeBands;

apps/src/templates/studioHomepages/CourseBlocksInternationalGradeBands.story.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import CourseBlocksInternationalGradeBands from './CourseBlocksInternationalGradeBands';
+
+export default storybook => {
+  return storybook
+    .storiesOf('Courses/CourseBlocksInternationalGradeBands', module)
+    .withReduxStore()
+    .addStoryTable([
+      {
+        name: 'course blocks - international grade bands',
+        description: `This is a set of course blocks listing international grade bands`,
+        story: () => (
+          <CourseBlocksInternationalGradeBands/>
+        )
+      },
+    ]);
+};