Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: add support of css-variables to redwood #6

Merged
merged 4 commits into from
May 28, 2024
Merged

perf: add support of css-variables to redwood #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
81da309
perf: add support of css-variables to redwood
bra-i-am May 20, 2024
92f70a7
fix: update test snapshots
bra-i-am May 21, 2024
7348902
refactor: add frontend-platform dep from npm
bra-i-am May 22, 2024
0a79eb2
refactor: rename frontend-build github branch
bra-i-am May 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17,103 changes: 10,847 additions & 6,256 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 7 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"lint": "fedx-scripts eslint --ext .js --ext .jsx .",
"snapshot": "fedx-scripts jest --updateSnapshot",
"start": "fedx-scripts webpack-dev-server --progress",
"test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
"test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
"replace-variables": "paragon replace-variables -p src -t usage"
},
"bugs": {
"url": "https://github.com/openedx/frontend-app-account/issues"
Expand All @@ -28,16 +29,16 @@
],
"dependencies": {
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
"@edx/frontend-component-footer": "13.1.0",
"@edx/frontend-component-header": "5.3.0",
"@edx/frontend-platform": "8.0.1",
"@edx/frontend-component-footer": "npm:@edunext/frontend-component-footer@13.0.4-alpha.1",
"@edx/frontend-component-header": "npm:@edunext/frontend-component-header@5.0.2-alpha.1",
"@edx/frontend-platform": "npm:@edunext/frontend-platform@7.1.2-alpha.1",
"@edx/openedx-atlas": "^0.6.0",
"@fortawesome/fontawesome-svg-core": "1.2.36",
"@fortawesome/free-brands-svg-icons": "5.15.4",
"@fortawesome/free-regular-svg-icons": "5.15.4",
"@fortawesome/free-solid-svg-icons": "5.15.4",
"@fortawesome/react-fontawesome": "0.2.0",
"@openedx/paragon": "22.0.0",
"@openedx/paragon": "23.0.0-alpha.1",
"@tensorflow-models/blazeface": "0.0.7",
"@tensorflow/tfjs-converter": "3.21.0",
"@tensorflow/tfjs-core": "3.21.0",
Expand Down Expand Up @@ -83,7 +84,7 @@
"devDependencies": {
"@edx/browserslist-config": "1.2.0",
"@edx/reactifex": "1.1.0",
"@openedx/frontend-build": "14.0.3",
"@openedx/frontend-build": "github:edunext/frontend-build#ednx-release/css-variables-13.1.4",
"@testing-library/jest-dom": "6.4.5",
"@testing-library/react": "12.1.5",
"react-test-renderer": "17.0.2",
Expand Down
4 changes: 2 additions & 2 deletions src/account-settings/AccountSettingsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -843,12 +843,12 @@ class AccountSettingsPage extends React.Component {
</h1>
<div>
<div className="row">
<div className="col-md-2">
<div className="col-md-3">
<JumpNav
displayDemographicsLink={this.props.formValues.shouldDisplayDemographicsSection}
/>
</div>
<div className="col-md-10">
<div className="col-md-9">
{loading ? this.renderLoading() : null}
{loaded ? this.renderContent() : null}
{loadingError ? this.renderError() : null}
Expand Down
2 changes: 1 addition & 1 deletion ...nt-settings/certificate-preference/test/__snapshots__/CertificatePreference.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`NameChange does not render if there is no verified name 1`] = `
{
Object {
"asFragment": [Function],
"baseElement": <body>
<div />
Expand Down
22 changes: 11 additions & 11 deletions src/account-settings/delete-account/ConfirmationModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';

import {
AlertModal,
Button, Input, ValidationFormGroup, ActionRow,
AlertModal, Button, Form, ActionRow,
} from '@openedx/paragon';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { faExclamationCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
Expand Down Expand Up @@ -107,22 +106,23 @@ export class ConfirmationModal extends Component {
<PrintingInstructions />
</p>
</Alert>
<ValidationFormGroup
for={passwordFieldId}
invalid={errorType !== null}
invalidMessage={intl.formatMessage(invalidMessage)}
>
<label className="d-block" htmlFor={passwordFieldId}>
<Form.Group isInvalid={errorType !== null} controlId={passwordFieldId}>
<Form.Label className="d-block" htmlFor={passwordFieldId}>
{intl.formatMessage(messages['account.settings.delete.account.modal.enter.password'])}
</label>
<Input
</Form.Label>
<Form.Control
name="password"
id={passwordFieldId}
type="password"
value={password}
onChange={onChange}
/>
</ValidationFormGroup>
{errorType !== null && (
<Form.Control.Feedback type="invalid">
{intl.formatMessage(invalidMessage)}
</Form.Control.Feedback>
)}
</Form.Group>
</div>

</AlertModal>
Expand Down
8 changes: 4 additions & 4 deletions src/account-settings/delete-account/__snapshots__/BeforeProceedingBanner.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ exports[`BeforeProceedingBanner should match the snapshot if SUPPORT_URL_TO_UNLI
data-prefix="fas"
focusable="false"
role="img"
style={{}}
style={Object {}}
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
fill="currentColor"
style={{}}
style={Object {}}
/>
</svg>
</div>
Expand All @@ -41,14 +41,14 @@ exports[`BeforeProceedingBanner should match the snapshot when SUPPORT_URL_TO_UN
data-prefix="fas"
focusable="false"
role="img"
style={{}}
style={Object {}}
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
fill="currentColor"
style={{}}
style={Object {}}
/>
</svg>
</div>
Expand Down
118 changes: 70 additions & 48 deletions src/account-settings/delete-account/__snapshots__/ConfirmationModal.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
exports[`ConfirmationModal should match default closed confirmation modal snapshot 1`] = `null`;

exports[`ConfirmationModal should match empty password confirmation modal snapshot 1`] = `
[
Array [
<div
data-focus-guard={true}
style={
{
Object {
"height": "0px",
"left": "1px",
"overflow": "hidden",
Expand Down Expand Up @@ -41,7 +41,7 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
/>
<div
aria-label="Are you sure?"
className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
role="dialog"
>
<div
Expand Down Expand Up @@ -74,14 +74,14 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
data-prefix="fas"
focusable="false"
role="img"
style={{}}
style={Object {}}
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
fill="currentColor"
style={{}}
style={Object {}}
/>
</svg>
</div>
Expand All @@ -107,14 +107,14 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
data-prefix="fas"
focusable="false"
role="img"
style={{}}
style={Object {}}
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
fill="currentColor"
style={{}}
style={Object {}}
/>
</svg>
</div>
Expand All @@ -131,30 +131,55 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
</div>
</div>
<div
className="form-group"
data-testid="validation-form-group"
className="pgn__form-group"
>
<label
className="d-block"
className="pgn__form-label d-block"
htmlFor="passwordFieldId"
>
If you still wish to continue and delete your account, please enter your account password:
</label>
<input
aria-describedby="passwordFieldId-invalid-feedback"
className="form-control is-invalid"
id="passwordFieldId"
name="password"
onChange={[MockFunction]}
type="password"
value="fluffy bunnies"
/>
<strong
className="invalid-feedback"
id="passwordFieldId-invalid-feedback"
<div
className="pgn__form-control-decorator-group"
>
A password is required
</strong>
<input
aria-describedby="passwordFieldId-3"
className="has-value form-control is-invalid"
id="passwordFieldId"
name="password"
onBlur={[Function]}
onChange={[Function]}
type="password"
value="fluffy bunnies"
/>
</div>
<div
className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
id="passwordFieldId-3"
>
<span
className="pgn__icon"
>
<svg
aria-hidden={true}
fill="none"
focusable={false}
height={24}
role="img"
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
fill="currentColor"
/>
</svg>
</span>
<div>
A password is required
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -190,7 +215,7 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
<div
data-focus-guard={true}
style={
{
Object {
"height": "0px",
"left": "1px",
"overflow": "hidden",
Expand All @@ -206,11 +231,11 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
`;

exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
[
Array [
<div
data-focus-guard={true}
style={
{
Object {
"height": "0px",
"left": "1px",
"overflow": "hidden",
Expand Down Expand Up @@ -242,7 +267,7 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
/>
<div
aria-label="Are you sure?"
className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
role="dialog"
>
<div
Expand Down Expand Up @@ -275,14 +300,14 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
data-prefix="fas"
focusable="false"
role="img"
style={{}}
style={Object {}}
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
fill="currentColor"
style={{}}
style={Object {}}
/>
</svg>
</div>
Expand All @@ -299,30 +324,27 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
</div>
</div>
<div
className="form-group"
data-testid="validation-form-group"
className="pgn__form-group"
>
<label
className="d-block"
className="pgn__form-label d-block"
htmlFor="passwordFieldId"
>
If you still wish to continue and delete your account, please enter your account password:
</label>
<input
aria-describedby=""
className="form-control"
id="passwordFieldId"
name="password"
onChange={[MockFunction]}
type="password"
value="fluffy bunnies"
/>
<strong
className="invalid-feedback"
id="passwordFieldId-invalid-feedback"
<div
className="pgn__form-control-decorator-group"
>
Unable to delete account
</strong>
<input
className="has-value form-control"
id="passwordFieldId"
name="password"
onBlur={[Function]}
onChange={[Function]}
type="password"
value="fluffy bunnies"
/>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -358,7 +380,7 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
<div
data-focus-guard={true}
style={
{
Object {
"height": "0px",
"left": "1px",
"overflow": "hidden",
Expand Down
Loading
Loading