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

Jump to bottom

[DT-936] Ensure H3 validation fields have correct styling #2699

Merged
merged 2 commits into from
Oct 29, 2024
Merged

[DT-936] Ensure H3 validation fields have correct styling #2699

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59eb8f0
fix: ensure h3 validation fields have correct styling
fboulnois Oct 28, 2024
bd8550f
refactor: pull title style into constant
fboulnois Oct 29, 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
6 changes: 5 additions & 1 deletion src/components/forms/forms.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export const commonOptionalProps = [
'defaultValue',
'hideTitle',
'style',
'titleStyle',
'validators',
'onChange',
'type',
Expand Down Expand Up @@ -216,13 +217,15 @@ export const FormFieldTitle = (props) => {
ariaLevel,
required,
validation,
titleStyle,
} = props;

return <div>
{title && !hideTitle &&
<label
id={`lbl_${formId}`}
className={`control-label ${isValid(validation) ? '' : 'errored'}`}
style={titleStyle}
htmlFor={`${formId}`}
aria-level={ariaLevel}>
{title}
Expand All @@ -238,7 +241,7 @@ export const FormField = (config) => {
const {
id, name, type = FormFieldTypes.TEXT, ariaLevel,
title, hideTitle, description, helpText,
defaultValue, style, validators,
defaultValue, style, titleStyle, validators,
validation, onValidationChange
} = config;

Expand Down Expand Up @@ -288,6 +291,7 @@ export const FormField = (config) => {
formId={id}
ariaLevel={ariaLevel}
validation={getValidation()}
titleStyle={titleStyle}
/>
<type.component
{...config}
Expand Down
8 changes: 7 additions & 1 deletion src/pages/dar_application/DataAccessRequest.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,11 @@ export default function DataAccessRequest(props) {
// eslint-disable-next-line react/no-unknown-property
<div datacy={'data-access-request'}>
<div className={'dar-step-card'}>
<h2>Step 2: Data Access Request</h2>

{DAAUtils.isEnabled() ?
<div>
<label style={{ fontWeight: 'bold', display: 'block', marginBottom: '0.5rem' }} className="control-label">2.1 Select Dataset(s)</label>
<label style={{ fontSize: '24px', fontWeight: 500, color: '#333333', display: 'block', marginBottom: '0.5rem' }} className="control-label">2.1 Select Dataset(s)</label>
<p style={{ marginBottom: '1rem' }}>Currently selected datasets:</p>
<SelectableDatasets
disabled={readOnlyMode}
Expand All @@ -158,6 +160,7 @@ export default function DataAccessRequest(props) {
isAsync={true}
isMulti={true}
title={'2.1 Select Dataset(s)'}
titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
validators={[FormValidators.REQUIRED]}
validation={validation.datasetIds}
onValidationChange={onValidationChange}
Expand Down Expand Up @@ -185,6 +188,7 @@ export default function DataAccessRequest(props) {
id={'projectTitle'}
key={'projectTitle'}
title={'2.2 Descriptive Title of Project'}
titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
disabled={readOnlyMode}
validators={[FormValidators.REQUIRED]}
validation={validation.projectTitle}
Expand All @@ -207,6 +211,7 @@ export default function DataAccessRequest(props) {
disabled={readOnlyMode}
type={FormFieldTypes.TEXTAREA}
title={'2.3 Research Use Statement (RUS)'}
titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
validators={[FormValidators.REQUIRED]}
description={
<>
Expand Down Expand Up @@ -324,6 +329,7 @@ export default function DataAccessRequest(props) {
disabled={readOnlyMode}
type={FormFieldTypes.TEXTAREA}
title={'2.4 Non-Technical Summary'}
titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
validators={[FormValidators.REQUIRED]}
description={includeInstructions ? 'Please enter below a non-technical summary of your RUS suitable for understanding by the general public (written at a high school reading level or below).' : ''}
placeholder={'Please limit your your non-technical summary to 1100 characters'}
Expand Down
5 changes: 5 additions & 0 deletions src/pages/dar_application/ResearcherInfo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ export default function ResearcherInfo(props) {
id='researcherName'
placeholder='Enter Firstname Lastname'
title='1.1 Researcher'
titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
validators={[FormValidators.REQUIRED]}
ariaLevel={ariaLevel + 1}
defaultValue={researcher.displayName}
Expand Down Expand Up @@ -150,6 +151,7 @@ export default function ResearcherInfo(props) {
description='I certify that the principal investigator listed below is aware of this study'
placeholder='Firstname Lastname'
title='1.3 Principal Investigator'
titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
validators={[FormValidators.REQUIRED]}
ariaLevel={ariaLevel + 1}
validation={validation.piName}
Expand Down Expand Up @@ -209,6 +211,7 @@ export default function ResearcherInfo(props) {
type={FormFieldTypes.SELECT}
description='I certify that the individual listed below is my Institutional Signing official'
title='1.6 Institutional Signing Official'
titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
validators={[FormValidators.REQUIRED]}
ariaLevel={ariaLevel + 1}
defaultValue={formData.signingOfficial}
Expand All @@ -231,6 +234,7 @@ export default function ResearcherInfo(props) {
description='I certify that the individual listed below is my IT Director'
placeholder='Enter Firstname Lastname'
title='1.7 Information Technology (IT) Director'
titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
validators={[FormValidators.REQUIRED]}
ariaLevel={ariaLevel + 1}
validation={validation.itDirector}
Expand All @@ -247,6 +251,7 @@ export default function ResearcherInfo(props) {
disabled={readOnlyMode}
type={FormFieldTypes.RADIOGROUP}
title='1.8 Cloud Use Statement'
titleStyle={{ fontSize: '24px', fontWeight: 500, color: '#333333' }}
fboulnois marked this conversation as resolved.
Show resolved Hide resolved
description={[
<span key='anvil-use-description'>
Will you perform all of your data storage and analysis for this project on the
Expand Down
Loading