@codecademy/gamut 67.6.2-alpha.197bd1.0 → 67.6.2-alpha.72ac86.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.
Files changed (4) hide show
  1. package/dist/Card/index.js +4 -2
  2. package/dist/Card/styles.d.ts +8 -2
  3. package/dist/Card/styles.js +21 -12
  4. 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,11 +16,12 @@ export const Card = ({
15
16
  ...rest
16
17
  }) => {
17
18
  const defaultBorderRadius = isInteractive ? 'md' : 'none';
18
- const trueBorderRadius = !borderRadius ? defaultBorderRadius : borderRadius;
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
23
  const isOutline = shadow === 'outline';
22
- const setHoverShadow = shadow === 'patternRight' ? hoverShadowRight : hoverShadowLeft;
24
+ const setHoverShadow = shadow === 'patternRight' ? hoverShadowRight(resolvedBorderRadius) : hoverShadowLeft(resolvedBorderRadius);
23
25
  const initialVariant = isOutline ? 'initialOutline' : 'initial';
24
26
  const animateVariant = isOutline ? 'animateOutline' : 'animate';
25
27
  return /*#__PURE__*/_jsxs(MotionBox, {
package/dist/Card/styles.d.ts CHANGED
@@ -20,9 +20,10 @@ 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;
26
27
  transition: {
27
28
  duration: number;
28
29
  ease: string;
@@ -30,6 +31,7 @@ export declare const hoverShadowLeft: {
30
31
  };
31
32
  initialOutline: {
32
33
  boxShadow: string;
34
+ borderRadius: string | undefined;
33
35
  transition: {
34
36
  duration: number;
35
37
  ease: string;
@@ -38,6 +40,7 @@ export declare const hoverShadowLeft: {
38
40
  animate: {
39
41
  transform: string;
40
42
  boxShadow: string;
43
+ borderRadius: string | undefined;
41
44
  transition: {
42
45
  duration: number;
43
46
  ease: string;
@@ -46,15 +49,17 @@ export declare const hoverShadowLeft: {
46
49
  animateOutline: {
47
50
  transform: string;
48
51
  boxShadow: string;
52
+ borderRadius: string | undefined;
49
53
  transition: {
50
54
  duration: number;
51
55
  ease: string;
52
56
  };
53
57
  };
54
58
  };
55
- export declare const hoverShadowRight: {
59
+ export declare const hoverShadowRight: (borderRadius?: string) => {
56
60
  initial: {
57
61
  boxShadow: string;
62
+ borderRadius: string | undefined;
58
63
  transition: {
59
64
  duration: number;
60
65
  ease: string;
@@ -63,6 +68,7 @@ export declare const hoverShadowRight: {
63
68
  animate: {
64
69
  transform: string;
65
70
  boxShadow: string;
71
+ borderRadius: string | undefined;
66
72
  transition: {
67
73
  duration: number;
68
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: `-8px 8px ${theme.colors['background-current']}, -8px 8px 0 1px ${theme.colors['border-primary']}`
39
+ boxShadow: `-${SHADOW_OFFSET}px ${SHADOW_OFFSET}px ${theme.colors['background-current']}, -${SHADOW_OFFSET}px ${SHADOW_OFFSET}px 0 -100px ${theme.colors['border-primary']}`
37
40
  }
38
41
  }
39
42
  });
@@ -53,52 +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,
59
63
  transition: {
60
64
  duration: timingValues.fast / 1000,
61
65
  ease: 'easeOut'
62
66
  }
63
67
  },
64
68
  initialOutline: {
65
- boxShadow: `-6px 6px 0 0px ${theme.colors['background-current']}, -6px 6px 0 1px ${theme.colors['border-primary']}`,
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,
66
71
  transition: {
67
72
  duration: timingValues.fast / 1000,
68
73
  ease: 'easeOut'
69
74
  }
70
75
  },
71
76
  animate: {
72
- transform: 'translate(4px, -4px)',
73
- boxShadow: `-8px 8px 0 ${theme.colors['shadow-primary']}`,
77
+ transform: `translate(${TRANSFORM_OFFSET}px, -${TRANSFORM_OFFSET}px)`,
78
+ boxShadow: `-${SHADOW_OFFSET}px ${SHADOW_OFFSET}px 0 ${theme.colors['shadow-primary']}`,
79
+ borderRadius,
74
80
  transition: {
75
81
  duration: timingValues.fast / 1000,
76
82
  ease: 'easeIn'
77
83
  }
78
84
  },
79
85
  animateOutline: {
80
- transform: 'translate(4px, -4px)',
81
- boxShadow: `-8px 8px 0 0px ${theme.colors['shadow-primary']}, -8px 8px 0 1px ${theme.colors['shadow-primary']}`,
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,
82
89
  transition: {
83
90
  duration: timingValues.fast / 1000,
84
91
  ease: 'easeIn'
85
92
  }
86
93
  }
87
- };
88
- export const hoverShadowRight = {
94
+ });
95
+ export const hoverShadowRight = borderRadius => ({
89
96
  initial: {
90
97
  boxShadow: `0px 0px 0 ${theme.colors['shadow-primary']}`,
98
+ borderRadius,
91
99
  transition: {
92
100
  duration: timingValues.fast / 1000,
93
101
  ease: 'easeOut'
94
102
  }
95
103
  },
96
104
  animate: {
97
- transform: 'translate(-4px, -4px)',
98
- boxShadow: `8px 8px 0 ${theme.colors['shadow-primary']}`,
105
+ transform: `translate(-${TRANSFORM_OFFSET}px, -${TRANSFORM_OFFSET}px)`,
106
+ boxShadow: `${SHADOW_OFFSET}px ${SHADOW_OFFSET}px 0 ${theme.colors['shadow-primary']}`,
107
+ borderRadius,
99
108
  transition: {
100
109
  duration: timingValues.fast / 1000,
101
110
  ease: 'easeIn'
102
111
  }
103
112
  }
104
- };
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.2-alpha.197bd1.0",
4
+ "version": "67.6.2-alpha.72ac86.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": "b8a9b3b9951856d84dea418990b6065f77b38a64"
59
+ "gitHead": "ecc8a7c15123fa551eca625a483fe82c6b2f26ff"
60
60
  }