Skip to content

Commit f6917bb

Browse files
dcoadcoa
authored
feat: support design tokens and paragon 23 (#1198)
1 parent 95db89a commit f6917bb

8 files changed

Lines changed: 1881 additions & 685 deletions

File tree

‎.env‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,5 @@ PASSWORD_RESET_SUPPORT_LINK=''
3434
LEARNER_FEEDBACK_URL=''
3535
SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
3636
COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'
37+
# Fallback in local style files
38+
PARAGON_THEME_URLS={}

‎.env.development‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,5 @@ PASSWORD_RESET_SUPPORT_LINK='mailto:support@example.com'
3535
LEARNER_FEEDBACK_URL=''
3636
SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
3737
COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'
38+
# Fallback in local style files
39+
PARAGON_THEME_URLS={}

‎.env.test‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,4 @@ MFE_CONFIG_API_URL=
3232
LEARNER_FEEDBACK_URL=''
3333
SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
3434
COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'
35+
PARAGON_THEME_URLS={}

‎package-lock.json‎

Lines changed: 1796 additions & 632 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"@fortawesome/free-solid-svg-icons": "^6.6.0",
4040
"@fortawesome/react-fontawesome": "0.2.2",
4141
"@openedx/frontend-plugin-framework": "^1.7.0",
42-
"@openedx/paragon": "^22.16.0",
42+
"@openedx/paragon": "^23.4.5",
4343
"@tensorflow-models/blazeface": "0.1.0",
4444
"@tensorflow/tfjs-converter": "4.22.0",
4545
"@tensorflow/tfjs-core": "4.22.0",

‎src/account-settings/delete-account/ConfirmationModal.jsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33

44
import {
55
AlertModal,
6-
Button, Input, ValidationFormGroup, ActionRow,
6+
Button, Form, ActionRow,
77
} from '@openedx/paragon';
88
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
99
import { faExclamationCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
@@ -107,22 +107,26 @@ export class ConfirmationModal extends Component {
107107
<PrintingInstructions />
108108
</p>
109109
</Alert>
110-
<ValidationFormGroup
110+
<Form.Group
111111
for={passwordFieldId}
112-
invalid={errorType !== null}
113-
invalidMessage={intl.formatMessage(invalidMessage)}
112+
isInvalid={errorType !== null}
114113
>
115-
<label className="d-block" htmlFor={passwordFieldId}>
114+
<Form.Label className="d-block" htmlFor={passwordFieldId}>
116115
{intl.formatMessage(messages['account.settings.delete.account.modal.enter.password'])}
117-
</label>
118-
<Input
116+
</Form.Label>
117+
<Form.Control
119118
name="password"
120119
id={passwordFieldId}
121120
type="password"
122121
value={password}
123122
onChange={onChange}
124123
/>
125-
</ValidationFormGroup>
124+
{errorType !== null && (
125+
<Form.Control.Feedback type="invalid" feedback-for={passwordFieldId}>
126+
{intl.formatMessage(invalidMessage)}
127+
</Form.Control.Feedback>
128+
)}
129+
</Form.Group>
126130
</div>
127131

128132
</AlertModal>

‎src/account-settings/delete-account/__snapshots__/ConfirmationModal.test.jsx.snap‎

Lines changed: 63 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
4141
/>
4242
<div
4343
aria-label="Are you sure?"
44-
className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
44+
className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
4545
role="dialog"
4646
>
4747
<div
@@ -131,30 +131,57 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
131131
</div>
132132
</div>
133133
<div
134-
className="form-group"
135-
data-testid="validation-form-group"
134+
className="pgn__form-group"
135+
for="passwordFieldId"
136136
>
137137
<label
138-
className="d-block"
139-
htmlFor="passwordFieldId"
138+
className="pgn__form-label d-block"
139+
htmlFor="form-field3"
140140
>
141141
If you still wish to continue and delete your account, please enter your account password:
142142
</label>
143-
<input
144-
aria-describedby="passwordFieldId-invalid-feedback"
145-
className="form-control is-invalid"
146-
id="passwordFieldId"
147-
name="password"
148-
onChange={[MockFunction]}
149-
type="password"
150-
value="fluffy bunnies"
151-
/>
152-
<strong
153-
className="invalid-feedback"
154-
id="passwordFieldId-invalid-feedback"
143+
<div
144+
className="pgn__form-control-decorator-group"
155145
>
156-
A password is required
157-
</strong>
146+
<input
147+
aria-describedby="form-field3-5"
148+
className="has-value form-control is-invalid"
149+
id="form-field3"
150+
name="password"
151+
onBlur={[Function]}
152+
onChange={[Function]}
153+
type="password"
154+
value="fluffy bunnies"
155+
/>
156+
</div>
157+
<div
158+
className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
159+
feedback-for="passwordFieldId"
160+
id="form-field3-5"
161+
>
162+
<span
163+
className="pgn__icon"
164+
>
165+
<svg
166+
aria-hidden={true}
167+
fill="none"
168+
focusable={false}
169+
height={24}
170+
role="img"
171+
viewBox="0 0 24 24"
172+
width={24}
173+
xmlns="http://www.w3.org/2000/svg"
174+
>
175+
<path
176+
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"
177+
fill="currentColor"
178+
/>
179+
</svg>
180+
</span>
181+
<div>
182+
A password is required
183+
</div>
184+
</div>
158185
</div>
159186
</div>
160187
</div>
@@ -242,7 +269,7 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
242269
/>
243270
<div
244271
aria-label="Are you sure?"
245-
className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
272+
className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
246273
role="dialog"
247274
>
248275
<div
@@ -299,30 +326,28 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
299326
</div>
300327
</div>
301328
<div
302-
className="form-group"
303-
data-testid="validation-form-group"
329+
className="pgn__form-group"
330+
for="passwordFieldId"
304331
>
305332
<label
306-
className="d-block"
307-
htmlFor="passwordFieldId"
333+
className="pgn__form-label d-block"
334+
htmlFor="form-field1"
308335
>
309336
If you still wish to continue and delete your account, please enter your account password:
310337
</label>
311-
<input
312-
aria-describedby=""
313-
className="form-control"
314-
id="passwordFieldId"
315-
name="password"
316-
onChange={[MockFunction]}
317-
type="password"
318-
value="fluffy bunnies"
319-
/>
320-
<strong
321-
className="invalid-feedback"
322-
id="passwordFieldId-invalid-feedback"
338+
<div
339+
className="pgn__form-control-decorator-group"
323340
>
324-
Unable to delete account
325-
</strong>
341+
<input
342+
className="has-value form-control"
343+
id="form-field1"
344+
name="password"
345+
onBlur={[Function]}
346+
onChange={[Function]}
347+
type="password"
348+
value="fluffy bunnies"
349+
/>
350+
</div>
326351
</div>
327352
</div>
328353
</div>

‎src/index.scss‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1+
@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
2+
13
$fa-font-path: "~font-awesome/fonts";
24
@import "~font-awesome/scss/font-awesome";
35

4-
@import "~@edx/brand/paragon/fonts";
5-
@import "~@edx/brand/paragon/variables";
6-
@import "~@openedx/paragon/scss/core/core";
7-
@import "~@edx/brand/paragon/overrides";
86
@import "~@edx/frontend-component-header/dist/index";
97
@import "~@edx/frontend-component-footer/dist/footer";
108

@@ -120,7 +118,7 @@ $fa-font-path: "~font-awesome/fonts";
120118
.dropdown-item:active,
121119
.dropdown-item:focus,
122120
.btn-tertiary:not(:disabled):not(.disabled).active {
123-
background-color: $light-300 !important;
121+
background-color: var(--pgn-color-light-300) !important;
124122
}
125123

126124

@@ -138,7 +136,7 @@ $fa-font-path: "~font-awesome/fonts";
138136
font-size: 14px !important;
139137
padding-top: 10px !important;
140138
padding-bottom: 10px !important;
141-
border: 1px solid $light-500 !important;
139+
border: 1px solid var(--pgn-color-light-500) !important;
142140
}
143141

144142
.dropdown-item {

0 commit comments

Comments
 (0)