Skip to content

Commit 35fe8e4

Browse files
alcercualcercu
authored
Merge pull request #60 from kleros/feat/tooltip-redesign-and-check-animation
Feat/tooltip redesign and check animation
2 parents fbb0ae1 + df1f647 commit 35fe8e4

File tree

3 files changed

+149
-54
lines changed

3 files changed

+149
-54
lines changed

‎src/lib/form/checkbox.tsx‎

Lines changed: 50 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { InputHTMLAttributes } from "react";
2-
import styled, { css } from "styled-components";
2+
import styled, { css, keyframes } from "styled-components";
33
import CheckmarkIcon from "../../assets/svgs/form/checkmark.svg";
44
import { borderBox, svg } from "../../styles/common-style";
55

@@ -35,42 +35,76 @@ const HiddenInput = styled.input.attrs({ type: "checkbox" })`
3535
width: 0;
3636
`;
3737

38-
const StyledCheckmark = styled(CheckmarkIcon)<
39-
CheckboxBaseProps & { $small?: boolean }
40-
>`
41-
${svg}
38+
const CheckmarkContainer = styled.div<CheckboxBaseProps & { $small?: boolean }>`
4239
position: absolute;
4340
top: 0;
4441
left: 0;
4542
border-radius: 3px;
4643
border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
44+
overflow: hidden;
4745
${({ $small }) =>
4846
$small
4947
? css`
50-
padding: 0 3px;
5148
width: 16px;
5249
height: 16px;
5350
`
5451
: css`
55-
padding: 0 4px;
5652
width: 24px;
5753
height: 24px;
5854
`}
5955
56+
${({ theme, checked }) =>
57+
checked &&
58+
css`
59+
background: ${theme.klerosUIComponentsPrimaryBlue};
60+
border: none;
61+
:after {
62+
display: block;
63+
}
64+
`}
65+
`;
66+
67+
const bouncedIn = keyframes`
68+
0%{
69+
transform: translateY(100%);
70+
}
71+
50%{
72+
transform: translateY(-5px);
73+
}
74+
100%{
75+
transform: translateY(0);
76+
}
77+
`;
78+
79+
const StyledCheckmark = styled(CheckmarkIcon)<
80+
CheckboxBaseProps & { $small?: boolean }
81+
>`
82+
${svg}
83+
84+
position: absolute;
85+
top: 1px;
86+
width: 100%;
87+
height: 100%;
88+
6089
${({ theme, checked }) =>
6190
checked
6291
? css`
63-
fill: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
92+
fill: ${theme.klerosUIComponentsWhiteBackground};
6493
background: ${theme.klerosUIComponentsPrimaryBlue};
65-
border: none;
66-
67-
:after {
68-
display: block;
69-
}
94+
animation: ${bouncedIn} 200ms ease-out;
7095
`
7196
: css`
7297
fill: transparent;
7398
`}
99+
100+
${({ $small }) =>
101+
$small
102+
? css`
103+
padding: 0 3px;
104+
`
105+
: css`
106+
padding: 0 4px;
107+
`}
74108
`;
75109

76110
interface CheckboxProps
@@ -89,7 +123,9 @@ const Checkbox: React.FC<CheckboxProps> = ({
89123
<Wrapper {...{ small, className }}>
90124
{label}
91125
<HiddenInput checked={checked} {...props} />
92-
<StyledCheckmark $small={small} checked={checked} />
126+
<CheckmarkContainer $small={small} checked={checked}>
127+
<StyledCheckmark $small={small} checked={checked} />
128+
</CheckmarkContainer>
93129
</Wrapper>
94130
);
95131

‎src/lib/tooltip/index.tsx‎

Lines changed: 86 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,95 @@ export interface TooltipBaseProps {
99

1010
const StyledText = styled.small``;
1111

12+
const Tip = styled.div<TooltipBaseProps>`
13+
content: "";
14+
position: absolute;
15+
border-width: 8px;
16+
border-style: solid;
17+
18+
::after {
19+
content: "";
20+
position: absolute;
21+
border-style: solid;
22+
border-width: 7px;
23+
}
24+
25+
${({ place, theme }) => css`
26+
${place === "top" &&
27+
css`
28+
top: 100%;
29+
left: 50%;
30+
transform: translateX(-50%);
31+
border-color: ${theme.klerosUIComponentsStroke} transparent transparent
32+
transparent;
33+
34+
::after {
35+
left: -7px;
36+
top: -8.5px;
37+
border-color: ${theme.klerosUIComponentsLightBlue} transparent
38+
transparent transparent;
39+
}
40+
`}
41+
${place === "right" &&
42+
css`
43+
top: 50%;
44+
right: 100%;
45+
transform: translateY(-50%);
46+
border-color: transparent ${theme.klerosUIComponentsStroke} transparent
47+
transparent;
48+
49+
::after {
50+
left: -5.5px;
51+
top: -7px;
52+
border-color: transparent ${theme.klerosUIComponentsLightBlue}
53+
transparent transparent;
54+
}
55+
`}
56+
${place === "bottom" &&
57+
css`
58+
left: 50%;
59+
bottom: 100%;
60+
transform: translateX(-50%);
61+
border-color: transparent transparent ${theme.klerosUIComponentsStroke}
62+
transparent;
63+
64+
::after {
65+
left: -7px;
66+
top: -5.5px;
67+
border-color: transparent transparent
68+
${theme.klerosUIComponentsLightBlue} transparent;
69+
}
70+
`}
71+
${place === "left" &&
72+
css`
73+
top: 50%;
74+
left: 100%;
75+
transform: translateY(-50%);
76+
border-color: transparent transparent transparent
77+
${theme.klerosUIComponentsStroke};
78+
::after {
79+
left: -8.5px;
80+
top: -7px;
81+
border-color: transparent transparent transparent
82+
${theme.klerosUIComponentsLightBlue};
83+
}
84+
`}
85+
`}
86+
`;
87+
1288
const StyledTooltip = styled.span<TooltipBaseProps>`
1389
${borderBox}
90+
transition: opacity 200ms ease-in, visibility 200ms ease-in;
1491
${({ place, theme, small }) => css`
1592
visibility: hidden;
93+
opacity: 0%;
1694
position: absolute;
1795
z-index: 1;
1896
width: max-content;
1997
max-width: 240px;
20-
background: ${theme.klerosUIComponentsPrimaryBlue};
21-
border-radius: 3px;
98+
background: ${theme.klerosUIComponentsLightBlue};
99+
border: 1px solid ${theme.klerosUIComponentsStroke};
100+
border-radius: 7px;
22101
padding: 13px 16px;
23102
display: flex;
24103
justify-content: center;
@@ -28,67 +107,32 @@ const StyledTooltip = styled.span<TooltipBaseProps>`
28107
${smallStyle}
29108
font-weight: 100;
30109
text-align: ${small ? "center" : "left"};
31-
color: ${theme.klerosUIComponentsWhiteBackground};
32-
}
33-
34-
::after {
35-
content: "";
36-
position: absolute;
37-
border-width: 8px;
38-
border-style: solid;
110+
color: ${theme.klerosUIComponentsPrimaryText};
39111
}
40112
41113
${place === "top" &&
42114
css`
43115
bottom: calc(100% + 16px);
44116
left: 50%;
45117
transform: translateX(-50%);
46-
::after {
47-
top: 100%;
48-
left: 50%;
49-
transform: translateX(-50%);
50-
border-color: ${theme.klerosUIComponentsPrimaryBlue} transparent
51-
transparent transparent;
52-
}
53118
`}
54119
${place === "right" &&
55120
css`
56121
top: 50%;
57122
left: calc(100% + 16px);
58123
transform: translateY(-50%);
59-
::after {
60-
top: 50%;
61-
right: 100%;
62-
transform: translateY(-50%);
63-
border-color: transparent ${theme.klerosUIComponentsPrimaryBlue}
64-
transparent transparent;
65-
}
66124
`}
67125
${place === "bottom" &&
68126
css`
69127
top: calc(100% + 16px);
70128
left: 50%;
71129
transform: translateX(-50%);
72-
::after {
73-
left: 50%;
74-
bottom: 100%;
75-
transform: translateX(-50%);
76-
border-color: transparent transparent
77-
${theme.klerosUIComponentsPrimaryBlue} transparent;
78-
}
79130
`}
80131
${place === "left" &&
81132
css`
82133
top: 50%;
83134
right: calc(100% + 16px);
84135
transform: translateY(-50%);
85-
::after {
86-
top: 50%;
87-
left: 100%;
88-
transform: translateY(-50%);
89-
border-color: transparent transparent transparent
90-
${theme.klerosUIComponentsPrimaryBlue};
91-
}
92136
`}
93137
`}
94138
`;
@@ -99,6 +143,7 @@ const Wrapper = styled.div`
99143
100144
&:hover ${StyledTooltip} {
101145
visibility: visible;
146+
opacity: 100%;
102147
}
103148
`;
104149

@@ -116,8 +161,9 @@ const Tooltip: React.FC<TooltipProps> = ({
116161
}) => (
117162
<Wrapper {...props}>
118163
{children}
119-
<StyledTooltip {...{ small, place }}>
120-
<StyledText>{text}</StyledText>
164+
<StyledTooltip {...{ small, place }} className="tooltip-container">
165+
<Tip {...{ place }} />
166+
<StyledText className="tooltip-text">{text}</StyledText>
121167
</StyledTooltip>
122168
</Wrapper>
123169
);

‎src/styles/common-style.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {
22
css,
33
DefaultTheme,
44
FlattenInterpolation,
5+
keyframes,
56
ThemeProps,
67
} from "styled-components";
78

@@ -134,3 +135,15 @@ export const hoverWhiteBackground = css`
134135
props.theme.klerosUIComponentsWhiteBackground};
135136
}
136137
`;
138+
139+
export const fadeIn = keyframes`
140+
0%{
141+
opacity: 0;
142+
}
143+
50%{
144+
opacity: 0.5;
145+
}
146+
100%{
147+
opacity: 1;
148+
}
149+
`;

0 commit comments

Comments
 (0)