-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: adding program card functionality/formatting (#178)
* feat: adding program card * fix: failing tests with config changes * fix: lint changes * fix: PR requests
- Loading branch information
Showing
17 changed files
with
281 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| /* eslint-disable camelcase */ | ||
| // variables taken from algolia not in camelcase | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import classNames from 'classnames'; | ||
|
|
||
| import { | ||
| Badge, | ||
| Image, | ||
| Icon, | ||
| Card, | ||
| } from '@edx/paragon'; | ||
| import { Program } from '@edx/paragon/icons'; | ||
|
|
||
| import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; | ||
| import messages from './ProgramCard.messages'; | ||
|
|
||
| function makePlural(num, string) { | ||
| if (num > 1) { return (`${num} ${string}s`); } | ||
| return (`${num} ${string}`); | ||
| } | ||
|
|
||
| const ProgramCard = ({ | ||
| intl, onClick, className, original, | ||
| }) => { | ||
| const { | ||
| title, | ||
| card_image_url, | ||
| course_keys, | ||
| partners, | ||
| enterprise_catalog_query_titles, | ||
| program_type, | ||
| } = original; | ||
| return ( | ||
| <Card className={className} tabIndex="0" onClick={() => onClick(original)}> | ||
| <Card.Img | ||
| className="cards-course-image" | ||
| variant="top" | ||
| src={card_image_url} | ||
| alt={title} | ||
| /> | ||
| {(partners.length !== 0) && <Image className="mr-2 cards-partner-logo" src={partners[0].logo_image_url} rounded />} | ||
| <div className="cards-title"> | ||
| <p className="program-title">{title}</p> | ||
| {(partners.length !== 0) && <p className="small">{ partners[0].name }</p>} | ||
| </div> | ||
| <span className="cards-spacing" /> | ||
|
|
||
| <div className="cards-body"> | ||
| <div className="d-flex"> | ||
| <Badge | ||
| variant="light" | ||
| className={classNames( | ||
| 'program d-flex justify-content-center align-items-center text-primary-500', 'mb-2', | ||
| )} | ||
| > | ||
| <Icon src={Program} className="badge-icon" /> | ||
| <span className="badge-text"> {program_type} </span> | ||
| </Badge> | ||
| </div> | ||
| <p className="x-small mb-2 mt-2">{makePlural(course_keys.length, 'Course')}</p> | ||
| {enterprise_catalog_query_titles && ( | ||
| <div style={{ maxWidth: '400vw' }}> | ||
| { | ||
| enterprise_catalog_query_titles.includes(process.env.EDX_ENTERPRISE_ALACARTE_TITLE) | ||
| && <Badge variant="info" className="ml-0 bright padded-catalog">{intl.formatMessage(messages['ProgramCard.aLaCarteBadge'])}</Badge> | ||
| } | ||
| { | ||
| enterprise_catalog_query_titles.includes(process.env.EDX_FOR_BUSINESS_TITLE) | ||
| && <Badge variant="secondary" className="padded-catalog">{intl.formatMessage(messages['ProgramCard.businessBadge'])}</Badge> | ||
| } | ||
| { | ||
| enterprise_catalog_query_titles.includes(process.env.EDX_FOR_ONLINE_EDU_TITLE) | ||
| && ( | ||
| <Badge className="padded-catalog" variant="light"> | ||
| {intl.formatMessage(messages['ProgramCard.educationBadge'])} | ||
| </Badge> | ||
| ) | ||
| } | ||
| </div> | ||
| )} | ||
| </div> | ||
| </Card> | ||
| ); | ||
| }; | ||
|
|
||
| ProgramCard.defaultProps = { | ||
| className: '', | ||
| onClick: () => {}, | ||
| }; | ||
|
|
||
| ProgramCard.propTypes = { | ||
| intl: intlShape.isRequired, | ||
| className: PropTypes.string, | ||
| onClick: PropTypes.func, | ||
| original: PropTypes.shape({ | ||
| title: PropTypes.string, | ||
| card_image_url: PropTypes.string, | ||
| course_keys: PropTypes.arrayOf(PropTypes.string), | ||
| partners: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string, logo_image_url: PropTypes.string })), | ||
| enterprise_catalog_query_titles: PropTypes.arrayOf(PropTypes.string), | ||
| program_type: PropTypes.string, | ||
| }).isRequired, | ||
| }; | ||
|
|
||
| export default injectIntl(ProgramCard); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { defineMessages } from '@edx/frontend-platform/i18n'; | ||
|
|
||
| const messages = defineMessages({ | ||
| 'ProgramCard.relatedSkillsHeading': { | ||
| id: 'ProgramCard.relatedSkillsHeading', | ||
| defaultMessage: 'Related skills', | ||
| description: 'Heading of related skills section', | ||
| }, | ||
| 'ProgramCard.aLaCarteBadge': { | ||
| id: 'ProgramCard.aLaCarteBadge', | ||
| defaultMessage: 'A la carte', | ||
| description: 'Badge text for the `A La Carte` catalog badge.', | ||
| }, | ||
| 'ProgramCard.businessBadge': { | ||
| id: 'ProgramCard.businessBadge', | ||
| defaultMessage: 'Business', | ||
| description: 'Badge text for the `Business` catalog badge.', | ||
| }, | ||
| 'ProgramCard.educationBadge': { | ||
| id: 'ProgramCard.educationBadge', | ||
| defaultMessage: 'Education', | ||
| description: 'Badge text for the `Education` catalog badge.', | ||
| }, | ||
| 'ProgramCard.priceNotAvailable': { | ||
| id: 'ProgramCard.priceNotAvailable', | ||
| defaultMessage: ' Not Available', | ||
| description: 'When a course price is not available, notify learners that there is no data available to display.', | ||
| }, | ||
| }); | ||
|
|
||
| export default messages; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import React from 'react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import '@testing-library/jest-dom/extend-expect'; | ||
|
|
||
| import { IntlProvider } from '@edx/frontend-platform/i18n'; | ||
| import ProgramCard from './ProgramCard'; | ||
|
|
||
| const originalData = { | ||
| title: 'Program Title', | ||
| card_image_url: '', | ||
| course_keys: ['edx+123', 'edx-321'], | ||
| partners: [{ logo_image_url: '', name: 'Course Provider' }], | ||
| program_type: 'Professional Certificate', | ||
| enterprise_catalog_query_titles: [], | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| original: originalData, | ||
| }; | ||
|
|
||
| describe('Program card works as expected', () => { | ||
| test('card renders as expected', () => { | ||
| render( | ||
| <IntlProvider locale="en"> | ||
| <ProgramCard {...defaultProps} /> | ||
| </IntlProvider>, | ||
| ); | ||
| expect(screen.queryByText(defaultProps.original.title)).toBeInTheDocument(); | ||
| expect(screen.queryByText(defaultProps.original.partners[0].name)).toBeInTheDocument(); | ||
| expect(screen.queryByText(defaultProps.original.program_type)).toBeInTheDocument(); | ||
| expect(screen.queryByText('2 Courses')).toBeInTheDocument(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export const FEATURE_ENABLE_PROGRAMS = 'ENABLE_PROGRAMS'; | ||
| export const FEATURE_PROGRAM_TYPE_FACET = 'ENABLE_PROGRAM_TYPE_FACET'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import qs from 'query-string'; | ||
| import { | ||
| FEATURE_ENABLE_PROGRAMS, | ||
| FEATURE_PROGRAM_TYPE_FACET, | ||
| } from './constants'; | ||
|
|
||
| const hasFeatureFlagEnabled = (featureFlag) => { | ||
| const { features } = qs.parse(window.location.search); | ||
| return features && features.split(',').includes(featureFlag); | ||
| }; | ||
|
|
||
| const features = { | ||
| ENABLE_PROGRAMS: (process.env.FEATURE_ENABLE_PROGRAMS === 'true') || hasFeatureFlagEnabled(FEATURE_ENABLE_PROGRAMS), | ||
| PROGRAM_TYPE_FACET: (process.env.FEATURE_PROGRAM_TYPE_FACET === 'true') || hasFeatureFlagEnabled(FEATURE_PROGRAM_TYPE_FACET), | ||
| }; | ||
|
|
||
| export default features; |
Oops, something went wrong.