Skip to content

Commit baaeb34

Browse files
alishaevnalishaevn
authored
Merge pull request #159 from scientist-softserv/176-demo-account
176 demo account
2 parents b9f0c30 + 2299932 commit baaeb34

21 files changed

+214
-98
lines changed

‎src/assets/theme/bootstrap-preview.scss‎

Lines changed: 49 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,61 @@
11
// these colors and variables match what is in the webstore's theme.module.scss file. this file enables us to see the preview of what these overrides will look like without actually importing these from here into the webstore project. In order to see a preview in storybook of how components will look with custom colors, these values must be updated.
22

3-
$primary: #333333;
4-
$secondary: #CCCCCC;
5-
$success: #666666;
6-
$info: #999999;
7-
$warning: #2a2a2a;
3+
$primary: #333333;
4+
$secondary: #CCCCCC;
5+
$success: #666666;
6+
$info: #999999;
7+
$warning: #2A2A2A;
88
$danger: #606060;
9-
$light: #f8f9fa;
9+
$light: #F8F9FA;
1010
$dark: #212529;
11-
$white: #ffffff;
11+
$white: #FFFFFF;
12+
$black: #000000;
1213

1314
// these imports must be AFTER the theme color overrides above in order to properly override bootstrap's colors, but before the theme maps.
14-
@import "../../../node_modules/bootstrap/scss/functions";
15-
@import "../../../node_modules/bootstrap/scss/variables";
16-
@import "../../../node_modules/bootstrap/scss/mixins";
15+
@import '../../../node_modules/bootstrap/scss/functions';
16+
@import '../../../node_modules/bootstrap/scss/variables';
17+
@import '../../../node_modules/bootstrap/scss/mixins';
1718

1819
// create our own custom colors map, and merge it with bootstrap's theme-colors map to generate utility functions that can be used throughout the map
1920
$custom-colors: (
20-
"light-2": darken($light, 3%),
21-
"light-3": darken($light, 10%)
21+
'dark-1': darken($dark, 3%),
22+
'dark-2': darken($dark, 5%),
23+
'dark-3': darken($dark, 10%),
24+
'dark-4': darken($dark, 20%),
25+
'dark-5': $dark,
26+
'dark-6': lighten($dark, 3%),
27+
'dark-7': lighten($dark, 5%),
28+
'dark-8': lighten($dark, 10%),
29+
'dark-9': lighten($dark, 20%),
30+
'light-1': darken($light, 3%),
31+
'light-2': darken($light, 5%),
32+
'light-3': darken($light, 10%),
33+
'light-4': darken($light, 20%),
34+
'light-5': $light,
35+
'light-6': lighten($light, 3%),
36+
'light-7': lighten($light, 5%),
37+
'light-8': lighten($light, 10%),
38+
'light-9': lighten($light, 20%),
39+
'primary-1': darken($primary, 3%),
40+
'primary-2': darken($primary, 5%),
41+
'primary-3': darken($primary, 10%),
42+
'primary-4': darken($primary, 20%),
43+
'primary-5': $primary,
44+
'primary-6': lighten($primary, 3%),
45+
'primary-7': lighten($primary, 5%),
46+
'primary-8': lighten($primary, 10%),
47+
'primary-9': lighten($primary, 20%),
48+
'secondary-1': darken($secondary, 3%),
49+
'secondary-2': darken($secondary, 5%),
50+
'secondary-3': darken($secondary, 10%),
51+
'secondary-4': darken($secondary, 20%),
52+
'secondary-5': $secondary,
53+
'secondary-6': lighten($secondary, 3%),
54+
'secondary-7': lighten($secondary, 5%),
55+
'secondary-8': lighten($secondary, 10%),
56+
'secondary-9': lighten($secondary, 20%),
57+
'black': $black,
58+
'white': $white,
2259
);
2360
$theme-colors: map-merge($theme-colors, $custom-colors);
2461

‎src/components/AdditionalInfo/AdditionalInfo.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
} from 'react-bootstrap'
66
import { addDays, apiV2CompatibleStrings, convertToBase64 } from '../../resources/utilityFunctions'
77

8-
const AdditionalInfo = ({ defaultRequiredDate, updateRequestForm }) => {
8+
const AdditionalInfo = ({ backgroundColor, defaultRequiredDate, updateRequestForm }) => {
99
const [showProposalDate, setShowProposalDate] = useState(true)
1010
const [files, setFiles] = useState([])
1111
const fileRef = useRef(null)
@@ -40,7 +40,7 @@ const AdditionalInfo = ({ defaultRequiredDate, updateRequestForm }) => {
4040

4141
return (
4242
<Card className='mb-4'>
43-
<Card.Header className='h3'>Additional Information</Card.Header>
43+
<Card.Header className={`h3 bg-${backgroundColor}`}>Additional Information</Card.Header>
4444
<Card.Body>
4545
{showProposalDate
4646
&& (
@@ -108,7 +108,12 @@ const AdditionalInfo = ({ defaultRequiredDate, updateRequestForm }) => {
108108
}
109109

110110
AdditionalInfo.propTypes = {
111+
backgroundColor: PropTypes.string,
111112
updateRequestForm: PropTypes.func.isRequired,
112113
}
113114

115+
AdditionalInfo.defaultProps = {
116+
backgroundColor: 'light',
117+
}
118+
114119
export default AdditionalInfo

‎src/components/AdditionalInfo/AdditionalInfo.stories.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@ const Template = (args) => <AdditionalInfo {...args} />
1010

1111
export const Default = Template.bind({})
1212
Default.args = {
13+
backgroundColor: 'light',
1314
updateRequestForm: (requestForm) => console.log({ requestForm }),
1415
}

‎src/components/ShippingDetails/ShippingDetails.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,12 +118,12 @@ const AddressForm = ({ addressType, billingCountry, shippingCountry, setShowBill
118118
)
119119
}
120120

121-
const ShippingDetails = ({ billingCountry, shippingCountry, updateRequestForm }) => {
121+
const ShippingDetails = ({ backgroundColor, billingCountry, shippingCountry, updateRequestForm }) => {
122122
const [showBilling, setShowBilling] = useState(true)
123123

124124
return (
125125
<Card className='mb-4'>
126-
<Card.Header className='h3'>Shipping Details</Card.Header>
126+
<Card.Header className={`h3 bg-${backgroundColor}`}>Shipping Details</Card.Header>
127127
<AddressForm
128128
addressType='shipping'
129129
billingCountry={billingCountry}
@@ -154,11 +154,16 @@ AddressForm.propTypes = {
154154
}
155155

156156
ShippingDetails.propTypes = {
157+
backgroundColor: PropTypes.string,
157158
billingCountry: PropTypes.string.isRequired,
158159
shippingCountry: PropTypes.string.isRequired,
159160
updateRequestForm: PropTypes.func.isRequired,
160161
}
161162

163+
ShippingDetails.defaultProps = {
164+
backgroundColor: 'light',
165+
}
166+
162167
AddressForm.defaultProps = {
163168
showBilling: false,
164169
setShowBilling: () => {},

‎src/components/ShippingDetails/ShippingDetails.stories.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const Template = (args) => <ShippingDetails {...args} />
1010

1111
export const Default = Template.bind({})
1212
Default.args = {
13+
backgroundColor: 'light',
1314
billingCountry: 'USA',
1415
shippingCountry: 'USA',
1516
updateRequestForm: (requestForm) => console.log({ requestForm }),

‎src/components/StatusBar/StatusBar.jsx‎

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,52 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
33
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
4-
import './status-bar.scss'
54

6-
const StatusBar = ({ statusArray, apiRequestStatus, addClass }) => (
7-
<div className={`container ${addClass}`}>
8-
<div className='row border bg-light'>
9-
{statusArray.map((statusObject, index) => {
10-
const { statusLabel, statusIcon } = statusObject
11-
return (
12-
<div
13-
className={`status-bar-column col-3 py-2 gap-2 d-flex justify-content-center align-items-center
14-
${index !== statusArray.length - 1 ? 'border-end' : ''}
15-
${statusLabel === apiRequestStatus ? 'active' : ''}`}
16-
key={statusLabel}
17-
>
18-
<FontAwesomeIcon icon={statusIcon} />
19-
{statusLabel}
20-
</div>
21-
)
22-
})}
5+
const StatusBar = ({ backgroundColor, statusArray, apiRequestStatus, addClass }) => {
6+
const activeIndex = statusArray.findIndex(obj => obj.statusLabel === apiRequestStatus)
7+
const labelBgColor = (index) => {
8+
if ((index < activeIndex) || (activeIndex === statusArray.length -1)) {
9+
return `bg-${backgroundColor}-3`
10+
} else if (index === activeIndex) {
11+
return `bg-${backgroundColor}`
12+
} else {
13+
return `bg-${backgroundColor}-7`
14+
}
15+
}
16+
17+
return (
18+
<div className={`container ${addClass}`}>
19+
<div className='row border'>
20+
{statusArray.map((statusObject, index) => {
21+
const { statusLabel, statusIcon } = statusObject
22+
const border = index !== statusArray.length - 1 ? 'border-end' : ''
23+
24+
return (
25+
<div
26+
className={`status-bar-column col-3 py-2 gap-2 d-flex justify-content-center align-items-center
27+
${border} ${labelBgColor(index)}`}
28+
key={statusLabel}
29+
>
30+
<FontAwesomeIcon icon={statusIcon} />
31+
{statusLabel}
32+
</div>
33+
)
34+
})}
35+
</div>
2336
</div>
24-
</div>
25-
)
37+
)
38+
}
2639

2740
StatusBar.propTypes = {
28-
statusArray: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
29-
apiRequestStatus: PropTypes.string.isRequired,
3041
addClass: PropTypes.string,
42+
apiRequestStatus: PropTypes.string.isRequired,
43+
backgroundColor: PropTypes.string,
44+
statusArray: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
3145
}
3246

3347
StatusBar.defaultProps = {
3448
addClass: '',
49+
backgroundColor: 'light',
3550
}
3651

3752
export default StatusBar

‎src/components/StatusBar/StatusBar.stories.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,26 @@ export const SupplierReview = Template.bind({})
1313
SupplierReview.args = {
1414
statusArray,
1515
apiRequestStatus: 'Supplier Review',
16+
backgroundColor: 'light',
1617
}
1718

1819
export const SOWSelection = Template.bind({})
1920
SOWSelection.args = {
2021
statusArray,
2122
apiRequestStatus: 'SOW Selection',
23+
backgroundColor: 'light',
2224
}
2325

2426
export const WorkStarted = Template.bind({})
2527
WorkStarted.args = {
2628
statusArray,
2729
apiRequestStatus: 'Work Started',
30+
backgroundColor: 'light',
2831
}
2932

3033
export const WorkCompleted = Template.bind({})
3134
WorkCompleted.args = {
3235
statusArray,
3336
apiRequestStatus: 'Work Completed',
37+
backgroundColor: 'light',
3438
}

‎src/components/StatusBar/status-bar.scss‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/components/TextBox/TextBox.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const TextBox = ({ addClass, alignment, size, style, text }) => {
1212
{paragraphs.map((par, index) => (
1313
<div className={`text-box--${alignment} ${addClass || ''}`} key={index}>
1414
<p
15-
className={`text-box text-box--${size} mb-0`}
15+
className={`text-box text-box--${size}`}
1616
style={{ ...style }}
1717
>
1818
{par}

‎src/compounds/ActionsGroup/ActionsGroup.jsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import ViewFiles from './actions/ViewFiles'
77
import { allowNull } from '../../resources/utilityFunctions'
88
import './actions-group.scss'
99

10-
const ActionsGroup = ({ handleSendingMessagesOrFiles, initialFiles }) => {
10+
const ActionsGroup = ({ backgroundColor, handleSendingMessagesOrFiles, initialFiles }) => {
1111
const [show, setShow] = useState(false)
1212
const [action, setAction] = useState(null)
1313

@@ -20,12 +20,14 @@ const ActionsGroup = ({ handleSendingMessagesOrFiles, initialFiles }) => {
2020
setAction(null)
2121
setShow(false)
2222
}
23+
2324
return (
2425
<>
2526
<ListGroup className='actions-group'>
2627
<ListGroup.Item
2728
action
2829
onClick={() => handleShow('SendMessage')}
30+
bsPrefix={`bg-${backgroundColor}-8 list-group-item`}
2931
>
3032
<FontAwesomeIcon icon='fa-envelope' />
3133
Send Message
@@ -34,6 +36,7 @@ const ActionsGroup = ({ handleSendingMessagesOrFiles, initialFiles }) => {
3436
action
3537
onClick={() => handleShow('ViewFiles')}
3638
role='presentation'
39+
bsPrefix={`bg-${backgroundColor}-6 list-group-item`}
3740
>
3841
<FontAwesomeIcon icon='fa-file-lines' />
3942
View Files
@@ -42,13 +45,15 @@ const ActionsGroup = ({ handleSendingMessagesOrFiles, initialFiles }) => {
4245
{(action === 'SendMessage' && show)
4346
&& (
4447
<SendMessage
48+
backgroundColor={backgroundColor}
4549
handleClose={handleClose}
4650
onSubmit={handleSendingMessagesOrFiles}
4751
/>
4852
)}
4953
{(action === 'ViewFiles' && show)
5054
&& (
5155
<ViewFiles
56+
backgroundColor={backgroundColor}
5257
handleClose={handleClose}
5358
initialFiles={initialFiles}
5459
onSubmit={handleSendingMessagesOrFiles}
@@ -59,6 +64,7 @@ const ActionsGroup = ({ handleSendingMessagesOrFiles, initialFiles }) => {
5964
}
6065

6166
ActionsGroup.propTypes = {
67+
backgroundColor: PropTypes.string,
6268
handleSendingMessagesOrFiles: PropTypes.func.isRequired,
6369
initialFiles: PropTypes.arrayOf(
6470
PropTypes.shape({
@@ -75,4 +81,8 @@ ActionsGroup.propTypes = {
7581
).isRequired,
7682
}
7783

84+
ActionsGroup.defaultProps = {
85+
backgroundColor: 'secondary'
86+
}
87+
7888
export default ActionsGroup

0 commit comments

Comments
 (0)