From c53c3f021764fde3348883fd858b4419f9e25664 Mon Sep 17 00:00:00 2001 From: Justin Hynes Date: Fri, 3 Feb 2023 14:34:19 -0500 Subject: [PATCH] feat: add Skills Builder Header component, refactor to use ModalDialog [APER-2258] This PR adds the SkillsBuilderHeader component to the profile MFE. There was also some additional refactoring work required to display the header in the modal. The FullscreenModal component is not flexible enough to allow custom header designs to be displayed (only text). We have to pivot to using the `ModalDialog` family of components instead. --- package-lock.json | 102 ++++++++++++++++++ package.json | 1 + src/index.scss | 3 + src/skills-builder/images/edX-logo.svg | 3 + src/skills-builder/images/headerImage.png | Bin 0 -> 13433 bytes .../SkillsBuilderHeader.jsx | 25 +++++ .../skills-builder-header/index.js | 2 + .../skills-builder-header/messages.js | 16 +++ .../skillsBuilderHeader.scss | 8 ++ .../SkillsBuilderModal.jsx | 60 ++++++----- .../skillsBuilderModal.scss | 9 ++ .../test/SkillsBuilder.test.jsx | 10 +- 12 files changed, 210 insertions(+), 29 deletions(-) create mode 100644 src/skills-builder/images/edX-logo.svg create mode 100644 src/skills-builder/images/headerImage.png create mode 100644 src/skills-builder/skills-builder-header/SkillsBuilderHeader.jsx create mode 100644 src/skills-builder/skills-builder-header/index.js create mode 100644 src/skills-builder/skills-builder-header/messages.js create mode 100644 src/skills-builder/skills-builder-header/skillsBuilderHeader.scss create mode 100644 src/skills-builder/skills-builder-modal/skillsBuilderModal.scss diff --git a/package-lock.json b/package-lock.json index df0dbaad2..7ae9689bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,6 +47,7 @@ "@edx/browserslist-config": "^1.1.1", "@edx/frontend-build": "12.4.19", "@edx/reactifex": "2.1.1", + "@testing-library/react": "11.2.7", "codecov": "3.8.3", "enzyme": "3.11.0", "enzyme-adapter-react-16": "1.15.7", @@ -4156,6 +4157,42 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@testing-library/dom": { + "version": "7.31.2", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz", + "integrity": "sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^4.2.0", + "aria-query": "^4.2.2", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.6", + "lz-string": "^1.4.4", + "pretty-format": "^26.6.2" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@testing-library/react": { + "version": "11.2.7", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz", + "integrity": "sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@testing-library/dom": "^7.28.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "dev": true, @@ -4197,6 +4234,12 @@ "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==", "dev": true }, + "node_modules/@types/aria-query": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz", + "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==", + "dev": true + }, "node_modules/@types/babel__core": { "version": "7.20.0", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz", @@ -7529,6 +7572,12 @@ "node": ">=6.0.0" } }, + "node_modules/dom-accessibility-api": { + "version": "0.5.16", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", + "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", + "dev": true + }, "node_modules/dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -12690,6 +12739,15 @@ "node": ">=10" } }, + "node_modules/lz-string": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", + "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==", + "dev": true, + "bin": { + "lz-string": "bin/bin.js" + } + }, "node_modules/mailto-link": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mailto-link/-/mailto-link-2.0.0.tgz", @@ -22845,6 +22903,32 @@ "@svgr/plugin-svgo": "^6.2.0" } }, + "@testing-library/dom": { + "version": "7.31.2", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz", + "integrity": "sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^4.2.0", + "aria-query": "^4.2.2", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.6", + "lz-string": "^1.4.4", + "pretty-format": "^26.6.2" + } + }, + "@testing-library/react": { + "version": "11.2.7", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz", + "integrity": "sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.12.5", + "@testing-library/dom": "^7.28.1" + } + }, "@tootallnate/once": { "version": "1.1.2", "dev": true @@ -22879,6 +22963,12 @@ "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==", "dev": true }, + "@types/aria-query": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz", + "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==", + "dev": true + }, "@types/babel__core": { "version": "7.20.0", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz", @@ -25465,6 +25555,12 @@ "esutils": "^2.0.2" } }, + "dom-accessibility-api": { + "version": "0.5.16", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", + "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", + "dev": true + }, "dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -29304,6 +29400,12 @@ "yallist": "^4.0.0" } }, + "lz-string": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", + "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==", + "dev": true + }, "mailto-link": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mailto-link/-/mailto-link-2.0.0.tgz", diff --git a/package.json b/package.json index f02879998..24ff26ec5 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "@edx/browserslist-config": "^1.1.1", "@edx/frontend-build": "12.4.19", "@edx/reactifex": "2.1.1", + "@testing-library/react": "11.2.7", "codecov": "3.8.3", "enzyme": "3.11.0", "enzyme-adapter-react-16": "1.15.7", diff --git a/src/index.scss b/src/index.scss index 173e0ecb9..7b80a2bf6 100755 --- a/src/index.scss +++ b/src/index.scss @@ -6,3 +6,6 @@ @import "~@edx/frontend-component-footer/dist/footer"; @import './profile/index'; + +@import './skills-builder/skills-builder-modal/skillsBuilderModal.scss'; +@import './skills-builder/skills-builder-header/skillsBuilderHeader.scss'; diff --git a/src/skills-builder/images/edX-logo.svg b/src/skills-builder/images/edX-logo.svg new file mode 100644 index 000000000..400cff1f5 --- /dev/null +++ b/src/skills-builder/images/edX-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/skills-builder/images/headerImage.png b/src/skills-builder/images/headerImage.png new file mode 100644 index 0000000000000000000000000000000000000000..9df8987cba7f9944b67a0993f29f6bd99b3b2cf7 GIT binary patch literal 13433 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 bj$e?B*O8)(BQO5_V-W}{qa { + const { formatMessage } = useIntl(); + + return ( +
+ edx-logo +
+
+

+ {formatMessage(messages.skillsBuilderHeaderTitle)} +

+

+ {formatMessage(messages.skillsBuilderHeaderSubheading)} +

+
+
+ ); +}; + +export default SkillsBuilderHeader; diff --git a/src/skills-builder/skills-builder-header/index.js b/src/skills-builder/skills-builder-header/index.js new file mode 100644 index 000000000..00e6b020d --- /dev/null +++ b/src/skills-builder/skills-builder-header/index.js @@ -0,0 +1,2 @@ +// eslint-disable-next-line import/prefer-default-export +export { default as SkillsBuilderHeader } from './SkillsBuilderHeader'; diff --git a/src/skills-builder/skills-builder-header/messages.js b/src/skills-builder/skills-builder-header/messages.js new file mode 100644 index 000000000..1c7fabfb4 --- /dev/null +++ b/src/skills-builder/skills-builder-header/messages.js @@ -0,0 +1,16 @@ +import { defineMessages } from '@edx/frontend-platform/i18n'; + +const messages = defineMessages({ + skillsBuilderHeaderTitle: { + id: 'skills.builder.header.title', + defaultMessage: 'Skills Builder', + description: 'Title for the Skills Builder feature', + }, + skillsBuilderHeaderSubheading: { + id: 'skills.builder.header.subheading', + defaultMessage: 'Let edX be your guide', + description: 'Subheading to the Skills Builder title in the header component', + }, +}); + +export default messages; diff --git a/src/skills-builder/skills-builder-header/skillsBuilderHeader.scss b/src/skills-builder/skills-builder-header/skillsBuilderHeader.scss new file mode 100644 index 000000000..1d47b42f9 --- /dev/null +++ b/src/skills-builder/skills-builder-header/skillsBuilderHeader.scss @@ -0,0 +1,8 @@ +.vertical-line { + border-left: 7px solid #D23228; + transform: rotate(13deg); +} + +.header-title { + color: #F0CC00; +} diff --git a/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx b/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx index 1019b944f..e6f0e298e 100644 --- a/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx +++ b/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx @@ -3,8 +3,8 @@ import { ActionRow, Button, Container, - FullscreenModal, Form, + ModalDialog, } from '@edx/paragon'; import { FormattedMessage } from '@edx/frontend-platform/i18n'; import { @@ -12,6 +12,9 @@ import { } from '../data/actions'; import messages from './messages'; import { SkillsBuilderContext } from '../skills-builder-context'; +import { SkillsBuilderHeader } from '../skills-builder-header'; + +import headerImage from '../images/headerImage.png'; const SkillsBuilderModal = () => { const onCloseHandle = () => { @@ -19,15 +22,42 @@ const SkillsBuilderModal = () => { }; const [state, dispatch] = useContext(SkillsBuilderContext); - const [learnerGoal, setLearnerGoal] = useState(''); return ( - + + + + + + + + + + +

Your current goal: {state.currentGoal}

+
+ + setLearnerGoal(e.target.value)} + /> + + + + + - )} - > - -

Your current goal: {state.currentGoal}

-
- - setLearnerGoal(e.target.value)} - /> - - - - + + ); }; diff --git a/src/skills-builder/skills-builder-modal/skillsBuilderModal.scss b/src/skills-builder/skills-builder-modal/skillsBuilderModal.scss new file mode 100644 index 000000000..f3cf538a1 --- /dev/null +++ b/src/skills-builder/skills-builder-modal/skillsBuilderModal.scss @@ -0,0 +1,9 @@ +.skills-builder-modal { + .pgn__modal-close-button{ + color: #ffffff !important; + } + + .pgn__modal-hero-bg { + background-color: #00262B; + } +} diff --git a/src/skills-builder/test/SkillsBuilder.test.jsx b/src/skills-builder/test/SkillsBuilder.test.jsx index ef2fda900..a99573722 100644 --- a/src/skills-builder/test/SkillsBuilder.test.jsx +++ b/src/skills-builder/test/SkillsBuilder.test.jsx @@ -1,7 +1,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n'; -import { mount } from 'enzyme'; import React from 'react'; import { SkillsBuilder } from '..'; +import { screen, render } from '@testing-library/react'; const SkillsBuilderWrapper = () => ( @@ -11,9 +11,9 @@ const SkillsBuilderWrapper = () => ( describe('skills-builder', () => { it('should render a Skills Builder modal', () => { - const component = ; - const wrapper = mount(component); - const modal = wrapper.find(SkillsBuilder); - expect(modal.find('h2').text()).toBe('Skills Builder'); + render( + + ); + expect(screen.getByText("Skills Builder")).toBeTruthy(); }); });