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 000000000..9df8987cb Binary files /dev/null and b/src/skills-builder/images/headerImage.png differ diff --git a/src/skills-builder/skills-builder-header/SkillsBuilderHeader.jsx b/src/skills-builder/skills-builder-header/SkillsBuilderHeader.jsx new file mode 100644 index 000000000..2b411ccc9 --- /dev/null +++ b/src/skills-builder/skills-builder-header/SkillsBuilderHeader.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { useIntl } from '@edx/frontend-platform/i18n'; +import edXLogo from '../images/edX-logo.svg'; +import messages from './messages'; + +const SkillsBuilderHeader = () => { + 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..2d6f073c4 100644 --- a/src/skills-builder/test/SkillsBuilder.test.jsx +++ b/src/skills-builder/test/SkillsBuilder.test.jsx @@ -1,6 +1,6 @@ import { IntlProvider } from '@edx/frontend-platform/i18n'; -import { mount } from 'enzyme'; import React from 'react'; +import { screen, render } from '@testing-library/react'; import { SkillsBuilder } from '..'; 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(); }); });