@hashicorp/react-components 0.0.0-nightly.6467d67 → 0.0.0-nightly.7a813d9

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 (10) hide show
  1. package/package.json +3 -3
  2. package/src/components/nav-panel/components/panel/column/index.tsx +15 -2
  3. package/src/components/nav-panel/components/panel/column/style.module.css +11 -1
  4. package/src/components/nav-panel/components/panel/root/index.tsx +11 -2
  5. package/src/components/nav-panel/components/panel/root/style.module.css +19 -5
  6. package/src/components/nav-panel/components/promo/index.tsx +8 -1
  7. package/src/components/nav-panel/components/promo/style.module.css +26 -5
  8. package/src/components/nav-panel/product-panel/index.tsx +10 -3
  9. package/src/components/nav-panel/product-panel/style.module.css +105 -23
  10. package/src/lib/parse-url/index.ts +4 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/react-components",
3
- "version": "0.0.0-nightly.6467d67",
3
+ "version": "0.0.0-nightly.7a813d9",
4
4
  "main": "src/index.ts",
5
5
  "scripts": {
6
6
  "lint": "next-hashicorp lint",
@@ -8,7 +8,7 @@
8
8
  "test:watch": "vitest watch"
9
9
  },
10
10
  "dependencies": {
11
- "@hashicorp/flight-icons": "^2.15.0",
11
+ "@hashicorp/flight-icons": "^3.5.0",
12
12
  "@hashicorp/platform-product-meta": "^0.1.1",
13
13
  "@hashicorp/platform-util": "^0.2.0",
14
14
  "@hashicorp/react-design-system-components": "*",
@@ -24,7 +24,7 @@
24
24
  "react-hook-form": "^7.43.5"
25
25
  },
26
26
  "devDependencies": {
27
- "@hashicorp/platform-cli": "^2.6.0",
27
+ "@hashicorp/platform-cli": "^2.8.0",
28
28
  "@hashicorp/platform-types": "^0.4.0",
29
29
  "@testing-library/jest-dom": "^6.4.2",
30
30
  "@vitejs/plugin-react": "^4.2.1",
package/src/components/nav-panel/components/panel/column/index.tsx CHANGED
@@ -4,8 +4,21 @@ import s from './style.module.css'
4
4
  export interface NavColumnProps {
5
5
  className?: string
6
6
  children: React.ReactNode
7
+ hasSidePanel?: boolean
7
8
  }
8
9
 
9
- export default function Column({ className, children }: NavColumnProps) {
10
- return <div className={classNames(s.column, className)}>{children}</div>
10
+ export default function Column({
11
+ className,
12
+ children,
13
+ hasSidePanel,
14
+ }: NavColumnProps) {
15
+ return (
16
+ <div
17
+ className={classNames(s.column, className, {
18
+ [s.hasSide]: hasSidePanel,
19
+ })}
20
+ >
21
+ {children}
22
+ </div>
23
+ )
11
24
  }
package/src/components/nav-panel/components/panel/column/style.module.css CHANGED
@@ -1,3 +1,5 @@
1
+ @custom-media --dev-dot-viewport (min-width: 1210px);
2
+
1
3
  .column {
2
4
  position: relative;
3
5
  display: flex;
@@ -9,6 +11,14 @@
9
11
  border-radius: var(--hdsplus-spacing-03);
10
12
 
11
13
  @media (--large) {
12
- margin: 0;
14
+ &:not(.hasSide) {
15
+ margin: 0;
16
+ }
17
+ }
18
+
19
+ @media (--dev-dot-viewport) {
20
+ &.hasSide {
21
+ margin: 0;
22
+ }
13
23
  }
14
24
  }
package/src/components/nav-panel/components/panel/root/index.tsx CHANGED
@@ -4,8 +4,17 @@ import s from './style.module.css'
4
4
  interface RootProps {
5
5
  className?: string
6
6
  children: React.ReactNode
7
+ hasSidePanel?: boolean
7
8
  }
8
9
 
9
- export default function Root({ className, children }: RootProps) {
10
- return <div className={classNames(s.root, className)}>{children}</div>
10
+ export default function Root({ className, children, hasSidePanel }: RootProps) {
11
+ return (
12
+ <div
13
+ className={classNames(s.root, className, {
14
+ [s.hasSide]: hasSidePanel,
15
+ })}
16
+ >
17
+ {children}
18
+ </div>
19
+ )
11
20
  }
package/src/components/nav-panel/components/panel/root/style.module.css CHANGED
@@ -1,3 +1,5 @@
1
+ @custom-media --dev-dot-viewport (min-width: 1210px);
2
+
1
3
  .root {
2
4
  width: 100%;
3
5
  display: flex;
@@ -7,10 +9,22 @@
7
9
  min-height: calc(100dvh - var(--hdsplus-spacing-12));
8
10
 
9
11
  @media (--large) {
10
- justify-content: flex-start;
11
- height: 100%;
12
- min-height: fit-content;
13
- padding: var(--hdsplus-spacing-05) var(--hdsplus-spacing-04);
14
- gap: var(--hdsplus-spacing-04);
12
+ &:not(.hasSide) {
13
+ justify-content: flex-start;
14
+ height: 100%;
15
+ min-height: fit-content;
16
+ padding: var(--hdsplus-spacing-05) var(--hdsplus-spacing-04);
17
+ gap: var(--hdsplus-spacing-04);
18
+ }
19
+ }
20
+
21
+ @media (--dev-dot-viewport) {
22
+ &.hasSide {
23
+ justify-content: flex-start;
24
+ height: 100%;
25
+ min-height: fit-content;
26
+ padding: var(--hdsplus-spacing-05) var(--hdsplus-spacing-04);
27
+ gap: var(--hdsplus-spacing-04);
28
+ }
15
29
  }
16
30
  }
package/src/components/nav-panel/components/promo/index.tsx CHANGED
@@ -16,6 +16,7 @@ export interface PromoProps {
16
16
  slug?: string
17
17
  icon?: string
18
18
  theme: string
19
+ hasSidePanel?: boolean
19
20
  }
20
21
 
21
22
  export default function Promo({
@@ -26,6 +27,7 @@ export default function Promo({
26
27
  slug,
27
28
  icon,
28
29
  theme,
30
+ hasSidePanel,
29
31
  }: PromoProps) {
30
32
  const handleClick = useCallback((title, linkUrl, linkTitle, slug) => {
31
33
  if (window && window.analytics) {
@@ -40,7 +42,12 @@ export default function Promo({
40
42
  }, [])
41
43
 
42
44
  return (
43
- <div className={s.promo}>
45
+ <div
46
+ className={classNames(s.promo, {
47
+ [s.hasSide]: hasSidePanel,
48
+ [s.noSide]: !hasSidePanel,
49
+ })}
50
+ >
44
51
  {icon && (
45
52
  <div
46
53
  className={classNames(s.icon, {
package/src/components/nav-panel/components/promo/style.module.css CHANGED
@@ -1,3 +1,5 @@
1
+ @custom-media --dev-dot-viewport (min-width: 1210px);
2
+
1
3
  .promo {
2
4
  display: flex;
3
5
  border-radius: var(--hdsplus-spacing-01);
@@ -10,9 +12,19 @@
10
12
  margin: var(--hdsplus-spacing-05);
11
13
 
12
14
  @media (--large) {
13
- margin: 0;
14
- width: min-content;
15
- min-width: 100%;
15
+ &.noSide {
16
+ margin: 0;
17
+ width: min-content;
18
+ min-width: 100%;
19
+ }
20
+ }
21
+
22
+ @media (--dev-dot-viewport) {
23
+ &.hasSide {
24
+ margin: 0;
25
+ width: min-content;
26
+ min-width: 100%;
27
+ }
16
28
  }
17
29
  }
18
30
 
@@ -38,8 +50,17 @@
38
50
  display: none;
39
51
 
40
52
  @media (--large) {
41
- display: block;
42
- margin-top: 3px;
53
+ @nest .noSide & {
54
+ display: block;
55
+ margin-top: 3px;
56
+ }
57
+ }
58
+
59
+ @media (--dev-dot-viewport) {
60
+ @nest .hasSide & {
61
+ display: block;
62
+ margin-top: 3px;
63
+ }
43
64
  }
44
65
  }
45
66
 
package/src/components/nav-panel/product-panel/index.tsx CHANGED
@@ -8,6 +8,7 @@ import { parseUrl } from '../../../lib/parse-url'
8
8
  import { trackNavClickEvent } from '../../../lib/track-nav-click-event'
9
9
  import * as NavigationMenu from '@radix-ui/react-navigation-menu'
10
10
  import s from './style.module.css'
11
+ import classNames from 'classnames'
11
12
 
12
13
  const PRODUCT_LOGO_MAP = new Map([
13
14
  ['Terraform', 'terraform-fill-color'],
@@ -47,9 +48,15 @@ const ProductPanel = ({
47
48
  sidePanel,
48
49
  }: ProductsPanelProps) => {
49
50
  return (
50
- <NavPanel.Root className={s.productPanel}>
51
+ <NavPanel.Root
52
+ className={classNames(s.productPanel, {
53
+ [s.hasSide]: sidePanel,
54
+ [s.noSide]: !sidePanel,
55
+ })}
56
+ hasSidePanel={Boolean(sidePanel)}
57
+ >
51
58
  <div className={s.mainPanel}>
52
- <NavPanel.Column>
59
+ <NavPanel.Column hasSidePanel={Boolean(sidePanel)}>
53
60
  <ul className={s.productCategories}>
54
61
  {productCategories.map(({ title, products }) => {
55
62
  return (
@@ -69,7 +76,7 @@ const ProductPanel = ({
69
76
  })}
70
77
  </ul>
71
78
  </NavPanel.Column>
72
- {promo ? <Promo {...promo} /> : null}
79
+ {promo ? <Promo {...promo} hasSidePanel={Boolean(sidePanel)} /> : null}
73
80
  </div>
74
81
 
75
82
  {sidePanel ? (
package/src/components/nav-panel/product-panel/style.module.css CHANGED
@@ -1,11 +1,24 @@
1
+ @custom-media --dev-dot-viewport (min-width: 1210px);
2
+
1
3
  .productPanel {
2
4
  height: 100%;
3
5
 
4
6
  @media (--large) {
5
- display: grid;
6
- grid-template-rows: 1fr;
7
- grid-template-columns: max-content max-content;
8
- padding: 0;
7
+ &.noSide {
8
+ display: grid;
9
+ grid-template-rows: 1fr;
10
+ grid-template-columns: max-content max-content;
11
+ padding: 0;
12
+ }
13
+ }
14
+
15
+ @media (--dev-dot-viewport) {
16
+ &.hasSide {
17
+ display: grid;
18
+ grid-template-rows: 1fr;
19
+ grid-template-columns: max-content max-content;
20
+ padding: 0;
21
+ }
9
22
  }
10
23
  }
11
24
 
@@ -16,7 +29,15 @@
16
29
  margin: var(--hdsplus-spacing-06) 0 0;
17
30
 
18
31
  @media (--large) {
19
- margin: 0;
32
+ @nest .noSide & {
33
+ margin: 0;
34
+ }
35
+ }
36
+
37
+ @media (--dev-dot-viewport) {
38
+ @nest .hasSide & {
39
+ margin: 0;
40
+ }
20
41
  }
21
42
  }
22
43
 
@@ -38,7 +59,17 @@
38
59
  font-weight: var(--font-weight-semi-bold);
39
60
 
40
61
  @media (--large) {
41
- padding: 0 0 var(--hdsplus-spacing-01) var(--hdsplus-spacing-04);
62
+ @nest .noSide & {
63
+ padding-bottom: 0;
64
+ padding-left: var(--hdsplus-spacing-06);
65
+ }
66
+ }
67
+
68
+ @media (--dev-dot-viewport) {
69
+ @nest .hasSide & {
70
+ padding-bottom: 0;
71
+ padding-left: var(--hdsplus-spacing-06);
72
+ }
42
73
  }
43
74
  }
44
75
 
@@ -50,10 +81,25 @@
50
81
  padding: 0;
51
82
 
52
83
  @media (--large) {
53
- grid-auto-flow: row;
54
- grid-template-columns: repeat(2, 300px);
55
- grid-template-rows: repeat(2, max-content);
56
- gap: 0;
84
+ @nest .noSide & {
85
+ padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
86
+ var(--hdsplus-spacing-04);
87
+ grid-auto-flow: row;
88
+ grid-template-columns: repeat(2, 300px);
89
+ grid-template-rows: repeat(2, max-content);
90
+ gap: 0;
91
+ }
92
+ }
93
+
94
+ @media (--dev-dot-viewport) {
95
+ @nest .hasSide & {
96
+ padding: var(--hdsplus-spacing-06) var(--hdsplus-spacing-05)
97
+ var(--hdsplus-spacing-04);
98
+ grid-auto-flow: row;
99
+ grid-template-columns: repeat(2, 300px);
100
+ grid-template-rows: repeat(2, max-content);
101
+ gap: 0;
102
+ }
57
103
  }
58
104
  }
59
105
 
@@ -65,12 +111,26 @@
65
111
  gap: var(--hdsplus-spacing-05);
66
112
 
67
113
  @media (--large) {
68
- padding: var(--hdsplus-spacing-05);
69
- margin-bottom: 0;
114
+ @nest .noSide & {
115
+ padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
116
+ margin-bottom: 0;
117
+
118
+ &:hover {
119
+ background-color: var(--token-color-surface-interactive-hover);
120
+ border-radius: var(--hdsplus-spacing-01);
121
+ }
122
+ }
123
+ }
70
124
 
71
- &:hover {
72
- background-color: var(--token-color-surface-interactive-hover);
73
- border-radius: var(--hdsplus-spacing-01);
125
+ @media (--dev-dot-viewport) {
126
+ @nest .hasSide & {
127
+ padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
128
+ margin-bottom: 0;
129
+
130
+ &:hover {
131
+ background-color: var(--token-color-surface-interactive-hover);
132
+ border-radius: var(--hdsplus-spacing-01);
133
+ }
74
134
  }
75
135
  }
76
136
  }
@@ -81,10 +141,23 @@
81
141
  & svg {
82
142
  height: 42px;
83
143
  width: 42px;
144
+ }
84
145
 
85
- @media (--large) {
86
- height: var(--hdsplus-spacing-08);
87
- width: var(--hdsplus-spacing-08);
146
+ @nest .noSide & {
147
+ & svg {
148
+ @media (--large) {
149
+ height: var(--hdsplus-spacing-08);
150
+ width: var(--hdsplus-spacing-08);
151
+ }
152
+ }
153
+ }
154
+
155
+ @nest .hasSide & {
156
+ & svg {
157
+ @media (--dev-dot-viewport) {
158
+ height: var(--hdsplus-spacing-08);
159
+ width: var(--hdsplus-spacing-08);
160
+ }
88
161
  }
89
162
  }
90
163
  }
@@ -117,8 +190,17 @@
117
190
  flex-direction: column;
118
191
 
119
192
  @media (--large) {
120
- padding: var(--hdsplus-spacing-05) 0 var(--hdsplus-spacing-05)
121
- var(--hdsplus-spacing-04);
193
+ @nest .noSide & {
194
+ padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-05)
195
+ var(--hdsplus-spacing-04);
196
+ }
197
+ }
198
+
199
+ @media (--dev-dot-viewport) {
200
+ @nest .hasSide & {
201
+ padding: var(--hdsplus-spacing-07) 0 var(--hdsplus-spacing-05)
202
+ var(--hdsplus-spacing-04);
203
+ }
122
204
  }
123
205
  }
124
206
 
@@ -129,7 +211,7 @@
129
211
  flex-direction: column;
130
212
  gap: var(--hdsplus-spacing-05);
131
213
  margin: 0;
132
- padding: var(--hdsplus-spacing-05) var(--hdsplus-spacing-07)
214
+ padding: var(--hdsplus-spacing-07) var(--hdsplus-spacing-04)
133
215
  var(--hdsplus-spacing-09) var(--hdsplus-spacing-07);
134
216
  }
135
217
 
@@ -141,7 +223,7 @@
141
223
  grid-template-columns: 1fr;
142
224
  gap: var(--hdsplus-spacing-07);
143
225
 
144
- @media (--large) {
226
+ @media (--dev-dot-viewport) {
145
227
  gap: var(--hdsplus-spacing-05);
146
228
  }
147
229
  }
@@ -152,7 +234,7 @@
152
234
  margin-bottom: var(--hdsplus-spacing-05);
153
235
  gap: var(--hdsplus-spacing-05);
154
236
 
155
- @media (--large) {
237
+ @media (--dev-dot-viewport) {
156
238
  padding: var(--hdsplus-spacing-03) var(--hdsplus-spacing-05);
157
239
  margin-bottom: 0;
158
240
 
package/src/lib/parse-url/index.ts CHANGED
@@ -26,5 +26,7 @@ export function parseUrl(url: string | undefined): {
26
26
  const isRelative = (url) => url.startsWith('/')
27
27
  const isAnchor = (url) => url.startsWith('#')
28
28
 
29
- export const isInternal = (url) =>
30
- new URL(url).hostname.includes('hashicorp.com')
29
+ export const isInternal = (url) => {
30
+ const hostname = new URL(url).hostname
31
+ return hostname === 'hashicorp.com'
32
+ }