Skip to content

Commit eae3cc1

Browse files
clementdevosclementdevos
committed
Merge branch 'develop'
2 parents ca97230 + e3c7de9 commit eae3cc1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+3505
-20193
lines changed

‎.storybook/preview.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import StoryContainer from './story_container/story_container';
55
import { DesignSystemProvider } from '../src/design_system_context/design_system_context';
66
import ThemeProvider from '@material-ui/styles/ThemeProvider';
77
import { DEFAULT_THEME } from '../src/styles/theme';
8-
import { ELEVATION_SPRING_PROPS } from '../src/card/card_elevation_spring_props';
8+
import { ELEVATION_PROPS } from '../src/card/card_elevation_props';
99
import {createMuiTheme} from "@material-ui/core";
1010

1111
export const theme = createMuiTheme({
1212
...DEFAULT_THEME,
13-
shadows: ['none', ...new Array(40).fill(ELEVATION_SPRING_PROPS[0])],
13+
shadows: ['none', ...new Array(40).fill(ELEVATION_PROPS[0])],
1414
spacing: 8,
1515
palette: Object.entries(DEFAULT_THEME.palette).reduce((acc, [name, values]) => {
1616
const accCopy = acc;

‎.storybook/styles/global.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ html,body {
66
padding: 0;
77
width: 100%;
88
background-color: #f5f5f5;
9-
font-family: 'Roboto', "open sans", "Arial";
9+
font-family: 'Avenir Next','Roboto', "open sans", "Arial";
1010
font-weight: 400;
1111
}
1212

‎.storybook/wld-theme.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const theme = create({
77
colorSecondary: '#220bab',
88

99
// Typography
10-
fontBase: '"Avenir Next", "Roboto", "open sans", "Raleway"',
10+
fontBase: '"Avenir Next", "open sans", "Arial"',
1111

1212
brandTitle: "WeLoveDevs' Storybook",
1313
brandUrl: 'https://welovedevs.com',

‎package-lock.json‎

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

‎package.json‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@welovedevs/ui",
3-
"version": "1.1.1",
3+
"version": "1.2.6",
44
"description": "WeLoveDevs.com UI components",
55
"main": "index.js",
66
"types": "index.d.ts",
@@ -23,21 +23,24 @@
2323
"url": "https://github.com/welovedevs/wld-design-system/issues"
2424
},
2525
"homepage": "https://github.com/welovedevs/wld-design-system#readme",
26+
"peerDependencies": {
27+
"react": "^16.8.0 || ^17.0.0",
28+
"react-dom": "^16.8.0 || ^17.0.0"
29+
},
2630
"dependencies": {
2731
"@material-ui/core": "^4.11.0",
2832
"@material-ui/icons": "^4.9.1",
2933
"@material-ui/styles": "^4.10.0",
3034
"classnames": "^2.2.6",
35+
"framer-motion": "^3.6.7",
3136
"lodash": "^4.17.15",
32-
"react": "^16.13.1",
3337
"react-autosuggest": "^9.4.3",
34-
"react-dom": "^16.13.1",
3538
"react-emoji-render": "^1.2.1",
3639
"react-measure": "^2.3.0",
37-
"react-slick": "^0.25.2",
38-
"react-spring": "9.0.0-beta.33"
40+
"react-slick": "^0.25.2"
3941
},
4042
"devDependencies": {
43+
"@babel/plugin-proposal-export-default-from": "^7.10.4",
4144
"@storybook/addon-actions": "^6.0.26",
4245
"@storybook/addon-docs": "^6.0.26",
4346
"@storybook/addon-knobs": "^6.0.26",
@@ -52,7 +55,6 @@
5255
"@types/node": "12.12.6",
5356
"@types/react-autosuggest": "^10.0.0",
5457
"@types/react-measure": "^2.0.6",
55-
"@babel/plugin-proposal-export-default-from": "^7.10.4",
5658
"cpy-cli": "^3.1.1",
5759
"eslint": "^6.8.0",
5860
"eslint-config-airbnb": "^18.0.1",
@@ -71,11 +73,6 @@
7173
"eslintConfig": {
7274
"extends": "react-app"
7375
},
74-
"resolutions": {
75-
"react": "^16.13.1",
76-
"react-dom": "^16.13.1",
77-
"react-spring": "9.0.0-beta.33"
78-
},
7976
"husky": {
8077
"hooks": {
8178
"pre-commit": "npm run test-build --scripts-prepend-node-path && rimraf ./test_build"

‎src/assets/icons/speech_bubble_arrow.svg‎

Lines changed: 16 additions & 18 deletions
Loading

‎src/assets/icons/speech_bubble_arrow_component.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,17 @@ export const SpeechBubbleArrow: React.FC<{ className?: string }> = ({ className
99
version="1.1"
1010
xmlns="http://www.w3.org/2000/svg"
1111
>
12-
<g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
12+
<g id="Page-1">
1313
<g id="Artboard" transform="translate(-157.000000, -56.000000)">
14-
<g id="Rectangle-Copy@2x-(1)" transform="translate(157.000000, 56.000000)">
15-
<g id="path-1-link" fill="#ffffff" fillRule="nonzero">
16-
<path
17-
d="M9.4041995,10.823254 L14.5598426,1.54356185 C15.364513,0.0952277806 17.190934,-0.426564724 18.6392681,0.378105668 C19.1321636,0.651950255 19.5379058,1.05916039 19.8099687,1.55304163 L24.8992149,10.7916547 C26.6577059,13.9838795 30.013637,15.9666385 33.6581657,15.9666385 L0.6627302,15.9666385 C4.2943252,15.9666385 7.6404735,13.9978016 9.4041995,10.823254 Z"
18-
id="path-1"
19-
/>
20-
</g>
21-
<g id="path-1-link" fill="#FFFFFF">
22-
<path
23-
d="M9.4041995,10.823254 L14.5598426,1.54356185 C15.364513,0.0952277806 17.190934,-0.426564724 18.6392681,0.378105668 C19.1321636,0.651950255 19.5379058,1.05916039 19.8099687,1.55304163 L24.8992149,10.7916547 C26.6577059,13.9838795 30.013637,15.9666385 33.6581657,15.9666385 L0.6627302,15.9666385 C4.2943252,15.9666385 7.6404735,13.9978016 9.4041995,10.823254 Z"
24-
id="path-1"
25-
/>
14+
<g id="Rectangle" transform="translate(157.000000, 56.000000)">
15+
<g id="path-1">
16+
<path id="path-1" fill="none" stroke="#b3b3b3" d="M0.7,15.9c3.6,0,6.9-2,8.7-5.1l5.1-9.2c0.8-1.4,2.6-2,4.1-1.2c0.5,0.3,0.9,0.7,1.2,1.2
17+
l5.1,9.2c1.7,3.2,5.1,5.1,8.7,5.1"/>
2618
</g>
2719
</g>
2820
</g>
21+
<path fill="#FFFFFF" d="M24.9,10.8l-5.1-9.2c-0.3-0.5-0.7-0.9-1.2-1.2c-1.4-0.8-3.3-0.3-4.1,1.2l-5.1,9.2c-1.8,3.2-5.1,5.1-8.7,5.1
22+
v2.9h32.9v-2.9C30,15.9,26.6,13.9,24.9,10.8z"/>
2923
</g>
3024
</svg>
3125
);

‎src/autocomplete/autocomplete.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,13 +154,13 @@ export function AutoComplete({
154154
children,
155155
}}
156156
className={cn(classes.popperCard)}
157-
popperCustomClasses={{ popper: receivedClasses.popper }}
157+
popperCustomClasses={{ popper: classes.popper }}
158158
anchorElement={inputReference.current}
159159
/>
160160
);
161161
}}
162162
onSuggestionSelected={suggestionSelected}
163-
renderInputComponent={({ onChange, ...props }) => (
163+
renderInputComponent={({ onChange, size, ...props }) => (
164164
<TextField
165165
{...props}
166166
{...other}

‎src/autocomplete/autocomplete_styles.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export type Classes = {
77
};
88

99
export const styles = createStyles({
10+
popper: {},
1011
popperCard: {
1112
maxWidth: 600,
1213
border: 'none',

‎src/button/button.tsx‎

Lines changed: 19 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,17 @@
1-
import React, { ButtonHTMLAttributes, forwardRef, ReactHTML, useCallback, useMemo } from 'react';
1+
import React, { ButtonHTMLAttributes, useCallback, useMemo } from 'react';
22

33
import cn from 'classnames';
44
import { makeStyles, useTheme } from '@material-ui/core/styles';
5-
import { animated, config, useSpring } from 'react-spring';
6-
5+
import { motion } from 'framer-motion';
76
import { Typography } from '../typography/typography';
87

9-
import { getComponentColor } from '../styles/utils/styles_utils';
8+
import { getComponentColor, getHexFromTheme, PaletteColors } from '../styles';
109

11-
import { getHexFromTheme } from '../styles';
1210
import { ButtonVariants, Classes, styles } from './button_styles';
13-
import { PaletteColors } from '../styles/palette';
1411
import merge from 'lodash/merge';
1512

1613
const useStyles = makeStyles(styles);
1714

18-
const DEFAULT_BRIGHT_LAYER_SPRING_PROPS = {
19-
opacity: 0,
20-
config: config.stiff,
21-
};
22-
2315
interface CustomProps {
2416
component?: string;
2517
className?: string;
@@ -40,10 +32,9 @@ interface CustomProps {
4032
style?: any;
4133
}
4234

43-
type SpringType = { opacity?: number; config?: typeof config.stiff };
4435
export type ButtonProps = CustomProps & ButtonHTMLAttributes<HTMLButtonElement>;
4536
const ButtonComponent: React.FC<ButtonProps> = ({
46-
component: Component = animated.button,
37+
component: Component = motion.button,
4738
className,
4839
containerRef,
4940
disabled,
@@ -69,62 +60,10 @@ const ButtonComponent: React.FC<ButtonProps> = ({
6960
JSON.stringify(oldCustomClasses),
7061
JSON.stringify(receivedClasses),
7162
]);
72-
const classes = useStyles({ classes: mergedClasses });const hexColor = useMemo(() => getHexFromTheme(theme, color), [theme, color]);
63+
const classes = useStyles({ classes: mergedClasses });
64+
const hexColor = useMemo(() => getHexFromTheme(theme, color), [theme, color]);
7365
const withColor = useMemo(() => disabled || (color && color !== 'default' && hexColor), [disabled, hexColor]);
74-
const [brightLayerSpringProps, setBrightLayerSpringProps] = useSpring(() => DEFAULT_BRIGHT_LAYER_SPRING_PROPS);
75-
const colorSpring = useSpring({
76-
color: getComponentColor(true, hexColor, disabled),
77-
config: config.stiff,
78-
});
79-
const showBrightLayer = useCallback(
80-
() =>
81-
setBrightLayerSpringProps({
82-
opacity: variant !== 'contained' ? 0.1 : 0.2,
83-
}),
84-
[variant]
85-
);
86-
87-
const dismissBrightLayer = useCallback(() => setBrightLayerSpringProps(DEFAULT_BRIGHT_LAYER_SPRING_PROPS), []);
88-
89-
const handleMouseEnter = useCallback(
90-
(...parameters) => {
91-
if (typeof onMouseEnter === 'function') {
92-
onMouseEnter(...parameters);
93-
}
94-
showBrightLayer();
95-
},
96-
[onMouseEnter]
97-
);
98-
99-
const handleMouseLeave = useCallback(
100-
(...parameters) => {
101-
if (typeof onMouseLeave === 'function') {
102-
onMouseLeave(...parameters);
103-
}
104-
dismissBrightLayer();
105-
},
106-
[onMouseLeave]
107-
);
108-
109-
const handleFocus = useCallback(
110-
(...parameters) => {
111-
if (typeof onFocus === 'function') {
112-
onFocus(...parameters);
113-
}
114-
showBrightLayer();
115-
},
116-
[onFocus]
117-
);
118-
119-
const handleBlur = useCallback(
120-
(...parameters) => {
121-
if (typeof onBlur === 'function') {
122-
onBlur(...parameters);
123-
}
124-
dismissBrightLayer();
125-
},
126-
[onBlur]
127-
);
66+
const colorMotion = { color: getComponentColor(true, hexColor, disabled) };
12867

12968
const handleClick = useCallback(
13069
(...paramaters) => {
@@ -154,17 +93,17 @@ const ButtonComponent: React.FC<ButtonProps> = ({
15493
{...containerProps}
15594
style={{
15695
...propsStyle,
157-
...(withColor && colorSpring),
96+
...(withColor && colorMotion),
15897
...(containerProps && containerProps.style),
15998
}}
160-
onMouseEnter={handleMouseEnter}
161-
onMouseLeave={handleMouseLeave}
162-
onFocus={handleFocus}
163-
onBlur={handleBlur}
16499
onClick={handleClick}
165100
{...other}
166101
>
167-
<animated.div className={classes.brightLayer} style={brightLayerSpringProps as any} />
102+
<motion.div
103+
className={classes.brightLayer}
104+
initial={{ opacity: 0 }}
105+
whileHover={{ opacity: variant !== 'contained' ? 0.1 : 0.2 }}
106+
/>
168107
<Typography className={cn(classes.typography, oldCustomClasses.typography)} variant="button">
169108
{children}
170109
</Typography>
@@ -174,22 +113,21 @@ const ButtonComponent: React.FC<ButtonProps> = ({
174113

175114
const RaisedButton: React.FC<ButtonProps> = (props) => {
176115
const theme = useTheme();
177-
const { disabled ,color} = props;
178-
const springProps = useSpring({
179-
config: config.stiff,
116+
const { disabled, color } = props;
117+
const motionProps = {
180118
boxShadow: `0 ${color ? 5 : 10}px ${color ? 15 : 20}px 0 ${getComponentColor(
181119
Boolean(color),
182120
getHexFromTheme(theme, color, 200),
183121
disabled
184122
)}`,
185-
});
186-
return <ButtonComponent {...props} {...(!disabled && { style: springProps })} />;
123+
};
124+
return <ButtonComponent {...props} {...(!disabled && { animate: motionProps })} />;
187125
};
188126

189-
export const Button: React.FC<ButtonProps> = forwardRef((props, containerRef) => {
127+
export const Button: React.FC<ButtonProps> = (props, containerRef) => {
190128
const { variant = 'text', ...other } = props;
191129
if (variant === 'raised') {
192130
return <RaisedButton {...{ variant, containerRef }} {...other} />;
193131
}
194132
return <ButtonComponent {...{ variant, containerRef }} {...other} />;
195-
});
133+
};

0 commit comments

Comments
 (0)