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

feat: add more props to Checkbox for Donate styling #697

Merged
merged 23 commits into from
Jan 31, 2025
Merged

feat: add more props to Checkbox for Donate styling #697

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
8c05f79
progress at end of day
michael-odonovan Jan 23, 2025
cc53a12
setting up more props
michael-odonovan Jan 24, 2025
48b719f
Merge branch 'master' of https://github.com/comicrelief/component-lib…
michael-odonovan Jan 24, 2025
7ea05e9
linting
michael-odonovan Jan 24, 2025
19aeee2
fix double up props
michael-odonovan Jan 24, 2025
fb3b2e1
snaps
michael-odonovan Jan 24, 2025
76f4817
add some comment to groq the structure of the underlying html
michael-odonovan Jan 24, 2025
4b356bf
snaps
michael-odonovan Jan 24, 2025
24e362b
rename some props
michael-odonovan Jan 27, 2025
ea2b609
lint
michael-odonovan Jan 27, 2025
28b6923
extra props logic
michael-odonovan Jan 27, 2025
027cd24
snaps
michael-odonovan Jan 27, 2025
7ae97cd
adding label colour
michael-odonovan Jan 27, 2025
25dcc1b
cleanup
michael-odonovan Jan 27, 2025
7fa4835
Empty commit to trigger build
michael-odonovan Jan 27, 2025
47d6f14
trying to fix tests
michael-odonovan Jan 27, 2025
f7168c1
cleanup
michael-odonovan Jan 27, 2025
7d0bf4c
add comments
michael-odonovan Jan 27, 2025
57f37d7
fix red
michael-odonovan Jan 28, 2025
77a10b6
snaps
michael-odonovan Jan 28, 2025
9f1fcfd
Merge branch 'master' of https://github.com/comicrelief/component-lib…
michael-odonovan Jan 31, 2025
65ddb8e
fix " to ' mess
michael-odonovan Jan 31, 2025
c57d86f
Merge branch 'master' into df_191_more_props_Checkbox_for_styling
AndyEPhipps Jan 31, 2025
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
72 changes: 47 additions & 25 deletions src/components/Atoms/Checkbox/Checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,50 +5,67 @@ import styled from 'styled-components';
import Text from '../Text/Text';
import checkBoxIcon from './assets/tick.svg';

// This label wraps both the input and the span that is the visual square checkbox you see */
const Label = styled.label`
display: flex;
${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
margin-bottom: 8px;
${({ labelColour }) => labelColour && `color: ${labelColour};`}
`;

const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
font-size: ${({ theme }) => theme.fontSize('sm')};
display: block;
box-sizing: border-box;
opacity: 0;
position: absolute;
left: 0px;
width: 24px;
height: 24px;
/* This input is not visible */
width: 0;
height: 0;
margin: 0;
border: 1px solid ${({ theme }) => theme.color('grey')};
/* This span is actually the visual square Checkbox you see */
+ span {
margin-right: 12px;
width: 24px;
height: 24px;
border-radius: 4px;
background-color: ${({ theme }) => theme.color('white')};
border: 1px solid ${({ theme }) => theme.color('grey')};
background-color: ${({ theme, checkboxBg }) => (checkboxBg ? theme.color(checkboxBg) : theme.color('white'))};
border: 1px solid ${({ theme, checkboxBorder }) => (checkboxBorder ? theme.color(checkboxBorder) : theme.color('grey'))};
float: left;
flex-shrink: 0;
}
/* Visual checkbox when ticked */
:checked + span {
background: url(${checkBoxIcon}) no-repeat center;
background-color: ${({ theme }) => theme.color('red')};
border-color: ${({ theme }) => theme.color('red')};
background-size: contain;
background-color: ${({ theme, checkboxBgChecked }) => (checkboxBgChecked ? theme.color(checkboxBgChecked) : theme.color('red'))};
border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
}
/* Visual checkbox when focused */
:focus + span {
border-color: ${({ theme }) => theme.color('red')};
border-width: 1px;
border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
}
`;

const Label = styled.label`
display: flex;
${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
margin-bottom: 8px;
`;

const Checkbox = React.forwardRef(({
label = undefined, value, children = undefined, ...rest
label = undefined,
value,
children = undefined,
labelColour,
checkboxBg,
checkboxBorder,
checkboxBgChecked,
checkboxBorderChecked,
...rest
}, ref) => (
<Label hasLabelAsString={!!label}>
<StyledCheckboxInput {...rest} value={value} ref={ref} />
<Label
hasLabelAsString={!!label}
labelColour={labelColour}
>
<StyledCheckboxInput
{...rest}
value={value}
ref={ref}
checkboxBg={checkboxBg}
checkboxBorder={checkboxBorder}
checkboxBgChecked={checkboxBgChecked}
checkboxBorderChecked={checkboxBorderChecked}
/>
<span />
{label ? <Text weight="bold">{label}</Text> : children}
</Label>
Expand All @@ -57,8 +74,13 @@ const Checkbox = React.forwardRef(({
Checkbox.propTypes = {
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
children: PropTypes.node,
label: PropTypes.string,
children: PropTypes.node
labelColour: PropTypes.string,
checkboxBg: PropTypes.string,
checkboxBorder: PropTypes.string,
checkboxBgChecked: PropTypes.string,
checkboxBorderChecked: PropTypes.string
};

export default Checkbox;
11 changes: 10 additions & 1 deletion src/components/Atoms/Checkbox/Checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,16 @@ const LongLabel = () => (
<Checkbox name="sport" value="Tennis" label="Tennis" />
<Checkbox name="sport" value="Basketball" label="Basketball" />
<Checkbox name="sport" value="Cycling" label="Cycling" />
<Checkbox name="sport" value="Football" label="Football" />
<Checkbox
name="sport"
value="Football"
label="Tennis (with wacky styling to test props)"
labelColour="pink"
checkboxBg="red"
checkboxBorder="blue"
checkboxBgChecked="green"
checkboxBorderChecked="red"
/>
<br/>
<p>A checkbox with a long label containing links</p>
<Checkbox name="node_label" value="node_label">
Expand Down
82 changes: 34 additions & 48 deletions src/components/Atoms/Checkbox/Checkbox.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,22 @@ it('renders correctly', () => {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
}

.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 8px;
}

.c1 {
display: block;
box-sizing: border-box;
opacity: 0;
position: absolute;
left: 0px;
width: 24px;
height: 24px;
width: 0;
height: 0;
margin: 0;
border: 1px solid #969598;
}

.c1 + span {
Expand All @@ -49,26 +55,13 @@ it('renders correctly', () => {

.c1:checked + span {
background: url(mock.asset) no-repeat center;
background-color: #E52630;
border-color: #E52630;
background-size: contain;
background-color: #E52630;
border: 1px solid #E52630;
}

.c1:focus + span {
border-color: #E52630;
border-width: 1px;
}

.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 8px;
border: 1px solid #E52630;
}

<label
Expand Down Expand Up @@ -98,16 +91,22 @@ it('renders correctly', () => {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
}

.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 8px;
}

.c1 {
display: block;
box-sizing: border-box;
opacity: 0;
position: absolute;
left: 0px;
width: 24px;
height: 24px;
width: 0;
height: 0;
margin: 0;
border: 1px solid #969598;
}

.c1 + span {
Expand All @@ -125,26 +124,13 @@ it('renders correctly', () => {

.c1:checked + span {
background: url(mock.asset) no-repeat center;
background-color: #E52630;
border-color: #E52630;
background-size: contain;
background-color: #E52630;
border: 1px solid #E52630;
}

.c1:focus + span {
border-color: #E52630;
border-width: 1px;
}

.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 8px;
border: 1px solid #E52630;
}

<label
Expand Down