@codecademy/gamut 67.6.1 → 67.6.2-alpha.711972.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Card/index.js +9 -3
- package/dist/Card/styles.d.ts +23 -2
- package/dist/Card/styles.js +33 -9
- package/package.json +2 -2
package/dist/Card/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { CheckerDense } from '@codecademy/gamut-patterns';
|
|
2
|
+
import { borderRadii } from '@codecademy/gamut-styles';
|
|
2
3
|
import * as React from 'react';
|
|
3
4
|
import { DynamicCardWrapper, MotionBox, StaticCardWrapper } from './elements';
|
|
4
5
|
import { hoverShadowLeft, hoverShadowRight, patternFadeInOut } from './styles';
|
|
@@ -15,14 +16,19 @@ export const Card = ({
|
|
|
15
16
|
...rest
|
|
16
17
|
}) => {
|
|
17
18
|
const defaultBorderRadius = isInteractive ? 'md' : 'none';
|
|
18
|
-
const trueBorderRadius =
|
|
19
|
+
const trueBorderRadius = borderRadius ?? defaultBorderRadius;
|
|
20
|
+
const resolvedBorderRadius = borderRadii[trueBorderRadius];
|
|
19
21
|
const SelectedWrapper = variant === 'default' ? DynamicCardWrapper : StaticCardWrapper;
|
|
20
22
|
const hasPattern = shadow === 'patternLeft' || shadow === 'patternRight';
|
|
21
|
-
const
|
|
23
|
+
const isOutline = shadow === 'outline';
|
|
24
|
+
const setHoverShadow = shadow === 'patternRight' ? hoverShadowRight(resolvedBorderRadius) : hoverShadowLeft(resolvedBorderRadius);
|
|
25
|
+
const initialVariant = isOutline ? 'initialOutline' : 'initial';
|
|
26
|
+
const animateVariant = isOutline ? 'animateOutline' : 'animate';
|
|
22
27
|
return /*#__PURE__*/_jsxs(MotionBox, {
|
|
23
28
|
height: height,
|
|
29
|
+
initial: initialVariant,
|
|
24
30
|
position: "relative",
|
|
25
|
-
whileHover: isInteractive ?
|
|
31
|
+
whileHover: isInteractive ? animateVariant : '',
|
|
26
32
|
width: width,
|
|
27
33
|
children: [hasPattern && /*#__PURE__*/_jsx(MotionBox, {
|
|
28
34
|
borderRadius: trueBorderRadius,
|
package/dist/Card/styles.d.ts
CHANGED
|
@@ -20,9 +20,18 @@ export declare const patternFadeInOut: {
|
|
|
20
20
|
};
|
|
21
21
|
};
|
|
22
22
|
};
|
|
23
|
-
export declare const hoverShadowLeft: {
|
|
23
|
+
export declare const hoverShadowLeft: (borderRadius?: string) => {
|
|
24
24
|
initial: {
|
|
25
25
|
boxShadow: string;
|
|
26
|
+
borderRadius: string | undefined;
|
|
27
|
+
transition: {
|
|
28
|
+
duration: number;
|
|
29
|
+
ease: string;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
initialOutline: {
|
|
33
|
+
boxShadow: string;
|
|
34
|
+
borderRadius: string | undefined;
|
|
26
35
|
transition: {
|
|
27
36
|
duration: number;
|
|
28
37
|
ease: string;
|
|
@@ -31,15 +40,26 @@ export declare const hoverShadowLeft: {
|
|
|
31
40
|
animate: {
|
|
32
41
|
transform: string;
|
|
33
42
|
boxShadow: string;
|
|
43
|
+
borderRadius: string | undefined;
|
|
44
|
+
transition: {
|
|
45
|
+
duration: number;
|
|
46
|
+
ease: string;
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
animateOutline: {
|
|
50
|
+
transform: string;
|
|
51
|
+
boxShadow: string;
|
|
52
|
+
borderRadius: string | undefined;
|
|
34
53
|
transition: {
|
|
35
54
|
duration: number;
|
|
36
55
|
ease: string;
|
|
37
56
|
};
|
|
38
57
|
};
|
|
39
58
|
};
|
|
40
|
-
export declare const hoverShadowRight: {
|
|
59
|
+
export declare const hoverShadowRight: (borderRadius?: string) => {
|
|
41
60
|
initial: {
|
|
42
61
|
boxShadow: string;
|
|
62
|
+
borderRadius: string | undefined;
|
|
43
63
|
transition: {
|
|
44
64
|
duration: number;
|
|
45
65
|
ease: string;
|
|
@@ -48,6 +68,7 @@ export declare const hoverShadowRight: {
|
|
|
48
68
|
animate: {
|
|
49
69
|
transform: string;
|
|
50
70
|
boxShadow: string;
|
|
71
|
+
borderRadius: string | undefined;
|
|
51
72
|
transition: {
|
|
52
73
|
duration: number;
|
|
53
74
|
ease: string;
|
package/dist/Card/styles.js
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import { theme, timingValues, variant } from '@codecademy/gamut-styles';
|
|
2
|
+
const SHADOW_OFFSET = 8;
|
|
3
|
+
const SHADOW_OFFSET_INITIAL = 6;
|
|
4
|
+
const TRANSFORM_OFFSET = 4;
|
|
2
5
|
export const cardVariants = variant({
|
|
3
6
|
defaultVariant: 'default',
|
|
4
7
|
base: {
|
|
@@ -33,7 +36,7 @@ export const shadowVariants = variant({
|
|
|
33
36
|
patternLeft: {},
|
|
34
37
|
patternRight: {},
|
|
35
38
|
outline: {
|
|
36
|
-
boxShadow:
|
|
39
|
+
boxShadow: `-${SHADOW_OFFSET}px ${SHADOW_OFFSET}px ${theme.colors['background-current']}, -${SHADOW_OFFSET}px ${SHADOW_OFFSET}px 0 1px ${theme.colors['border-primary']}`
|
|
37
40
|
}
|
|
38
41
|
}
|
|
39
42
|
});
|
|
@@ -53,37 +56,58 @@ export const patternFadeInOut = {
|
|
|
53
56
|
}
|
|
54
57
|
}
|
|
55
58
|
};
|
|
56
|
-
export const hoverShadowLeft = {
|
|
59
|
+
export const hoverShadowLeft = borderRadius => ({
|
|
57
60
|
initial: {
|
|
58
61
|
boxShadow: `0px 0px 0 ${theme.colors['shadow-primary']}`,
|
|
62
|
+
borderRadius,
|
|
63
|
+
transition: {
|
|
64
|
+
duration: timingValues.fast / 1000,
|
|
65
|
+
ease: 'easeOut'
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
initialOutline: {
|
|
69
|
+
boxShadow: `-${SHADOW_OFFSET_INITIAL}px ${SHADOW_OFFSET_INITIAL}px 0 0px ${theme.colors['background-current']}, -${SHADOW_OFFSET_INITIAL}px ${SHADOW_OFFSET_INITIAL}px 0 1px ${theme.colors['border-primary']}`,
|
|
70
|
+
borderRadius,
|
|
59
71
|
transition: {
|
|
60
72
|
duration: timingValues.fast / 1000,
|
|
61
73
|
ease: 'easeOut'
|
|
62
74
|
}
|
|
63
75
|
},
|
|
64
76
|
animate: {
|
|
65
|
-
transform:
|
|
66
|
-
boxShadow:
|
|
77
|
+
transform: `translate(${TRANSFORM_OFFSET}px, -${TRANSFORM_OFFSET}px)`,
|
|
78
|
+
boxShadow: `-${SHADOW_OFFSET}px ${SHADOW_OFFSET}px 0 ${theme.colors['shadow-primary']}`,
|
|
79
|
+
borderRadius,
|
|
80
|
+
transition: {
|
|
81
|
+
duration: timingValues.fast / 1000,
|
|
82
|
+
ease: 'easeIn'
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
animateOutline: {
|
|
86
|
+
transform: `translate(${TRANSFORM_OFFSET}px, -${TRANSFORM_OFFSET}px)`,
|
|
87
|
+
boxShadow: `-${SHADOW_OFFSET}px ${SHADOW_OFFSET}px 0 0px ${theme.colors['shadow-primary']}, -${SHADOW_OFFSET}px ${SHADOW_OFFSET}px 0 1px ${theme.colors['shadow-primary']}`,
|
|
88
|
+
borderRadius,
|
|
67
89
|
transition: {
|
|
68
90
|
duration: timingValues.fast / 1000,
|
|
69
91
|
ease: 'easeIn'
|
|
70
92
|
}
|
|
71
93
|
}
|
|
72
|
-
};
|
|
73
|
-
export const hoverShadowRight = {
|
|
94
|
+
});
|
|
95
|
+
export const hoverShadowRight = borderRadius => ({
|
|
74
96
|
initial: {
|
|
75
97
|
boxShadow: `0px 0px 0 ${theme.colors['shadow-primary']}`,
|
|
98
|
+
borderRadius,
|
|
76
99
|
transition: {
|
|
77
100
|
duration: timingValues.fast / 1000,
|
|
78
101
|
ease: 'easeOut'
|
|
79
102
|
}
|
|
80
103
|
},
|
|
81
104
|
animate: {
|
|
82
|
-
transform:
|
|
83
|
-
boxShadow:
|
|
105
|
+
transform: `translate(-${TRANSFORM_OFFSET}px, -${TRANSFORM_OFFSET}px)`,
|
|
106
|
+
boxShadow: `${SHADOW_OFFSET}px ${SHADOW_OFFSET}px 0 ${theme.colors['shadow-primary']}`,
|
|
107
|
+
borderRadius,
|
|
84
108
|
transition: {
|
|
85
109
|
duration: timingValues.fast / 1000,
|
|
86
110
|
ease: 'easeIn'
|
|
87
111
|
}
|
|
88
112
|
}
|
|
89
|
-
};
|
|
113
|
+
});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/gamut",
|
|
3
3
|
"description": "Styleguide & Component library for Codecademy",
|
|
4
|
-
"version": "67.6.
|
|
4
|
+
"version": "67.6.2-alpha.711972.0",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@codecademy/gamut-icons": "9.54.0",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"dist/**/[A-Z]**/[A-Z]*.js",
|
|
57
57
|
"dist/**/[A-Z]**/index.js"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "665644125e2871176be8ea8dcd982a9213e5cb8d"
|
|
60
60
|
}
|