@codecademy/brand 3.1.0-alpha.f5de9eab76.0 → 3.1.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/AppHeaderCatalogDropdown/index.js +6 -8
- package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/MarketingBanner.js +83 -0
- package/dist/AppHeader/AppHeaderElements/{AppHeaderCatalogDropdown → AppHeaderCatalogSectionVariant}/NavPanels.js +44 -4
- package/dist/AppHeader/AppHeaderElements/{AppHeaderSectionVariant → AppHeaderCatalogSectionVariant}/NavSection.d.ts +2 -2
- package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/NavSection.js +75 -0
- package/dist/AppHeader/AppHeaderElements/{AppHeaderCatalogDropdown → AppHeaderCatalogSectionVariant}/consts.d.ts +1 -1
- package/dist/AppHeader/AppHeaderElements/{AppHeaderCatalogDropdown → AppHeaderCatalogSectionVariant}/consts.js +1 -1
- package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/index.d.ts +11 -0
- package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/index.js +86 -0
- package/dist/AppHeader/AppHeaderElements/AppHeaderLinkSections/index.js +0 -0
- package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.js +5 -31
- package/dist/AppHeaderMobile/AppHeaderCatalogSectonVariantMobile/index.js +3 -3
- package/dist/LearningOutcomeCard/index.js +3 -3
- package/dist/LearningOutcomeFlyout/index.js +9 -4
- package/package.json +1 -1
- package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/MarketingBanner.js +0 -83
- package/dist/AppHeader/AppHeaderElements/AppHeaderFeatureCard/index.d.ts +0 -4
- package/dist/AppHeader/AppHeaderElements/AppHeaderFeatureCard/index.js +0 -51
- package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.d.ts +0 -11
- package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.js +0 -136
- package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/consts.d.ts +0 -18
- package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/consts.js +0 -273
- package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/AppHeaderSectionVariant.test.js +0 -83
- package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/NavSection.js +0 -79
- package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/PanelLayout.d.ts +0 -10
- package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/PanelLayout.js +0 -51
- package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/index.d.ts +0 -17
- package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/index.js +0 -86
- /package/dist/AppHeader/AppHeaderElements/{AppHeaderCatalogDropdown → AppHeaderCatalogSectionVariant}/MarketingBanner.d.ts +0 -0
- /package/dist/AppHeader/AppHeaderElements/{AppHeaderCatalogDropdown → AppHeaderCatalogSectionVariant}/NavPanels.d.ts +0 -0
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
import { Anchor, FlexBox, GridBox } from '@codecademy/gamut';
|
|
2
|
-
import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
|
|
3
|
-
import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
|
|
4
|
-
import { AppHeaderFeatureCard } from '../AppHeaderFeatureCard';
|
|
5
|
-
import { PanelLayout } from '../AppHeaderSectionVariant/PanelLayout';
|
|
6
|
-
import { docsLinks, inspirationLinks, learningToolsLinks, practiceToolsLinks } from './consts';
|
|
7
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
-
export const DocsPanel = ({
|
|
9
|
-
tabIndex = 0
|
|
10
|
-
}) => {
|
|
11
|
-
const {
|
|
12
|
-
globalHeaderItemClick
|
|
13
|
-
} = useGlobalHeaderItemClick();
|
|
14
|
-
const {
|
|
15
|
-
handleClose
|
|
16
|
-
} = useAppHeaderDropdownContext();
|
|
17
|
-
const description = /*#__PURE__*/_jsxs(_Fragment, {
|
|
18
|
-
children: ["Docs is a community-driven resource for all things programming. Even if you don't have a Codecademy account, you can quickly find definitions and explanations for most coding languages, frameworks, and technical concepts.", /*#__PURE__*/_jsx("br", {}), " ", /*#__PURE__*/_jsx("br", {}), "Interested in helping build it?", ' ', /*#__PURE__*/_jsx(Anchor, {
|
|
19
|
-
href: "/docs/contribute",
|
|
20
|
-
children: "Contribute to Docs"
|
|
21
|
-
})]
|
|
22
|
-
});
|
|
23
|
-
return /*#__PURE__*/_jsx(PanelLayout, {
|
|
24
|
-
heading: "Docs",
|
|
25
|
-
description: description,
|
|
26
|
-
linkItem: {
|
|
27
|
-
type: 'link',
|
|
28
|
-
href: '/docs',
|
|
29
|
-
text: 'Explore all Docs',
|
|
30
|
-
trackingTarget: 'topnav_resources_docs',
|
|
31
|
-
id: 'docs'
|
|
32
|
-
},
|
|
33
|
-
tabIndex: tabIndex,
|
|
34
|
-
children: /*#__PURE__*/_jsx(GridBox, {
|
|
35
|
-
gridTemplateColumns: {
|
|
36
|
-
_: '1fr',
|
|
37
|
-
lg: '1fr 1fr 1fr'
|
|
38
|
-
},
|
|
39
|
-
gap: 8,
|
|
40
|
-
pl: 0,
|
|
41
|
-
as: "ul",
|
|
42
|
-
listStyle: "none",
|
|
43
|
-
children: docsLinks.map(item => /*#__PURE__*/_jsx(Anchor, {
|
|
44
|
-
variant: "interface",
|
|
45
|
-
href: item.href,
|
|
46
|
-
onClick: event => {
|
|
47
|
-
globalHeaderItemClick(event, item);
|
|
48
|
-
handleClose();
|
|
49
|
-
},
|
|
50
|
-
tabIndex: tabIndex,
|
|
51
|
-
as: "li",
|
|
52
|
-
children: /*#__PURE__*/_jsxs(FlexBox, {
|
|
53
|
-
height: 48,
|
|
54
|
-
px: 16,
|
|
55
|
-
py: 8,
|
|
56
|
-
borderRadius: "md",
|
|
57
|
-
border: 1,
|
|
58
|
-
borderColor: "border-tertiary",
|
|
59
|
-
alignItems: "center",
|
|
60
|
-
children: [item.text, item.badge]
|
|
61
|
-
}, `${item.id}`)
|
|
62
|
-
}, `${item.id}`))
|
|
63
|
-
})
|
|
64
|
-
});
|
|
65
|
-
};
|
|
66
|
-
export const LearningToolsPanel = ({
|
|
67
|
-
tabIndex = 0
|
|
68
|
-
}) => {
|
|
69
|
-
return /*#__PURE__*/_jsx(PanelLayout, {
|
|
70
|
-
heading: "Learning tools",
|
|
71
|
-
description: "Faucibus ultricies risus tincidunt in placerat sodales euismod convallis nulla. Et amet platea lobortis ultrices neque sollicitudin pretium. Vulputate elit morbi ut arcu aliquam augue pellentesque. Eleifend enim suspendisse nibh lectus.",
|
|
72
|
-
children: /*#__PURE__*/_jsx(FeatureCardPanel, {
|
|
73
|
-
links: learningToolsLinks,
|
|
74
|
-
tabIndex: tabIndex
|
|
75
|
-
})
|
|
76
|
-
});
|
|
77
|
-
};
|
|
78
|
-
export const PracticeToolsPanel = ({
|
|
79
|
-
tabIndex = 0
|
|
80
|
-
}) => {
|
|
81
|
-
return /*#__PURE__*/_jsx(PanelLayout, {
|
|
82
|
-
heading: "Practice tools",
|
|
83
|
-
description: "Lectus enim vulputate in leo in vulputate adipiscing aliquam purus. Semper malesuada viverra pretium cursus vel donec pulvinar nisi. Quis proin quam arcu maecenas orci tincidunt. Elementum feugiat amet mi sagittis nisi.",
|
|
84
|
-
children: /*#__PURE__*/_jsx(FeatureCardPanel, {
|
|
85
|
-
links: practiceToolsLinks,
|
|
86
|
-
tabIndex: tabIndex
|
|
87
|
-
})
|
|
88
|
-
});
|
|
89
|
-
};
|
|
90
|
-
export const InspirationPanel = ({
|
|
91
|
-
tabIndex = 0
|
|
92
|
-
}) => {
|
|
93
|
-
return /*#__PURE__*/_jsx(PanelLayout, {
|
|
94
|
-
heading: "Inspiration",
|
|
95
|
-
description: "Discover what's happening inside Codecademy and beyond. You'll find engineering deep dives, coding tips, job hunt insights, career growth advice, and inspiring stories from other learners.",
|
|
96
|
-
children: /*#__PURE__*/_jsx(FeatureCardPanel, {
|
|
97
|
-
links: inspirationLinks,
|
|
98
|
-
tabIndex: tabIndex
|
|
99
|
-
})
|
|
100
|
-
});
|
|
101
|
-
};
|
|
102
|
-
export const FeatureCardPanel = ({
|
|
103
|
-
tabIndex = 0,
|
|
104
|
-
links
|
|
105
|
-
}) => {
|
|
106
|
-
const {
|
|
107
|
-
globalHeaderItemClick
|
|
108
|
-
} = useGlobalHeaderItemClick();
|
|
109
|
-
const {
|
|
110
|
-
handleClose
|
|
111
|
-
} = useAppHeaderDropdownContext();
|
|
112
|
-
return /*#__PURE__*/_jsx(GridBox, {
|
|
113
|
-
gridTemplateColumns: {
|
|
114
|
-
_: '1fr',
|
|
115
|
-
lg: '1fr 1fr'
|
|
116
|
-
},
|
|
117
|
-
gridTemplateRows: {
|
|
118
|
-
_: '1fr',
|
|
119
|
-
lg: '1fr 1fr'
|
|
120
|
-
},
|
|
121
|
-
gap: 16,
|
|
122
|
-
children: links.map(item => /*#__PURE__*/_jsx(Anchor, {
|
|
123
|
-
variant: "interface",
|
|
124
|
-
href: item.linkItem.href,
|
|
125
|
-
onClick: event => {
|
|
126
|
-
globalHeaderItemClick(event, item.linkItem);
|
|
127
|
-
handleClose();
|
|
128
|
-
},
|
|
129
|
-
tabIndex: tabIndex,
|
|
130
|
-
height: "100%",
|
|
131
|
-
children: /*#__PURE__*/_jsx(AppHeaderFeatureCard, {
|
|
132
|
-
item: item
|
|
133
|
-
})
|
|
134
|
-
}, `${item.linkItem.id}`))
|
|
135
|
-
});
|
|
136
|
-
};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { AppHeaderLinkItem, AppHeaderResourcesDropdownItem } from '../../shared';
|
|
3
|
-
export type NavSectionConfig = {
|
|
4
|
-
item: AppHeaderResourcesDropdownItem;
|
|
5
|
-
panel: React.ComponentType<{
|
|
6
|
-
tabIndex?: number;
|
|
7
|
-
}>;
|
|
8
|
-
};
|
|
9
|
-
export declare const RESOURCES_NAV_SECTIONS: NavSectionConfig[];
|
|
10
|
-
export declare const docsLinks: AppHeaderLinkItem[];
|
|
11
|
-
export type AppHeaderCardItem = {
|
|
12
|
-
linkItem: AppHeaderLinkItem;
|
|
13
|
-
icon: React.ReactNode;
|
|
14
|
-
description: string;
|
|
15
|
-
};
|
|
16
|
-
export declare const learningToolsLinks: AppHeaderCardItem[];
|
|
17
|
-
export declare const practiceToolsLinks: AppHeaderCardItem[];
|
|
18
|
-
export declare const inspirationLinks: AppHeaderCardItem[];
|
|
@@ -1,273 +0,0 @@
|
|
|
1
|
-
import { ArticleIcon, BulbIcon, DiamondIcon, FileIcon, NotebookIcon, ProjectsIcon, RulerTriangleIcon, VideoPlayerMovieIcon } from '@codecademy/gamut-icons';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { DocsPanel, InspirationPanel, LearningToolsPanel, PracticeToolsPanel } from './NavPanels';
|
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
export const RESOURCES_NAV_SECTIONS = [{
|
|
6
|
-
item: {
|
|
7
|
-
icon: FileIcon,
|
|
8
|
-
text: 'Docs',
|
|
9
|
-
id: 'docs',
|
|
10
|
-
type: 'resources-dropdown',
|
|
11
|
-
trackingTarget: 'topnav_resources_docs'
|
|
12
|
-
},
|
|
13
|
-
panel: DocsPanel
|
|
14
|
-
}, {
|
|
15
|
-
item: {
|
|
16
|
-
icon: RulerTriangleIcon,
|
|
17
|
-
text: 'Learning tools',
|
|
18
|
-
id: 'learning-tools',
|
|
19
|
-
type: 'resources-dropdown',
|
|
20
|
-
trackingTarget: 'topnav_resources_learning_tools'
|
|
21
|
-
},
|
|
22
|
-
panel: LearningToolsPanel
|
|
23
|
-
}, {
|
|
24
|
-
item: {
|
|
25
|
-
icon: DiamondIcon,
|
|
26
|
-
text: 'Practice tools',
|
|
27
|
-
id: 'practice-tools',
|
|
28
|
-
type: 'resources-dropdown',
|
|
29
|
-
trackingTarget: 'topnav_resources_practice_tools'
|
|
30
|
-
},
|
|
31
|
-
panel: PracticeToolsPanel
|
|
32
|
-
}, {
|
|
33
|
-
item: {
|
|
34
|
-
icon: BulbIcon,
|
|
35
|
-
text: 'Inspiration',
|
|
36
|
-
id: 'inspiration',
|
|
37
|
-
type: 'resources-dropdown',
|
|
38
|
-
trackingTarget: 'topnav_resources_inspiration'
|
|
39
|
-
},
|
|
40
|
-
panel: InspirationPanel
|
|
41
|
-
}];
|
|
42
|
-
export const docsLinks = [{
|
|
43
|
-
id: 'c',
|
|
44
|
-
href: '/resources/docs/c',
|
|
45
|
-
trackingTarget: 'topnav_resources_docs_c',
|
|
46
|
-
text: 'C',
|
|
47
|
-
type: 'link'
|
|
48
|
-
}, {
|
|
49
|
-
id: 'html',
|
|
50
|
-
href: '/resources/docs/html',
|
|
51
|
-
trackingTarget: 'topnav_resources_docs_html',
|
|
52
|
-
text: 'HTML',
|
|
53
|
-
type: 'link'
|
|
54
|
-
}, {
|
|
55
|
-
id: 'python',
|
|
56
|
-
href: '/resources/docs/python',
|
|
57
|
-
trackingTarget: 'topnav_resources_docs_python',
|
|
58
|
-
text: 'Python',
|
|
59
|
-
type: 'link'
|
|
60
|
-
}, {
|
|
61
|
-
id: 'cpp',
|
|
62
|
-
href: '/resources/docs/cpp',
|
|
63
|
-
trackingTarget: 'topnav_resources_docs_cpp',
|
|
64
|
-
text: 'C++',
|
|
65
|
-
type: 'link'
|
|
66
|
-
}, {
|
|
67
|
-
id: 'java',
|
|
68
|
-
href: '/resources/docs/java',
|
|
69
|
-
trackingTarget: 'topnav_resources_docs_java',
|
|
70
|
-
text: 'Java',
|
|
71
|
-
type: 'link'
|
|
72
|
-
}, {
|
|
73
|
-
id: 'react',
|
|
74
|
-
href: '/resources/docs/react',
|
|
75
|
-
trackingTarget: 'topnav_resources_docs_react',
|
|
76
|
-
text: 'React',
|
|
77
|
-
type: 'link'
|
|
78
|
-
}, {
|
|
79
|
-
id: 'css',
|
|
80
|
-
href: '/resources/docs/css',
|
|
81
|
-
trackingTarget: 'topnav_resources_docs_css',
|
|
82
|
-
text: 'CSS',
|
|
83
|
-
type: 'link'
|
|
84
|
-
}, {
|
|
85
|
-
id: 'javascript',
|
|
86
|
-
href: '/resources/docs/javascript',
|
|
87
|
-
trackingTarget: 'topnav_resources_docs_javascript',
|
|
88
|
-
text: 'JavaScript',
|
|
89
|
-
type: 'link'
|
|
90
|
-
}, {
|
|
91
|
-
id: 'sql',
|
|
92
|
-
href: '/resources/docs/sql',
|
|
93
|
-
trackingTarget: 'topnav_resources_docs_sql',
|
|
94
|
-
text: 'SQL',
|
|
95
|
-
type: 'link'
|
|
96
|
-
}, {
|
|
97
|
-
id: 'git',
|
|
98
|
-
href: '/resources/docs/git',
|
|
99
|
-
trackingTarget: 'topnav_resources_docs_git',
|
|
100
|
-
text: 'Git',
|
|
101
|
-
type: 'link'
|
|
102
|
-
}, {
|
|
103
|
-
id: 'php',
|
|
104
|
-
href: '/resources/docs/php',
|
|
105
|
-
trackingTarget: 'topnav_resources_docs_php',
|
|
106
|
-
text: 'PHP',
|
|
107
|
-
type: 'link'
|
|
108
|
-
}, {
|
|
109
|
-
id: 'uiux',
|
|
110
|
-
href: '/resources/docs/uiux',
|
|
111
|
-
trackingTarget: 'topnav_resources_docs_uiux',
|
|
112
|
-
text: 'UI/UX',
|
|
113
|
-
type: 'link'
|
|
114
|
-
}, {
|
|
115
|
-
id: 'markdown',
|
|
116
|
-
href: '/resources/docs/markdown',
|
|
117
|
-
trackingTarget: 'topnav_resources_docs_markdown',
|
|
118
|
-
text: 'Markdown',
|
|
119
|
-
type: 'link'
|
|
120
|
-
}, {
|
|
121
|
-
id: 'data-science',
|
|
122
|
-
href: '/resources/docs/data-science',
|
|
123
|
-
trackingTarget: 'topnav_resources_docs_data_science',
|
|
124
|
-
text: 'Data science',
|
|
125
|
-
type: 'link'
|
|
126
|
-
}, {
|
|
127
|
-
id: 'ai',
|
|
128
|
-
href: '/resources/docs/ai',
|
|
129
|
-
trackingTarget: 'topnav_resources_docs_ai',
|
|
130
|
-
text: 'AI',
|
|
131
|
-
type: 'link'
|
|
132
|
-
}, {
|
|
133
|
-
id: 'data-visualization',
|
|
134
|
-
href: '/resources/docs/data-visualization',
|
|
135
|
-
trackingTarget: 'topnav_resources_docs_data_visualization',
|
|
136
|
-
text: 'Data visualization',
|
|
137
|
-
type: 'link'
|
|
138
|
-
}, {
|
|
139
|
-
id: 'typescript',
|
|
140
|
-
href: '/resources/docs/typescript',
|
|
141
|
-
trackingTarget: 'topnav_resources_docs_typescript',
|
|
142
|
-
text: 'TypeScript',
|
|
143
|
-
type: 'link'
|
|
144
|
-
}, {
|
|
145
|
-
id: 'ruby',
|
|
146
|
-
href: '/resources/docs/ruby',
|
|
147
|
-
trackingTarget: 'topnav_resources_docs_ruby',
|
|
148
|
-
text: 'Ruby',
|
|
149
|
-
type: 'link'
|
|
150
|
-
}];
|
|
151
|
-
export const learningToolsLinks = [{
|
|
152
|
-
linkItem: {
|
|
153
|
-
id: 'projects',
|
|
154
|
-
href: '/projects',
|
|
155
|
-
trackingTarget: 'topnav_resources_projects',
|
|
156
|
-
text: 'Projects',
|
|
157
|
-
type: 'link'
|
|
158
|
-
},
|
|
159
|
-
icon: /*#__PURE__*/_jsx(ProjectsIcon, {}),
|
|
160
|
-
description: "Projects let you apply what you're learning. Practice new skills, connect concepts, or put it all together to create something of your own."
|
|
161
|
-
}, {
|
|
162
|
-
linkItem: {
|
|
163
|
-
id: 'cheatsheets',
|
|
164
|
-
href: '/resources/cheatsheets/all',
|
|
165
|
-
trackingTarget: 'topnav_resources_cheatsheets',
|
|
166
|
-
text: 'Cheatsheets',
|
|
167
|
-
type: 'link'
|
|
168
|
-
},
|
|
169
|
-
icon: /*#__PURE__*/_jsx(NotebookIcon, {}),
|
|
170
|
-
description: 'Sagittis magna mattis risus et tortor. Id morbi ornare mi convallis non. Lorem dis vulputate morbi porttitor tincidunt. Ullamcorper risus eu vestibulum malesuada ullamcorper.'
|
|
171
|
-
}, {
|
|
172
|
-
linkItem: {
|
|
173
|
-
id: 'articles',
|
|
174
|
-
href: '/articles',
|
|
175
|
-
trackingTarget: 'topnav_resources_articles',
|
|
176
|
-
text: 'Articles',
|
|
177
|
-
type: 'link'
|
|
178
|
-
},
|
|
179
|
-
icon: /*#__PURE__*/_jsx(ArticleIcon, {}),
|
|
180
|
-
description: "Articles are more in-depth explanations about concepts covered in Codecademy courses. Here you'll learn more about workflows that developers use every day, and take your coding skills to the next level."
|
|
181
|
-
}, {
|
|
182
|
-
linkItem: {
|
|
183
|
-
id: 'videos',
|
|
184
|
-
href: '/resources/videos',
|
|
185
|
-
trackingTarget: 'topnav_resources_videos',
|
|
186
|
-
text: 'Videos',
|
|
187
|
-
type: 'link'
|
|
188
|
-
},
|
|
189
|
-
icon: /*#__PURE__*/_jsx(VideoPlayerMovieIcon, {}),
|
|
190
|
-
description: 'Watch our best programming videos for beginner, intermediate, and advanced learners about languages, frameworks, and more.'
|
|
191
|
-
}];
|
|
192
|
-
export const practiceToolsLinks = [{
|
|
193
|
-
linkItem: {
|
|
194
|
-
id: 'interview-simulator',
|
|
195
|
-
href: '/interview-simulator',
|
|
196
|
-
trackingTarget: 'topnav_resources_interview_simulator',
|
|
197
|
-
text: 'Interview Simulator',
|
|
198
|
-
type: 'link'
|
|
199
|
-
},
|
|
200
|
-
icon: /*#__PURE__*/_jsx(ProjectsIcon, {}),
|
|
201
|
-
description: 'Discover your potential through interviewing. Identify your strengths, get actionable feedback, and boost your confidence with customized practice — at any stage in your tech career.'
|
|
202
|
-
}, {
|
|
203
|
-
linkItem: {
|
|
204
|
-
id: 'job-readiness',
|
|
205
|
-
href: '/job-readiness',
|
|
206
|
-
trackingTarget: 'topnav_resources_job_readiness',
|
|
207
|
-
text: 'Job-Readiness Checker',
|
|
208
|
-
type: 'link'
|
|
209
|
-
},
|
|
210
|
-
icon: /*#__PURE__*/_jsx(NotebookIcon, {}),
|
|
211
|
-
description: "Add a LinkedIn or ZipRecruiter job posting to analyze how your skills fit the job. You'll need to add more information for jobs found on other websites."
|
|
212
|
-
}, {
|
|
213
|
-
linkItem: {
|
|
214
|
-
id: 'code-challenges',
|
|
215
|
-
href: '/code-challenges',
|
|
216
|
-
trackingTarget: 'topnav_resources_code_challenges',
|
|
217
|
-
text: 'Code Challenges',
|
|
218
|
-
type: 'link'
|
|
219
|
-
},
|
|
220
|
-
icon: /*#__PURE__*/_jsx(ArticleIcon, {}),
|
|
221
|
-
description: "Test your knowledge with code challenges based on real-world technical interviews from companies like Google, Amazon, and Meta. Practice for your job search — or for fun. Don't worry if you get stuck. We'll recommend the right courses to help you."
|
|
222
|
-
}, {
|
|
223
|
-
linkItem: {
|
|
224
|
-
id: 'workspaces',
|
|
225
|
-
href: '/pages/workspaces',
|
|
226
|
-
trackingTarget: 'topnav_resources_workspaces',
|
|
227
|
-
text: 'Workspaces',
|
|
228
|
-
type: 'link'
|
|
229
|
-
},
|
|
230
|
-
icon: /*#__PURE__*/_jsx(VideoPlayerMovieIcon, {}),
|
|
231
|
-
description: 'Practice building projects in 13 popular languages and libraries, tinker with code, and share your work—all without leaving your browser.'
|
|
232
|
-
}];
|
|
233
|
-
export const inspirationLinks = [{
|
|
234
|
-
linkItem: {
|
|
235
|
-
id: 'learning-tips',
|
|
236
|
-
href: '/resources/blog/category/learning-tips',
|
|
237
|
-
trackingTarget: 'topnav_resources_learning_tips',
|
|
238
|
-
text: 'Learning Tips',
|
|
239
|
-
type: 'link'
|
|
240
|
-
},
|
|
241
|
-
icon: /*#__PURE__*/_jsx(ProjectsIcon, {}),
|
|
242
|
-
description: 'Learning to code — or thinking about it? Here’s how to get started, plus tips and tricks for staying motivated.'
|
|
243
|
-
}, {
|
|
244
|
-
linkItem: {
|
|
245
|
-
id: 'finding-a-job',
|
|
246
|
-
href: '/resources/blog/category/finding-a-job',
|
|
247
|
-
trackingTarget: 'topnav_resources_finding_a_job',
|
|
248
|
-
text: 'Finding a Job',
|
|
249
|
-
type: 'link'
|
|
250
|
-
},
|
|
251
|
-
icon: /*#__PURE__*/_jsx(NotebookIcon, {}),
|
|
252
|
-
description: 'Want to break into the tech industry? Learn how to write a standout resume, build a professional portfolio, prepare for technical interviews, and negotiate job offers.'
|
|
253
|
-
}, {
|
|
254
|
-
linkItem: {
|
|
255
|
-
id: 'career-advice',
|
|
256
|
-
href: '/resources/blog/category/career',
|
|
257
|
-
trackingTarget: 'topnav_resources_career_advice',
|
|
258
|
-
text: 'Career Advice',
|
|
259
|
-
type: 'link'
|
|
260
|
-
},
|
|
261
|
-
icon: /*#__PURE__*/_jsx(ArticleIcon, {}),
|
|
262
|
-
description: 'Explore different tech jobs and learn how to advance in your career and maintain work-life balance.'
|
|
263
|
-
}, {
|
|
264
|
-
linkItem: {
|
|
265
|
-
id: 'get-inspired',
|
|
266
|
-
href: '/resources/blog/category/get-inspired',
|
|
267
|
-
trackingTarget: 'topnav_resources_get_inspired',
|
|
268
|
-
text: 'Get Inspired',
|
|
269
|
-
type: 'link'
|
|
270
|
-
},
|
|
271
|
-
icon: /*#__PURE__*/_jsx(VideoPlayerMovieIcon, {}),
|
|
272
|
-
description: 'Learn how coding can change your life (and the world) for the better.'
|
|
273
|
-
}];
|
package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/AppHeaderSectionVariant.test.js
DELETED
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import { setupRtl } from '@codecademy/gamut-tests';
|
|
2
|
-
import userEvent from '@testing-library/user-event';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { GlobalHeaderItemClickContext } from '../../../GlobalHeader/context';
|
|
5
|
-
import { CATALOG_NAV_SECTIONS } from '../AppHeaderCatalogDropdown/consts';
|
|
6
|
-
import { AppHeaderSectionVariant } from '.';
|
|
7
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
const mockOnClick = jest.fn();
|
|
9
|
-
const mockKeyDownEvents = jest.fn();
|
|
10
|
-
const mockItem = {
|
|
11
|
-
text: 'catalog',
|
|
12
|
-
id: 'the-catalog',
|
|
13
|
-
type: 'catalog-dropdown',
|
|
14
|
-
trackingTarget: 'catalog-dropdown'
|
|
15
|
-
};
|
|
16
|
-
const defaultProps = {
|
|
17
|
-
item: mockItem,
|
|
18
|
-
isOpen: true,
|
|
19
|
-
keyDownEvents: mockKeyDownEvents
|
|
20
|
-
};
|
|
21
|
-
const mockContextValue = {
|
|
22
|
-
globalHeaderItemClick: mockOnClick
|
|
23
|
-
};
|
|
24
|
-
describe('AppHeaderSectionVariant', () => {
|
|
25
|
-
const renderView = setupRtl(AppHeaderSectionVariant, defaultProps).options({
|
|
26
|
-
wrapper: ({
|
|
27
|
-
children
|
|
28
|
-
}) => /*#__PURE__*/_jsx(GlobalHeaderItemClickContext.Provider, {
|
|
29
|
-
value: mockContextValue,
|
|
30
|
-
children: children
|
|
31
|
-
})
|
|
32
|
-
});
|
|
33
|
-
it('renders the component ', () => {
|
|
34
|
-
const {
|
|
35
|
-
view
|
|
36
|
-
} = renderView({
|
|
37
|
-
navSections: CATALOG_NAV_SECTIONS
|
|
38
|
-
});
|
|
39
|
-
expect(view.getByRole('heading', {
|
|
40
|
-
name: 'Course topics'
|
|
41
|
-
})).toBeInTheDocument();
|
|
42
|
-
});
|
|
43
|
-
describe('tab navigation', () => {
|
|
44
|
-
it('starts with the first tab active by default', () => {
|
|
45
|
-
const {
|
|
46
|
-
view
|
|
47
|
-
} = renderView({
|
|
48
|
-
navSections: CATALOG_NAV_SECTIONS
|
|
49
|
-
});
|
|
50
|
-
const courseTopicsButton = view.getByTestId('nav-section-course-topics');
|
|
51
|
-
expect(courseTopicsButton).toHaveAttribute('aria-expanded', 'true');
|
|
52
|
-
});
|
|
53
|
-
it('switches active tab when clicking on different sections', async () => {
|
|
54
|
-
const {
|
|
55
|
-
view
|
|
56
|
-
} = renderView({
|
|
57
|
-
navSections: CATALOG_NAV_SECTIONS
|
|
58
|
-
});
|
|
59
|
-
const careerPathsButton = view.getByTestId('nav-section-career-paths');
|
|
60
|
-
await userEvent.click(careerPathsButton);
|
|
61
|
-
expect(careerPathsButton).toHaveAttribute('aria-expanded', 'true');
|
|
62
|
-
const courseTopicsButton = view.getByTestId('nav-section-course-topics');
|
|
63
|
-
expect(courseTopicsButton).toHaveAttribute('aria-expanded', 'false');
|
|
64
|
-
});
|
|
65
|
-
it('calls tracking with correct parameters when clicking nav section', async () => {
|
|
66
|
-
const {
|
|
67
|
-
view
|
|
68
|
-
} = renderView({
|
|
69
|
-
navSections: CATALOG_NAV_SECTIONS
|
|
70
|
-
});
|
|
71
|
-
const careerPathsButton = view.getByTestId('nav-section-career-paths');
|
|
72
|
-
await userEvent.click(careerPathsButton);
|
|
73
|
-
expect(mockOnClick).toHaveBeenCalledTimes(1);
|
|
74
|
-
expect(mockOnClick).toHaveBeenCalledWith(expect.anything(),
|
|
75
|
-
// event object
|
|
76
|
-
expect.objectContaining({
|
|
77
|
-
id: 'career-paths',
|
|
78
|
-
type: 'catalog-dropdown'
|
|
79
|
-
}) // tracking parameters
|
|
80
|
-
);
|
|
81
|
-
});
|
|
82
|
-
});
|
|
83
|
-
});
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import _styled from "@emotion/styled/base";
|
|
2
|
-
import { Box, FlexBox } from '@codecademy/gamut';
|
|
3
|
-
import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
|
|
4
|
-
import React from 'react';
|
|
5
|
-
import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
|
|
6
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
7
|
-
const NavPanelContainer = /*#__PURE__*/_styled(Box, {
|
|
8
|
-
target: "ewhfiay1",
|
|
9
|
-
label: "NavPanelContainer"
|
|
10
|
-
})("display:", ({
|
|
11
|
-
isActive
|
|
12
|
-
}) => isActive ? 'block' : 'none', ";grid-column:2/span 12;grid-row:1/span 8;background-color:", ({
|
|
13
|
-
theme
|
|
14
|
-
}) => theme.colors.background, ";border-radius:", ({
|
|
15
|
-
isActive,
|
|
16
|
-
isFirst
|
|
17
|
-
}) => isActive && isFirst ? '0 8px 8px 8px' : '8px', ";padding:24px 32px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvblZhcmlhbnQvTmF2U2VjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0I4RSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNlY3Rpb25WYXJpYW50L05hdlNlY3Rpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBGbGV4Qm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQXJyb3dDaGV2cm9uUmlnaHRJY29uLCBHYW11dEljb25Qcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyBQcm9wc1dpdGhDaGlsZHJlbiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgdXNlR2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gZnJvbSAnLi4vLi4vLi4vR2xvYmFsSGVhZGVyL2NvbnRleHQnO1xuaW1wb3J0IHtcbiAgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSxcbiAgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtLFxufSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuXG50eXBlIE5hdlNlY3Rpb25Qcm9wcyA9IFByb3BzV2l0aENoaWxkcmVuICYge1xuICBhY3RpdmVUYWI6IG51bWJlcjtcbiAgaXRlbTogQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSB8IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbiAgc2V0QWN0aXZlVGFiOiAodGFiOiBudW1iZXIpID0+IHZvaWQ7XG4gIGljb24/OiBSZWFjdC5Db21wb25lbnRUeXBlPEdhbXV0SWNvblByb3BzPjtcbiAgdGV4dDogc3RyaW5nO1xuICBpbmRleDogbnVtYmVyO1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuICB0YWJJbmRleD86IG51bWJlcjtcbn07XG5cbmNvbnN0IE5hdlBhbmVsQ29udGFpbmVyID0gc3R5bGVkKEJveCk8eyBpc0FjdGl2ZTogYm9vbGVhbjsgaXNGaXJzdDogYm9vbGVhbiB9PmBcbiAgZGlzcGxheTogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnYmxvY2snIDogJ25vbmUnKX07XG4gIGdyaWQtY29sdW1uOiAyIC8gc3BhbiAxMjtcbiAgZ3JpZC1yb3c6IDEgLyBzcGFuIDg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLmJhY2tncm91bmR9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IGlzQWN0aXZlLCBpc0ZpcnN0IH0pID0+XG4gICAgaXNBY3RpdmUgJiYgaXNGaXJzdCA/ICcwIDhweCA4cHggOHB4JyA6ICc4cHgnfTtcbiAgcGFkZGluZzogMjRweCAzMnB4O1xuYDtcblxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkLmJ1dHRvbjx7IGlzQWN0aXZlOiBib29sZWFuOyBpbmRleDogbnVtYmVyIH0+YFxuICBncmlkLWNvbHVtbjogMTtcbiAgZ3JpZC1yb3c6ICR7KHsgaW5kZXggfSkgPT4gaW5kZXggKyAxfTtcbiAgcGFkZGluZzogMTZweDtcbiAgYm9yZGVyOiBub25lO1xuICBib3JkZXItcmFkaXVzOiAkeyh7IGlzQWN0aXZlIH0pID0+IChpc0FjdGl2ZSA/ICc4cHggMCAwIDhweCcgOiAnOHB4Jyl9O1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGZvbnQtc2l6ZTogMThweDtcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgY29sb3I6ICR7KHsgdGhlbWUsIGlzQWN0aXZlIH0pID0+XG4gICAgaXNBY3RpdmUgPyB0aGVtZS5jb2xvcnMucHJpbWFyeSA6IHRoZW1lLmNvbG9ycy50ZXh0fTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgd2lkdGg6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJzEwMCUnIDogJ2NhbGMoMTAwJSAtIDhweCknKX07XG4gIGhlaWdodDogNjBweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IGlzQWN0aXZlLCB0aGVtZSB9KSA9PlxuICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLmJhY2tncm91bmQgOiB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ119O1xuXG4gICNhcnJvdy1jaGV2cm9uLXJpZ2h0LWljb24ge1xuICAgIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICB9XG5cbiAgJjpob3ZlcixcbiAgJjpmb2N1cyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSwgaXNBY3RpdmUgfSkgPT5cbiAgICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLmJhY2tncm91bmQgOiB0aGVtZS5jb2xvcnNbJ25hdnktMTAwJ119O1xuICAgIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5fTtcbiAgfVxuYDtcblxuY29uc3QgTmF2U2VjdGlvbiA9ICh7XG4gIGFjdGl2ZVRhYixcbiAgc2V0QWN0aXZlVGFiLFxuICBpY29uOiBJY29uLFxuICB0ZXh0LFxuICBpbmRleCxcbiAgY2hpbGRyZW4sXG4gIGl0ZW0sXG4gIHRhYkluZGV4LFxufTogTmF2U2VjdGlvblByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8U3R5bGVkQnV0dG9uXG4gICAgICAgIGlzQWN0aXZlPXthY3RpdmVUYWIgPT09IGluZGV4fVxuICAgICAgICBpbmRleD17aW5kZXh9XG4gICAgICAgIG9uQ2xpY2s9eyhldmVudCkgPT4ge1xuICAgICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgaXRlbSk7XG4gICAgICAgICAgc2V0QWN0aXZlVGFiKGluZGV4KTtcbiAgICAgICAgfX1cbiAgICAgICAgZGF0YS10ZXN0aWQ9e2BuYXYtc2VjdGlvbi0ke2l0ZW0uaWR9YH1cbiAgICAgICAgYXJpYS1leHBhbmRlZD17YWN0aXZlVGFiID09PSBpbmRleH1cbiAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgPlxuICAgICAgICA8RmxleEJveCBnYXA9ezh9IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICB7SWNvbiAmJiA8SWNvbiAvPn1cbiAgICAgICAgICB7dGV4dH1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8QXJyb3dDaGV2cm9uUmlnaHRJY29uIGlkPVwiYXJyb3ctY2hldnJvbi1yaWdodC1pY29uXCIgLz5cbiAgICAgIDwvU3R5bGVkQnV0dG9uPlxuXG4gICAgICA8TmF2UGFuZWxDb250YWluZXIgaXNBY3RpdmU9e2FjdGl2ZVRhYiA9PT0gaW5kZXh9IGlzRmlyc3Q9e2luZGV4ID09PSAwfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9OYXZQYW5lbENvbnRhaW5lcj5cbiAgICA8Lz5cbiAgKTtcbn07XG5leHBvcnQgZGVmYXVsdCBOYXZTZWN0aW9uO1xuIl19 */"));
|
|
18
|
-
const StyledButton = /*#__PURE__*/_styled("button", {
|
|
19
|
-
target: "ewhfiay0",
|
|
20
|
-
label: "StyledButton"
|
|
21
|
-
})("grid-column:1;grid-row:", ({
|
|
22
|
-
index
|
|
23
|
-
}) => index + 1, ";padding:16px;border:none;border-radius:", ({
|
|
24
|
-
isActive
|
|
25
|
-
}) => isActive ? '8px 0 0 8px' : '8px', ";background:none;cursor:pointer;font-size:18px;font-weight:400;color:", ({
|
|
26
|
-
theme,
|
|
27
|
-
isActive
|
|
28
|
-
}) => isActive ? theme.colors.primary : theme.colors.text, ";text-align:left;width:", ({
|
|
29
|
-
isActive
|
|
30
|
-
}) => isActive ? '100%' : 'calc(100% - 8px)', ";height:60px;display:flex;justify-content:space-between;align-items:center;background-color:", ({
|
|
31
|
-
isActive,
|
|
32
|
-
theme
|
|
33
|
-
}) => isActive ? theme.colors.background : theme.colors['gray-100'], ";#arrow-chevron-right-icon{display:", ({
|
|
34
|
-
isActive
|
|
35
|
-
}) => isActive ? 'block' : 'none', ";}&:hover,&:focus{background-color:", ({
|
|
36
|
-
theme,
|
|
37
|
-
isActive
|
|
38
|
-
}) => isActive ? theme.colors.background : theme.colors['navy-100'], ";color:", ({
|
|
39
|
-
theme
|
|
40
|
-
}) => theme.colors.primary, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvblZhcmlhbnQvTmF2U2VjdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0N3RSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclNlY3Rpb25WYXJpYW50L05hdlNlY3Rpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBGbGV4Qm94IH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQXJyb3dDaGV2cm9uUmlnaHRJY29uLCBHYW11dEljb25Qcm9wcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyBQcm9wc1dpdGhDaGlsZHJlbiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgdXNlR2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gZnJvbSAnLi4vLi4vLi4vR2xvYmFsSGVhZGVyL2NvbnRleHQnO1xuaW1wb3J0IHtcbiAgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSxcbiAgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtLFxufSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuXG50eXBlIE5hdlNlY3Rpb25Qcm9wcyA9IFByb3BzV2l0aENoaWxkcmVuICYge1xuICBhY3RpdmVUYWI6IG51bWJlcjtcbiAgaXRlbTogQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbSB8IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcbiAgc2V0QWN0aXZlVGFiOiAodGFiOiBudW1iZXIpID0+IHZvaWQ7XG4gIGljb24/OiBSZWFjdC5Db21wb25lbnRUeXBlPEdhbXV0SWNvblByb3BzPjtcbiAgdGV4dDogc3RyaW5nO1xuICBpbmRleDogbnVtYmVyO1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuICB0YWJJbmRleD86IG51bWJlcjtcbn07XG5cbmNvbnN0IE5hdlBhbmVsQ29udGFpbmVyID0gc3R5bGVkKEJveCk8eyBpc0FjdGl2ZTogYm9vbGVhbjsgaXNGaXJzdDogYm9vbGVhbiB9PmBcbiAgZGlzcGxheTogJHsoeyBpc0FjdGl2ZSB9KSA9PiAoaXNBY3RpdmUgPyAnYmxvY2snIDogJ25vbmUnKX07XG4gIGdyaWQtY29sdW1uOiAyIC8gc3BhbiAxMjtcbiAgZ3JpZC1yb3c6IDEgLyBzcGFuIDg7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLmJhY2tncm91bmR9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IGlzQWN0aXZlLCBpc0ZpcnN0IH0pID0+XG4gICAgaXNBY3RpdmUgJiYgaXNGaXJzdCA/ICcwIDhweCA4cHggOHB4JyA6ICc4cHgnfTtcbiAgcGFkZGluZzogMjRweCAzMnB4O1xuYDtcblxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkLmJ1dHRvbjx7IGlzQWN0aXZlOiBib29sZWFuOyBpbmRleDogbnVtYmVyIH0+YFxuICBncmlkLWNvbHVtbjogMTtcbiAgZ3JpZC1yb3c6ICR7KHsgaW5kZXggfSkgPT4gaW5kZXggKyAxfTtcbiAgcGFkZGluZzogMTZweDtcbiAgYm9yZGVyOiBub25lO1xuICBib3JkZXItcmFkaXVzOiAkeyh7IGlzQWN0aXZlIH0pID0+IChpc0FjdGl2ZSA/ICc4cHggMCAwIDhweCcgOiAnOHB4Jyl9O1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIGZvbnQtc2l6ZTogMThweDtcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgY29sb3I6ICR7KHsgdGhlbWUsIGlzQWN0aXZlIH0pID0+XG4gICAgaXNBY3RpdmUgPyB0aGVtZS5jb2xvcnMucHJpbWFyeSA6IHRoZW1lLmNvbG9ycy50ZXh0fTtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgd2lkdGg6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJzEwMCUnIDogJ2NhbGMoMTAwJSAtIDhweCknKX07XG4gIGhlaWdodDogNjBweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IGlzQWN0aXZlLCB0aGVtZSB9KSA9PlxuICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLmJhY2tncm91bmQgOiB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ119O1xuXG4gICNhcnJvdy1jaGV2cm9uLXJpZ2h0LWljb24ge1xuICAgIGRpc3BsYXk6ICR7KHsgaXNBY3RpdmUgfSkgPT4gKGlzQWN0aXZlID8gJ2Jsb2NrJyA6ICdub25lJyl9O1xuICB9XG5cbiAgJjpob3ZlcixcbiAgJjpmb2N1cyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSwgaXNBY3RpdmUgfSkgPT5cbiAgICAgIGlzQWN0aXZlID8gdGhlbWUuY29sb3JzLmJhY2tncm91bmQgOiB0aGVtZS5jb2xvcnNbJ25hdnktMTAwJ119O1xuICAgIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5fTtcbiAgfVxuYDtcblxuY29uc3QgTmF2U2VjdGlvbiA9ICh7XG4gIGFjdGl2ZVRhYixcbiAgc2V0QWN0aXZlVGFiLFxuICBpY29uOiBJY29uLFxuICB0ZXh0LFxuICBpbmRleCxcbiAgY2hpbGRyZW4sXG4gIGl0ZW0sXG4gIHRhYkluZGV4LFxufTogTmF2U2VjdGlvblByb3BzKSA9PiB7XG4gIGNvbnN0IHsgZ2xvYmFsSGVhZGVySXRlbUNsaWNrIH0gPSB1c2VHbG9iYWxIZWFkZXJJdGVtQ2xpY2soKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8U3R5bGVkQnV0dG9uXG4gICAgICAgIGlzQWN0aXZlPXthY3RpdmVUYWIgPT09IGluZGV4fVxuICAgICAgICBpbmRleD17aW5kZXh9XG4gICAgICAgIG9uQ2xpY2s9eyhldmVudCkgPT4ge1xuICAgICAgICAgIGdsb2JhbEhlYWRlckl0ZW1DbGljayhldmVudCwgaXRlbSk7XG4gICAgICAgICAgc2V0QWN0aXZlVGFiKGluZGV4KTtcbiAgICAgICAgfX1cbiAgICAgICAgZGF0YS10ZXN0aWQ9e2BuYXYtc2VjdGlvbi0ke2l0ZW0uaWR9YH1cbiAgICAgICAgYXJpYS1leHBhbmRlZD17YWN0aXZlVGFiID09PSBpbmRleH1cbiAgICAgICAgdGFiSW5kZXg9e3RhYkluZGV4fVxuICAgICAgPlxuICAgICAgICA8RmxleEJveCBnYXA9ezh9IGFsaWduSXRlbXM9XCJjZW50ZXJcIj5cbiAgICAgICAgICB7SWNvbiAmJiA8SWNvbiAvPn1cbiAgICAgICAgICB7dGV4dH1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgICA8QXJyb3dDaGV2cm9uUmlnaHRJY29uIGlkPVwiYXJyb3ctY2hldnJvbi1yaWdodC1pY29uXCIgLz5cbiAgICAgIDwvU3R5bGVkQnV0dG9uPlxuXG4gICAgICA8TmF2UGFuZWxDb250YWluZXIgaXNBY3RpdmU9e2FjdGl2ZVRhYiA9PT0gaW5kZXh9IGlzRmlyc3Q9e2luZGV4ID09PSAwfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9OYXZQYW5lbENvbnRhaW5lcj5cbiAgICA8Lz5cbiAgKTtcbn07XG5leHBvcnQgZGVmYXVsdCBOYXZTZWN0aW9uO1xuIl19 */"));
|
|
41
|
-
const NavSection = ({
|
|
42
|
-
activeTab,
|
|
43
|
-
setActiveTab,
|
|
44
|
-
icon: Icon,
|
|
45
|
-
text,
|
|
46
|
-
index,
|
|
47
|
-
children,
|
|
48
|
-
item,
|
|
49
|
-
tabIndex
|
|
50
|
-
}) => {
|
|
51
|
-
const {
|
|
52
|
-
globalHeaderItemClick
|
|
53
|
-
} = useGlobalHeaderItemClick();
|
|
54
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
55
|
-
children: [/*#__PURE__*/_jsxs(StyledButton, {
|
|
56
|
-
isActive: activeTab === index,
|
|
57
|
-
index: index,
|
|
58
|
-
onClick: event => {
|
|
59
|
-
globalHeaderItemClick(event, item);
|
|
60
|
-
setActiveTab(index);
|
|
61
|
-
},
|
|
62
|
-
"data-testid": `nav-section-${item.id}`,
|
|
63
|
-
"aria-expanded": activeTab === index,
|
|
64
|
-
tabIndex: tabIndex,
|
|
65
|
-
children: [/*#__PURE__*/_jsxs(FlexBox, {
|
|
66
|
-
gap: 8,
|
|
67
|
-
alignItems: "center",
|
|
68
|
-
children: [Icon && /*#__PURE__*/_jsx(Icon, {}), text]
|
|
69
|
-
}), /*#__PURE__*/_jsx(ArrowChevronRightIcon, {
|
|
70
|
-
id: "arrow-chevron-right-icon"
|
|
71
|
-
})]
|
|
72
|
-
}), /*#__PURE__*/_jsx(NavPanelContainer, {
|
|
73
|
-
isActive: activeTab === index,
|
|
74
|
-
isFirst: index === 0,
|
|
75
|
-
children: children
|
|
76
|
-
})]
|
|
77
|
-
});
|
|
78
|
-
};
|
|
79
|
-
export default NavSection;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { PropsWithChildren, ReactNode } from 'react';
|
|
2
|
-
import { AppHeaderLinkItem } from '../../..';
|
|
3
|
-
type PanelLayoutProps = PropsWithChildren & {
|
|
4
|
-
heading: string;
|
|
5
|
-
description: ReactNode;
|
|
6
|
-
linkItem?: AppHeaderLinkItem;
|
|
7
|
-
tabIndex?: number;
|
|
8
|
-
};
|
|
9
|
-
export declare const PanelLayout: ({ heading, description, linkItem, children, tabIndex, }: PanelLayoutProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export {};
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { Anchor, FlexBox, Text } from '@codecademy/gamut';
|
|
2
|
-
import { MiniArrowRightIcon } from '@codecademy/gamut-icons';
|
|
3
|
-
import { useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
|
|
4
|
-
import { useAppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
|
|
5
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
-
export const PanelLayout = ({
|
|
7
|
-
heading,
|
|
8
|
-
description,
|
|
9
|
-
linkItem,
|
|
10
|
-
children,
|
|
11
|
-
tabIndex = 0
|
|
12
|
-
}) => {
|
|
13
|
-
const {
|
|
14
|
-
globalHeaderItemClick
|
|
15
|
-
} = useGlobalHeaderItemClick();
|
|
16
|
-
const {
|
|
17
|
-
handleClose
|
|
18
|
-
} = useAppHeaderDropdownContext();
|
|
19
|
-
return /*#__PURE__*/_jsxs(FlexBox, {
|
|
20
|
-
flexDirection: "column",
|
|
21
|
-
gap: 24,
|
|
22
|
-
pr: {
|
|
23
|
-
_: 32,
|
|
24
|
-
md: 16,
|
|
25
|
-
lg: 0
|
|
26
|
-
},
|
|
27
|
-
children: [/*#__PURE__*/_jsx(Text, {
|
|
28
|
-
as: "h2",
|
|
29
|
-
variant: "title-sm",
|
|
30
|
-
children: heading
|
|
31
|
-
}), /*#__PURE__*/_jsx(Text, {
|
|
32
|
-
children: description
|
|
33
|
-
}), children, linkItem && /*#__PURE__*/_jsx(FlexBox, {
|
|
34
|
-
justifyContent: "center",
|
|
35
|
-
children: /*#__PURE__*/_jsx(Anchor, {
|
|
36
|
-
href: linkItem.href,
|
|
37
|
-
onClick: event => {
|
|
38
|
-
globalHeaderItemClick(event, linkItem);
|
|
39
|
-
handleClose();
|
|
40
|
-
},
|
|
41
|
-
tabIndex: tabIndex,
|
|
42
|
-
variant: "standard",
|
|
43
|
-
children: /*#__PURE__*/_jsxs(FlexBox, {
|
|
44
|
-
alignItems: "center",
|
|
45
|
-
gap: 8,
|
|
46
|
-
children: [linkItem.text, " ", /*#__PURE__*/_jsx(MiniArrowRightIcon, {})]
|
|
47
|
-
})
|
|
48
|
-
})
|
|
49
|
-
})]
|
|
50
|
-
});
|
|
51
|
-
};
|