@hashicorp/react-components 1.2.2 → 1.2.3

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 (11) 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 +14 -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
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.3",
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
@@ -8,7 +8,7 @@
8
8
  height: 100%;
9
9
 
10
10
  @media (--large) {
11
- &.noSide {
11
+ &:not(.isDevPortal) {
12
12
  display: grid;
13
13
  grid-template-rows: 1fr;
14
14
  grid-template-columns: max-content max-content;
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  @media (--dev-dot-viewport) {
20
- &.hasSide {
20
+ &.isDevPortal {
21
21
  display: grid;
22
22
  grid-template-rows: 1fr;
23
23
  grid-template-columns: max-content max-content;
@@ -37,13 +37,13 @@
37
37
  }
38
38
 
39
39
  @media (--large) {
40
- @nest .noSide & {
40
+ @nest :not(.isDevPortal) & {
41
41
  margin: 0;
42
42
  }
43
43
  }
44
44
 
45
45
  @media (--dev-dot-viewport) {
46
- @nest .hasSide & {
46
+ @nest .isDevPortal & {
47
47
  margin: 0;
48
48
  }
49
49
  }
@@ -67,14 +67,14 @@
67
67
  font-weight: var(--mds-typography-font-weight-semibold);
68
68
 
69
69
  @media (--large) {
70
- @nest .noSide & {
70
+ @nest :not(.isDevPortal) & {
71
71
  padding-bottom: 0;
72
72
  padding-left: var(--mds-spacing-06);
73
73
  }
74
74
  }
75
75
 
76
76
  @media (--dev-dot-viewport) {
77
- @nest .hasSide & {
77
+ @nest .isDevPortal & {
78
78
  padding-bottom: 0;
79
79
  padding-left: var(--mds-spacing-06);
80
80
  }
@@ -89,7 +89,7 @@
89
89
  padding: 0;
90
90
 
91
91
  @media (--large) {
92
- @nest .noSide & {
92
+ @nest :not(.isDevPortal) & {
93
93
  padding: var(--mds-spacing-06) var(--mds-spacing-05) var(--mds-spacing-04);
94
94
  grid-auto-flow: row;
95
95
  grid-template-columns: repeat(2, 300px);
@@ -99,7 +99,7 @@
99
99
  }
100
100
 
101
101
  @media (--dev-dot-viewport) {
102
- @nest .hasSide & {
102
+ @nest .isDevPortal & {
103
103
  padding: var(--mds-spacing-06) var(--mds-spacing-05) var(--mds-spacing-04);
104
104
  grid-auto-flow: row;
105
105
  grid-template-columns: repeat(2, 300px);
@@ -123,7 +123,7 @@
123
123
  gap: var(--mds-spacing-05);
124
124
 
125
125
  @media (--large) {
126
- @nest .noSide & {
126
+ @nest :not(.isDevPortal) & {
127
127
  padding: var(--mds-spacing-03) var(--mds-spacing-05);
128
128
  margin-bottom: 0;
129
129
 
@@ -135,7 +135,7 @@
135
135
  }
136
136
 
137
137
  @media (--dev-dot-viewport) {
138
- @nest .hasSide & {
138
+ @nest .isDevPortal & {
139
139
  padding: var(--mds-spacing-03) var(--mds-spacing-05);
140
140
  margin-bottom: 0;
141
141
 
@@ -155,7 +155,7 @@
155
155
  width: 42px;
156
156
  }
157
157
 
158
- @nest .noSide & {
158
+ @nest :not(.isDevPortal) & {
159
159
  & svg {
160
160
  @media (--large) {
161
161
  height: var(--mds-spacing-08);
@@ -164,7 +164,7 @@
164
164
  }
165
165
  }
166
166
 
167
- @nest .hasSide & {
167
+ @nest .isDevPortal & {
168
168
  & svg {
169
169
  @media (--dev-dot-viewport) {
170
170
  height: var(--mds-spacing-08);
@@ -206,7 +206,7 @@
206
206
  }
207
207
 
208
208
  @media (--large) {
209
- @nest .noSide & {
209
+ @nest :not(.isDevPortal) & {
210
210
  padding: var(--mds-spacing-05) 0 var(--mds-spacing-05) var(--mds-spacing-04);
211
211
  }
212
212
 
@@ -216,7 +216,7 @@
216
216
  }
217
217
 
218
218
  @media (--dev-dot-viewport) {
219
- @nest .hasSide & {
219
+ @nest .isDevPortal & {
220
220
  padding: var(--mds-spacing-07) 0 var(--mds-spacing-09) var(--mds-spacing-04);
221
221
  }
222
222
 
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
  }