@codecademy/brand 3.0.0-alpha.3d56920d7b.0 → 3.0.0-alpha.d84718455a.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/AppHeader/AppHeaderElements/AppHeaderCatalogSection/elements.d.ts +5 -0
- package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSection/elements.js +56 -12
- package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSection/index.js +5 -3
- package/dist/Banner/index.d.ts +0 -10
- package/dist/Banner/index.js +3 -24
- package/dist/GlobalHeader/GlobalHeaderItems.js +1 -1
- package/dist/GlobalHeader/index.d.ts +1 -0
- package/dist/GlobalHeader/index.js +41 -37
- package/dist/GlobalHeader/types.d.ts +1 -0
- package/dist/GlobalPage/index.d.ts +2 -2
- package/dist/GlobalPage/index.js +2 -2
- package/dist/Recurly/context/NoProvider.d.ts +8 -0
- package/dist/Recurly/context/NoProvider.js +7 -0
- package/dist/Recurly/context/elements/index.d.ts +26 -0
- package/dist/Recurly/context/elements/index.js +46 -0
- package/dist/Recurly/context/index.d.ts +2 -0
- package/dist/Recurly/context/index.js +2 -0
- package/dist/Recurly/context/recurly/index.d.ts +30 -0
- package/dist/Recurly/context/recurly/index.js +50 -0
- package/dist/Recurly/context/recurly/loadRecurly.d.ts +6 -0
- package/dist/Recurly/context/recurly/loadRecurly.js +22 -0
- package/dist/Recurly/context/recurly/w.d.ts +14 -0
- package/dist/Recurly/context/recurly/w.js +4 -0
- package/dist/Recurly/fields/RecurlyField.d.ts +9 -0
- package/dist/Recurly/fields/RecurlyField.js +57 -0
- package/dist/Recurly/fields/elements.d.ts +17 -0
- package/dist/Recurly/fields/elements.js +106 -0
- package/dist/Recurly/fields/elements.test.js +79 -0
- package/dist/Recurly/fields/index.d.ts +2 -0
- package/dist/Recurly/fields/index.js +2 -0
- package/dist/Recurly/index.d.ts +2 -0
- package/dist/Recurly/index.js +2 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/stories/Molecules/EnhancedBanner.stories.d.ts +3 -3
- package/dist/stories/Molecules/EnhancedBanner.stories.js +2 -12
- package/dist/stories/Molecules/Recurly.stories.d.ts +5 -0
- package/dist/stories/Molecules/Recurly.stories.js +56 -0
- package/package.json +1 -1
|
@@ -90,3 +90,8 @@ export declare const useBannerResponsiveStyles: () => {
|
|
|
90
90
|
bg: Colors;
|
|
91
91
|
color: Colors;
|
|
92
92
|
};
|
|
93
|
+
export declare const FunBackground: import("@emotion/styled").StyledComponent<Omit<import("@codecademy/gamut-styles").BackgroundProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
|
|
94
|
+
theme?: import("@emotion/react").Theme;
|
|
95
|
+
} & {
|
|
96
|
+
displayGlobalNavRedesign: boolean;
|
|
97
|
+
}, {}, {}>;
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import _styled from "@emotion/styled/base";
|
|
2
2
|
import { Anchor, Column, FillButton } from '@codecademy/gamut';
|
|
3
|
-
import { css, useCurrentMode } from '@codecademy/gamut-styles';
|
|
3
|
+
import { Background, css, useCurrentMode } from '@codecademy/gamut-styles';
|
|
4
4
|
export const StyledColumn = /*#__PURE__*/_styled(Column, {
|
|
5
|
-
target: "
|
|
5
|
+
target: "e3x9tsc5",
|
|
6
6
|
label: "StyledColumn"
|
|
7
7
|
})(css({
|
|
8
8
|
borderBottom: 1,
|
|
9
9
|
borderColor: 'border-primary'
|
|
10
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
10
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb24vZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVM0QiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckNhdGFsb2dTZWN0aW9uL2VsZW1lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgQ29sdW1uLCBGaWxsQnV0dG9uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHtcbiAgQmFja2dyb3VuZCxcbiAgQ29sb3JzLFxuICBjc3MsXG4gIHVzZUN1cnJlbnRNb2RlLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29sdW1uID0gc3R5bGVkKENvbHVtbikoXG4gIGNzcyh7XG4gICAgYm9yZGVyQm90dG9tOiAxLFxuICAgIGJvcmRlckNvbG9yOiAnYm9yZGVyLXByaW1hcnknLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEFuY2hvckNvbHVtbiA9IHN0eWxlZChDb2x1bW4pKFxuICBjc3Moe1xuICAgIHBiOiAxNixcbiAgICAnJjpsYXN0LWNoaWxkJzoge1xuICAgICAgcGI6IDAsXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGaWxsQnV0dG9uID0gc3R5bGVkKEZpbGxCdXR0b24pKFxuICBjc3Moe1xuICAgIG1heFdpZHRoOiAxNzAsXG4gICAgbXQ6IHsgXzogMTYsIGxnOiA5NiB9LFxuICAgIHRleHRBbGlnbjogeyBfOiAnY2VudGVyJywgbWQ6ICdsZWZ0JyB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN1YmplY3RBbmNob3IgPSBzdHlsZWQoQW5jaG9yKShcbiAgY3NzKHtcbiAgICBhbGlnbkNvbnRlbnQ6ICdjZW50ZXInLFxuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBCYW5uZXJBbmNob3IgPSBzdHlsZWQoQW5jaG9yKShcbiAgY3NzKHtcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgZm9udFNpemU6IDE2LFxuICAgIGZvbnRXZWlnaHQ6IDcwMCxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCB0b3BpY1dyYXBwZXJQcm9wcyA9IHsgYXM6ICdsaScsIHdpZHRoOiAnMTJyZW0nIH0gYXMgY29uc3Q7XG5cbmV4cG9ydCBjb25zdCB1c2VCYW5uZXJSZXNwb25zaXZlU3R5bGVzID0gKCk6IHtcbiAgYmc6IENvbG9ycztcbiAgY29sb3I6IENvbG9ycztcbn0gPT4ge1xuICBjb25zdCBtb2RlID0gdXNlQ3VycmVudE1vZGUoKTtcblxuICBjb25zdCBiZyA9IG1vZGUgPT09ICdkYXJrJyA/ICduYXZ5LTkwMCcgOiAncGFsZVllbGxvdyc7XG4gIGNvbnN0IGNvbG9yID0gbW9kZSA9PT0gJ2RhcmsnID8gJ3doaXRlJyA6ICduYXZ5LTkwMCc7XG5cbiAgcmV0dXJuIHsgYmcsIGNvbG9yIH07XG59O1xuXG5leHBvcnQgY29uc3QgRnVuQmFja2dyb3VuZCA9IHN0eWxlZChCYWNrZ3JvdW5kKTx7XG4gIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbjogYm9vbGVhbjtcbn0+YFxuICAkeyhwcm9wcykgPT5cbiAgICBwcm9wcy5kaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ25cbiAgICAgID8gYFxuICAgIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjNzIGVhc2U7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgICAmOjpiZWZvcmUge1xuICAgICAgY29udGVudDogJyc7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IC01MCU7XG4gICAgICBsZWZ0OiAtNTAlO1xuICAgICAgd2lkdGg6IDIwMCU7XG4gICAgICBoZWlnaHQ6IDIwMCU7XG4gICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgIDEyMGRlZyxcbiAgICAgICAgcmdiYSgyNTUsIDIxNSwgMCwgMC4yNSkgMjAlLFxuICAgICAgICByZ2JhKDI1NSwgMjIzLCAxMDAsIDAuMzUpIDQwJSxcbiAgICAgICAgcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjE1KSA1MCUsXG4gICAgICAgIHRyYW5zcGFyZW50IDEwMCVcbiAgICAgICk7XG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMTAwJSkgcm90YXRlKDI1ZGVnKTtcbiAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgICAgb3BhY2l0eTogMDtcbiAgICAgIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zcyBlYXNlO1xuICAgICAgei1pbmRleDogMTtcbiAgICB9XG4gICAgJjpob3ZlciB7XG4gICAgICB0cmFuc2Zvcm06IHNjYWxlKDEuMDMpO1xuICAgICAgJjo6YmVmb3JlIHtcbiAgICAgICAgb3BhY2l0eTogMTtcbiAgICAgICAgYW5pbWF0aW9uOiBzaGluZSAxLjJzIGVhc2UgZm9yd2FyZHM7XG4gICAgICB9XG4gICAgfVxuICAgIEBrZXlmcmFtZXMgc2hpbmUge1xuICAgICAgZnJvbSB7XG4gICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgxMDAlKSByb3RhdGUoMjVkZWcpO1xuICAgICAgfVxuICAgICAgdG8ge1xuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCkgcm90YXRlKDI1ZGVnKTtcbiAgICAgIH1cbiAgICB9XG4gIGBcbiAgICAgIDogJyd9XG5gO1xuIl19 */");
|
|
11
11
|
export const StyledAnchorColumn = /*#__PURE__*/_styled(Column, {
|
|
12
|
-
target: "
|
|
12
|
+
target: "e3x9tsc4",
|
|
13
13
|
label: "StyledAnchorColumn"
|
|
14
14
|
})(css({
|
|
15
15
|
pb: 16,
|
|
16
16
|
'&:last-child': {
|
|
17
17
|
pb: 0
|
|
18
18
|
}
|
|
19
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
19
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb24vZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCa0MiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nU2VjdGlvbi9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBbmNob3IsIENvbHVtbiwgRmlsbEJ1dHRvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7XG4gIEJhY2tncm91bmQsXG4gIENvbG9ycyxcbiAgY3NzLFxuICB1c2VDdXJyZW50TW9kZSxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbHVtbiA9IHN0eWxlZChDb2x1bW4pKFxuICBjc3Moe1xuICAgIGJvcmRlckJvdHRvbTogMSxcbiAgICBib3JkZXJDb2xvcjogJ2JvcmRlci1wcmltYXJ5JyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBbmNob3JDb2x1bW4gPSBzdHlsZWQoQ29sdW1uKShcbiAgY3NzKHtcbiAgICBwYjogMTYsXG4gICAgJyY6bGFzdC1jaGlsZCc6IHtcbiAgICAgIHBiOiAwLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRmlsbEJ1dHRvbiA9IHN0eWxlZChGaWxsQnV0dG9uKShcbiAgY3NzKHtcbiAgICBtYXhXaWR0aDogMTcwLFxuICAgIG10OiB7IF86IDE2LCBsZzogOTYgfSxcbiAgICB0ZXh0QWxpZ246IHsgXzogJ2NlbnRlcicsIG1kOiAnbGVmdCcgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdWJqZWN0QW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgYWxpZ25Db250ZW50OiAnY2VudGVyJyxcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQmFubmVyQW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgIGZvbnRTaXplOiAxNixcbiAgICBmb250V2VpZ2h0OiA3MDAsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgdG9waWNXcmFwcGVyUHJvcHMgPSB7IGFzOiAnbGknLCB3aWR0aDogJzEycmVtJyB9IGFzIGNvbnN0O1xuXG5leHBvcnQgY29uc3QgdXNlQmFubmVyUmVzcG9uc2l2ZVN0eWxlcyA9ICgpOiB7XG4gIGJnOiBDb2xvcnM7XG4gIGNvbG9yOiBDb2xvcnM7XG59ID0+IHtcbiAgY29uc3QgbW9kZSA9IHVzZUN1cnJlbnRNb2RlKCk7XG5cbiAgY29uc3QgYmcgPSBtb2RlID09PSAnZGFyaycgPyAnbmF2eS05MDAnIDogJ3BhbGVZZWxsb3cnO1xuICBjb25zdCBjb2xvciA9IG1vZGUgPT09ICdkYXJrJyA/ICd3aGl0ZScgOiAnbmF2eS05MDAnO1xuXG4gIHJldHVybiB7IGJnLCBjb2xvciB9O1xufTtcblxuZXhwb3J0IGNvbnN0IEZ1bkJhY2tncm91bmQgPSBzdHlsZWQoQmFja2dyb3VuZCk8e1xuICBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ246IGJvb2xlYW47XG59PmBcbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMuZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduXG4gICAgICA/IGBcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zcyBlYXNlO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuXG4gICAgJjo6YmVmb3JlIHtcbiAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAtNTAlO1xuICAgICAgbGVmdDogLTUwJTtcbiAgICAgIHdpZHRoOiAyMDAlO1xuICAgICAgaGVpZ2h0OiAyMDAlO1xuICAgICAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KFxuICAgICAgICAxMjBkZWcsXG4gICAgICAgIHJnYmEoMjU1LCAyMTUsIDAsIDAuMjUpIDIwJSxcbiAgICAgICAgcmdiYSgyNTUsIDIyMywgMTAwLCAwLjM1KSA0MCUsXG4gICAgICAgIHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4xNSkgNTAlLFxuICAgICAgICB0cmFuc3BhcmVudCAxMDAlXG4gICAgICApO1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDEwMCUpIHJvdGF0ZSgyNWRlZyk7XG4gICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgIG9wYWNpdHk6IDA7XG4gICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuM3MgZWFzZTtcbiAgICAgIHotaW5kZXg6IDE7XG4gICAgfVxuICAgICY6aG92ZXIge1xuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxLjAzKTtcbiAgICAgICY6OmJlZm9yZSB7XG4gICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgIGFuaW1hdGlvbjogc2hpbmUgMS4ycyBlYXNlIGZvcndhcmRzO1xuICAgICAgfVxuICAgIH1cbiAgICBAa2V5ZnJhbWVzIHNoaW5lIHtcbiAgICAgIGZyb20ge1xuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMTAwJSkgcm90YXRlKDI1ZGVnKTtcbiAgICAgIH1cbiAgICAgIHRvIHtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDApIHJvdGF0ZSgyNWRlZyk7XG4gICAgICB9XG4gICAgfVxuICBgXG4gICAgICA6ICcnfVxuYDtcbiJdfQ== */");
|
|
20
20
|
export const StyledFillButton = /*#__PURE__*/_styled(FillButton, {
|
|
21
|
-
target: "
|
|
21
|
+
target: "e3x9tsc3",
|
|
22
22
|
label: "StyledFillButton"
|
|
23
23
|
})(css({
|
|
24
24
|
maxWidth: 170,
|
|
@@ -30,24 +30,24 @@ export const StyledFillButton = /*#__PURE__*/_styled(FillButton, {
|
|
|
30
30
|
_: 'center',
|
|
31
31
|
md: 'left'
|
|
32
32
|
}
|
|
33
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
33
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb24vZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCZ0MiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nU2VjdGlvbi9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBbmNob3IsIENvbHVtbiwgRmlsbEJ1dHRvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7XG4gIEJhY2tncm91bmQsXG4gIENvbG9ycyxcbiAgY3NzLFxuICB1c2VDdXJyZW50TW9kZSxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbHVtbiA9IHN0eWxlZChDb2x1bW4pKFxuICBjc3Moe1xuICAgIGJvcmRlckJvdHRvbTogMSxcbiAgICBib3JkZXJDb2xvcjogJ2JvcmRlci1wcmltYXJ5JyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBbmNob3JDb2x1bW4gPSBzdHlsZWQoQ29sdW1uKShcbiAgY3NzKHtcbiAgICBwYjogMTYsXG4gICAgJyY6bGFzdC1jaGlsZCc6IHtcbiAgICAgIHBiOiAwLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRmlsbEJ1dHRvbiA9IHN0eWxlZChGaWxsQnV0dG9uKShcbiAgY3NzKHtcbiAgICBtYXhXaWR0aDogMTcwLFxuICAgIG10OiB7IF86IDE2LCBsZzogOTYgfSxcbiAgICB0ZXh0QWxpZ246IHsgXzogJ2NlbnRlcicsIG1kOiAnbGVmdCcgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdWJqZWN0QW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgYWxpZ25Db250ZW50OiAnY2VudGVyJyxcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQmFubmVyQW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgIGZvbnRTaXplOiAxNixcbiAgICBmb250V2VpZ2h0OiA3MDAsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgdG9waWNXcmFwcGVyUHJvcHMgPSB7IGFzOiAnbGknLCB3aWR0aDogJzEycmVtJyB9IGFzIGNvbnN0O1xuXG5leHBvcnQgY29uc3QgdXNlQmFubmVyUmVzcG9uc2l2ZVN0eWxlcyA9ICgpOiB7XG4gIGJnOiBDb2xvcnM7XG4gIGNvbG9yOiBDb2xvcnM7XG59ID0+IHtcbiAgY29uc3QgbW9kZSA9IHVzZUN1cnJlbnRNb2RlKCk7XG5cbiAgY29uc3QgYmcgPSBtb2RlID09PSAnZGFyaycgPyAnbmF2eS05MDAnIDogJ3BhbGVZZWxsb3cnO1xuICBjb25zdCBjb2xvciA9IG1vZGUgPT09ICdkYXJrJyA/ICd3aGl0ZScgOiAnbmF2eS05MDAnO1xuXG4gIHJldHVybiB7IGJnLCBjb2xvciB9O1xufTtcblxuZXhwb3J0IGNvbnN0IEZ1bkJhY2tncm91bmQgPSBzdHlsZWQoQmFja2dyb3VuZCk8e1xuICBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ246IGJvb2xlYW47XG59PmBcbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMuZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduXG4gICAgICA/IGBcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zcyBlYXNlO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuXG4gICAgJjo6YmVmb3JlIHtcbiAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAtNTAlO1xuICAgICAgbGVmdDogLTUwJTtcbiAgICAgIHdpZHRoOiAyMDAlO1xuICAgICAgaGVpZ2h0OiAyMDAlO1xuICAgICAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KFxuICAgICAgICAxMjBkZWcsXG4gICAgICAgIHJnYmEoMjU1LCAyMTUsIDAsIDAuMjUpIDIwJSxcbiAgICAgICAgcmdiYSgyNTUsIDIyMywgMTAwLCAwLjM1KSA0MCUsXG4gICAgICAgIHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4xNSkgNTAlLFxuICAgICAgICB0cmFuc3BhcmVudCAxMDAlXG4gICAgICApO1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDEwMCUpIHJvdGF0ZSgyNWRlZyk7XG4gICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgIG9wYWNpdHk6IDA7XG4gICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuM3MgZWFzZTtcbiAgICAgIHotaW5kZXg6IDE7XG4gICAgfVxuICAgICY6aG92ZXIge1xuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxLjAzKTtcbiAgICAgICY6OmJlZm9yZSB7XG4gICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgIGFuaW1hdGlvbjogc2hpbmUgMS4ycyBlYXNlIGZvcndhcmRzO1xuICAgICAgfVxuICAgIH1cbiAgICBAa2V5ZnJhbWVzIHNoaW5lIHtcbiAgICAgIGZyb20ge1xuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMTAwJSkgcm90YXRlKDI1ZGVnKTtcbiAgICAgIH1cbiAgICAgIHRvIHtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDApIHJvdGF0ZSgyNWRlZyk7XG4gICAgICB9XG4gICAgfVxuICBgXG4gICAgICA6ICcnfVxuYDtcbiJdfQ== */");
|
|
34
34
|
export const SubjectAnchor = /*#__PURE__*/_styled(Anchor, {
|
|
35
|
-
target: "
|
|
35
|
+
target: "e3x9tsc2",
|
|
36
36
|
label: "SubjectAnchor"
|
|
37
37
|
})(css({
|
|
38
38
|
alignContent: 'center',
|
|
39
39
|
alignItems: 'center',
|
|
40
40
|
display: 'flex'
|
|
41
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
41
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb24vZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlDNkIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nU2VjdGlvbi9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBbmNob3IsIENvbHVtbiwgRmlsbEJ1dHRvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7XG4gIEJhY2tncm91bmQsXG4gIENvbG9ycyxcbiAgY3NzLFxuICB1c2VDdXJyZW50TW9kZSxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbHVtbiA9IHN0eWxlZChDb2x1bW4pKFxuICBjc3Moe1xuICAgIGJvcmRlckJvdHRvbTogMSxcbiAgICBib3JkZXJDb2xvcjogJ2JvcmRlci1wcmltYXJ5JyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBbmNob3JDb2x1bW4gPSBzdHlsZWQoQ29sdW1uKShcbiAgY3NzKHtcbiAgICBwYjogMTYsXG4gICAgJyY6bGFzdC1jaGlsZCc6IHtcbiAgICAgIHBiOiAwLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRmlsbEJ1dHRvbiA9IHN0eWxlZChGaWxsQnV0dG9uKShcbiAgY3NzKHtcbiAgICBtYXhXaWR0aDogMTcwLFxuICAgIG10OiB7IF86IDE2LCBsZzogOTYgfSxcbiAgICB0ZXh0QWxpZ246IHsgXzogJ2NlbnRlcicsIG1kOiAnbGVmdCcgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdWJqZWN0QW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgYWxpZ25Db250ZW50OiAnY2VudGVyJyxcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQmFubmVyQW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgIGZvbnRTaXplOiAxNixcbiAgICBmb250V2VpZ2h0OiA3MDAsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgdG9waWNXcmFwcGVyUHJvcHMgPSB7IGFzOiAnbGknLCB3aWR0aDogJzEycmVtJyB9IGFzIGNvbnN0O1xuXG5leHBvcnQgY29uc3QgdXNlQmFubmVyUmVzcG9uc2l2ZVN0eWxlcyA9ICgpOiB7XG4gIGJnOiBDb2xvcnM7XG4gIGNvbG9yOiBDb2xvcnM7XG59ID0+IHtcbiAgY29uc3QgbW9kZSA9IHVzZUN1cnJlbnRNb2RlKCk7XG5cbiAgY29uc3QgYmcgPSBtb2RlID09PSAnZGFyaycgPyAnbmF2eS05MDAnIDogJ3BhbGVZZWxsb3cnO1xuICBjb25zdCBjb2xvciA9IG1vZGUgPT09ICdkYXJrJyA/ICd3aGl0ZScgOiAnbmF2eS05MDAnO1xuXG4gIHJldHVybiB7IGJnLCBjb2xvciB9O1xufTtcblxuZXhwb3J0IGNvbnN0IEZ1bkJhY2tncm91bmQgPSBzdHlsZWQoQmFja2dyb3VuZCk8e1xuICBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ246IGJvb2xlYW47XG59PmBcbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMuZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduXG4gICAgICA/IGBcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zcyBlYXNlO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuXG4gICAgJjo6YmVmb3JlIHtcbiAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAtNTAlO1xuICAgICAgbGVmdDogLTUwJTtcbiAgICAgIHdpZHRoOiAyMDAlO1xuICAgICAgaGVpZ2h0OiAyMDAlO1xuICAgICAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KFxuICAgICAgICAxMjBkZWcsXG4gICAgICAgIHJnYmEoMjU1LCAyMTUsIDAsIDAuMjUpIDIwJSxcbiAgICAgICAgcmdiYSgyNTUsIDIyMywgMTAwLCAwLjM1KSA0MCUsXG4gICAgICAgIHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4xNSkgNTAlLFxuICAgICAgICB0cmFuc3BhcmVudCAxMDAlXG4gICAgICApO1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDEwMCUpIHJvdGF0ZSgyNWRlZyk7XG4gICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgIG9wYWNpdHk6IDA7XG4gICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuM3MgZWFzZTtcbiAgICAgIHotaW5kZXg6IDE7XG4gICAgfVxuICAgICY6aG92ZXIge1xuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxLjAzKTtcbiAgICAgICY6OmJlZm9yZSB7XG4gICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgIGFuaW1hdGlvbjogc2hpbmUgMS4ycyBlYXNlIGZvcndhcmRzO1xuICAgICAgfVxuICAgIH1cbiAgICBAa2V5ZnJhbWVzIHNoaW5lIHtcbiAgICAgIGZyb20ge1xuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMTAwJSkgcm90YXRlKDI1ZGVnKTtcbiAgICAgIH1cbiAgICAgIHRvIHtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDApIHJvdGF0ZSgyNWRlZyk7XG4gICAgICB9XG4gICAgfVxuICBgXG4gICAgICA6ICcnfVxuYDtcbiJdfQ== */");
|
|
42
42
|
export const BannerAnchor = /*#__PURE__*/_styled(Anchor, {
|
|
43
|
-
target: "
|
|
43
|
+
target: "e3x9tsc1",
|
|
44
44
|
label: "BannerAnchor"
|
|
45
45
|
})(css({
|
|
46
46
|
alignItems: 'center',
|
|
47
47
|
display: 'flex',
|
|
48
48
|
fontSize: 16,
|
|
49
49
|
fontWeight: 700
|
|
50
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
50
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb24vZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlDNEIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nU2VjdGlvbi9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBbmNob3IsIENvbHVtbiwgRmlsbEJ1dHRvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7XG4gIEJhY2tncm91bmQsXG4gIENvbG9ycyxcbiAgY3NzLFxuICB1c2VDdXJyZW50TW9kZSxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbHVtbiA9IHN0eWxlZChDb2x1bW4pKFxuICBjc3Moe1xuICAgIGJvcmRlckJvdHRvbTogMSxcbiAgICBib3JkZXJDb2xvcjogJ2JvcmRlci1wcmltYXJ5JyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBbmNob3JDb2x1bW4gPSBzdHlsZWQoQ29sdW1uKShcbiAgY3NzKHtcbiAgICBwYjogMTYsXG4gICAgJyY6bGFzdC1jaGlsZCc6IHtcbiAgICAgIHBiOiAwLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRmlsbEJ1dHRvbiA9IHN0eWxlZChGaWxsQnV0dG9uKShcbiAgY3NzKHtcbiAgICBtYXhXaWR0aDogMTcwLFxuICAgIG10OiB7IF86IDE2LCBsZzogOTYgfSxcbiAgICB0ZXh0QWxpZ246IHsgXzogJ2NlbnRlcicsIG1kOiAnbGVmdCcgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdWJqZWN0QW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgYWxpZ25Db250ZW50OiAnY2VudGVyJyxcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQmFubmVyQW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgIGZvbnRTaXplOiAxNixcbiAgICBmb250V2VpZ2h0OiA3MDAsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgdG9waWNXcmFwcGVyUHJvcHMgPSB7IGFzOiAnbGknLCB3aWR0aDogJzEycmVtJyB9IGFzIGNvbnN0O1xuXG5leHBvcnQgY29uc3QgdXNlQmFubmVyUmVzcG9uc2l2ZVN0eWxlcyA9ICgpOiB7XG4gIGJnOiBDb2xvcnM7XG4gIGNvbG9yOiBDb2xvcnM7XG59ID0+IHtcbiAgY29uc3QgbW9kZSA9IHVzZUN1cnJlbnRNb2RlKCk7XG5cbiAgY29uc3QgYmcgPSBtb2RlID09PSAnZGFyaycgPyAnbmF2eS05MDAnIDogJ3BhbGVZZWxsb3cnO1xuICBjb25zdCBjb2xvciA9IG1vZGUgPT09ICdkYXJrJyA/ICd3aGl0ZScgOiAnbmF2eS05MDAnO1xuXG4gIHJldHVybiB7IGJnLCBjb2xvciB9O1xufTtcblxuZXhwb3J0IGNvbnN0IEZ1bkJhY2tncm91bmQgPSBzdHlsZWQoQmFja2dyb3VuZCk8e1xuICBkaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ246IGJvb2xlYW47XG59PmBcbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMuZGlzcGxheUdsb2JhbE5hdlJlZGVzaWduXG4gICAgICA/IGBcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zcyBlYXNlO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuXG4gICAgJjo6YmVmb3JlIHtcbiAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAtNTAlO1xuICAgICAgbGVmdDogLTUwJTtcbiAgICAgIHdpZHRoOiAyMDAlO1xuICAgICAgaGVpZ2h0OiAyMDAlO1xuICAgICAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KFxuICAgICAgICAxMjBkZWcsXG4gICAgICAgIHJnYmEoMjU1LCAyMTUsIDAsIDAuMjUpIDIwJSxcbiAgICAgICAgcmdiYSgyNTUsIDIyMywgMTAwLCAwLjM1KSA0MCUsXG4gICAgICAgIHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4xNSkgNTAlLFxuICAgICAgICB0cmFuc3BhcmVudCAxMDAlXG4gICAgICApO1xuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDEwMCUpIHJvdGF0ZSgyNWRlZyk7XG4gICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgIG9wYWNpdHk6IDA7XG4gICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDAuM3MgZWFzZTtcbiAgICAgIHotaW5kZXg6IDE7XG4gICAgfVxuICAgICY6aG92ZXIge1xuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxLjAzKTtcbiAgICAgICY6OmJlZm9yZSB7XG4gICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgIGFuaW1hdGlvbjogc2hpbmUgMS4ycyBlYXNlIGZvcndhcmRzO1xuICAgICAgfVxuICAgIH1cbiAgICBAa2V5ZnJhbWVzIHNoaW5lIHtcbiAgICAgIGZyb20ge1xuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMTAwJSkgcm90YXRlKDI1ZGVnKTtcbiAgICAgIH1cbiAgICAgIHRvIHtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDApIHJvdGF0ZSgyNWRlZyk7XG4gICAgICB9XG4gICAgfVxuICBgXG4gICAgICA6ICcnfVxuYDtcbiJdfQ== */");
|
|
51
51
|
export const topicWrapperProps = {
|
|
52
52
|
as: 'li',
|
|
53
53
|
width: '12rem'
|
|
@@ -60,4 +60,48 @@ export const useBannerResponsiveStyles = () => {
|
|
|
60
60
|
bg,
|
|
61
61
|
color
|
|
62
62
|
};
|
|
63
|
-
};
|
|
63
|
+
};
|
|
64
|
+
export const FunBackground = /*#__PURE__*/_styled(Background, {
|
|
65
|
+
target: "e3x9tsc0",
|
|
66
|
+
label: "FunBackground"
|
|
67
|
+
})(props => props.displayGlobalNavRedesign ? `
|
|
68
|
+
transition: transform 0.3s ease;
|
|
69
|
+
position: relative;
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
|
|
72
|
+
&::before {
|
|
73
|
+
content: '';
|
|
74
|
+
position: absolute;
|
|
75
|
+
top: -50%;
|
|
76
|
+
left: -50%;
|
|
77
|
+
width: 200%;
|
|
78
|
+
height: 200%;
|
|
79
|
+
background: linear-gradient(
|
|
80
|
+
120deg,
|
|
81
|
+
rgba(255, 215, 0, 0.25) 20%,
|
|
82
|
+
rgba(255, 223, 100, 0.35) 40%,
|
|
83
|
+
rgba(255, 255, 255, 0.15) 50%,
|
|
84
|
+
transparent 100%
|
|
85
|
+
);
|
|
86
|
+
transform: translateX(100%) rotate(25deg);
|
|
87
|
+
pointer-events: none;
|
|
88
|
+
opacity: 0;
|
|
89
|
+
transition: opacity 0.3s ease;
|
|
90
|
+
z-index: 1;
|
|
91
|
+
}
|
|
92
|
+
&:hover {
|
|
93
|
+
transform: scale(1.03);
|
|
94
|
+
&::before {
|
|
95
|
+
opacity: 1;
|
|
96
|
+
animation: shine 1.2s ease forwards;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
@keyframes shine {
|
|
100
|
+
from {
|
|
101
|
+
transform: translateX(100%) rotate(25deg);
|
|
102
|
+
}
|
|
103
|
+
to {
|
|
104
|
+
transform: translateX(0) rotate(25deg);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
` : '', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ1NlY3Rpb24vZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtFRSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckNhdGFsb2dTZWN0aW9uL2VsZW1lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFuY2hvciwgQ29sdW1uLCBGaWxsQnV0dG9uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHtcbiAgQmFja2dyb3VuZCxcbiAgQ29sb3JzLFxuICBjc3MsXG4gIHVzZUN1cnJlbnRNb2RlLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29sdW1uID0gc3R5bGVkKENvbHVtbikoXG4gIGNzcyh7XG4gICAgYm9yZGVyQm90dG9tOiAxLFxuICAgIGJvcmRlckNvbG9yOiAnYm9yZGVyLXByaW1hcnknLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEFuY2hvckNvbHVtbiA9IHN0eWxlZChDb2x1bW4pKFxuICBjc3Moe1xuICAgIHBiOiAxNixcbiAgICAnJjpsYXN0LWNoaWxkJzoge1xuICAgICAgcGI6IDAsXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGaWxsQnV0dG9uID0gc3R5bGVkKEZpbGxCdXR0b24pKFxuICBjc3Moe1xuICAgIG1heFdpZHRoOiAxNzAsXG4gICAgbXQ6IHsgXzogMTYsIGxnOiA5NiB9LFxuICAgIHRleHRBbGlnbjogeyBfOiAnY2VudGVyJywgbWQ6ICdsZWZ0JyB9LFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN1YmplY3RBbmNob3IgPSBzdHlsZWQoQW5jaG9yKShcbiAgY3NzKHtcbiAgICBhbGlnbkNvbnRlbnQ6ICdjZW50ZXInLFxuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBCYW5uZXJBbmNob3IgPSBzdHlsZWQoQW5jaG9yKShcbiAgY3NzKHtcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgZm9udFNpemU6IDE2LFxuICAgIGZvbnRXZWlnaHQ6IDcwMCxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCB0b3BpY1dyYXBwZXJQcm9wcyA9IHsgYXM6ICdsaScsIHdpZHRoOiAnMTJyZW0nIH0gYXMgY29uc3Q7XG5cbmV4cG9ydCBjb25zdCB1c2VCYW5uZXJSZXNwb25zaXZlU3R5bGVzID0gKCk6IHtcbiAgYmc6IENvbG9ycztcbiAgY29sb3I6IENvbG9ycztcbn0gPT4ge1xuICBjb25zdCBtb2RlID0gdXNlQ3VycmVudE1vZGUoKTtcblxuICBjb25zdCBiZyA9IG1vZGUgPT09ICdkYXJrJyA/ICduYXZ5LTkwMCcgOiAncGFsZVllbGxvdyc7XG4gIGNvbnN0IGNvbG9yID0gbW9kZSA9PT0gJ2RhcmsnID8gJ3doaXRlJyA6ICduYXZ5LTkwMCc7XG5cbiAgcmV0dXJuIHsgYmcsIGNvbG9yIH07XG59O1xuXG5leHBvcnQgY29uc3QgRnVuQmFja2dyb3VuZCA9IHN0eWxlZChCYWNrZ3JvdW5kKTx7XG4gIGRpc3BsYXlHbG9iYWxOYXZSZWRlc2lnbjogYm9vbGVhbjtcbn0+YFxuICAkeyhwcm9wcykgPT5cbiAgICBwcm9wcy5kaXNwbGF5R2xvYmFsTmF2UmVkZXNpZ25cbiAgICAgID8gYFxuICAgIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjNzIGVhc2U7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgICAmOjpiZWZvcmUge1xuICAgICAgY29udGVudDogJyc7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IC01MCU7XG4gICAgICBsZWZ0OiAtNTAlO1xuICAgICAgd2lkdGg6IDIwMCU7XG4gICAgICBoZWlnaHQ6IDIwMCU7XG4gICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgIDEyMGRlZyxcbiAgICAgICAgcmdiYSgyNTUsIDIxNSwgMCwgMC4yNSkgMjAlLFxuICAgICAgICByZ2JhKDI1NSwgMjIzLCAxMDAsIDAuMzUpIDQwJSxcbiAgICAgICAgcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjE1KSA1MCUsXG4gICAgICAgIHRyYW5zcGFyZW50IDEwMCVcbiAgICAgICk7XG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMTAwJSkgcm90YXRlKDI1ZGVnKTtcbiAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgICAgb3BhY2l0eTogMDtcbiAgICAgIHRyYW5zaXRpb246IG9wYWNpdHkgMC4zcyBlYXNlO1xuICAgICAgei1pbmRleDogMTtcbiAgICB9XG4gICAgJjpob3ZlciB7XG4gICAgICB0cmFuc2Zvcm06IHNjYWxlKDEuMDMpO1xuICAgICAgJjo6YmVmb3JlIHtcbiAgICAgICAgb3BhY2l0eTogMTtcbiAgICAgICAgYW5pbWF0aW9uOiBzaGluZSAxLjJzIGVhc2UgZm9yd2FyZHM7XG4gICAgICB9XG4gICAgfVxuICAgIEBrZXlmcmFtZXMgc2hpbmUge1xuICAgICAgZnJvbSB7XG4gICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgxMDAlKSByb3RhdGUoMjVkZWcpO1xuICAgICAgfVxuICAgICAgdG8ge1xuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCkgcm90YXRlKDI1ZGVnKTtcbiAgICAgIH1cbiAgICB9XG4gIGBcbiAgICAgIDogJyd9XG5gO1xuIl19 */"));
|
|
@@ -4,11 +4,11 @@ import { TinyBlocks } from '@codecademy/gamut-illustrations';
|
|
|
4
4
|
import { Background } from '@codecademy/gamut-styles';
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import { useContext, useEffect, useRef } from 'react';
|
|
7
|
-
import { HeaderQuizContext } from '../../../GlobalHeader';
|
|
7
|
+
import { GlobalNavRedesignContext, HeaderQuizContext } from '../../../GlobalHeader';
|
|
8
8
|
import { careerPaths, getTopSubjects, liveLearningHubItems, topLanguages } from '../../../lib/catalogList';
|
|
9
9
|
import { DescriptionSectionContainer, LayoutGridAntiAliased, useMegaMenuHeaderResponsiveStyles } from '../../shared';
|
|
10
10
|
import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
|
|
11
|
-
import { BannerAnchor, StyledAnchorColumn, StyledColumn, StyledFillButton, SubjectAnchor, topicWrapperProps, useBannerResponsiveStyles } from './elements';
|
|
11
|
+
import { BannerAnchor, FunBackground, StyledAnchorColumn, StyledColumn, StyledFillButton, SubjectAnchor, topicWrapperProps, useBannerResponsiveStyles } from './elements';
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
13
|
const quizAnchorData = {
|
|
14
14
|
text: 'Take our quiz',
|
|
@@ -53,6 +53,7 @@ export const AppHeaderCatalogSection = /*#__PURE__*/React.forwardRef(({
|
|
|
53
53
|
showOnboardingQuiz,
|
|
54
54
|
showSortingQuiz
|
|
55
55
|
} = useContext(HeaderQuizContext);
|
|
56
|
+
const displayGlobalNavRedesign = useContext(GlobalNavRedesignContext);
|
|
56
57
|
const tabIndex = isOpen === false ? -1 : 0;
|
|
57
58
|
const styles = useMegaMenuHeaderResponsiveStyles();
|
|
58
59
|
const bannerStyles = useBannerResponsiveStyles();
|
|
@@ -102,7 +103,7 @@ export const AppHeaderCatalogSection = /*#__PURE__*/React.forwardRef(({
|
|
|
102
103
|
lg: 3
|
|
103
104
|
},
|
|
104
105
|
rowspan: 2,
|
|
105
|
-
children: /*#__PURE__*/_jsx(
|
|
106
|
+
children: /*#__PURE__*/_jsx(FunBackground, {
|
|
106
107
|
...styles,
|
|
107
108
|
px: {
|
|
108
109
|
_: 16,
|
|
@@ -116,6 +117,7 @@ export const AppHeaderCatalogSection = /*#__PURE__*/React.forwardRef(({
|
|
|
116
117
|
sm: 32
|
|
117
118
|
},
|
|
118
119
|
borderBottom: 1,
|
|
120
|
+
displayGlobalNavRedesign: displayGlobalNavRedesign,
|
|
119
121
|
children: /*#__PURE__*/_jsxs(FlexBox, {
|
|
120
122
|
height: "100%",
|
|
121
123
|
flexDirection: "column",
|
package/dist/Banner/index.d.ts
CHANGED
|
@@ -16,16 +16,6 @@ export interface BannerProps extends Omit<BackgroundProps, 'bg'> {
|
|
|
16
16
|
/** Call to action click callback */
|
|
17
17
|
onCtaClick?: () => void;
|
|
18
18
|
ctaAriaLabel?: string;
|
|
19
|
-
/** Experimental flag — when true renders <EnhancedBanner> */
|
|
20
|
-
isInEnhancedBannerVariant?: boolean;
|
|
21
|
-
header?: string | null;
|
|
22
|
-
subheader?: string | null;
|
|
23
|
-
cta?: {
|
|
24
|
-
title: string;
|
|
25
|
-
href: string;
|
|
26
|
-
} | null;
|
|
27
|
-
countdownTo?: string | null;
|
|
28
|
-
onCountdownExpire?: () => void;
|
|
29
19
|
}
|
|
30
20
|
export declare const Banner: React.FC<BannerProps>;
|
|
31
21
|
export {};
|
package/dist/Banner/index.js
CHANGED
|
@@ -4,7 +4,6 @@ import { MiniDeleteIcon } from '@codecademy/gamut-icons';
|
|
|
4
4
|
import { Background, css } from '@codecademy/gamut-styles';
|
|
5
5
|
import { useMemo } from 'react';
|
|
6
6
|
import * as React from 'react';
|
|
7
|
-
import { EnhancedBanner } from './EnhancedBanner';
|
|
8
7
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
8
|
const bannerVariants = {
|
|
10
9
|
navy: 'navy',
|
|
@@ -25,17 +24,17 @@ const bannerStyles = {
|
|
|
25
24
|
const BannerContainerBackground = /*#__PURE__*/_styled(Background, {
|
|
26
25
|
target: "em3wgfy2",
|
|
27
26
|
label: "BannerContainerBackground"
|
|
28
|
-
})(css(bannerStyles), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
27
|
+
})(css(bannerStyles), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9CYW5uZXIvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlDa0MiLCJmaWxlIjoiLi4vLi4vc3JjL0Jhbm5lci9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEljb25CdXR0b24sIE1hcmtkb3duLCBUZXh0QnV0dG9uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgTWluaURlbGV0ZUljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBCYWNrZ3JvdW5kLCBCYWNrZ3JvdW5kUHJvcHMsIGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBSZWFjdE5vZGUsIHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCB0eXBlIEJhbm5lclZhcmlhbnQgPSBrZXlvZiB0eXBlb2YgYmFubmVyVmFyaWFudHM7XG5jb25zdCBiYW5uZXJWYXJpYW50cyA9IHtcbiAgbmF2eTogJ25hdnknLFxuICB5ZWxsb3c6ICd5ZWxsb3cnLFxuICBzdWJ0bGU6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbn0gYXMgY29uc3Q7XG5cbmNvbnN0IGlzQWxsb3dlZFZhcmlhbnQgPSAoXG4gIHZhcmlhbnQ6IHN0cmluZyB8IHVuZGVmaW5lZCB8IG51bGxcbik6IHZhcmlhbnQgaXMgQmFubmVyVmFyaWFudCA9PlxuICBPYmplY3Qua2V5cyhiYW5uZXJWYXJpYW50cykuaW5jbHVkZXModmFyaWFudCBhcyBCYW5uZXJWYXJpYW50KTtcblxuZXhwb3J0IGludGVyZmFjZSBCYW5uZXJQcm9wcyBleHRlbmRzIE9taXQ8QmFja2dyb3VuZFByb3BzLCAnYmcnPiB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGUgfCBzdHJpbmc7XG4gIC8qKiBWaXN1YWwgdmFyaWF0aW9uIGZvciBiYW5uZXJzLCBkZWZhdWx0cyB0byBuYXZ5ICovXG4gIHZhcmlhbnQ/OiBCYW5uZXJWYXJpYW50IHwgbnVsbDtcbiAgLyoqICBDYWxsYmFjayBjYWxsZWQgd2hlbiB0aGUgdXNlciBjbG9zZXMgdGhlIGJhbm5lci4gKi9cbiAgb25DbG9zZT86ICgpID0+IHZvaWQ7XG4gIC8qKiBDYWxsIHRvIGFjdGlvbiBjbGljayBjYWxsYmFjayAqL1xuICBvbkN0YUNsaWNrPzogKCkgPT4gdm9pZDtcbiAgY3RhQXJpYUxhYmVsPzogc3RyaW5nO1xufVxuXG5jb25zdCBiYW5uZXJTdHlsZXMgPSB7XG4gIHdpZHRoOiAnMTAwJScsXG4gIHA6IDQsXG4gIGRpc3BsYXk6ICdncmlkJyxcbiAgZ3JpZFRlbXBsYXRlQ29sdW1uczogJzJyZW0gbWlubWF4KDAsIDFmcikgMnJlbScsXG4gIGdyaWRUZW1wbGF0ZUFyZWFzOiBcIidlbXB0eSBjb250ZW50IGNsb3NlJ1wiLFxuICBjb2x1bW5HYXA6IDgsXG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICB0ZXh0QWxpZ246ICdjZW50ZXInLFxufSBhcyBjb25zdDtcblxuY29uc3QgQmFubmVyQ29udGFpbmVyQmFja2dyb3VuZCA9IHN0eWxlZChCYWNrZ3JvdW5kKShjc3MoYmFubmVyU3R5bGVzKSk7XG5cbmNvbnN0IEJhbm5lckNvbnRhaW5lckJveCA9IHN0eWxlZChCb3gpKGNzcyhiYW5uZXJTdHlsZXMpKTtcblxuY29uc3QgQmFubmVyTWFya2Rvd24gPSBzdHlsZWQoTWFya2Rvd24pKGNzcyh7IGZvbnRTaXplOiAnaW5oZXJpdCcgfSkpO1xuXG5jb25zdCBiaW5kQmFubmVyQW5jaG9yID0gKFxuICBvbkN0YUNsaWNrPzogQmFubmVyUHJvcHNbJ29uQ3RhQ2xpY2snXSxcbiAgY3RhQXJpYUxhYmVsPzogc3RyaW5nXG4pID0+ICh7XG4gIGFsbG93ZWRBdHRyaWJ1dGVzOiBbJ2hyZWYnLCAndGFyZ2V0J10sXG4gIGNvbXBvbmVudDogVGV4dEJ1dHRvbixcbiAgcHJvY2Vzc05vZGU6IChfbm9kZTogdW5rbm93biwgcHJvcHM6IHsgb25DbGljaz86ICgpID0+IHZvaWQgfSkgPT4gKFxuICAgIDxUZXh0QnV0dG9uXG4gICAgICB7Li4ucHJvcHN9XG4gICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgIG9uQ3RhQ2xpY2s/LigpO1xuICAgICAgICBwcm9wcz8ub25DbGljaz8uKCk7XG4gICAgICB9fVxuICAgICAgbXg9ezR9XG4gICAgICBzaXplPVwic21hbGxcIlxuICAgICAgdGFyZ2V0PVwiX0JMQU5LXCJcbiAgICAgIGFyaWEtbGFiZWw9e2N0YUFyaWFMYWJlbH1cbiAgICAgIGRpc3BsYXk9e3sgXzogJ2Jsb2NrJywgeHM6ICdpbmxpbmUtZmxleCcgfX1cbiAgICAvPlxuICApLFxufSk7XG5cbmV4cG9ydCBjb25zdCBCYW5uZXI6IFJlYWN0LkZDPEJhbm5lclByb3BzPiA9ICh7XG4gIGNoaWxkcmVuLFxuICBjdGFBcmlhTGFiZWwsXG4gIHZhcmlhbnQgPSAnbmF2eScsXG4gIG9uQ3RhQ2xpY2ssXG4gIG9uQ2xvc2UsXG4gIC4uLnJlc3Rcbn0pID0+IHtcbiAgY29uc3Qgb3ZlcnJpZGVzID0gdXNlTWVtbyhcbiAgICAoKSA9PiAoe1xuICAgICAgYTogYmluZEJhbm5lckFuY2hvcihvbkN0YUNsaWNrLCBjdGFBcmlhTGFiZWwpLFxuICAgIH0pLFxuICAgIFtvbkN0YUNsaWNrLCBjdGFBcmlhTGFiZWxdXG4gICk7XG5cbiAgLy8gQ29udGVudGZ1bCBpcyB1bmFibGUgdG8gcHJvZ3JhbW1hdGljYWxseSBjb21tdW5pY2F0ZSB3aGF0IHZhbHVlcyBpdCBkb2VzL2RvZXNuJ3QgYWxsb3cgaW4gdGhlc2Uga2luZHMgb2YgZmllbGRzLFxuICAvLyB3aGljaCBtYWtlcyBpdCBkaWZmaWN1bHQgZm9yIHVzIHRvIGVuc3VyZSB0aGUgQ29udGVudGZ1bCBjb25maWd1cmF0aW9uIGhhc24ndCBkaXZlcmdlZCBmcm9tIEdhbXV0IHJlc3RyaWN0aW9ucy5cbiAgY29uc3Qgc2FmZVZhcmlhbnQ6IEJhbm5lclZhcmlhbnQgPSBpc0FsbG93ZWRWYXJpYW50KHZhcmlhbnQpXG4gICAgPyB2YXJpYW50XG4gICAgOiAnbmF2eSc7XG5cbiAgY29uc3QgQmFubmVyQ29udGFpbmVyID1cbiAgICBzYWZlVmFyaWFudCA9PT0gJ3N1YnRsZScgPyBCYW5uZXJDb250YWluZXJCb3ggOiBCYW5uZXJDb250YWluZXJCYWNrZ3JvdW5kO1xuXG4gIHJldHVybiAoXG4gICAgPEJhbm5lckNvbnRhaW5lciB7Li4ucmVzdH0gYmc9e2Jhbm5lclZhcmlhbnRzW3NhZmVWYXJpYW50XX0+XG4gICAgICA8Qm94IGdyaWRBcmVhPVwiY29udGVudFwiIGZvbnRTaXplPVwiaW5oZXJpdFwiPlxuICAgICAgICB7dHlwZW9mIGNoaWxkcmVuID09PSAnc3RyaW5nJyA/IChcbiAgICAgICAgICA8QmFubmVyTWFya2Rvd25cbiAgICAgICAgICAgIG92ZXJyaWRlcz17b3ZlcnJpZGVzfVxuICAgICAgICAgICAgdGV4dD17Y2hpbGRyZW59XG4gICAgICAgICAgICBza2lwRGVmYXVsdE92ZXJyaWRlcz17eyBhOiB0cnVlIH19XG4gICAgICAgICAgLz5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICBjaGlsZHJlblxuICAgICAgICApfVxuICAgICAgPC9Cb3g+XG4gICAgICB7b25DbG9zZSAmJiAoXG4gICAgICAgIDxCb3ggZ3JpZEFyZWE9XCJjbG9zZVwiIGFsaWduU2VsZj1cInN0YXJ0XCI+XG4gICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICAgIGljb249e01pbmlEZWxldGVJY29ufVxuICAgICAgICAgICAgb25DbGljaz17b25DbG9zZX1cbiAgICAgICAgICAgIHRpcD1cIkNsb3NlIGJhbm5lclwiXG4gICAgICAgICAgICB0aXBQcm9wcz17eyBhbGlnbm1lbnQ6ICdib3R0b20tY2VudGVyJywgcGxhY2VtZW50OiAnZmxvYXRpbmcnIH19XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9Cb3g+XG4gICAgICApfVxuICAgIDwvQmFubmVyQ29udGFpbmVyPlxuICApO1xufTtcbiJdfQ== */");
|
|
29
28
|
const BannerContainerBox = /*#__PURE__*/_styled(Box, {
|
|
30
29
|
target: "em3wgfy1",
|
|
31
30
|
label: "BannerContainerBox"
|
|
32
|
-
})(css(bannerStyles), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
31
|
+
})(css(bannerStyles), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9CYW5uZXIvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDMkIiLCJmaWxlIjoiLi4vLi4vc3JjL0Jhbm5lci9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEljb25CdXR0b24sIE1hcmtkb3duLCBUZXh0QnV0dG9uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgTWluaURlbGV0ZUljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBCYWNrZ3JvdW5kLCBCYWNrZ3JvdW5kUHJvcHMsIGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBSZWFjdE5vZGUsIHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCB0eXBlIEJhbm5lclZhcmlhbnQgPSBrZXlvZiB0eXBlb2YgYmFubmVyVmFyaWFudHM7XG5jb25zdCBiYW5uZXJWYXJpYW50cyA9IHtcbiAgbmF2eTogJ25hdnknLFxuICB5ZWxsb3c6ICd5ZWxsb3cnLFxuICBzdWJ0bGU6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbn0gYXMgY29uc3Q7XG5cbmNvbnN0IGlzQWxsb3dlZFZhcmlhbnQgPSAoXG4gIHZhcmlhbnQ6IHN0cmluZyB8IHVuZGVmaW5lZCB8IG51bGxcbik6IHZhcmlhbnQgaXMgQmFubmVyVmFyaWFudCA9PlxuICBPYmplY3Qua2V5cyhiYW5uZXJWYXJpYW50cykuaW5jbHVkZXModmFyaWFudCBhcyBCYW5uZXJWYXJpYW50KTtcblxuZXhwb3J0IGludGVyZmFjZSBCYW5uZXJQcm9wcyBleHRlbmRzIE9taXQ8QmFja2dyb3VuZFByb3BzLCAnYmcnPiB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGUgfCBzdHJpbmc7XG4gIC8qKiBWaXN1YWwgdmFyaWF0aW9uIGZvciBiYW5uZXJzLCBkZWZhdWx0cyB0byBuYXZ5ICovXG4gIHZhcmlhbnQ/OiBCYW5uZXJWYXJpYW50IHwgbnVsbDtcbiAgLyoqICBDYWxsYmFjayBjYWxsZWQgd2hlbiB0aGUgdXNlciBjbG9zZXMgdGhlIGJhbm5lci4gKi9cbiAgb25DbG9zZT86ICgpID0+IHZvaWQ7XG4gIC8qKiBDYWxsIHRvIGFjdGlvbiBjbGljayBjYWxsYmFjayAqL1xuICBvbkN0YUNsaWNrPzogKCkgPT4gdm9pZDtcbiAgY3RhQXJpYUxhYmVsPzogc3RyaW5nO1xufVxuXG5jb25zdCBiYW5uZXJTdHlsZXMgPSB7XG4gIHdpZHRoOiAnMTAwJScsXG4gIHA6IDQsXG4gIGRpc3BsYXk6ICdncmlkJyxcbiAgZ3JpZFRlbXBsYXRlQ29sdW1uczogJzJyZW0gbWlubWF4KDAsIDFmcikgMnJlbScsXG4gIGdyaWRUZW1wbGF0ZUFyZWFzOiBcIidlbXB0eSBjb250ZW50IGNsb3NlJ1wiLFxuICBjb2x1bW5HYXA6IDgsXG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICB0ZXh0QWxpZ246ICdjZW50ZXInLFxufSBhcyBjb25zdDtcblxuY29uc3QgQmFubmVyQ29udGFpbmVyQmFja2dyb3VuZCA9IHN0eWxlZChCYWNrZ3JvdW5kKShjc3MoYmFubmVyU3R5bGVzKSk7XG5cbmNvbnN0IEJhbm5lckNvbnRhaW5lckJveCA9IHN0eWxlZChCb3gpKGNzcyhiYW5uZXJTdHlsZXMpKTtcblxuY29uc3QgQmFubmVyTWFya2Rvd24gPSBzdHlsZWQoTWFya2Rvd24pKGNzcyh7IGZvbnRTaXplOiAnaW5oZXJpdCcgfSkpO1xuXG5jb25zdCBiaW5kQmFubmVyQW5jaG9yID0gKFxuICBvbkN0YUNsaWNrPzogQmFubmVyUHJvcHNbJ29uQ3RhQ2xpY2snXSxcbiAgY3RhQXJpYUxhYmVsPzogc3RyaW5nXG4pID0+ICh7XG4gIGFsbG93ZWRBdHRyaWJ1dGVzOiBbJ2hyZWYnLCAndGFyZ2V0J10sXG4gIGNvbXBvbmVudDogVGV4dEJ1dHRvbixcbiAgcHJvY2Vzc05vZGU6IChfbm9kZTogdW5rbm93biwgcHJvcHM6IHsgb25DbGljaz86ICgpID0+IHZvaWQgfSkgPT4gKFxuICAgIDxUZXh0QnV0dG9uXG4gICAgICB7Li4ucHJvcHN9XG4gICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgIG9uQ3RhQ2xpY2s/LigpO1xuICAgICAgICBwcm9wcz8ub25DbGljaz8uKCk7XG4gICAgICB9fVxuICAgICAgbXg9ezR9XG4gICAgICBzaXplPVwic21hbGxcIlxuICAgICAgdGFyZ2V0PVwiX0JMQU5LXCJcbiAgICAgIGFyaWEtbGFiZWw9e2N0YUFyaWFMYWJlbH1cbiAgICAgIGRpc3BsYXk9e3sgXzogJ2Jsb2NrJywgeHM6ICdpbmxpbmUtZmxleCcgfX1cbiAgICAvPlxuICApLFxufSk7XG5cbmV4cG9ydCBjb25zdCBCYW5uZXI6IFJlYWN0LkZDPEJhbm5lclByb3BzPiA9ICh7XG4gIGNoaWxkcmVuLFxuICBjdGFBcmlhTGFiZWwsXG4gIHZhcmlhbnQgPSAnbmF2eScsXG4gIG9uQ3RhQ2xpY2ssXG4gIG9uQ2xvc2UsXG4gIC4uLnJlc3Rcbn0pID0+IHtcbiAgY29uc3Qgb3ZlcnJpZGVzID0gdXNlTWVtbyhcbiAgICAoKSA9PiAoe1xuICAgICAgYTogYmluZEJhbm5lckFuY2hvcihvbkN0YUNsaWNrLCBjdGFBcmlhTGFiZWwpLFxuICAgIH0pLFxuICAgIFtvbkN0YUNsaWNrLCBjdGFBcmlhTGFiZWxdXG4gICk7XG5cbiAgLy8gQ29udGVudGZ1bCBpcyB1bmFibGUgdG8gcHJvZ3JhbW1hdGljYWxseSBjb21tdW5pY2F0ZSB3aGF0IHZhbHVlcyBpdCBkb2VzL2RvZXNuJ3QgYWxsb3cgaW4gdGhlc2Uga2luZHMgb2YgZmllbGRzLFxuICAvLyB3aGljaCBtYWtlcyBpdCBkaWZmaWN1bHQgZm9yIHVzIHRvIGVuc3VyZSB0aGUgQ29udGVudGZ1bCBjb25maWd1cmF0aW9uIGhhc24ndCBkaXZlcmdlZCBmcm9tIEdhbXV0IHJlc3RyaWN0aW9ucy5cbiAgY29uc3Qgc2FmZVZhcmlhbnQ6IEJhbm5lclZhcmlhbnQgPSBpc0FsbG93ZWRWYXJpYW50KHZhcmlhbnQpXG4gICAgPyB2YXJpYW50XG4gICAgOiAnbmF2eSc7XG5cbiAgY29uc3QgQmFubmVyQ29udGFpbmVyID1cbiAgICBzYWZlVmFyaWFudCA9PT0gJ3N1YnRsZScgPyBCYW5uZXJDb250YWluZXJCb3ggOiBCYW5uZXJDb250YWluZXJCYWNrZ3JvdW5kO1xuXG4gIHJldHVybiAoXG4gICAgPEJhbm5lckNvbnRhaW5lciB7Li4ucmVzdH0gYmc9e2Jhbm5lclZhcmlhbnRzW3NhZmVWYXJpYW50XX0+XG4gICAgICA8Qm94IGdyaWRBcmVhPVwiY29udGVudFwiIGZvbnRTaXplPVwiaW5oZXJpdFwiPlxuICAgICAgICB7dHlwZW9mIGNoaWxkcmVuID09PSAnc3RyaW5nJyA/IChcbiAgICAgICAgICA8QmFubmVyTWFya2Rvd25cbiAgICAgICAgICAgIG92ZXJyaWRlcz17b3ZlcnJpZGVzfVxuICAgICAgICAgICAgdGV4dD17Y2hpbGRyZW59XG4gICAgICAgICAgICBza2lwRGVmYXVsdE92ZXJyaWRlcz17eyBhOiB0cnVlIH19XG4gICAgICAgICAgLz5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICBjaGlsZHJlblxuICAgICAgICApfVxuICAgICAgPC9Cb3g+XG4gICAgICB7b25DbG9zZSAmJiAoXG4gICAgICAgIDxCb3ggZ3JpZEFyZWE9XCJjbG9zZVwiIGFsaWduU2VsZj1cInN0YXJ0XCI+XG4gICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICAgIGljb249e01pbmlEZWxldGVJY29ufVxuICAgICAgICAgICAgb25DbGljaz17b25DbG9zZX1cbiAgICAgICAgICAgIHRpcD1cIkNsb3NlIGJhbm5lclwiXG4gICAgICAgICAgICB0aXBQcm9wcz17eyBhbGlnbm1lbnQ6ICdib3R0b20tY2VudGVyJywgcGxhY2VtZW50OiAnZmxvYXRpbmcnIH19XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9Cb3g+XG4gICAgICApfVxuICAgIDwvQmFubmVyQ29udGFpbmVyPlxuICApO1xufTtcbiJdfQ== */");
|
|
33
32
|
const BannerMarkdown = /*#__PURE__*/_styled(Markdown, {
|
|
34
33
|
target: "em3wgfy0",
|
|
35
34
|
label: "BannerMarkdown"
|
|
36
35
|
})(css({
|
|
37
36
|
fontSize: 'inherit'
|
|
38
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
37
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9CYW5uZXIvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDdUIiLCJmaWxlIjoiLi4vLi4vc3JjL0Jhbm5lci9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEljb25CdXR0b24sIE1hcmtkb3duLCBUZXh0QnV0dG9uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgTWluaURlbGV0ZUljb24gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQgeyBCYWNrZ3JvdW5kLCBCYWNrZ3JvdW5kUHJvcHMsIGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBSZWFjdE5vZGUsIHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCB0eXBlIEJhbm5lclZhcmlhbnQgPSBrZXlvZiB0eXBlb2YgYmFubmVyVmFyaWFudHM7XG5jb25zdCBiYW5uZXJWYXJpYW50cyA9IHtcbiAgbmF2eTogJ25hdnknLFxuICB5ZWxsb3c6ICd5ZWxsb3cnLFxuICBzdWJ0bGU6ICdiYWNrZ3JvdW5kLWhvdmVyJyxcbn0gYXMgY29uc3Q7XG5cbmNvbnN0IGlzQWxsb3dlZFZhcmlhbnQgPSAoXG4gIHZhcmlhbnQ6IHN0cmluZyB8IHVuZGVmaW5lZCB8IG51bGxcbik6IHZhcmlhbnQgaXMgQmFubmVyVmFyaWFudCA9PlxuICBPYmplY3Qua2V5cyhiYW5uZXJWYXJpYW50cykuaW5jbHVkZXModmFyaWFudCBhcyBCYW5uZXJWYXJpYW50KTtcblxuZXhwb3J0IGludGVyZmFjZSBCYW5uZXJQcm9wcyBleHRlbmRzIE9taXQ8QmFja2dyb3VuZFByb3BzLCAnYmcnPiB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGUgfCBzdHJpbmc7XG4gIC8qKiBWaXN1YWwgdmFyaWF0aW9uIGZvciBiYW5uZXJzLCBkZWZhdWx0cyB0byBuYXZ5ICovXG4gIHZhcmlhbnQ/OiBCYW5uZXJWYXJpYW50IHwgbnVsbDtcbiAgLyoqICBDYWxsYmFjayBjYWxsZWQgd2hlbiB0aGUgdXNlciBjbG9zZXMgdGhlIGJhbm5lci4gKi9cbiAgb25DbG9zZT86ICgpID0+IHZvaWQ7XG4gIC8qKiBDYWxsIHRvIGFjdGlvbiBjbGljayBjYWxsYmFjayAqL1xuICBvbkN0YUNsaWNrPzogKCkgPT4gdm9pZDtcbiAgY3RhQXJpYUxhYmVsPzogc3RyaW5nO1xufVxuXG5jb25zdCBiYW5uZXJTdHlsZXMgPSB7XG4gIHdpZHRoOiAnMTAwJScsXG4gIHA6IDQsXG4gIGRpc3BsYXk6ICdncmlkJyxcbiAgZ3JpZFRlbXBsYXRlQ29sdW1uczogJzJyZW0gbWlubWF4KDAsIDFmcikgMnJlbScsXG4gIGdyaWRUZW1wbGF0ZUFyZWFzOiBcIidlbXB0eSBjb250ZW50IGNsb3NlJ1wiLFxuICBjb2x1bW5HYXA6IDgsXG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICB0ZXh0QWxpZ246ICdjZW50ZXInLFxufSBhcyBjb25zdDtcblxuY29uc3QgQmFubmVyQ29udGFpbmVyQmFja2dyb3VuZCA9IHN0eWxlZChCYWNrZ3JvdW5kKShjc3MoYmFubmVyU3R5bGVzKSk7XG5cbmNvbnN0IEJhbm5lckNvbnRhaW5lckJveCA9IHN0eWxlZChCb3gpKGNzcyhiYW5uZXJTdHlsZXMpKTtcblxuY29uc3QgQmFubmVyTWFya2Rvd24gPSBzdHlsZWQoTWFya2Rvd24pKGNzcyh7IGZvbnRTaXplOiAnaW5oZXJpdCcgfSkpO1xuXG5jb25zdCBiaW5kQmFubmVyQW5jaG9yID0gKFxuICBvbkN0YUNsaWNrPzogQmFubmVyUHJvcHNbJ29uQ3RhQ2xpY2snXSxcbiAgY3RhQXJpYUxhYmVsPzogc3RyaW5nXG4pID0+ICh7XG4gIGFsbG93ZWRBdHRyaWJ1dGVzOiBbJ2hyZWYnLCAndGFyZ2V0J10sXG4gIGNvbXBvbmVudDogVGV4dEJ1dHRvbixcbiAgcHJvY2Vzc05vZGU6IChfbm9kZTogdW5rbm93biwgcHJvcHM6IHsgb25DbGljaz86ICgpID0+IHZvaWQgfSkgPT4gKFxuICAgIDxUZXh0QnV0dG9uXG4gICAgICB7Li4ucHJvcHN9XG4gICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgIG9uQ3RhQ2xpY2s/LigpO1xuICAgICAgICBwcm9wcz8ub25DbGljaz8uKCk7XG4gICAgICB9fVxuICAgICAgbXg9ezR9XG4gICAgICBzaXplPVwic21hbGxcIlxuICAgICAgdGFyZ2V0PVwiX0JMQU5LXCJcbiAgICAgIGFyaWEtbGFiZWw9e2N0YUFyaWFMYWJlbH1cbiAgICAgIGRpc3BsYXk9e3sgXzogJ2Jsb2NrJywgeHM6ICdpbmxpbmUtZmxleCcgfX1cbiAgICAvPlxuICApLFxufSk7XG5cbmV4cG9ydCBjb25zdCBCYW5uZXI6IFJlYWN0LkZDPEJhbm5lclByb3BzPiA9ICh7XG4gIGNoaWxkcmVuLFxuICBjdGFBcmlhTGFiZWwsXG4gIHZhcmlhbnQgPSAnbmF2eScsXG4gIG9uQ3RhQ2xpY2ssXG4gIG9uQ2xvc2UsXG4gIC4uLnJlc3Rcbn0pID0+IHtcbiAgY29uc3Qgb3ZlcnJpZGVzID0gdXNlTWVtbyhcbiAgICAoKSA9PiAoe1xuICAgICAgYTogYmluZEJhbm5lckFuY2hvcihvbkN0YUNsaWNrLCBjdGFBcmlhTGFiZWwpLFxuICAgIH0pLFxuICAgIFtvbkN0YUNsaWNrLCBjdGFBcmlhTGFiZWxdXG4gICk7XG5cbiAgLy8gQ29udGVudGZ1bCBpcyB1bmFibGUgdG8gcHJvZ3JhbW1hdGljYWxseSBjb21tdW5pY2F0ZSB3aGF0IHZhbHVlcyBpdCBkb2VzL2RvZXNuJ3QgYWxsb3cgaW4gdGhlc2Uga2luZHMgb2YgZmllbGRzLFxuICAvLyB3aGljaCBtYWtlcyBpdCBkaWZmaWN1bHQgZm9yIHVzIHRvIGVuc3VyZSB0aGUgQ29udGVudGZ1bCBjb25maWd1cmF0aW9uIGhhc24ndCBkaXZlcmdlZCBmcm9tIEdhbXV0IHJlc3RyaWN0aW9ucy5cbiAgY29uc3Qgc2FmZVZhcmlhbnQ6IEJhbm5lclZhcmlhbnQgPSBpc0FsbG93ZWRWYXJpYW50KHZhcmlhbnQpXG4gICAgPyB2YXJpYW50XG4gICAgOiAnbmF2eSc7XG5cbiAgY29uc3QgQmFubmVyQ29udGFpbmVyID1cbiAgICBzYWZlVmFyaWFudCA9PT0gJ3N1YnRsZScgPyBCYW5uZXJDb250YWluZXJCb3ggOiBCYW5uZXJDb250YWluZXJCYWNrZ3JvdW5kO1xuXG4gIHJldHVybiAoXG4gICAgPEJhbm5lckNvbnRhaW5lciB7Li4ucmVzdH0gYmc9e2Jhbm5lclZhcmlhbnRzW3NhZmVWYXJpYW50XX0+XG4gICAgICA8Qm94IGdyaWRBcmVhPVwiY29udGVudFwiIGZvbnRTaXplPVwiaW5oZXJpdFwiPlxuICAgICAgICB7dHlwZW9mIGNoaWxkcmVuID09PSAnc3RyaW5nJyA/IChcbiAgICAgICAgICA8QmFubmVyTWFya2Rvd25cbiAgICAgICAgICAgIG92ZXJyaWRlcz17b3ZlcnJpZGVzfVxuICAgICAgICAgICAgdGV4dD17Y2hpbGRyZW59XG4gICAgICAgICAgICBza2lwRGVmYXVsdE92ZXJyaWRlcz17eyBhOiB0cnVlIH19XG4gICAgICAgICAgLz5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICBjaGlsZHJlblxuICAgICAgICApfVxuICAgICAgPC9Cb3g+XG4gICAgICB7b25DbG9zZSAmJiAoXG4gICAgICAgIDxCb3ggZ3JpZEFyZWE9XCJjbG9zZVwiIGFsaWduU2VsZj1cInN0YXJ0XCI+XG4gICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICAgIGljb249e01pbmlEZWxldGVJY29ufVxuICAgICAgICAgICAgb25DbGljaz17b25DbG9zZX1cbiAgICAgICAgICAgIHRpcD1cIkNsb3NlIGJhbm5lclwiXG4gICAgICAgICAgICB0aXBQcm9wcz17eyBhbGlnbm1lbnQ6ICdib3R0b20tY2VudGVyJywgcGxhY2VtZW50OiAnZmxvYXRpbmcnIH19XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9Cb3g+XG4gICAgICApfVxuICAgIDwvQmFubmVyQ29udGFpbmVyPlxuICApO1xufTtcbiJdfQ== */");
|
|
39
38
|
const bindBannerAnchor = (onCtaClick, ctaAriaLabel) => ({
|
|
40
39
|
allowedAttributes: ['href', 'target'],
|
|
41
40
|
component: TextButton,
|
|
@@ -61,12 +60,6 @@ export const Banner = ({
|
|
|
61
60
|
variant = 'navy',
|
|
62
61
|
onCtaClick,
|
|
63
62
|
onClose,
|
|
64
|
-
isInEnhancedBannerVariant,
|
|
65
|
-
header,
|
|
66
|
-
subheader,
|
|
67
|
-
cta,
|
|
68
|
-
countdownTo,
|
|
69
|
-
onCountdownExpire,
|
|
70
63
|
...rest
|
|
71
64
|
}) => {
|
|
72
65
|
const overrides = useMemo(() => ({
|
|
@@ -77,20 +70,6 @@ export const Banner = ({
|
|
|
77
70
|
// which makes it difficult for us to ensure the Contentful configuration hasn't diverged from Gamut restrictions.
|
|
78
71
|
const safeVariant = isAllowedVariant(variant) ? variant : 'navy';
|
|
79
72
|
const BannerContainer = safeVariant === 'subtle' ? BannerContainerBox : BannerContainerBackground;
|
|
80
|
-
if (isInEnhancedBannerVariant) {
|
|
81
|
-
return /*#__PURE__*/_jsx(EnhancedBanner, {
|
|
82
|
-
header: header,
|
|
83
|
-
subheader: subheader,
|
|
84
|
-
cta: cta,
|
|
85
|
-
countdownTo: countdownTo,
|
|
86
|
-
onCountdownExpire: onCountdownExpire,
|
|
87
|
-
variant: safeVariant,
|
|
88
|
-
onClose: onClose,
|
|
89
|
-
onCtaClick: onCtaClick,
|
|
90
|
-
...rest,
|
|
91
|
-
children: children
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
73
|
return /*#__PURE__*/_jsxs(BannerContainer, {
|
|
95
74
|
...rest,
|
|
96
75
|
bg: bannerVariants[safeVariant],
|
|
@@ -4,7 +4,7 @@ import { renderNewBadge } from '../lib/resourcesList';
|
|
|
4
4
|
import { formatEnterpriseUrl } from './urlHelpers';
|
|
5
5
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
6
|
const shouldShowBusinessDashboardLink = user => {
|
|
7
|
-
return (user?.isAccountManager || user?.isBusinessAdmin) && !user?.isSkillsoftUser;
|
|
7
|
+
return !!(user?.isAccountManager || user?.isBusinessAdmin) && !user?.isSkillsoftUser;
|
|
8
8
|
};
|
|
9
9
|
export const loading = {
|
|
10
10
|
id: 'header-loading',
|
|
@@ -6,5 +6,6 @@ export declare const HeaderQuizContext: React.Context<{
|
|
|
6
6
|
showOnboardingQuiz?: boolean;
|
|
7
7
|
showSortingQuiz?: boolean;
|
|
8
8
|
}>;
|
|
9
|
+
export declare const GlobalNavRedesignContext: React.Context<boolean>;
|
|
9
10
|
export type GlobalHeaderProps = AnonHeader | FreeHeader | ProHeader | EnterpriseHeader | TeamsHeader | LoadingHeader | SimpleHeader | SimpleBootcampHeader;
|
|
10
11
|
export declare const GlobalHeader: React.FC<GlobalHeaderProps>;
|
|
@@ -11,6 +11,7 @@ export const HeaderQuizContext = /*#__PURE__*/React.createContext({
|
|
|
11
11
|
showOnboardingQuiz: false,
|
|
12
12
|
showSortingQuiz: false
|
|
13
13
|
});
|
|
14
|
+
export const GlobalNavRedesignContext = /*#__PURE__*/React.createContext(false);
|
|
14
15
|
|
|
15
16
|
// Overloading getAppHeaderItems function to return different types based on mobile parameter
|
|
16
17
|
|
|
@@ -64,43 +65,46 @@ export const GlobalHeader = props => {
|
|
|
64
65
|
showOnboardingQuiz,
|
|
65
66
|
showSortingQuiz
|
|
66
67
|
},
|
|
67
|
-
children: /*#__PURE__*/
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
68
|
+
children: /*#__PURE__*/_jsx(GlobalNavRedesignContext.Provider, {
|
|
69
|
+
value: !!props.displayGlobalNavRedesign,
|
|
70
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
|
71
|
+
as: "header",
|
|
72
|
+
position: "sticky",
|
|
73
|
+
top: 0,
|
|
74
|
+
zIndex: theme.elements.headerZ,
|
|
75
|
+
overflow: {
|
|
76
|
+
_: 'hidden',
|
|
77
|
+
sm: 'visible'
|
|
78
|
+
} // Prevent tooltip overflow on mobile
|
|
79
|
+
,
|
|
80
|
+
children: [/*#__PURE__*/_jsx(AppHeader, {
|
|
81
|
+
action: combinedAction,
|
|
82
|
+
items: getAppHeaderItems(props, false),
|
|
83
|
+
search: props.search,
|
|
84
|
+
...(props.type === 'anon' ? {
|
|
85
|
+
redirectParam: props.redirectParam
|
|
86
|
+
} : hideNotification ? {} : {
|
|
87
|
+
notifications: props.notifications
|
|
88
|
+
}),
|
|
89
|
+
hideRightButtonDefaults: hideNotification,
|
|
90
|
+
isAnon: props.type === 'anon',
|
|
91
|
+
isTeams: props.type === 'teams',
|
|
92
|
+
type: hideNotification ? 'enterprise' : 'standard'
|
|
93
|
+
}), /*#__PURE__*/_jsx(AppHeaderMobile, {
|
|
94
|
+
action: combinedAction,
|
|
95
|
+
items: getAppHeaderItems(props, true),
|
|
96
|
+
...(props.type === 'anon' || hideNotification ? {} : {
|
|
97
|
+
notifications: props.notifications
|
|
98
|
+
}),
|
|
99
|
+
search: props.search,
|
|
100
|
+
redirectParam: props.type === 'anon' ? props.redirectParam : undefined,
|
|
101
|
+
isEnterprise: props.type === 'enterprise',
|
|
102
|
+
isAnon: props.type === 'anon',
|
|
103
|
+
isSimple: props.type === 'simple',
|
|
104
|
+
hideRightMenuButton: props.type === 'simple' || props.type === 'loading',
|
|
105
|
+
navigationMenuFormattedLabel: props?.localizedLabels?.navigationMenuFormattedLabel
|
|
106
|
+
}), props.children]
|
|
107
|
+
})
|
|
104
108
|
})
|
|
105
109
|
});
|
|
106
110
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ModalProps, WithChildrenProp } from '@codecademy/gamut';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { EnhancedBannerProps } from '../Banner/EnhancedBanner';
|
|
4
4
|
import { GlobalFooterProps } from '../GlobalFooter';
|
|
5
5
|
import { GlobalHeaderProps } from '../GlobalHeader';
|
|
6
6
|
export type GlobalPageBackgroundColor = 'beige' | 'background' | 'background-contrast' | 'navy' | 'paleBlue' | 'paleGreen' | 'palePink' | 'paleYellow' | 'white';
|
|
@@ -9,7 +9,7 @@ export interface GlobalPageProps extends WithChildrenProp {
|
|
|
9
9
|
/**
|
|
10
10
|
* Props directly passed to the Banner.
|
|
11
11
|
*/
|
|
12
|
-
banner?:
|
|
12
|
+
banner?: EnhancedBannerProps;
|
|
13
13
|
/**
|
|
14
14
|
* Element type to render around the children.
|
|
15
15
|
*/
|
package/dist/GlobalPage/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { AppWrapper, Modal, SkipToContent, SkipToContentTarget } from '@codecade
|
|
|
2
2
|
import { Background } from '@codecademy/gamut-styles';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
import {
|
|
5
|
+
import { EnhancedBanner } from '../Banner/EnhancedBanner';
|
|
6
6
|
import { GlobalFooter } from '../GlobalFooter';
|
|
7
7
|
import { GlobalHeader } from '../GlobalHeader';
|
|
8
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -35,7 +35,7 @@ export const GlobalPage = ({
|
|
|
35
35
|
minHeight: "100vh",
|
|
36
36
|
children: [/*#__PURE__*/_jsx(SkipToContent, {
|
|
37
37
|
contentId: skipToContentId || defaultSkipToContentId
|
|
38
|
-
}), banner && /*#__PURE__*/_jsx(
|
|
38
|
+
}), banner && /*#__PURE__*/_jsx(EnhancedBanner, {
|
|
39
39
|
...banner
|
|
40
40
|
}), !header.hideEnterpriseHeader && /*#__PURE__*/_jsx(GlobalHeader, {
|
|
41
41
|
...header
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A symbol used as the default value for contexts that require a provider. When
|
|
3
|
+
* calling useContext, we can throw an error if we find this symbol rather than
|
|
4
|
+
* a provided value. This is useful in cases where we want to consider null or
|
|
5
|
+
* undefined as valid provided values.
|
|
6
|
+
*/
|
|
7
|
+
export declare const NO_PROVIDER: unique symbol;
|
|
8
|
+
export type NoProvider = typeof NO_PROVIDER;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A symbol used as the default value for contexts that require a provider. When
|
|
3
|
+
* calling useContext, we can throw an error if we find this symbol rather than
|
|
4
|
+
* a provided value. This is useful in cases where we want to consider null or
|
|
5
|
+
* undefined as valid provided values.
|
|
6
|
+
*/
|
|
7
|
+
export const NO_PROVIDER = Symbol('no provider');
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ElementsInstance } from '@recurly/recurly-js';
|
|
2
|
+
import { PropsWithChildren } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* A provider that provides the Elements instance via context.
|
|
5
|
+
*
|
|
6
|
+
* If used outside of a RecurlyProvider, it will throw an error.
|
|
7
|
+
*/
|
|
8
|
+
export declare function Elements({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
/**
|
|
10
|
+
* A hook that returns the Elements instance from context.
|
|
11
|
+
*
|
|
12
|
+
* If used outside of an Elements provider, it will throw an error.
|
|
13
|
+
*
|
|
14
|
+
* Within an Elements provider:
|
|
15
|
+
* - If used on the server, it will return undefined.
|
|
16
|
+
* - If used on the client, it will initially return undefined and then return
|
|
17
|
+
* the provided Elements instance once the Recurly library is loaded.
|
|
18
|
+
*
|
|
19
|
+
* @param options - An object to provide an alternate contextual error message
|
|
20
|
+
* to use if one tries to use this hook outside of an Elements provider.
|
|
21
|
+
*
|
|
22
|
+
* @returns The Elements instance.
|
|
23
|
+
*/
|
|
24
|
+
export declare function useElements(options?: {
|
|
25
|
+
noProviderError?: string;
|
|
26
|
+
}): ElementsInstance | undefined;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { createContext, useContext, useMemo } from 'react';
|
|
2
|
+
import { NO_PROVIDER } from '../NoProvider';
|
|
3
|
+
import { useRecurly } from '../recurly';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
const ElementCtx = /*#__PURE__*/createContext(NO_PROVIDER);
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* A provider that provides the Elements instance via context.
|
|
9
|
+
*
|
|
10
|
+
* If used outside of a RecurlyProvider, it will throw an error.
|
|
11
|
+
*/
|
|
12
|
+
export function Elements({
|
|
13
|
+
children
|
|
14
|
+
}) {
|
|
15
|
+
const recurly = useRecurly({
|
|
16
|
+
noProviderError: 'Elements must be used within a RecurlyProvider.'
|
|
17
|
+
});
|
|
18
|
+
const elements = useMemo(() => recurly?.Elements(), [recurly]);
|
|
19
|
+
return /*#__PURE__*/_jsx(ElementCtx.Provider, {
|
|
20
|
+
value: elements,
|
|
21
|
+
children: children
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* A hook that returns the Elements instance from context.
|
|
27
|
+
*
|
|
28
|
+
* If used outside of an Elements provider, it will throw an error.
|
|
29
|
+
*
|
|
30
|
+
* Within an Elements provider:
|
|
31
|
+
* - If used on the server, it will return undefined.
|
|
32
|
+
* - If used on the client, it will initially return undefined and then return
|
|
33
|
+
* the provided Elements instance once the Recurly library is loaded.
|
|
34
|
+
*
|
|
35
|
+
* @param options - An object to provide an alternate contextual error message
|
|
36
|
+
* to use if one tries to use this hook outside of an Elements provider.
|
|
37
|
+
*
|
|
38
|
+
* @returns The Elements instance.
|
|
39
|
+
*/
|
|
40
|
+
export function useElements(options) {
|
|
41
|
+
const elements = useContext(ElementCtx);
|
|
42
|
+
if (elements === NO_PROVIDER) {
|
|
43
|
+
throw new Error(options?.noProviderError ?? 'useElements must be used within a Elements provider.');
|
|
44
|
+
}
|
|
45
|
+
return elements;
|
|
46
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { Recurly } from '@recurly/recurly-js';
|
|
2
|
+
import { PropsWithChildren } from 'react';
|
|
3
|
+
import { RecurlyConfig } from './loadRecurly';
|
|
4
|
+
export type RecurlyProviderProps = PropsWithChildren<RecurlyConfig>;
|
|
5
|
+
/**
|
|
6
|
+
* A provider that:
|
|
7
|
+
* - loads the Recurly library
|
|
8
|
+
* - ensures that only a single instance of the library is loaded
|
|
9
|
+
* - configures the library with the provided public key
|
|
10
|
+
* - provides the library instance via context
|
|
11
|
+
*/
|
|
12
|
+
export declare function RecurlyProvider({ children, ...config }: RecurlyProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
/**
|
|
14
|
+
* A hook that returns the Recurly instance from context.
|
|
15
|
+
*
|
|
16
|
+
* If used outside of a RecurlyProvider, it will throw an error.
|
|
17
|
+
*
|
|
18
|
+
* Within a RecurlyProvider:
|
|
19
|
+
* - If used on the server, it will return undefined.
|
|
20
|
+
* - If used on the client, it will initially return undefined and then return
|
|
21
|
+
* the provided Recurly instance once it is loaded.
|
|
22
|
+
*
|
|
23
|
+
* @param options - An object to provide an alternate contextual error message
|
|
24
|
+
* to use if one tries to use this hook outside of a RecurlyProvider.
|
|
25
|
+
*
|
|
26
|
+
* @returns The Recurly instance.
|
|
27
|
+
*/
|
|
28
|
+
export declare function useRecurly(options?: {
|
|
29
|
+
noProviderError?: string;
|
|
30
|
+
}): Recurly | undefined;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { createContext, useContext, useEffect, useState } from 'react';
|
|
2
|
+
import { NO_PROVIDER } from '../NoProvider';
|
|
3
|
+
import { loadRecurly } from './loadRecurly';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
const RecurlyCtx = /*#__PURE__*/createContext(NO_PROVIDER);
|
|
6
|
+
/**
|
|
7
|
+
* A provider that:
|
|
8
|
+
* - loads the Recurly library
|
|
9
|
+
* - ensures that only a single instance of the library is loaded
|
|
10
|
+
* - configures the library with the provided public key
|
|
11
|
+
* - provides the library instance via context
|
|
12
|
+
*/
|
|
13
|
+
export function RecurlyProvider({
|
|
14
|
+
children,
|
|
15
|
+
...config
|
|
16
|
+
}) {
|
|
17
|
+
const [recurly, setRecurly] = useState(undefined);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
loadRecurly(config)?.then(setRecurly);
|
|
20
|
+
// Exclude `config` dependency as it should be treated as static.
|
|
21
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
22
|
+
}, []);
|
|
23
|
+
return /*#__PURE__*/_jsx(RecurlyCtx.Provider, {
|
|
24
|
+
value: recurly,
|
|
25
|
+
children: children
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* A hook that returns the Recurly instance from context.
|
|
31
|
+
*
|
|
32
|
+
* If used outside of a RecurlyProvider, it will throw an error.
|
|
33
|
+
*
|
|
34
|
+
* Within a RecurlyProvider:
|
|
35
|
+
* - If used on the server, it will return undefined.
|
|
36
|
+
* - If used on the client, it will initially return undefined and then return
|
|
37
|
+
* the provided Recurly instance once it is loaded.
|
|
38
|
+
*
|
|
39
|
+
* @param options - An object to provide an alternate contextual error message
|
|
40
|
+
* to use if one tries to use this hook outside of a RecurlyProvider.
|
|
41
|
+
*
|
|
42
|
+
* @returns The Recurly instance.
|
|
43
|
+
*/
|
|
44
|
+
export function useRecurly(options) {
|
|
45
|
+
const recurly = useContext(RecurlyCtx);
|
|
46
|
+
if (recurly === NO_PROVIDER) {
|
|
47
|
+
throw new Error(options?.noProviderError ?? 'useRecurly must be used within a RecurlyProvider');
|
|
48
|
+
}
|
|
49
|
+
return recurly;
|
|
50
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { w } from './w';
|
|
2
|
+
export function loadRecurly(config) {
|
|
3
|
+
if (w && w._recurlyPromise) {
|
|
4
|
+
w._recurlyPromise = new Promise(resolve => {
|
|
5
|
+
const script = w.document.createElement('script');
|
|
6
|
+
script.src = 'https://js.recurly.com/v4/recurly.js';
|
|
7
|
+
script.async = true;
|
|
8
|
+
script.onload = () => {
|
|
9
|
+
const {
|
|
10
|
+
recurly
|
|
11
|
+
} = w;
|
|
12
|
+
if (!recurly) {
|
|
13
|
+
throw new Error('Recurly was not loaded by recurly.js');
|
|
14
|
+
}
|
|
15
|
+
recurly.configure(config);
|
|
16
|
+
resolve(recurly);
|
|
17
|
+
};
|
|
18
|
+
w.document.head.appendChild(script);
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
return w?._recurlyPromise;
|
|
22
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Recurly } from '@recurly/recurly-js';
|
|
2
|
+
type Doc = {
|
|
3
|
+
createElement: Document['createElement'];
|
|
4
|
+
head: {
|
|
5
|
+
appendChild: Document['head']['appendChild'];
|
|
6
|
+
};
|
|
7
|
+
};
|
|
8
|
+
export type W = {
|
|
9
|
+
recurly?: Recurly;
|
|
10
|
+
_recurlyPromise?: Promise<Recurly>;
|
|
11
|
+
document: Doc;
|
|
12
|
+
};
|
|
13
|
+
export declare const w: W | undefined;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { InputWrapperProps } from '@codecademy/gamut';
|
|
2
|
+
export type RecurlyFieldProps = InputWrapperProps & {
|
|
3
|
+
label: string;
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* A wrapper around a Recurly element (or two elements in the case of MM/YY) to
|
|
7
|
+
* add Gamut border styling and a label.
|
|
8
|
+
*/
|
|
9
|
+
export declare function RecurlyField({ label, children, ...props }: RecurlyFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import _styled from "@emotion/styled/base";
|
|
2
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
3
|
+
import { Box, Input, Text } from '@codecademy/gamut';
|
|
4
|
+
import { conditionalStyles, formFieldStyles } from '@codecademy/gamut/dist/Form/styles';
|
|
5
|
+
import { theme } from '@codecademy/gamut-styles';
|
|
6
|
+
import { useCallback, useRef } from 'react';
|
|
7
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
const Slash = /*#__PURE__*/_styled("span", {
|
|
9
|
+
target: "e1ndrvyp1",
|
|
10
|
+
label: "Slash"
|
|
11
|
+
})(process.env.NODE_ENV === "production" ? {
|
|
12
|
+
name: "18v1ai1",
|
|
13
|
+
styles: "width:0;font-family:'Suisse';transform:translate(-6px, 1px);font-size:18px"
|
|
14
|
+
} : {
|
|
15
|
+
name: "18v1ai1",
|
|
16
|
+
styles: "width:0;font-family:'Suisse';transform:translate(-6px, 1px);font-size:18px/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9SZWN1cmx5L2ZpZWxkcy9SZWN1cmx5RmllbGQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWV5QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvUmVjdXJseS9maWVsZHMvUmVjdXJseUZpZWxkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEJveCxcbiAgSW5wdXQsXG4gIElucHV0V3JhcHBlclByb3BzLFxuICBTdHlsZWRJbnB1dFByb3BzLFxuICBUZXh0LFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBjb25kaXRpb25hbFN0eWxlcyxcbiAgZm9ybUZpZWxkU3R5bGVzLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC9kaXN0L0Zvcm0vc3R5bGVzJztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IFNsYXNoID0gc3R5bGVkLnNwYW5gXG4gIHdpZHRoOiAwO1xuICBmb250LWZhbWlseTogJ1N1aXNzZSc7XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlKC02cHgsIDFweCk7XG4gIGZvbnQtc2l6ZTogMThweDtcbmA7XG5cbmZ1bmN0aW9uIGZvY3VzQm9yZGVyQ29sb3IoeyB2YXJpYW50IH06IFN0eWxlZElucHV0UHJvcHMpIHtcbiAgcmV0dXJuIHZhcmlhbnQgPT09ICdlcnJvcidcbiAgICA/IHRoZW1lLmNvbG9yc1snZmVlZGJhY2stZXJyb3InXVxuICAgIDogdGhlbWUuY29sb3JzLnByaW1hcnk7XG59XG5cbmNvbnN0IElucHV0SW5uZXJCb3ggPSBzdHlsZWQuZGl2PFN0eWxlZElucHV0UHJvcHM+YFxuICAke2Zvcm1GaWVsZFN0eWxlc31cbiAgJHtjb25kaXRpb25hbFN0eWxlc31cbiAgJiA+IGRpdiB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbiAgcGFkZGluZzogMDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgaGVpZ2h0OiAzLjEyNXJlbTtcbiAgLnJlY3VybHktZWxlbWVudCB7XG4gICAgaGVpZ2h0OiAzLjEyNXJlbTtcbiAgfVxuICAmOmhhcygucmVjdXJseS1lbGVtZW50LWZvY3VzKSB7XG4gICAgYm9yZGVyLWNvbG9yOiAke2ZvY3VzQm9yZGVyQ29sb3J9O1xuICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCAke2ZvY3VzQm9yZGVyQ29sb3J9O1xuICB9XG4gICY6aGFzKCR7U2xhc2h9KSA+IGRpdjpmaXJzdC1vZi10eXBlIHtcbiAgICBtYXgtd2lkdGg6IDIuNzVyZW07XG4gICAgbWluLXdpZHRoOiAyLjc1cmVtO1xuICB9XG5gO1xuXG5leHBvcnQgdHlwZSBSZWN1cmx5RmllbGRQcm9wcyA9IElucHV0V3JhcHBlclByb3BzICYgeyBsYWJlbDogc3RyaW5nIH07XG5cbi8qKlxuICogQSB3cmFwcGVyIGFyb3VuZCBhIFJlY3VybHkgZWxlbWVudCAob3IgdHdvIGVsZW1lbnRzIGluIHRoZSBjYXNlIG9mIE1NL1lZKSB0b1xuICogYWRkIEdhbXV0IGJvcmRlciBzdHlsaW5nIGFuZCBhIGxhYmVsLlxuICovXG5leHBvcnQgZnVuY3Rpb24gUmVjdXJseUZpZWxkKHsgbGFiZWwsIGNoaWxkcmVuLCAuLi5wcm9wcyB9OiBSZWN1cmx5RmllbGRQcm9wcykge1xuICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIGNvbnN0IHNlbGVjdElmcmFtZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZWYuY3VycmVudD8ucXVlcnlTZWxlY3RvcignaWZyYW1lJyk/LmZvY3VzKCk7XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDxCb3ggcmVmPXtyZWZ9PlxuICAgICAgPFRleHQgYXM9XCJsYWJlbFwiIG9uQ2xpY2s9e3NlbGVjdElmcmFtZX0+XG4gICAgICAgIHtsYWJlbH1cbiAgICAgIDwvVGV4dD5cbiAgICAgIDxJbnB1dCBhcz17SW5wdXRJbm5lckJveH0gey4uLnByb3BzfT5cbiAgICAgICAge0FycmF5LmlzQXJyYXkoY2hpbGRyZW4pICYmIGNoaWxkcmVuLmxlbmd0aCA9PT0gMiA/IChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAge2NoaWxkcmVuWzBdfVxuICAgICAgICAgICAgPFNsYXNoPi88L1NsYXNoPlxuICAgICAgICAgICAge2NoaWxkcmVuWzFdfVxuICAgICAgICAgIDwvPlxuICAgICAgICApIDogKFxuICAgICAgICAgIGNoaWxkcmVuXG4gICAgICAgICl9XG4gICAgICA8L0lucHV0PlxuICAgIDwvQm94PlxuICApO1xufVxuIl19 */",
|
|
17
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
18
|
+
});
|
|
19
|
+
function focusBorderColor({
|
|
20
|
+
variant
|
|
21
|
+
}) {
|
|
22
|
+
return variant === 'error' ? theme.colors['feedback-error'] : theme.colors.primary;
|
|
23
|
+
}
|
|
24
|
+
const InputInnerBox = /*#__PURE__*/_styled("div", {
|
|
25
|
+
target: "e1ndrvyp0",
|
|
26
|
+
label: "InputInnerBox"
|
|
27
|
+
})(formFieldStyles, " ", conditionalStyles, " &>div{width:100%;}padding:0;display:flex;align-items:center;height:3.125rem;.recurly-element{height:3.125rem;}&:has(.recurly-element-focus){border-color:", focusBorderColor, ";box-shadow:inset 0 0 0 1px ", focusBorderColor, ";}&:has(", Slash, ")>div:first-of-type{max-width:2.75rem;min-width:2.75rem;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9SZWN1cmx5L2ZpZWxkcy9SZWN1cmx5RmllbGQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCa0QiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL1JlY3VybHkvZmllbGRzL1JlY3VybHlGaWVsZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBCb3gsXG4gIElucHV0LFxuICBJbnB1dFdyYXBwZXJQcm9wcyxcbiAgU3R5bGVkSW5wdXRQcm9wcyxcbiAgVGV4dCxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHtcbiAgY29uZGl0aW9uYWxTdHlsZXMsXG4gIGZvcm1GaWVsZFN0eWxlcyxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQvZGlzdC9Gb3JtL3N0eWxlcyc7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5jb25zdCBTbGFzaCA9IHN0eWxlZC5zcGFuYFxuICB3aWR0aDogMDtcbiAgZm9udC1mYW1pbHk6ICdTdWlzc2UnO1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtNnB4LCAxcHgpO1xuICBmb250LXNpemU6IDE4cHg7XG5gO1xuXG5mdW5jdGlvbiBmb2N1c0JvcmRlckNvbG9yKHsgdmFyaWFudCB9OiBTdHlsZWRJbnB1dFByb3BzKSB7XG4gIHJldHVybiB2YXJpYW50ID09PSAnZXJyb3InXG4gICAgPyB0aGVtZS5jb2xvcnNbJ2ZlZWRiYWNrLWVycm9yJ11cbiAgICA6IHRoZW1lLmNvbG9ycy5wcmltYXJ5O1xufVxuXG5jb25zdCBJbnB1dElubmVyQm94ID0gc3R5bGVkLmRpdjxTdHlsZWRJbnB1dFByb3BzPmBcbiAgJHtmb3JtRmllbGRTdHlsZXN9XG4gICR7Y29uZGl0aW9uYWxTdHlsZXN9XG4gICYgPiBkaXYge1xuICAgIHdpZHRoOiAxMDAlO1xuICB9XG4gIHBhZGRpbmc6IDA7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGhlaWdodDogMy4xMjVyZW07XG4gIC5yZWN1cmx5LWVsZW1lbnQge1xuICAgIGhlaWdodDogMy4xMjVyZW07XG4gIH1cbiAgJjpoYXMoLnJlY3VybHktZWxlbWVudC1mb2N1cykge1xuICAgIGJvcmRlci1jb2xvcjogJHtmb2N1c0JvcmRlckNvbG9yfTtcbiAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMCAxcHggJHtmb2N1c0JvcmRlckNvbG9yfTtcbiAgfVxuICAmOmhhcygke1NsYXNofSkgPiBkaXY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgbWF4LXdpZHRoOiAyLjc1cmVtO1xuICAgIG1pbi13aWR0aDogMi43NXJlbTtcbiAgfVxuYDtcblxuZXhwb3J0IHR5cGUgUmVjdXJseUZpZWxkUHJvcHMgPSBJbnB1dFdyYXBwZXJQcm9wcyAmIHsgbGFiZWw6IHN0cmluZyB9O1xuXG4vKipcbiAqIEEgd3JhcHBlciBhcm91bmQgYSBSZWN1cmx5IGVsZW1lbnQgKG9yIHR3byBlbGVtZW50cyBpbiB0aGUgY2FzZSBvZiBNTS9ZWSkgdG9cbiAqIGFkZCBHYW11dCBib3JkZXIgc3R5bGluZyBhbmQgYSBsYWJlbC5cbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIFJlY3VybHlGaWVsZCh7IGxhYmVsLCBjaGlsZHJlbiwgLi4ucHJvcHMgfTogUmVjdXJseUZpZWxkUHJvcHMpIHtcbiAgY29uc3QgcmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKTtcblxuICBjb25zdCBzZWxlY3RJZnJhbWUgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgcmVmLmN1cnJlbnQ/LnF1ZXJ5U2VsZWN0b3IoJ2lmcmFtZScpPy5mb2N1cygpO1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IHJlZj17cmVmfT5cbiAgICAgIDxUZXh0IGFzPVwibGFiZWxcIiBvbkNsaWNrPXtzZWxlY3RJZnJhbWV9PlxuICAgICAgICB7bGFiZWx9XG4gICAgICA8L1RleHQ+XG4gICAgICA8SW5wdXQgYXM9e0lucHV0SW5uZXJCb3h9IHsuLi5wcm9wc30+XG4gICAgICAgIHtBcnJheS5pc0FycmF5KGNoaWxkcmVuKSAmJiBjaGlsZHJlbi5sZW5ndGggPT09IDIgPyAoXG4gICAgICAgICAgPD5cbiAgICAgICAgICAgIHtjaGlsZHJlblswXX1cbiAgICAgICAgICAgIDxTbGFzaD4vPC9TbGFzaD5cbiAgICAgICAgICAgIHtjaGlsZHJlblsxXX1cbiAgICAgICAgICA8Lz5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICBjaGlsZHJlblxuICAgICAgICApfVxuICAgICAgPC9JbnB1dD5cbiAgICA8L0JveD5cbiAgKTtcbn1cbiJdfQ== */"));
|
|
28
|
+
/**
|
|
29
|
+
* A wrapper around a Recurly element (or two elements in the case of MM/YY) to
|
|
30
|
+
* add Gamut border styling and a label.
|
|
31
|
+
*/
|
|
32
|
+
export function RecurlyField({
|
|
33
|
+
label,
|
|
34
|
+
children,
|
|
35
|
+
...props
|
|
36
|
+
}) {
|
|
37
|
+
const ref = useRef(null);
|
|
38
|
+
const selectIframe = useCallback(() => {
|
|
39
|
+
ref.current?.querySelector('iframe')?.focus();
|
|
40
|
+
}, []);
|
|
41
|
+
return /*#__PURE__*/_jsxs(Box, {
|
|
42
|
+
ref: ref,
|
|
43
|
+
children: [/*#__PURE__*/_jsx(Text, {
|
|
44
|
+
as: "label",
|
|
45
|
+
onClick: selectIframe,
|
|
46
|
+
children: label
|
|
47
|
+
}), /*#__PURE__*/_jsx(Input, {
|
|
48
|
+
as: InputInnerBox,
|
|
49
|
+
...props,
|
|
50
|
+
children: Array.isArray(children) && children.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
51
|
+
children: [children[0], /*#__PURE__*/_jsx(Slash, {
|
|
52
|
+
children: "/"
|
|
53
|
+
}), children[1]]
|
|
54
|
+
}) : children
|
|
55
|
+
})]
|
|
56
|
+
});
|
|
57
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { Emitter } from '@recurly/recurly-js/lib/emitter';
|
|
2
|
+
export declare const CardNumber: import("react").ForwardRefExoticComponent<EventHandlers & import("react").RefAttributes<Focusable>>;
|
|
3
|
+
export declare const ExpMonth: import("react").ForwardRefExoticComponent<EventHandlers & import("react").RefAttributes<Focusable>>;
|
|
4
|
+
export declare const ExpYear: import("react").ForwardRefExoticComponent<EventHandlers & import("react").RefAttributes<Focusable>>;
|
|
5
|
+
export declare const CVV: import("react").ForwardRefExoticComponent<EventHandlers & import("react").RefAttributes<Focusable>>;
|
|
6
|
+
export type ElementType = 'CardNumberElement' | 'CardMonthElement' | 'CardYearElement' | 'CardCvvElement';
|
|
7
|
+
export type EventHandler = Parameters<Emitter['on']>[1];
|
|
8
|
+
export type EventHandlers = {
|
|
9
|
+
onReady?: EventHandler;
|
|
10
|
+
onChange?: EventHandler;
|
|
11
|
+
onBlur?: EventHandler;
|
|
12
|
+
onFocus?: EventHandler;
|
|
13
|
+
onSubmit?: EventHandler;
|
|
14
|
+
};
|
|
15
|
+
export type Focusable = {
|
|
16
|
+
focus: () => void;
|
|
17
|
+
};
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { formFieldPaddingStyles } from '@codecademy/gamut/dist/Form/styles';
|
|
2
|
+
import { forwardRef, useMemo, useRef } from 'react';
|
|
3
|
+
import { useElements } from '../context';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
export const CardNumber = element('CardNumberElement', 'Card number');
|
|
6
|
+
export const ExpMonth = element('CardMonthElement', 'Expiration month', 'MM');
|
|
7
|
+
export const ExpYear = element('CardYearElement', 'Expiration year', 'YY');
|
|
8
|
+
export const CVV = element('CardCvvElement', 'CVV');
|
|
9
|
+
|
|
10
|
+
/* These match methods on `ElementsInstance`. 'CardElement' is omitted since we
|
|
11
|
+
only need individual elements (number,month,year,cvv). */
|
|
12
|
+
|
|
13
|
+
// The type that `element.on` expects. See `bindEventHandlers`.
|
|
14
|
+
|
|
15
|
+
/* Our only reason for allowing folks to pass in a ref is so that they can call
|
|
16
|
+
`.focus()` from the outside. This type satisfies `HTMLElement` (the type one
|
|
17
|
+
might try to use) and `ElementInstance` (what we actually set the ref to). */
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Defines a Recurly element component for a given type.
|
|
21
|
+
*/
|
|
22
|
+
function element(type, title, placeholder) {
|
|
23
|
+
return /*#__PURE__*/forwardRef((eventHandlers, ref) => {
|
|
24
|
+
const elements = useElements({
|
|
25
|
+
noProviderError: 'Recurly element must be used within a Elements provider.'
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
// Keep ref updated with current event handlers. See `bindEventHandlers`.
|
|
29
|
+
const h = useRef({});
|
|
30
|
+
h.current = eventHandlers;
|
|
31
|
+
const callback = useMemo(() => {
|
|
32
|
+
if (!elements) return null;
|
|
33
|
+
let el;
|
|
34
|
+
return div => {
|
|
35
|
+
/* This is called once (with the div) when `elements` is defined and
|
|
36
|
+
once (with null) on component unmount. */
|
|
37
|
+
if (div) {
|
|
38
|
+
el = elements[type]({
|
|
39
|
+
style: getStyle(title, placeholder)
|
|
40
|
+
});
|
|
41
|
+
el.attach(div);
|
|
42
|
+
bindEventHandlers(el, h);
|
|
43
|
+
allowFocus(div, ref, el);
|
|
44
|
+
} else {
|
|
45
|
+
cleanup(el);
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
}, [elements, ref]);
|
|
49
|
+
return /*#__PURE__*/_jsx("div", {
|
|
50
|
+
ref: callback
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
function cleanup(el) {
|
|
55
|
+
/* `.destroy()` is not documented or included in the IndividualElement type,
|
|
56
|
+
but there is an example of @recurly/react-recurly using it here:
|
|
57
|
+
https://github.com/recurly/react-recurly/blob/main/lib/element/element.jsx#L112 */
|
|
58
|
+
el?.destroy();
|
|
59
|
+
}
|
|
60
|
+
function allowFocus(div, ref, el) {
|
|
61
|
+
// Forward focus from iframe to element. (used by RecurlyField label onClick)
|
|
62
|
+
div.querySelector('iframe')?.addEventListener('focus', () => el.focus());
|
|
63
|
+
|
|
64
|
+
// Set ref to our Recurly element instance so that one can call `.focus()`.
|
|
65
|
+
if (ref instanceof Function) {
|
|
66
|
+
ref(el); // call RefCallback
|
|
67
|
+
} else if (ref) {
|
|
68
|
+
ref.current = el; // set RefObject
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
function getStyle(title, placeholder) {
|
|
72
|
+
const {
|
|
73
|
+
px,
|
|
74
|
+
py
|
|
75
|
+
} = formFieldPaddingStyles;
|
|
76
|
+
return {
|
|
77
|
+
/* We can't use Apercu in the iframe, but Recurly will pull in any Google
|
|
78
|
+
font. JetBrains Mono seems appropriate for card info. */
|
|
79
|
+
fontFamily: 'JetBrains Mono',
|
|
80
|
+
/* Most Gamut styling is applied outside the iframe by RecurlyField. We
|
|
81
|
+
apply padding in the iframe to ensure the entire element is clickable. */
|
|
82
|
+
padding: `${px}px ${py}px`,
|
|
83
|
+
/* For some bewildered reason, Recurly takes `title` and `placeholder` as
|
|
84
|
+
style properties. Title is necessary for screen readers. */
|
|
85
|
+
title,
|
|
86
|
+
/* The spread syntax for `placeholder` is only necessary because Recurly is
|
|
87
|
+
persnickety about only including it when defined. */
|
|
88
|
+
...(placeholder ? {
|
|
89
|
+
placeholder
|
|
90
|
+
} : {})
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* When event handlers are passed as inline function props, they technically are
|
|
95
|
+
new function instances on each render. Rather than re-attaching the handlers on
|
|
96
|
+
each render, we keep a ref updated with the latest handlers and bind static
|
|
97
|
+
handlers that call the dynamic handlers from the ref. @recurly/react-recurly
|
|
98
|
+
essentially uses the same approach here:
|
|
99
|
+
https://github.com/recurly/react-recurly/blob/main/lib/element/element.jsx#L102 */
|
|
100
|
+
function bindEventHandlers(el, h) {
|
|
101
|
+
el.on('attach', (...args) => h.current?.onReady?.(...args));
|
|
102
|
+
el.on('change', (...args) => h.current?.onChange?.(...args));
|
|
103
|
+
el.on('blur', (...args) => h.current?.onBlur?.(...args));
|
|
104
|
+
el.on('focus', (...args) => h.current?.onFocus?.(...args));
|
|
105
|
+
el.on('submit', (...args) => h.current?.onSubmit?.(...args));
|
|
106
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { setupRtl } from '@codecademy/gamut-tests';
|
|
2
|
+
import { render } from '@testing-library/react';
|
|
3
|
+
import { CardNumber } from './elements';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
class MockElement {
|
|
6
|
+
attach = jest.fn();
|
|
7
|
+
handlers = {};
|
|
8
|
+
on = jest.fn((evt, handler) => {
|
|
9
|
+
this.handlers[evt] = handler;
|
|
10
|
+
});
|
|
11
|
+
configure = jest.fn();
|
|
12
|
+
destroy = jest.fn();
|
|
13
|
+
focus = jest.fn();
|
|
14
|
+
}
|
|
15
|
+
const mockElements = {};
|
|
16
|
+
jest.mock('../context', () => ({
|
|
17
|
+
useElements: jest.fn(() => mockElements)
|
|
18
|
+
}));
|
|
19
|
+
describe('CardNumber', () => {
|
|
20
|
+
it('creates the Recurly element and attaches it to the DOM', () => {
|
|
21
|
+
const mockElement = new MockElement();
|
|
22
|
+
mockElements.CardNumberElement = jest.fn(() => mockElement);
|
|
23
|
+
const renderView = setupRtl(CardNumber);
|
|
24
|
+
renderView();
|
|
25
|
+
expect(mockElements.CardNumberElement).toHaveBeenCalled();
|
|
26
|
+
expect(mockElement.attach).toHaveBeenCalled();
|
|
27
|
+
});
|
|
28
|
+
it('sets and updates event handlers', () => {
|
|
29
|
+
const mockElement = new MockElement();
|
|
30
|
+
mockElements.CardNumberElement = () => mockElement;
|
|
31
|
+
const renderView = setupRtl(CardNumber);
|
|
32
|
+
const createHandlers = () => ({
|
|
33
|
+
onReady: jest.fn(),
|
|
34
|
+
onChange: jest.fn(),
|
|
35
|
+
onBlur: jest.fn(),
|
|
36
|
+
onFocus: jest.fn(),
|
|
37
|
+
onSubmit: jest.fn()
|
|
38
|
+
});
|
|
39
|
+
const handlersA = createHandlers();
|
|
40
|
+
const {
|
|
41
|
+
update
|
|
42
|
+
} = renderView(handlersA);
|
|
43
|
+
for (const handler of Object.values(mockElement.handlers)) {
|
|
44
|
+
handler('test-1');
|
|
45
|
+
}
|
|
46
|
+
const handlersB = createHandlers();
|
|
47
|
+
update(handlersB);
|
|
48
|
+
for (const handler of Object.values(mockElement.handlers)) {
|
|
49
|
+
handler('test-2');
|
|
50
|
+
}
|
|
51
|
+
for (const handler of Object.values(handlersA)) {
|
|
52
|
+
expect(handler).toHaveBeenCalledTimes(1);
|
|
53
|
+
expect(handler).toHaveBeenCalledWith('test-1');
|
|
54
|
+
}
|
|
55
|
+
for (const handler of Object.values(handlersB)) {
|
|
56
|
+
expect(handler).toHaveBeenCalledTimes(1);
|
|
57
|
+
expect(handler).toHaveBeenCalledWith('test-2');
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
it('allows focus from the outside via ref', () => {
|
|
61
|
+
const mockElement = new MockElement();
|
|
62
|
+
mockElements.CardNumberElement = jest.fn(() => mockElement);
|
|
63
|
+
const ref = {};
|
|
64
|
+
render(/*#__PURE__*/_jsx(CardNumber, {
|
|
65
|
+
ref: ref
|
|
66
|
+
}));
|
|
67
|
+
ref.current?.focus();
|
|
68
|
+
expect(mockElement.focus).toHaveBeenCalled();
|
|
69
|
+
});
|
|
70
|
+
it('destroys the Recurly element when the component unmounts', () => {
|
|
71
|
+
const mockElement = new MockElement();
|
|
72
|
+
mockElements.CardNumberElement = jest.fn(() => mockElement);
|
|
73
|
+
const {
|
|
74
|
+
unmount
|
|
75
|
+
} = render(/*#__PURE__*/_jsx(CardNumber, {}));
|
|
76
|
+
unmount();
|
|
77
|
+
expect(mockElement.destroy).toHaveBeenCalled();
|
|
78
|
+
});
|
|
79
|
+
});
|
package/dist/index.d.ts
CHANGED
|
@@ -73,6 +73,7 @@ export * from './PricingSection';
|
|
|
73
73
|
export * from './ProductFeatureShowcase';
|
|
74
74
|
export * from './ProLogoAlt';
|
|
75
75
|
export * from './RatingsBar';
|
|
76
|
+
export * from './Recurly';
|
|
76
77
|
export * from './ResourceCard';
|
|
77
78
|
export * from './ScoreSummary';
|
|
78
79
|
export * from './ScoreSummary/SubScores';
|
package/dist/index.js
CHANGED
|
@@ -73,6 +73,7 @@ export * from './PricingSection';
|
|
|
73
73
|
export * from './ProductFeatureShowcase';
|
|
74
74
|
export * from './ProLogoAlt';
|
|
75
75
|
export * from './RatingsBar';
|
|
76
|
+
export * from './Recurly';
|
|
76
77
|
export * from './ResourceCard';
|
|
77
78
|
export * from './ScoreSummary';
|
|
78
79
|
export * from './ScoreSummary/SubScores';
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import {
|
|
3
|
-
declare const meta: Meta<typeof
|
|
2
|
+
import { EnhancedBanner } from '../../Banner/EnhancedBanner';
|
|
3
|
+
declare const meta: Meta<typeof EnhancedBanner>;
|
|
4
4
|
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof
|
|
5
|
+
type Story = StoryObj<typeof EnhancedBanner>;
|
|
6
6
|
export declare const WithCountdownTimer: Story;
|
|
7
7
|
export declare const WithoutCountdownTimer: Story;
|
|
8
8
|
export declare const YellowVariant: Story;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { action } from '@storybook/addon-actions';
|
|
2
|
-
import {
|
|
2
|
+
import { EnhancedBanner } from '../../Banner/EnhancedBanner';
|
|
3
3
|
const meta = {
|
|
4
4
|
title: 'Molecules/Enhanced Banner',
|
|
5
|
-
component:
|
|
5
|
+
component: EnhancedBanner,
|
|
6
6
|
argTypes: {
|
|
7
7
|
header: {
|
|
8
8
|
control: 'text',
|
|
@@ -25,15 +25,6 @@ const meta = {
|
|
|
25
25
|
control: 'text',
|
|
26
26
|
description: 'ISO date string for countdown timer (e.g., "2024-12-31T23:59:59Z")'
|
|
27
27
|
},
|
|
28
|
-
isInEnhancedBannerVariant: {
|
|
29
|
-
control: 'boolean',
|
|
30
|
-
description: 'Enable enhanced banner features',
|
|
31
|
-
table: {
|
|
32
|
-
defaultValue: {
|
|
33
|
-
summary: 'true'
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
28
|
onClose: {
|
|
38
29
|
action: 'closed',
|
|
39
30
|
description: 'Callback when banner is closed'
|
|
@@ -48,7 +39,6 @@ const meta = {
|
|
|
48
39
|
}
|
|
49
40
|
},
|
|
50
41
|
args: {
|
|
51
|
-
isInEnhancedBannerVariant: true,
|
|
52
42
|
variant: 'navy',
|
|
53
43
|
onClose: action('banner-closed'),
|
|
54
44
|
onCtaClick: action('cta-clicked'),
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { GridBox, Text } from '@codecademy/gamut';
|
|
2
|
+
import { CardNumber, CVV, Elements, ExpMonth, ExpYear, RecurlyField, RecurlyProvider } from '../../index';
|
|
3
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
+
export default {};
|
|
5
|
+
export const Default = {
|
|
6
|
+
render: () => /*#__PURE__*/_jsx(RecurlyProvider, {
|
|
7
|
+
publicKey: "test-key",
|
|
8
|
+
required: [],
|
|
9
|
+
children: /*#__PURE__*/_jsx(Elements, {
|
|
10
|
+
children: /*#__PURE__*/_jsxs(GridBox, {
|
|
11
|
+
gridTemplateColumns: "2fr 1fr 1fr",
|
|
12
|
+
gap: 16,
|
|
13
|
+
children: [/*#__PURE__*/_jsx(RecurlyField, {
|
|
14
|
+
label: "Card number*",
|
|
15
|
+
children: /*#__PURE__*/_jsx(CardNumber, {})
|
|
16
|
+
}), /*#__PURE__*/_jsxs(RecurlyField, {
|
|
17
|
+
label: "Expiration date*",
|
|
18
|
+
children: [/*#__PURE__*/_jsx(ExpMonth, {}), /*#__PURE__*/_jsx(ExpYear, {})]
|
|
19
|
+
}), /*#__PURE__*/_jsx(RecurlyField, {
|
|
20
|
+
label: "CVV*",
|
|
21
|
+
children: /*#__PURE__*/_jsx(CVV, {})
|
|
22
|
+
})]
|
|
23
|
+
})
|
|
24
|
+
})
|
|
25
|
+
})
|
|
26
|
+
};
|
|
27
|
+
export const RecurlyFieldStory = {
|
|
28
|
+
render: () => /*#__PURE__*/_jsx(RecurlyProvider, {
|
|
29
|
+
publicKey: "test-key",
|
|
30
|
+
required: [],
|
|
31
|
+
children: /*#__PURE__*/_jsx(Elements, {
|
|
32
|
+
children: /*#__PURE__*/_jsxs(GridBox, {
|
|
33
|
+
gridTemplateColumns: "4rem 1fr",
|
|
34
|
+
gap: 16,
|
|
35
|
+
children: [/*#__PURE__*/_jsx(Text, {
|
|
36
|
+
variant: "title-xs",
|
|
37
|
+
alignSelf: "center",
|
|
38
|
+
children: "Error"
|
|
39
|
+
}), /*#__PURE__*/_jsx(RecurlyField, {
|
|
40
|
+
label: "Card number*",
|
|
41
|
+
error: true,
|
|
42
|
+
children: /*#__PURE__*/_jsx(CardNumber, {})
|
|
43
|
+
}), /*#__PURE__*/_jsx(Text, {
|
|
44
|
+
variant: "title-xs",
|
|
45
|
+
alignSelf: "center",
|
|
46
|
+
children: "Valid"
|
|
47
|
+
}), /*#__PURE__*/_jsx(RecurlyField, {
|
|
48
|
+
label: "Card number*",
|
|
49
|
+
valid: true,
|
|
50
|
+
children: /*#__PURE__*/_jsx(CardNumber, {})
|
|
51
|
+
})]
|
|
52
|
+
})
|
|
53
|
+
})
|
|
54
|
+
}),
|
|
55
|
+
name: 'Validation'
|
|
56
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/brand",
|
|
3
3
|
"description": "Brand component library for Codecademy",
|
|
4
|
-
"version": "3.0.0-alpha.
|
|
4
|
+
"version": "3.0.0-alpha.d84718455a.0",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@emotion/is-prop-valid": "^1.2.1",
|