README.md

ASU Degree Pages

ASU Web Standards-based implementation of the Degree page component

Architecture details

Document reference

You can find the UX document here

All possible degree page sections

- Global header - Hero - Intro content - Next steps - Dedicated RFI - Degree listing - Areas of study	- Program rankings - Program facilities - Location(s) - Faculty - Testimonials - Global opportunities
- Portfolio/student work - Alumni/student feature - Customize your experience - At a glance - Application requirements - Contact information	- Change of major reqs. - Flexible degree options - Affording college/Fin aid - Attend online - Career outlook - Example careers

Degree listing page template

Degree listing pages are used for the actual degree browsing module where users can view a list of filterable degrees in either a table or grid view. Please note that the degree listing module is just one of several sections required for this template.

Notes:

Units can decide to use or not use the degree listing table column for college/school. Some colleges may display the different subunits . If they are all the same the college may want to turn this column off.

Program detail page template

Program detail pages are used for individual degrees or programs. It contains information relevant to each respective degree.This template can be used for all types of program detail pages, whether it's an undergrad degree, grad degree, or certificate/minor. However, each have certain requirements. See the notes section below.

Check out the UX document for more UI spec details.

Component views

The Degree Component has 2 types of views:

• Listing Page view
• Detail Page view

DegreePage properties

ListingPage component

You can find the full list of props types into the file listing-page-types.js here

  /**
  * @typedef {{
  *  actionUrls?: ActionUrlProps
  *  hero?: import("@asu/components-core").HeroProps
  *  introContent?: IntroContentProps
  *  hasSearchBar?: boolean
  *  hasFilters?: boolean
  *  programList: GridListProps
  * }} ListingPageProps
  */

DetailPage component

You can find the full list of props types into the file program-detail-types.js here

/**
 *  @typedef {{
 *   hide?: boolean
 *  }} HideProp
 *
 *  @typedef {{
 *  dataSource: import("./listing-page-types").ProgramDetailDataSource | string
 *  anchorMenu?: AnchorMenuProps
 *  hero?: HideProp & import("@asu/components-core").HeroProps
 *  introContent?: IntroContentProps
 *  programDescription?: ProgramDescriptionProps
 *  requiredCoursesProps?: RequiredCoursesProps
 *  atAGlance?: HideProp & AtAGlanceProps
 *  applicationRequirements?: HideProp
 *  changeMajorRequirements?: HideProp
 *  nextSteps?: HideProp & NextStepsProps
 *  affordingCollege?: HideProp
 *  flexibleDegreeOptions?: HideProp
 *  careerOutlook?: CareerOutlookProps
 *  exampleCareers?: HideProp
 *  globalOpportunity?: HideProp & GlobalOpportunityProps
 *  attendOnline?: HideProp &  AttendOnlineProps
 *  programContactInfo?: {
 *      departmentUrl: string
 *      emailUrl: string
 *  }
 * }} DetailPageProps
 */

Component props documentation

You can find a full list of props into the docs/README.props.md

CLI Commands

# add app-degree-pages
yarn add @asu/app-degree-pages

# run storybook
yarn storybook

# build for production with minification
yarn build

# run tests
yarn test

# run e2e tests
yarn storybbok
yarn e2e

# it generates the document `docs/README.props.md`
yarn docs

# it generates full jsdoc documentation
yarn jsdoc

How to install

1. Either make sure you are part of the ASU github organization and follow the instructions here,or, if you already are, you can clone this repo and run yarn install and yarn build to build the package locally.

2. yarn add @asu/app-degree-pages or npm install @asu/app-degree-pages

Use as a JS module in React app

ListingPage component

You can find an extended example of how to set ListingPage props here

  import { ListingPage } from '@asu/app-degree-pages'

  const ListingPageApp = ({
    actionUrls,
    hero,
    introContent,
    programList,
    hasFilters,
    hasSearchBar,
  }) => {
  return (
        <ListingPage
          actionUrls={actionUrls}
          hero={hero}
          introContent={introContent}
          programList={programList}
          hasSearchBar={hasSearchBar}
          hasFilters={hasFilters}
      />
    )
  };

DetailPage component

You can find an extended example of how to set DetailPage props here

 import { DetailPage } from '@asu/app-degree-pages'

 const DetailPageApp = ({
    dataSource,
    anchorMenu,
    introContent,
    hero,
    atAGlance,
    applicationRequirements,
    changeMajorRequirements,
    affordingCollege,
    flexibleDegreeOptions,
    careerOutlook,
    exampleCareers,
    globalOpportunity,
    programContactInfo,
    attendOnline,
    nextSteps,
  }) => (
    <DetailPage
      dataSource={dataSource}
      anchorMenu={anchorMenu}
      introContent={introContent}
      hero={hero}
      atAGlance={atAGlance}
      applicationRequirements={applicationRequirements}
      changeMajorRequirements={changeMajorRequirements}
      affordingCollege={affordingCollege}
      flexibleDegreeOptions={flexibleDegreeOptions}
      careerOutlook={careerOutlook}
      exampleCareers={exampleCareers}
      globalOpportunity={globalOpportunity}
      programContactInfo={programContactInfo}
      attendOnline={attendOnline}
      nextSteps={nextSteps}
    />
  );

Use on static HTML page

ListingPage component

You can find an extended example of how to set ListingPage props here

    <!-- FONTAWESOME loaded from CDN 'kit' URL -->
    <script
      src="https://kit.fontawesome.com/35fb12a3a9.js"
      crossorigin="anonymous"
    ></script>

    <link
      rel="stylesheet"
      href="https://asu.github.io/asu-unity-stack/@asu/unity-bootstrap-theme/css/unity-bootstrap-theme.bundle.css"
    />

    <!-- *************************************************************** -->
    <!-- Load React. -->
    <script
      src="https://unpkg.com/react@17/umd/react.production.min.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
      crossorigin
    ></script>
    <!-- *************************************************************** -->
    <!-- include bundled scripts from packages -->
    <script src="../dist/vendor.production.js"></script>
    <script src="../dist/degreePages.production.js"></script>

    <div id="degreePageContainer"></div>

    <script>
      AsuDegreePages.initListingPage({
        targetSelector: "#degreePageContainer",
        props: { /** See ee file examples/listing-page.html */ }
      });
    </script>

DetailPage component

You can find an extended example of how to set DetailPage props here

    <!-- FONTAWESOME loaded from CDN 'kit' URL -->
    <script
      src="https://kit.fontawesome.com/35fb12a3a9.js"
      crossorigin="anonymous"
    ></script>

    <link
      rel="stylesheet"
      href="https://asu.github.io/asu-unity-stack/@asu/unity-bootstrap-theme/css/unity-bootstrap-theme.bundle.css"
    />

    <!-- *************************************************************** -->
    <!-- Load React. -->
    <script
      src="https://unpkg.com/react@17/umd/react.production.min.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
      crossorigin
    ></script>
    <!-- *************************************************************** -->
    <!-- include bundled scripts from packages -->
    <script src="../dist/vendor.production.js"></script>
    <script src="../dist/degreePages.production.js"></script>

    <div id="degreePageContainer"></div>

    <script>
      AsuDegreePages.initProgramDetailPage({
        targetSelector: "#degreePageContainer",
        props: { /** See ee file examples/detail-page.htmll */ }
      });
    </script>

Examples

The folder packages/app-degree-pages/examples
contains examples to use the component on static HTML page

Examples - quick links

• Listing page
• Detail Page

Examples - run and test

If you want to test the examples files you need to install an application server
and run it into the folder /packages/app-degree-pages/examples.
For example, if you want to use the npm package lite-server follow these steps:

• run npm -g i lite-server.
  MAC users may need to use sudo npm -g i lite-server
• run cd packages/app-degree-pages
• run lite-server
• open the broweser to the url http://localhost:3000/examples/degree-page.html
  (port number may be different)

Future improvements

All the requirements for version 1 of this component were covered, further enhancements will be implemented in the next version.

Storybook

• Listing page
• Detail page

UX documents

• XD Degree Template Pages model
• XD Degree Listing Pages
• XD Degree Detail Page

Other docs

• Web Service Fields Descriptions
• Degree Search SEO // URLs + Descriptions

References

• Font Awesome
  • CDN link
• ASU unity-bootstrap-theme
  • CDN link
• React
• Add React to a Website
• Jest APIs
  • Jest Fetch Mock
  • Fix the "not wrapped in act(...)" warning
  • Mocking React Components with Jest
  • How to Test React Hooks (The Async Ones)
  • Checking children passed to a mock React component
  • Mocking document in jest
  • ISSUE with replaceall-is-not-a-function -Common mistakes with React Testing Library
• Type Checking JavaScript Files
• Cypress docs
  • Cypress Jest adapter
  • Cypress intellisense
• JSDoc Reference
  • Getting Started with JSDoc 3
  • JSDoc @template: Generics