@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.
Files changed (30) hide show
  1. package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/index.js +6 -8
  2. package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/MarketingBanner.js +83 -0
  3. package/dist/AppHeader/AppHeaderElements/{AppHeaderCatalogDropdown → AppHeaderCatalogSectionVariant}/NavPanels.js +44 -4
  4. package/dist/AppHeader/AppHeaderElements/{AppHeaderSectionVariant → AppHeaderCatalogSectionVariant}/NavSection.d.ts +2 -2
  5. package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/NavSection.js +75 -0
  6. package/dist/AppHeader/AppHeaderElements/{AppHeaderCatalogDropdown → AppHeaderCatalogSectionVariant}/consts.d.ts +1 -1
  7. package/dist/AppHeader/AppHeaderElements/{AppHeaderCatalogDropdown → AppHeaderCatalogSectionVariant}/consts.js +1 -1
  8. package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/index.d.ts +11 -0
  9. package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogSectionVariant/index.js +86 -0
  10. package/dist/AppHeader/AppHeaderElements/AppHeaderLinkSections/index.js +0 -0
  11. package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/index.js +5 -31
  12. package/dist/AppHeaderMobile/AppHeaderCatalogSectonVariantMobile/index.js +3 -3
  13. package/dist/LearningOutcomeCard/index.js +3 -3
  14. package/dist/LearningOutcomeFlyout/index.js +9 -4
  15. package/package.json +1 -1
  16. package/dist/AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/MarketingBanner.js +0 -83
  17. package/dist/AppHeader/AppHeaderElements/AppHeaderFeatureCard/index.d.ts +0 -4
  18. package/dist/AppHeader/AppHeaderElements/AppHeaderFeatureCard/index.js +0 -51
  19. package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.d.ts +0 -11
  20. package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/NavPanels.js +0 -136
  21. package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/consts.d.ts +0 -18
  22. package/dist/AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/consts.js +0 -273
  23. package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/AppHeaderSectionVariant.test.js +0 -83
  24. package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/NavSection.js +0 -79
  25. package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/PanelLayout.d.ts +0 -10
  26. package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/PanelLayout.js +0 -51
  27. package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/index.d.ts +0 -17
  28. package/dist/AppHeader/AppHeaderElements/AppHeaderSectionVariant/index.js +0 -86
  29. /package/dist/AppHeader/AppHeaderElements/{AppHeaderCatalogDropdown → AppHeaderCatalogSectionVariant}/MarketingBanner.d.ts +0 -0
  30. /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
- }];
@@ -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
- };