Skip to content

Commit 2d3d48c

Browse files
erenfnerenfn
authored
Merge pull request #90 from bluewave-labs/radiobutton-component
Radiobutton component
2 parents 9a4d40d + e895205 commit 2d3d48c

File tree

9 files changed

+216
-97
lines changed

9 files changed

+216
-97
lines changed

‎frontend/package-lock.json

Lines changed: 1 addition & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"type": "module",
66
"dependencies": {
7-
"@emotion/react": "^11.13.0",
7+
"@emotion/react": "^11.13.3",
88
"@emotion/styled": "^11.13.0",
99
"@mui/icons-material": "^5.15.19",
1010
"@mui/material": "^5.16.5",

‎frontend/src/App.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,15 @@ function App() {
3030
element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />}
3131
/>
3232
{/* <Route path="/home" element={<Private Component={Home} />} /> */}
33-
{/* <Route path="/" element={isLoggedIn ? <Home/> : <LoginPage />} /> */}
33+
{/* <Route path="/" element={<Home/>} /> */}
3434
<Route path="/login" element={<LoginPage />} />
3535
<Route path="/signup" element={<CreateAccountPage />} />
3636
<Route path="/forgot-password" element={<ForgotPasswordPage />} />
3737
<Route path="/reset-password" element={<PasswordResetPage />} />
3838
<Route path="/check-email" element={<CheckYourEmailPage />} />
3939
<Route path="/set-new-password" element={<SetNewPasswordPage />} />
4040
<Route path="/progress-steps" element={<ProgressStepsMain />} />
41-
<Route path="/banner/create" element={<Private Component={BannerPage} />} />
41+
<Route path="/banner/create" element={<BannerPage />} />
4242
<Route path="/popup/create" element={<Private Component={CreatePopupPage} />} />
4343
<Route path="/banner" element={<Private Component={BannerDefaultPage} />} />
4444
<Route path="/popup" element={<Private Component={PopupDefaultPage }/>} />
@@ -52,4 +52,4 @@ function App() {
5252
);
5353
}
5454

55-
export default App;
55+
export default App;

‎frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,52 @@
1-
import { React } from 'react';
1+
import React, { useState } from 'react';
22
import styles from './BannerLeftContent.module.scss';
33
import DropdownList from '../../DropdownList/DropdownList';
4-
import { Radio } from "@mui/material";
54
import CustomTextField from '../../TextFieldComponents/CustomTextField/CustomTextField';
5+
import RadioButton from '../../RadioButton/RadioButton';
6+
7+
const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction, isTopPosition }) => {
68

7-
const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction }) => {
89
const handleSetUrl = (event) => {
910
setUrl(event.target.value);
10-
};
11-
const handleActionChange = (newAction) => {
11+
};
12+
13+
const handleActionChange = (newAction) => {
1214
setButtonAction(newAction);
13-
};
15+
};
16+
17+
const handlePositionChange = (newPosition) => {
18+
setIsTopPosition(newPosition);
19+
};
1420

1521
return (
1622
<div className={styles.container}>
1723
<h2>Action</h2>
18-
<DropdownList
19-
actions={['No action', 'Open URL', 'Open URL in a new tab']}
24+
<DropdownList
25+
actions={['No action', 'Open URL', 'Open URL in a new tab']}
2026
onActionChange={handleActionChange}
2127
/>
2228
<h2>Position</h2>
2329
<div className={styles.radioContent}>
24-
<Radio onClick={() => setIsTopPosition(true)} />
25-
<h3>Top (centered)</h3>
30+
<RadioButton
31+
label="Top (centered)"
32+
checked={isTopPosition}
33+
onChange={() => handlePositionChange(true)}
34+
/>
2635
</div>
2736
<div className={styles.radioContent}>
28-
<Radio onClick={() => setIsTopPosition(false)} />
29-
<h3>Bottom (centered)</h3>
37+
<RadioButton
38+
label="Bottom (centered)"
39+
checked={!isTopPosition}
40+
onChange={() => handlePositionChange(false)}
41+
/>
3042
</div>
31-
<h2 style={{ marginBottom: 0 }}>URL</h2>
43+
44+
<h2 style={{ marginBottom: 0, marginTop:'1.2rem'}}>URL</h2>
3245
<CustomTextField
33-
TextFieldWidth='241px'
46+
TextFieldWidth="241px"
3447
value={url}
35-
onChange={handleSetUrl} />
48+
onChange={handleSetUrl}
49+
/>
3650
</div>
3751
);
3852
};

‎frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.module.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,4 @@
1515
.radioContent{
1616
display: flex;
1717
}
18-
1918
}

‎frontend/src/components/CheckIcon/CheckIcon.stories.js

Lines changed: 74 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,74 @@
1-
import CheckIcon from './CheckIcon';
2-
3-
//Storybook display settings
4-
export default {
5-
title: 'Visuals/CheckIcon',
6-
component: CheckIcon,
7-
argTypes: {
8-
type: {
9-
options: ['outline', 'solid'],
10-
control: { type: 'radio' }
11-
},
12-
size: {
13-
options: ['small', 'medium', 'large'],
14-
control: { type: 'radio' }
15-
},
16-
color: {
17-
options: ['purple', 'black', 'green'],
18-
control: { type: 'radio' }
19-
}
20-
},
21-
parameters: {
22-
layout: "centered"
23-
},
24-
tags: ["autodocs"]
25-
};
26-
27-
//Stories for each Check circle type
28-
export const PurpleOutline = {
29-
args: {
30-
type: 'outline',
31-
size: 'medium',
32-
color: 'purple'
33-
}
34-
};
35-
36-
export const BlackOutline = {
37-
args: {
38-
type: 'outline',
39-
size: 'medium',
40-
color: 'black'
41-
}
42-
};
43-
44-
export const GreenOutline = {
45-
args: {
46-
type: 'outline',
47-
size: 'medium',
48-
color: 'green'
49-
}
50-
};
51-
52-
export const PurpleSolid = {
53-
args: {
54-
type: 'solid',
55-
size: 'medium',
56-
color: 'purple'
57-
}
58-
};
59-
60-
export const BlackSolid = {
61-
args: {
62-
type: 'solid',
63-
size: 'medium',
64-
color: 'black'
65-
}
66-
};
67-
68-
export const GreenSolid = {
69-
args: {
70-
type: 'solid',
71-
size: 'medium',
72-
color: 'green'
73-
}
74-
};
1+
import CheckIcon from './CheckIcon';
2+
3+
//Storybook display settings
4+
export default {
5+
title: "Visuals/CheckIcon",
6+
component: CheckIcon,
7+
argTypes: {
8+
type: {
9+
options: ["outline", "solid"],
10+
control: { type: "radio" },
11+
},
12+
size: {
13+
options: ["small", "medium", "large"],
14+
control: { type: "radio" },
15+
},
16+
color: {
17+
options: ["purple", "black", "green"],
18+
control: { type: "radio" },
19+
},
20+
},
21+
parameters: {
22+
layout: "centered",
23+
},
24+
tags: ["autodocs"],
25+
};
26+
27+
//Stories for each Check circle type
28+
export const PurpleOutline = {
29+
args: {
30+
type: "outline",
31+
size: "medium",
32+
color: "purple",
33+
},
34+
};
35+
36+
export const BlackOutline = {
37+
args: {
38+
type: "outline",
39+
size: "medium",
40+
color: "black",
41+
},
42+
};
43+
44+
export const GreenOutline = {
45+
args: {
46+
type: "outline",
47+
size: "medium",
48+
color: "green",
49+
},
50+
};
51+
52+
export const PurpleSolid = {
53+
args: {
54+
type: "solid",
55+
size: "medium",
56+
color: "purple",
57+
},
58+
};
59+
60+
export const BlackSolid = {
61+
args: {
62+
type: "solid",
63+
size: "medium",
64+
color: "black",
65+
},
66+
};
67+
68+
export const GreenSolid = {
69+
args: {
70+
type: "solid",
71+
size: "medium",
72+
color: "green",
73+
},
74+
};

‎frontend/src/components/RadioButton/RadioButton.jsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Radio } from '@mui/material';
4+
import { styled } from '@mui/material/styles';
5+
import './RadioButtonStyles.css';
6+
7+
const CustomRadioIcon = styled('span')({
8+
borderRadius: '50%',
9+
width: 16,
10+
height: 16,
11+
boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
12+
});
13+
14+
const CustomRadioCheckedIcon = styled('span')({
15+
borderRadius: '50%',
16+
backgroundColor: 'var(--main-purple)',
17+
'&::before': {
18+
display: 'block',
19+
width: 16,
20+
height: 16,
21+
backgroundImage: 'radial-gradient(#fff, #fff 28%, transparent 32%)',
22+
content: '""',
23+
},
24+
});
25+
26+
function RadioButton({
27+
id,
28+
name,
29+
value,
30+
label,
31+
onChange,
32+
onClick,
33+
size = 'small',
34+
checked = false,
35+
enabled = true
36+
}) {
37+
38+
const handleChange = (event) => {
39+
if (checked) {
40+
onChange({ target: { name, value: '' } });
41+
} else {
42+
onChange(event);
43+
}
44+
};
45+
46+
return (
47+
<div className={`radio-button`}>
48+
<Radio
49+
id={id}
50+
name={name}
51+
value={value}
52+
disabled={!enabled}
53+
onChange={handleChange}
54+
size={size}
55+
checkedIcon={<CustomRadioCheckedIcon />}
56+
icon={<CustomRadioIcon />}
57+
checked={checked}
58+
onClick={onClick}
59+
sx={{padding:'0'}}
60+
/>
61+
{label && <label htmlFor={id}>{label}</label>}
62+
</div>
63+
);
64+
}
65+
66+
RadioButton.propTypes = {
67+
id: PropTypes.string,
68+
name: PropTypes.string,
69+
value: PropTypes.string,
70+
label: PropTypes.string,
71+
enabled: PropTypes.bool,
72+
onChange: PropTypes.func,
73+
color: PropTypes.string,
74+
checked: PropTypes.bool,
75+
};
76+
77+
export default RadioButton;

‎frontend/src/components/RadioButton/RadioButtonStyles.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.radio-button {
2+
display: flex;
3+
align-items: center;
4+
cursor: pointer;
5+
white-space: nowrap;
6+
margin-bottom: 13px;
7+
}
8+
9+
input {
10+
accent-color: var(--main-purple);
11+
}
12+
13+
input:active {
14+
outline: 5px solid var(--light-border-color);
15+
border-radius: 5px;
16+
}
17+
18+
.radio-primary input {
19+
accent-color: var(--main-purple);
20+
}
21+
22+
.radio-secondary input {
23+
accent-color: var(--light-gray);
24+
}
25+
26+
label {
27+
color: var(--main-text-color);
28+
margin-left: 8px;
29+
white-space: nowrap;
30+
}

0 commit comments

Comments
 (0)