WIP: Feature branch for Skills Quiz V2

src/components/skills-quiz-v2/ClosingAlert.jsx

@@ -0,0 +1,27 @@
+import { ActionRow, AlertModal, Button } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+const ClosingAlert = ({ navigateToSearchPage, hideCloseAlert, showAlert }) => (
+  <AlertModal
+    title="Exit Skills builder?"
+    isOpen={showAlert}
+    onClose={hideCloseAlert}
+    footerNode={(
+      <ActionRow className="mb-3.5">
+        <Button variant="tertiary" onClick={hideCloseAlert}>Back to Skills builder</Button>
+        <Button variant="primary" onClick={navigateToSearchPage}>Exit</Button>
+      </ActionRow>
+    )}
+  >
+    <p>
+      Learners who enroll in courses that align with their career goals are more likely to complete the course.
+    </p>
+  </AlertModal>
+);
+ClosingAlert.propTypes = {
+  navigateToSearchPage: PropTypes.func.isRequired,
+  hideCloseAlert: PropTypes.func.isRequired,
+  showAlert: PropTypes.bool.isRequired,
+};
+
+export default ClosingAlert;

src/components/skills-quiz-v2/CourseCard.jsx

@@ -0,0 +1,19 @@
+import { Card } from '@edx/paragon';
+
+const CourseCard = () => (
+  <Card>
+    <Card.ImageCap
+      src="fakeURL"
+      srcAlt="Card image"
+      logoSrc="fakeURL"
+      fallbackLogoSrc="https://www.edx.org/images/logos/edx-logo-elm.svg"
+      logoAlt="Card logo"
+    />
+    <Card.Header title="Title" subtitle="Subtitle" />
+    <Card.Section title="Section title">
+      This is a card section. It can contain anything but usually text, a list, or list of links.
+      Multiple sections have a card divider between them.
+    </Card.Section>
+  </Card>
+);
+export default CourseCard;

src/components/skills-quiz-v2/SkillsQuiz.jsx

@@ -0,0 +1,154 @@
+/* eslint-disable object-curly-newline */
+import React, { useState, useContext } from 'react';
+import {
+  ModalDialog, Container, Button, SelectableBox, Chip, CardGrid,
+} from '@edx/paragon';
+import { useHistory } from 'react-router-dom';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import GoalDropdown from '../skills-quiz/GoalDropdown';
+import {
+  InterestedJobs,
+  SKILLS_QUIZ_SEARCH_PAGE_MESSAGE_V2,
+} from './constants';
+import SkillsQuizHeader from './SkillsQuizHeader';
+
+import headerImage from '../skills-quiz/images/headerImage.png';
+import CourseCard from './CourseCard';
+import ClosingAlert from './ClosingAlert';
+
+const SkillsQuizV2 = () => {
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
+
+  const { enterpriseConfig } = useContext(AppContext);
+  const [value, setValue] = useState('green');
+  const handleChange = (e) => setValue(e.target.value);
+  const history = useHistory();
+  const [showAlert, setShowAlert] = useState(false);
+
+  const showCloseAlert = () => {
+    setShowAlert(true);
+  };
+
+  const navigateToSearchPage = () => {
+    history.push(`/${enterpriseConfig.slug}/search`);
+  };
+
+  const hideCloseAlert = () => {
+    setShowAlert(false);
+  };
+
+  return (
+    <ModalDialog
+      title="Skills Quiz"
+      size="fullscreen"
+      className="bg-light-200 skills-quiz-modal"
+      isOpen
+      onClose={showCloseAlert}
+    >
+      <ModalDialog.Hero className="md-img">
+        <ModalDialog.Hero.Background
+          backgroundSrc={headerImage}
+        />
+        <ModalDialog.Hero.Content style={{ maxWidth: '15rem' }}>
+          <SkillsQuizHeader />
+        </ModalDialog.Hero.Content>
+      </ModalDialog.Hero>
+      <ModalDialog.Body>
+        <Container size="lg">
+          <div className="skills-quiz-dropdown my-4">
+            <p>
+              {SKILLS_QUIZ_SEARCH_PAGE_MESSAGE_V2}
+            </p>
+            <h5 className="mt-3.5">
+              What roles are you interested in?
+            </h5>
+            <div className="mt-1">
+              <GoalDropdown />
+              <Button
+                variant="link"
+                className="mb-2 mb-sm-0 p-0 text-decoration-none"
+                onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
+              >
+                {showAdvancedOptions ? 'Hide advanced options' : 'Show advanced options'}
+              </Button>
+            </div>
+            {showAdvancedOptions
+                            && (
+                              <div>
+                                <h5 className="mt-3.5">
+                                  Tell us about what you want to acheive
+                                </h5>
+                                <div className="mt-2">
+                                  <GoalDropdown />
+                                </div>
+                                <h5 className="mt-3.5">
+                                  Search and select your current job title
+                                </h5>
+                                <div className="mt-2">
+                                  <GoalDropdown />
+                                </div>
+                                <h5 className="mt-3.5">
+                                  What industry are you interested in?
+                                </h5>
+                                <div className="mt-2">
+                                  <GoalDropdown />
+                                </div>
+                              </div>
+                            )}
+          </div>
+          <div>
+            <SelectableBox.Set
+              type="radio"
+              value={value}
+              onChange={handleChange}
+              name="interested-jobs"
+              columns="3"
+              className="selectable-box "
+            >
+              {InterestedJobs.map((job) => (
+                <SelectableBox
+                  className="box"
+                  value={job.name}
+                  inputHidden={false}
+                  type="radio"
+                  aria-label={job.name}
+                >
+                  <div>
+                    <div className="lead">{job.name}</div>
+                    <div className="x-small">Related skills</div>
+                    {job.skills.slice(0, 5).map((skill) => (
+                      <div>
+                        <Chip>{skill}</Chip>
+                      </div>
+                    ))}
+                  </div>
+                </SelectableBox>
+              ))}
+            </SelectableBox.Set>
+          </div>
+          <div className="mt-3.5">
+            <h4>Boot Camps for a Web technology Specialist</h4>
+            <CardGrid
+              columnSizes={{
+                xs: 12,
+                lg: 6,
+                xl: 6,
+              }}
+            >
+              <CourseCard />
+              <CourseCard />
+            </CardGrid>
+          </div>
+          <ClosingAlert
+            navigateToSearchPage={navigateToSearchPage}
+            hideCloseAlert={hideCloseAlert}
+            showAlert={showAlert}
+          />
+        </Container>
+      </ModalDialog.Body>
+    </ModalDialog>
+  );
+};
+
+export default SkillsQuizV2;

src/components/skills-quiz-v2/SkillsQuizHeader.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import edxLogo from '../skills-quiz/images/edx-logo.svg';
+
+const SkillsQuizHeader = () => (
+  <div style={{ display: 'flex' }} className="ml-2">
+    <img src={edxLogo} alt="edx-logo" height="110px" />
+    <div
+      className="ml-5 vertical-line"
+    />
+    <div style={{ minWidth: 'max-content' }} className="ml-5 header-text">
+      <h1 className="heading">Skills builder</h1>
+      <h1 className="subheading-v2">
+        Let edX be your guide
+      </h1>
+    </div>
+  </div>
+);
+
+export default SkillsQuizHeader;

src/components/skills-quiz-v2/constants.js

@@ -0,0 +1,15 @@
+export const SKILLS_QUIZ_SEARCH_PAGE_MESSAGE_V2 = 'We combine the educational expertise with labor market data to help you reach your learning and professional goals. Whether you are looking to grow in your career, change careers, or just learn new skills, this toll can help you find a relevant course. Your role selection and recommendations are private and are not visible to your edX administrator.';
+export const InterestedJobs = [
+  {
+    name: 'Product Associate',
+    skills: ['Data Analysis', 'Communication', 'Strategy'],
+  },
+  {
+    name: 'Python Developer',
+    skills: ['Data Analysis', 'Django', 'Flask', 'Rest', 'Database'],
+  },
+  {
+    name: 'Django Developer',
+    skills: ['Data Analysis', 'Django', 'Flask'],
+  },
+];

src/components/skills-quiz-v2/styles/_JobCard.scss

@@ -0,0 +1,13 @@
+$dark-500: #00262b !default;
+
+.selectable-box {
+  .box {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+  .pgn__form-radio-input {
+    min-width: 21px;
+    min-height: 21px;
+  }
+}

src/components/skills-quiz-v2/styles/_SkillsQuizHeader.scss

@@ -0,0 +1,37 @@
+.bg-img{
+  min-height: 13vw;
+}
+
+.skills-quiz-modal{
+  .pgn__modal-close-button{
+    color: #ffffff !important;
+ }
+}
+
+.vertical-line{
+  border-left: 7px solid #D23228;
+  transform: rotate(13deg);
+}
+
+.heading{
+  color: #F0CC00;
+}
+.subheading{
+  color: #FFFFFF;
+  line-height: 36px;
+  letter-spacing: 1px;
+  font-size: 25px;
+}
+
+.header-text{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+
+.subheading-v2{
+  color: #FFFFFF;
+  line-height: 36px;
+  letter-spacing: 1px;
+  font-size: 40px;
+}

src/components/skills-quiz-v2/styles/index.scss

@@ -0,0 +1,2 @@
+@import './SkillsQuizHeader';
+@import './JobCard';

src/components/skills-quiz/SkillsQuiz.jsx

@@ -11,21 +11,27 @@ import {
 import { MainContent } from '../layout';
 import SkillsQuizStepper from './SkillsQuizStepper';
 import { SkillsContextProvider } from './SkillsContextProvider';
+import SkillsQuizV2 from '../skills-quiz-v2/SkillsQuiz';
 
 const SkillsQuiz = () => {
   const { enterpriseConfig } = useContext(AppContext);
   const PAGE_TITLE = `Skills Quiz - ${enterpriseConfig.name}`;
-
+  const v1 = true;
   return (
     <>
       <Helmet title={PAGE_TITLE} />
       <Container size="lg" className="py-5">
         <Row>
           <MainContent>
+
             <SearchData>
+
               <SkillsContextProvider>
-                <SkillsQuizStepper />
+                {v1
+                  ? <SkillsQuizStepper />
+                  : <SkillsQuizV2 />}
               </SkillsContextProvider>
+
             </SearchData>
           </MainContent>
         </Row>

src/index.scss

@@ -21,6 +21,7 @@ $fa-font-path: "~font-awesome/fonts";
 @import "./components/dashboard/styles/SubscriptionExpirationModal";
 @import "./components/dashboard/styles/CourseRecommendations";
 @import "./components/skills-quiz/styles";
+@import "./components/skills-quiz-v2/styles";
 @import "./components/site-header/styles/Header";
 @import "./components/preview-expand/styles/PreviewExpand";
 @import "./components/pathway/styles";