@hashicorp/react-components 1.2.2 → 1.2.4

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 (12) hide show
  1. package/package.json +2 -2
  2. package/src/components/nav-panel/components/panel/column/index.tsx +3 -3
  3. package/src/components/nav-panel/components/panel/column/style.module.css +2 -2
  4. package/src/components/nav-panel/components/panel/root/index.tsx +3 -3
  5. package/src/components/nav-panel/components/panel/root/style.module.css +2 -2
  6. package/src/components/nav-panel/components/promo/index.tsx +3 -4
  7. package/src/components/nav-panel/components/promo/style.module.css +4 -4
  8. package/src/components/nav-panel/product-panel/index.tsx +7 -6
  9. package/src/components/nav-panel/product-panel/style.module.css +88 -14
  10. package/src/components/nav-panel/standard-panel/index.tsx +6 -3
  11. package/src/components/nav-panel/standard-panel/style.module.css +13 -2
  12. package/src/lib/supported-locales/index.ts +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/react-components",
3
- "version": "1.2.2",
3
+ "version": "1.2.4",
4
4
  "main": "src/index.ts",
5
5
  "scripts": {
6
6
  "lint": "npm run lint:js",
@@ -9,7 +9,7 @@
9
9
  "test:watch": "vitest watch"
10
10
  },
11
11
  "dependencies": {
12
- "@hashicorp/flight-icons": "^3.7.0",
12
+ "@hashicorp/flight-icons": "^5.0.0",
13
13
  "@hashicorp/web-mktg-logos": "*",
14
14
  "@radix-ui/react-navigation-menu": "^1.2.14",
15
15
  "@radix-ui/react-visually-hidden": "^1.2.4",
package/src/components/nav-panel/components/panel/column/index.tsx CHANGED
@@ -8,18 +8,18 @@ import s from './style.module.css'
8
8
  export interface NavColumnProps {
9
9
  className?: string
10
10
  children: React.ReactNode
11
- hasSidePanel?: boolean
11
+ isDevPortal?: boolean
12
12
  }
13
13
 
14
14
  export default function Column({
15
15
  className,
16
16
  children,
17
- hasSidePanel,
17
+ isDevPortal,
18
18
  }: NavColumnProps) {
19
19
  return (
20
20
  <div
21
21
  className={classNames(s.column, className, {
22
- [s.hasSide]: hasSidePanel,
22
+ [s.isDevPortal]: isDevPortal,
23
23
  })}
24
24
  >
25
25
  {children}
package/src/components/nav-panel/components/panel/column/style.module.css CHANGED
@@ -15,13 +15,13 @@
15
15
  border-radius: var(--mds-spacing-03);
16
16
 
17
17
  @media (--large) {
18
- &:not(.hasSide) {
18
+ &:not(.isDevPortal) {
19
19
  margin: 0;
20
20
  }
21
21
  }
22
22
 
23
23
  @media (--dev-dot-viewport) {
24
- &.hasSide {
24
+ &.isDevPortal {
25
25
  margin: 0;
26
26
  }
27
27
  }
package/src/components/nav-panel/components/panel/root/index.tsx CHANGED
@@ -8,14 +8,14 @@ import s from './style.module.css'
8
8
  interface RootProps {
9
9
  className?: string
10
10
  children: React.ReactNode
11
- hasSidePanel?: boolean
11
+ isDevPortal?: boolean
12
12
  }
13
13
 
14
- export default function Root({ className, children, hasSidePanel }: RootProps) {
14
+ export default function Root({ className, children, isDevPortal }: RootProps) {
15
15
  return (
16
16
  <div
17
17
  className={classNames(s.root, className, {
18
- [s.hasSide]: hasSidePanel,
18
+ [s.isDevPortal]: isDevPortal,
19
19
  })}
20
20
  >
21
21
  {children}
package/src/components/nav-panel/components/panel/root/style.module.css CHANGED
@@ -13,7 +13,7 @@
13
13
  min-height: calc(100dvh - var(--mds-spacing-12));
14
14
 
15
15
  @media (--large) {
16
- &:not(.hasSide) {
16
+ &:not(.isDevPortal) {
17
17
  justify-content: flex-start;
18
18
  height: 100%;
19
19
  min-height: fit-content;
@@ -23,7 +23,7 @@
23
23
  }
24
24
 
25
25
  @media (--dev-dot-viewport) {
26
- &.hasSide {
26
+ &.isDevPortal {
27
27
  justify-content: flex-start;
28
28
  height: 100%;
29
29
  min-height: fit-content;
package/src/components/nav-panel/components/promo/index.tsx CHANGED
@@ -22,7 +22,7 @@ export interface PromoProps {
22
22
  slug?: string
23
23
  icon?: string
24
24
  theme: string
25
- hasSidePanel?: boolean
25
+ isDevPortal?: boolean
26
26
  isPromoOnTop?: boolean
27
27
  }
28
28
 
@@ -36,7 +36,7 @@ export default function Promo({
36
36
  slug,
37
37
  icon,
38
38
  theme,
39
- hasSidePanel,
39
+ isDevPortal,
40
40
  isPromoOnTop = false,
41
41
  }: PromoProps) {
42
42
  const handleClick = useCallback((title, linkUrl, linkTitle, slug) => {
@@ -54,8 +54,7 @@ export default function Promo({
54
54
  return (
55
55
  <div
56
56
  className={classNames(s.promo, {
57
- [s.hasSide]: hasSidePanel,
58
- [s.noSide]: !hasSidePanel,
57
+ [s.isDevPortal]: isDevPortal,
59
58
  [s.topPromo]: isPromoOnTop,
60
59
  })}
61
60
  >
package/src/components/nav-panel/components/promo/style.module.css CHANGED
@@ -19,7 +19,7 @@
19
19
  &.topPromo {
20
20
  margin-bottom: var(--mds-spacing-05);
21
21
  }
22
- &.noSide {
22
+ &:not(.isDevPortal) {
23
23
  margin: 0;
24
24
  width: min-content;
25
25
  min-width: 100%;
@@ -30,7 +30,7 @@
30
30
  &.topPromo {
31
31
  margin-bottom: var(--mds-spacing-05);
32
32
  }
33
- &.hasSide {
33
+ &.isDevPortal {
34
34
  &.topPromo {
35
35
  margin-bottom: var(--mds-spacing-05);
36
36
  }
@@ -68,14 +68,14 @@
68
68
  display: none;
69
69
 
70
70
  @media (--large) {
71
- @nest .noSide & {
71
+ @nest :not(.isDevPortal) & {
72
72
  display: block;
73
73
  margin-top: 3px;
74
74
  }
75
75
  }
76
76
 
77
77
  @media (--dev-dot-viewport) {
78
- @nest .hasSide & {
78
+ @nest .isDevPortal & {
79
79
  display: block;
80
80
  margin-top: 3px;
81
81
  }
package/src/components/nav-panel/product-panel/index.tsx CHANGED
@@ -55,6 +55,7 @@ export interface ProductsPanelProps {
55
55
  }[]
56
56
  }
57
57
  isPromoOnTop?: boolean
58
+ isDevPortal?: boolean
58
59
  }
59
60
 
60
61
  const ProductPanel = ({
@@ -63,25 +64,25 @@ const ProductPanel = ({
63
64
  promo,
64
65
  sidePanel,
65
66
  isPromoOnTop = false,
67
+ isDevPortal = false,
66
68
  }: ProductsPanelProps) => {
67
69
  return (
68
70
  <NavPanel.Root
69
71
  className={classNames(s.productPanel, {
70
- [s.hasSide]: sidePanel,
71
- [s.noSide]: !sidePanel,
72
72
  [s.topPromo]: isPromoOnTop,
73
+ [s.isDevPortal]: isDevPortal,
73
74
  })}
74
- hasSidePanel={Boolean(sidePanel)}
75
+ isDevPortal={isDevPortal}
75
76
  >
76
77
  <div className={s.mainPanel}>
77
78
  {promo && isPromoOnTop ? (
78
79
  <Promo
79
80
  {...promo}
80
- hasSidePanel={Boolean(sidePanel)}
81
+ isDevPortal={isDevPortal}
81
82
  isPromoOnTop={isPromoOnTop}
82
83
  />
83
84
  ) : null}
84
- <NavPanel.Column hasSidePanel={Boolean(sidePanel)}>
85
+ <NavPanel.Column isDevPortal={isDevPortal}>
85
86
  <ul className={s.productCategories}>
86
87
  {productCategories.map(({ group, title, products }) => {
87
88
  return (
@@ -111,7 +112,7 @@ const ProductPanel = ({
111
112
  </ul>
112
113
  </NavPanel.Column>
113
114
  {promo && !isPromoOnTop ? (
114
- <Promo {...promo} hasSidePanel={Boolean(sidePanel)} />
115
+ <Promo {...promo} isDevPortal={isDevPortal} />
115
116
  ) : null}
116
117
  </div>
117
118
 
package/src/components/nav-panel/product-panel/style.module.css CHANGED
@@ -3,12 +3,24 @@
3
3
  */
4
4
 
5
5
  @custom-media --dev-dot-viewport (min-width: 924px);
6
+ @custom-media --dev-dot-show-mobile-menu (max-width: 923px);
7
+ @custom-media --dev-dot-mobile only screen and (max-width: 728px);
8
+ @custom-media --dev-dot-tablet only screen and (min-width: 729px) and (max-width: 1000px);
9
+ @custom-media --dev-dot-tablet-down only screen and (max-width: 1000px);
6
10
 
7
11
  .productPanel {
8
12
  height: 100%;
9
13
 
14
+ @nest &.isDevPortal {
15
+ justify-content: flex-start;
16
+
17
+ @media (--dev-dot-tablet-down) {
18
+ padding-top: 24px;
19
+ }
20
+ }
21
+
10
22
  @media (--large) {
11
- &.noSide {
23
+ &:not(.isDevPortal) {
12
24
  display: grid;
13
25
  grid-template-rows: 1fr;
14
26
  grid-template-columns: max-content max-content;
@@ -17,7 +29,7 @@
17
29
  }
18
30
 
19
31
  @media (--dev-dot-viewport) {
20
- &.hasSide {
32
+ &.isDevPortal {
21
33
  display: grid;
22
34
  grid-template-rows: 1fr;
23
35
  grid-template-columns: max-content max-content;
@@ -37,13 +49,13 @@
37
49
  }
38
50
 
39
51
  @media (--large) {
40
- @nest .noSide & {
52
+ @nest :not(.isDevPortal) & {
41
53
  margin: 0;
42
54
  }
43
55
  }
44
56
 
45
57
  @media (--dev-dot-viewport) {
46
- @nest .hasSide & {
58
+ @nest .isDevPortal & {
47
59
  margin: 0;
48
60
  }
49
61
  }
@@ -58,6 +70,16 @@
58
70
  border-bottom: 1px solid var(--mds-color-border-primary);
59
71
  margin-bottom: var(--mds-spacing-05);
60
72
  padding-bottom: var(--mds-spacing-05);
73
+
74
+ @nest .isDevPortal & {
75
+ margin-bottom: var(--mds-spacing-08) !important;
76
+ padding-bottom: var(--mds-spacing-08) !important;
77
+
78
+ @media (--dev-dot-mobile) {
79
+ margin-bottom: var(--mds-spacing-07) !important;
80
+ padding-bottom: var(--mds-spacing-05) !important;
81
+ }
82
+ }
61
83
  }
62
84
  }
63
85
 
@@ -66,15 +88,23 @@
66
88
  color: var(--mds-color-foreground-strong);
67
89
  font-weight: var(--mds-typography-font-weight-semibold);
68
90
 
91
+ @nest .isDevPortal & {
92
+ padding-bottom: var(--mds-spacing-05);
93
+
94
+ @media (--dev-dot-mobile) {
95
+ padding-bottom: var(--mds-spacing-07);
96
+ }
97
+ }
98
+
69
99
  @media (--large) {
70
- @nest .noSide & {
100
+ @nest :not(.isDevPortal) & {
71
101
  padding-bottom: 0;
72
102
  padding-left: var(--mds-spacing-06);
73
103
  }
74
104
  }
75
105
 
76
106
  @media (--dev-dot-viewport) {
77
- @nest .hasSide & {
107
+ @nest .isDevPortal & {
78
108
  padding-bottom: 0;
79
109
  padding-left: var(--mds-spacing-06);
80
110
  }
@@ -88,8 +118,24 @@
88
118
  margin: 0;
89
119
  padding: 0;
90
120
 
121
+ @nest .isDevPortal & {
122
+ @media (--dev-dot-show-mobile-menu) {
123
+ grid-template-columns: repeat(2, 1fr);
124
+ }
125
+
126
+ @media (--dev-dot-mobile) {
127
+ grid-template-columns: 1fr;
128
+ }
129
+
130
+ & > li {
131
+ @media (--dev-dot-mobile) {
132
+ margin-bottom: 8px;
133
+ }
134
+ }
135
+ }
136
+
91
137
  @media (--large) {
92
- @nest .noSide & {
138
+ @nest :not(.isDevPortal) & {
93
139
  padding: var(--mds-spacing-06) var(--mds-spacing-05) var(--mds-spacing-04);
94
140
  grid-auto-flow: row;
95
141
  grid-template-columns: repeat(2, 300px);
@@ -99,7 +145,7 @@
99
145
  }
100
146
 
101
147
  @media (--dev-dot-viewport) {
102
- @nest .hasSide & {
148
+ @nest .isDevPortal & {
103
149
  padding: var(--mds-spacing-06) var(--mds-spacing-05) var(--mds-spacing-04);
104
150
  grid-auto-flow: row;
105
151
  grid-template-columns: repeat(2, 300px);
@@ -123,7 +169,7 @@
123
169
  gap: var(--mds-spacing-05);
124
170
 
125
171
  @media (--large) {
126
- @nest .noSide & {
172
+ @nest :not(.isDevPortal) & {
127
173
  padding: var(--mds-spacing-03) var(--mds-spacing-05);
128
174
  margin-bottom: 0;
129
175
 
@@ -135,7 +181,7 @@
135
181
  }
136
182
 
137
183
  @media (--dev-dot-viewport) {
138
- @nest .hasSide & {
184
+ @nest .isDevPortal & {
139
185
  padding: var(--mds-spacing-03) var(--mds-spacing-05);
140
186
  margin-bottom: 0;
141
187
 
@@ -155,7 +201,7 @@
155
201
  width: 42px;
156
202
  }
157
203
 
158
- @nest .noSide & {
204
+ @nest :not(.isDevPortal) & {
159
205
  & svg {
160
206
  @media (--large) {
161
207
  height: var(--mds-spacing-08);
@@ -164,7 +210,7 @@
164
210
  }
165
211
  }
166
212
 
167
- @nest .hasSide & {
213
+ @nest .isDevPortal & {
168
214
  & svg {
169
215
  @media (--dev-dot-viewport) {
170
216
  height: var(--mds-spacing-08);
@@ -201,12 +247,40 @@
201
247
  justify-content: space-between;
202
248
  flex-direction: column;
203
249
 
250
+ @nest .isDevPortal & {
251
+ background: none;
252
+ padding-top: 0;
253
+ gap: 0;
254
+
255
+ @media (--dev-dot-tablet) {
256
+ display: flex;
257
+ flex-direction: column-reverse;
258
+ }
259
+ }
260
+
261
+ /* Product Grid Section Sides */
262
+ @nest .isDevPortal & > div:first-child {
263
+ margin: 0 var(--mds-spacing-10);
264
+
265
+ @media (--dev-dot-mobile) {
266
+ margin: 0 var(--mds-spacing-07);
267
+ }
268
+ }
269
+
270
+ /* Promo Banner within Product */
271
+ @nest .isDevPortal & > div:nth-child(2) {
272
+ @media (--dev-dot-tablet) {
273
+ margin-top: 0;
274
+ margin-bottom: var(--mds-spacing-08);
275
+ }
276
+ }
277
+
204
278
  @nest .topPromo & {
205
279
  justify-content: flex-start;
206
280
  }
207
281
 
208
282
  @media (--large) {
209
- @nest .noSide & {
283
+ @nest :not(.isDevPortal) & {
210
284
  padding: var(--mds-spacing-05) 0 var(--mds-spacing-05) var(--mds-spacing-04);
211
285
  }
212
286
 
@@ -216,7 +290,7 @@
216
290
  }
217
291
 
218
292
  @media (--dev-dot-viewport) {
219
- @nest .hasSide & {
293
+ @nest .isDevPortal & {
220
294
  padding: var(--mds-spacing-07) 0 var(--mds-spacing-09) var(--mds-spacing-04);
221
295
  }
222
296
 
package/src/components/nav-panel/standard-panel/index.tsx CHANGED
@@ -7,6 +7,7 @@ import * as NavPanel from '../components/panel'
7
7
  import LinkList, { type LinkListProps } from '../components/link-list'
8
8
  import Promo, { type PromoProps } from '../components/promo'
9
9
  import s from './style.module.css'
10
+ import classNames from 'classnames'
10
11
 
11
12
  export interface NavItem {
12
13
  navItems: LinkListProps['links']
@@ -17,6 +18,7 @@ interface StandardPanelProps {
17
18
  promo?: PromoProps
18
19
  sectionName?: string
19
20
  locale?: any
21
+ isDevPortal?: boolean
20
22
  }
21
23
 
22
24
  const StandardPanel = ({
@@ -24,13 +26,14 @@ const StandardPanel = ({
24
26
  promo,
25
27
  sectionName = '',
26
28
  locale,
29
+ isDevPortal = false,
27
30
  }: StandardPanelProps) => {
28
31
  return (
29
- <NavPanel.Root>
30
- <div className={s.columns}>
32
+ <NavPanel.Root isDevPortal={isDevPortal}>
33
+ <div className={classNames(s.columns, { [s.isDevPortal]: isDevPortal })}>
31
34
  {navData.map(({ navItems }, stableIdx) => {
32
35
  return (
33
- <NavPanel.Column key={stableIdx}>
36
+ <NavPanel.Column key={stableIdx} isDevPortal={isDevPortal}>
34
37
  <LinkList
35
38
  locale={locale}
36
39
  links={navItems}
package/src/components/nav-panel/standard-panel/style.module.css CHANGED
@@ -2,6 +2,8 @@
2
2
  * Copyright IBM Corp. 2022, 2026
3
3
  */
4
4
 
5
+ @custom-media --dev-dot-viewport (min-width: 924px);
6
+
5
7
  .columns {
6
8
  display: flex;
7
9
  gap: var(--mds-spacing-03);
@@ -9,7 +11,16 @@
9
11
  margin-top: var(--mds-spacing-07);
10
12
 
11
13
  @media (--large) {
12
- flex-direction: row;
13
- margin-top: 0;
14
+ &:not(.isDevPortal) {
15
+ flex-direction: row;
16
+ margin-top: 0;
17
+ }
18
+ }
19
+
20
+ @media (--dev-dot-viewport) {
21
+ &.isDevPortal {
22
+ flex-direction: row;
23
+ margin-top: 0;
24
+ }
14
25
  }
15
26
  }
package/src/lib/supported-locales/index.ts CHANGED
@@ -11,4 +11,7 @@ export const allSupportedLocales = [
11
11
  'ko',
12
12
  'pt',
13
13
  'id',
14
+ 'zh',
15
+ 'it',
16
+ 'ar',
14
17
  ]