@stackshift-ui/navigation 6.1.0 → 7.0.0-beta.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 (8) hide show
  1. package/package.json +14 -14
  2. package/src/navigation.test.tsx +2 -2
  3. package/src/navigation_a.tsx +49 -39
  4. package/src/navigation_b.tsx +45 -36
  5. package/src/navigation_c.tsx +48 -36
  6. package/src/navigation_d.tsx +50 -36
  7. package/src/navigation_e.tsx +21 -24
  8. package/src/navigation_h.tsx +53 -47
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackshift-ui/navigation",
3
3
  "description": "",
4
- "version": "6.1.0",
4
+ "version": "7.0.0-beta.0",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "main": "./dist/index.js",
@@ -38,21 +38,21 @@
38
38
  "@react-spring/web": "^10.0.1",
39
39
  "@uidotdev/usehooks": "^2.4.1",
40
40
  "react-icons": "^5.3.0",
41
- "@stackshift-ui/flex": "6.0.11",
42
- "@stackshift-ui/image": "6.0.11",
43
- "@stackshift-ui/link": "6.0.11",
44
- "@stackshift-ui/button": "6.0.11",
45
- "@stackshift-ui/container": "6.0.11",
46
- "@stackshift-ui/section": "6.0.11",
47
- "@stackshift-ui/heading": "6.0.11",
48
- "@stackshift-ui/scripts": "6.0.10",
49
- "@stackshift-ui/grid": "6.0.11",
50
- "@stackshift-ui/text": "6.0.11",
51
- "@stackshift-ui/system": "6.0.11",
52
- "@stackshift-ui/social-icons": "6.0.12"
41
+ "@stackshift-ui/button": "6.1.0-beta.0",
42
+ "@stackshift-ui/container": "7.0.0-beta.0",
43
+ "@stackshift-ui/flex": "7.0.0-beta.0",
44
+ "@stackshift-ui/image": "6.1.0-beta.0",
45
+ "@stackshift-ui/link": "6.0.12-beta.0",
46
+ "@stackshift-ui/scripts": "6.1.0-beta.0",
47
+ "@stackshift-ui/section": "7.0.0-beta.0",
48
+ "@stackshift-ui/grid": "7.0.0-beta.0",
49
+ "@stackshift-ui/text": "7.0.0-beta.0",
50
+ "@stackshift-ui/heading": "7.0.0-beta.0",
51
+ "@stackshift-ui/social-icons": "7.0.0-beta.0",
52
+ "@stackshift-ui/system": "6.1.0-beta.0"
53
53
  },
54
54
  "peerDependencies": {
55
- "@stackshift-ui/system": ">=6.0.11",
55
+ "@stackshift-ui/system": ">=6.1.0-beta.0",
56
56
  "@types/react": "16.8 - 19",
57
57
  "next": "10 - 14",
58
58
  "react": "16.8 - 19",
package/src/navigation.test.tsx CHANGED
@@ -7,7 +7,7 @@ describe.concurrent("navigation", () => {
7
7
 
8
8
  test.skip("Dummy test - test if renders without errors", ({ expect }) => {
9
9
  const clx = "my-class";
10
- render(<Navigation />);
11
- expect(screen.getByTestId("{ kebabCase name }}").classList).toContain(clx);
10
+ render(<Navigation data-testid="navigation" />);
11
+ expect(screen.getByTestId("navigation").classList).toContain(clx);
12
12
  });
13
13
  });
package/src/navigation_a.tsx CHANGED
@@ -6,7 +6,7 @@ import { Section } from "@stackshift-ui/section";
6
6
  import { Text } from "@stackshift-ui/text";
7
7
  import React from "react";
8
8
  import { NavigationProps, ResponsiveNavLinksProps } from ".";
9
- import { logoLink } from "./helper";
9
+ import { ConditionalLink, logoLink } from "./helper";
10
10
  import { LabeledRoute, LabeledRouteWithKey, Logo } from "./types";
11
11
 
12
12
  export default function Navigation_A({
@@ -103,11 +103,16 @@ function NavItem({ link }: { link?: LabeledRoute }) {
103
103
  return (
104
104
  <li>
105
105
  <Button
106
- as="link"
107
- link={link}
108
- ariaLabel={link?.label}
106
+ asChild
107
+ variant="link"
108
+ aria-label={link?.label}
109
109
  className="text-sm text-gray-500 no-underline hover:text-gray-900">
110
- {link?.label}
110
+ <ConditionalLink
111
+ link={link}
112
+ ariaLabel={link?.label}
113
+ className="text-sm text-gray-500 no-underline hover:text-gray-900">
114
+ {link?.label}
115
+ </ConditionalLink>
111
116
  </Button>
112
117
  </li>
113
118
  );
@@ -134,11 +139,13 @@ function ResponsiveNavLinks({
134
139
  {links?.map((link: any, index: number) => (
135
140
  <li className="mb-1" key={index}>
136
141
  <Button
137
- as="link"
138
- ariaLabel={link?.label}
139
- className="block w-full cursor-pointer p-4 text-sm font-semibold text-gray-900 no-underline rounded hover:bg-secondary-foreground hover:text-primary"
140
- link={link}>
141
- {link?.label}
142
+ asChild
143
+ variant="link"
144
+ aria-label={link?.label}
145
+ className="block w-full cursor-pointer p-4 text-sm font-semibold text-gray-900 no-underline rounded hover:bg-secondary-foreground hover:text-primary">
146
+ <ConditionalLink link={link} ariaLabel={link?.label}>
147
+ {link?.label}
148
+ </ConditionalLink>
142
149
  </Button>
143
150
  </li>
144
151
  ))}
@@ -149,22 +156,30 @@ function ResponsiveNavLinks({
149
156
  <Flex direction="col" className="pt-6">
150
157
  {primaryButton?.label ? (
151
158
  <Button
152
- as="link"
153
- link={primaryButton}
154
- ariaLabel={primaryButton?.label}
159
+ asChild
160
+ aria-label={primaryButton?.label}
155
161
  variant="outline"
156
162
  className="block w-full px-4 py-3 mb-3 text-xs cursor-pointer font-semibold leading-loose text-center text-gray-900 rounded-global bg-secondary hover:bg-secondary/50">
157
- {primaryButton?.label}
163
+ <ConditionalLink
164
+ link={primaryButton}
165
+ ariaLabel={primaryButton?.label}
166
+ className="block w-full px-4 py-3 mb-3 text-xs cursor-pointer font-semibold leading-loose text-center text-gray-900 rounded-global bg-secondary hover:bg-secondary/50">
167
+ {primaryButton?.label}
168
+ </ConditionalLink>
158
169
  </Button>
159
170
  ) : null}
160
171
  {secondaryButton?.label ? (
161
172
  <Button
162
- as="link"
163
- link={secondaryButton}
164
- ariaLabel={secondaryButton?.label}
165
- variant="solid"
173
+ asChild
174
+ aria-label={secondaryButton?.label}
175
+ variant="link"
166
176
  className={`block w-full px-4 py-3 mb-2 cursor-pointer leading-loose text-xs text-center font-semibold bg-primary hover:bg-primary-foreground rounded-global`}>
167
- {secondaryButton?.label}
177
+ <ConditionalLink
178
+ link={secondaryButton}
179
+ ariaLabel={secondaryButton?.label}
180
+ className={`block w-full px-4 py-3 mb-2 cursor-pointer leading-loose text-xs text-center font-semibold bg-primary hover:bg-primary-foreground rounded-global`}>
181
+ {secondaryButton?.label}
182
+ </ConditionalLink>
168
183
  </Button>
169
184
  ) : null}
170
185
  </Flex>
@@ -181,9 +196,7 @@ function MobileMenu({ showMenu }: { showMenu: () => void }) {
181
196
  return (
182
197
  <div className="lg:hidden">
183
198
  <Button
184
- variant="unstyled"
185
- as="button"
186
- ariaLabel="Navigation Menu"
199
+ aria-label="Navigation Menu"
187
200
  className="flex items-center p-3 navbar-burger text-primary"
188
201
  onClick={showMenu}>
189
202
  <svg
@@ -209,22 +222,24 @@ function Buttons({
209
222
  <Flex align="center" gap={4}>
210
223
  {primaryButton?.label ? (
211
224
  <Button
212
- as="link"
213
- link={primaryButton}
214
- ariaLabel={primaryButton?.label}
225
+ asChild
226
+ aria-label={primaryButton?.label}
215
227
  variant="outline"
216
- className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-gray-900 rounded-global bg-secondary hover:bg-secondary/50">
217
- {primaryButton?.label}
228
+ className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-secondary-foreground rounded-global bg-secondary hover:bg-secondary/50">
229
+ <ConditionalLink link={primaryButton} ariaLabel={primaryButton?.label}>
230
+ {primaryButton?.label}
231
+ </ConditionalLink>
218
232
  </Button>
219
233
  ) : null}
220
234
  {secondaryButton?.label ? (
221
235
  <Button
222
- as="link"
223
- link={secondaryButton}
224
- ariaLabel={secondaryButton?.label}
225
- variant="solid"
226
- className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-white bg-primary hover:bg-primary-foreground rounded-global">
227
- {secondaryButton?.label}
236
+ asChild
237
+ aria-label={secondaryButton?.label}
238
+ variant="default"
239
+ className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-primary-foreground bg-primary hover:bg-primary/50 rounded-global">
240
+ <ConditionalLink link={secondaryButton} ariaLabel={secondaryButton?.label}>
241
+ {secondaryButton?.label}
242
+ </ConditionalLink>
228
243
  </Button>
229
244
  ) : null}
230
245
  </Flex>
@@ -234,12 +249,7 @@ function Buttons({
234
249
  function BurgerMenuIcon({ showMenu }: { showMenu: () => void }) {
235
250
  return (
236
251
  <div className="flex items-center mb-8">
237
- <Button
238
- variant="unstyled"
239
- as="button"
240
- ariaLabel="Navigation Menu"
241
- className="navbar-close"
242
- onClick={showMenu}>
252
+ <Button aria-label="Close Navigation Menu" className="navbar-close" onClick={showMenu}>
243
253
  <svg
244
254
  className="w-6 h-6 text-gray-500 cursor-pointer hover:text-gray-500"
245
255
  xmlns="http://www.w3.org/2000/svg"
package/src/navigation_b.tsx CHANGED
@@ -7,7 +7,7 @@ import { Section } from "@stackshift-ui/section";
7
7
  import { Text } from "@stackshift-ui/text";
8
8
  import React from "react";
9
9
  import { NavigationProps, ResponsiveNavLinksProps } from ".";
10
- import { logoLink } from "./helper";
10
+ import { ConditionalLink, logoLink } from "./helper";
11
11
  import { LabeledRoute, LabeledRouteWithKey, Logo } from "./types";
12
12
 
13
13
  export default function Navigation_B({
@@ -89,11 +89,13 @@ function NavItem({ link }: { link?: LabeledRouteWithKey }) {
89
89
  return (
90
90
  <li>
91
91
  <Button
92
- as="link"
93
- ariaLabel={link?.label}
94
- link={link}
92
+ variant="unstyled"
93
+ asChild
94
+ aria-label={link?.label}
95
95
  className="text-sm text-gray-500 no-underline hover:text-gray-900">
96
- {link?.label}
96
+ <ConditionalLink link={link} ariaLabel={link?.label || "Navigation link"}>
97
+ {link?.label}
98
+ </ConditionalLink>
97
99
  </Button>
98
100
  </li>
99
101
  );
@@ -129,20 +131,22 @@ function Buttons({
129
131
  <Flex align="center" gap={4}>
130
132
  {primaryButton?.label && (
131
133
  <Button
132
- as="link"
133
- ariaLabel={primaryButton?.label}
134
- link={primaryButton}
135
- className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-gray-900 rounded-global bg-secondary hover:bg-secondary/50">
136
- {primaryButton?.label}
134
+ asChild
135
+ aria-label={primaryButton?.label}
136
+ className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-secondary-foreground rounded-global bg-secondary hover:bg-secondary/50">
137
+ <ConditionalLink link={primaryButton} ariaLabel={primaryButton?.label}>
138
+ {primaryButton?.label}
139
+ </ConditionalLink>
137
140
  </Button>
138
141
  )}
139
142
  {secondaryButton?.label && (
140
143
  <Button
141
- as="link"
142
- ariaLabel={secondaryButton?.label}
143
- link={secondaryButton}
144
- className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-white bg-primary hover:bg-primary-foreground rounded-global">
145
- {secondaryButton?.label}
144
+ asChild
145
+ aria-label={secondaryButton?.label}
146
+ className="hidden lg:flex px-4 py-3 leading-loose text-center font-semibold text-primary-foreground bg-primary hover:bg-primary/50 rounded-global">
147
+ <ConditionalLink link={secondaryButton} ariaLabel={secondaryButton?.label}>
148
+ {secondaryButton?.label}
149
+ </ConditionalLink>
146
150
  </Button>
147
151
  )}
148
152
  </Flex>
@@ -153,9 +157,7 @@ function MobileMenu({ showMenu }: { showMenu: () => void }) {
153
157
  return (
154
158
  <div className="lg:hidden">
155
159
  <Button
156
- variant="unstyled"
157
- as="button"
158
- ariaLabel="Navigation menu"
160
+ aria-label="Navigation menu"
159
161
  className="flex items-center p-3 navbar-burger text-primary"
160
162
  onClick={showMenu}>
161
163
  <svg
@@ -183,12 +185,7 @@ function ResponsiveNavLinks({
183
185
  <div className="fixed inset-0 bg-gray-800 opacity-25 navbar-backdrop" onClick={showMenu} />
184
186
  <nav className="fixed top-0 bottom-0 left-0 flex flex-col w-5/6 max-w-sm px-6 py-6 overflow-y-auto bg-white border-r">
185
187
  <div className="flex items-center mb-8">
186
- <Button
187
- variant="unstyled"
188
- as="button"
189
- ariaLabel="Navigation menu"
190
- className="navbar-close"
191
- onClick={showMenu}>
188
+ <Button aria-label="Close navigation menu" className="navbar-close" onClick={showMenu}>
192
189
  <svg
193
190
  className="w-6 h-6 text-gray-500 cursor-pointer hover:text-gray-500"
194
191
  xmlns="http://www.w3.org/2000/svg"
@@ -209,11 +206,15 @@ function ResponsiveNavLinks({
209
206
  {links?.map((link, index) => (
210
207
  <li className="mb-1" key={index}>
211
208
  <Button
212
- as="link"
213
- ariaLabel={link?.label}
214
- link={link}
209
+ asChild
210
+ aria-label={link?.label}
215
211
  className="block p-4 text-sm font-semibold text-gray-700 no-underline rounded hover:bg-secondary-foreground hover:text-primary">
216
- {link?.label}
212
+ <ConditionalLink
213
+ link={link}
214
+ ariaLabel={link?.label || "Navigation link"}
215
+ className="block p-4 text-sm font-semibold text-gray-700 no-underline rounded hover:bg-secondary-foreground hover:text-primary">
216
+ {link?.label}
217
+ </ConditionalLink>
217
218
  </Button>
218
219
  </li>
219
220
  ))}
@@ -223,20 +224,28 @@ function ResponsiveNavLinks({
223
224
  <div className="pt-6">
224
225
  {primaryButton?.label && (
225
226
  <Button
226
- as="link"
227
- ariaLabel={primaryButton?.label}
228
- link={primaryButton}
227
+ asChild
228
+ aria-label={primaryButton?.label}
229
229
  className="block px-4 py-3 mb-2 text-gray-900 text-center lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
230
- {primaryButton?.label}
230
+ <ConditionalLink
231
+ link={primaryButton}
232
+ ariaLabel={primaryButton?.label}
233
+ className="block px-4 py-3 mb-2 text-gray-900 text-center lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
234
+ {primaryButton?.label}
235
+ </ConditionalLink>
231
236
  </Button>
232
237
  )}
233
238
  {secondaryButton?.label && (
234
239
  <Button
235
- as="link"
236
- ariaLabel={secondaryButton?.label}
237
- link={secondaryButton}
240
+ asChild
241
+ aria-label={secondaryButton?.label}
238
242
  className="block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
239
- {secondaryButton?.label}
243
+ <ConditionalLink
244
+ link={secondaryButton}
245
+ ariaLabel={secondaryButton?.label}
246
+ className="block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
247
+ {secondaryButton?.label}
248
+ </ConditionalLink>
240
249
  </Button>
241
250
  )}
242
251
  </div>
package/src/navigation_c.tsx CHANGED
@@ -7,7 +7,7 @@ import { Section } from "@stackshift-ui/section";
7
7
  import { Text } from "@stackshift-ui/text";
8
8
  import React from "react";
9
9
  import { NavigationProps, ResponsiveNavLinksProps } from ".";
10
- import { logoLink } from "./helper";
10
+ import { ConditionalLink, logoLink } from "./helper";
11
11
  import { LabeledRoute, LabeledRouteWithKey, Logo } from "./types";
12
12
 
13
13
  export default function Navigation_C({
@@ -67,11 +67,16 @@ function NavItem({ link }: { link?: LabeledRouteWithKey }) {
67
67
  return (
68
68
  <li>
69
69
  <Button
70
- as="link"
71
- ariaLabel={link?.label}
72
- link={link}
70
+ variant="unstyled"
71
+ asChild
72
+ aria-label={link?.label}
73
73
  className="text-sm text-gray-500 no-underline hover:text-gray-900">
74
- {link?.label}
74
+ <ConditionalLink
75
+ link={link}
76
+ ariaLabel={link?.label || "Navigation link"}
77
+ className="text-sm text-gray-500 no-underline hover:text-gray-900">
78
+ {link?.label}
79
+ </ConditionalLink>
75
80
  </Button>
76
81
  </li>
77
82
  );
@@ -129,20 +134,22 @@ function Buttons({
129
134
  <div className="hidden lg:text-right lg:block lg:w-1/3">
130
135
  {primaryButton?.label && (
131
136
  <Button
132
- as="link"
133
- ariaLabel={primaryButton?.label}
134
- link={primaryButton}
135
- className="px-4 py-3 text-gray-900 lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
136
- {primaryButton?.label}
137
+ asChild
138
+ aria-label={primaryButton?.label}
139
+ className="px-4 py-3 text-secondary-foreground lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
140
+ <ConditionalLink link={primaryButton} ariaLabel={primaryButton?.label}>
141
+ {primaryButton?.label}
142
+ </ConditionalLink>
137
143
  </Button>
138
144
  )}
139
145
  {secondaryButton?.label && (
140
146
  <Button
141
- as="link"
142
- ariaLabel={secondaryButton?.label}
143
- link={secondaryButton}
144
- className="px-4 py-3 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
145
- {secondaryButton?.label}
147
+ asChild
148
+ aria-label={secondaryButton?.label}
149
+ className="px-4 py-3 leading-loose text-center text-primary-foreground font-semibold bg-primary hover:bg-primary/50 rounded-global">
150
+ <ConditionalLink link={secondaryButton} ariaLabel={secondaryButton?.label}>
151
+ {secondaryButton?.label}
152
+ </ConditionalLink>
146
153
  </Button>
147
154
  )}
148
155
  </div>
@@ -153,9 +160,7 @@ function MobileMenu({ showMenu }: { showMenu: () => void }) {
153
160
  return (
154
161
  <div className="ml-auto lg:hidden">
155
162
  <Button
156
- variant="unstyled"
157
- as="button"
158
- ariaLabel="Navigation menu"
163
+ aria-label="Navigation menu"
159
164
  className="flex items-center p-3 navbar-burger text-primary"
160
165
  onClick={showMenu}>
161
166
  <svg
@@ -184,12 +189,7 @@ function ResponsiveNavLinks({
184
189
  onClick={showMenu}></div>
185
190
  <nav className="fixed top-0 bottom-0 left-0 flex flex-col w-5/6 max-w-sm px-6 py-6 overflow-y-auto bg-white border-r">
186
191
  <div className="flex items-center mb-8">
187
- <Button
188
- variant="unstyled"
189
- as="button"
190
- ariaLabel="Navigation menu"
191
- className="navbar-close"
192
- onClick={showMenu}>
192
+ <Button aria-label="Close navigation menu" className="navbar-close" onClick={showMenu}>
193
193
  <svg
194
194
  className="w-6 h-6 text-gray-500 cursor-pointer hover:text-gray-500"
195
195
  xmlns="http://www.w3.org/2000/svg"
@@ -210,11 +210,15 @@ function ResponsiveNavLinks({
210
210
  links?.map((link, index) => (
211
211
  <li className="mb-1" key={index}>
212
212
  <Button
213
- as="link"
214
- ariaLabel={link?.label}
215
- link={link}
213
+ asChild
214
+ aria-label={link?.label}
216
215
  className="block p-4 text-sm font-semibold text-gray-700 no-underline rounded hover:bg-secondary-foreground hover:text-primary">
217
- {link?.label}
216
+ <ConditionalLink
217
+ link={link}
218
+ ariaLabel={link?.label || "Navigation link"}
219
+ className="block p-4 text-sm font-semibold text-gray-700 no-underline rounded hover:bg-secondary-foreground hover:text-primary">
220
+ {link?.label}
221
+ </ConditionalLink>
218
222
  </Button>
219
223
  </li>
220
224
  ))}
@@ -224,20 +228,28 @@ function ResponsiveNavLinks({
224
228
  <div className="pt-6">
225
229
  {primaryButton?.label && (
226
230
  <Button
227
- as="link"
228
- ariaLabel={primaryButton?.label}
229
- link={primaryButton}
231
+ asChild
232
+ aria-label={primaryButton?.label}
230
233
  className="block px-4 py-3 mb-2 text-gray-900 text-center lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
231
- {primaryButton?.label}
234
+ <ConditionalLink
235
+ link={primaryButton}
236
+ ariaLabel={primaryButton?.label}
237
+ className="block px-4 py-3 mb-2 text-gray-900 text-center lg:ml-auto lg:mr-3 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
238
+ {primaryButton?.label}
239
+ </ConditionalLink>
232
240
  </Button>
233
241
  )}
234
242
  {secondaryButton?.label && (
235
243
  <Button
236
- as="link"
237
- ariaLabel={secondaryButton?.label}
238
- link={secondaryButton}
244
+ asChild
245
+ aria-label={secondaryButton?.label}
239
246
  className="block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
240
- {secondaryButton?.label}
247
+ <ConditionalLink
248
+ link={secondaryButton}
249
+ ariaLabel={secondaryButton?.label}
250
+ className="block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
251
+ {secondaryButton?.label}
252
+ </ConditionalLink>
241
253
  </Button>
242
254
  )}
243
255
  </div>
package/src/navigation_d.tsx CHANGED
@@ -7,7 +7,7 @@ import { Section } from "@stackshift-ui/section";
7
7
  import { Text } from "@stackshift-ui/text";
8
8
  import React from "react";
9
9
  import { NavigationProps, ResponsiveNavLinksProps } from ".";
10
- import { logoLink } from "./helper";
10
+ import { ConditionalLink, logoLink } from "./helper";
11
11
  import { LabeledRoute, LabeledRouteWithKey, Logo } from "./types";
12
12
 
13
13
  export default function Navigation_D({
@@ -65,11 +65,16 @@ function NavItem({ link }: { link?: LabeledRouteWithKey }) {
65
65
  return (
66
66
  <li>
67
67
  <Button
68
- as="link"
69
- ariaLabel={link?.label}
70
- link={link}
68
+ variant="unstyled"
69
+ asChild
70
+ aria-label={link?.label}
71
71
  className="text-sm text-gray-500 no-underline hover:text-gray-900">
72
- {link?.label}
72
+ <ConditionalLink
73
+ link={link}
74
+ ariaLabel={link?.label || "Navigation link"}
75
+ className="text-sm text-gray-500 no-underline hover:text-gray-900">
76
+ {link?.label}
77
+ </ConditionalLink>
73
78
  </Button>
74
79
  </li>
75
80
  );
@@ -127,20 +132,24 @@ function Buttons({
127
132
  <div className="hidden lg:flex lg:gap-4">
128
133
  {primaryButton?.label && (
129
134
  <Button
130
- as="link"
131
- ariaLabel={primaryButton?.label}
132
- link={primaryButton}
133
- className="px-4 py-3 leading-loose text-center text-gray-900 font-semibold rounded-global bg-secondary hover:bg-secondary/50">
134
- {primaryButton?.label}
135
+ asChild
136
+ variant="unstyled"
137
+ aria-label={primaryButton?.label}
138
+ className="px-4 py-3 leading-loose text-center text-secondary-foreground font-semibold rounded-global bg-secondary hover:bg-secondary/50">
139
+ <ConditionalLink link={primaryButton} ariaLabel={primaryButton?.label}>
140
+ {primaryButton?.label}
141
+ </ConditionalLink>
135
142
  </Button>
136
143
  )}
137
144
  {secondaryButton?.label && (
138
145
  <Button
139
- as="link"
140
- ariaLabel={secondaryButton?.label}
141
- link={secondaryButton}
142
- className="px-4 py-3 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
143
- {secondaryButton?.label}
146
+ asChild
147
+ variant="unstyled"
148
+ aria-label={secondaryButton?.label}
149
+ className="px-4 py-3 leading-loose text-center text-primary-foreground font-semibold bg-primary hover:bg-primary/50 rounded-global">
150
+ <ConditionalLink link={secondaryButton} ariaLabel={secondaryButton?.label}>
151
+ {secondaryButton?.label}
152
+ </ConditionalLink>
144
153
  </Button>
145
154
  )}
146
155
  </div>
@@ -151,9 +160,7 @@ function MobileMenu({ showMenu }: { showMenu: () => void }) {
151
160
  return (
152
161
  <div className="ml-auto lg:hidden">
153
162
  <Button
154
- variant="unstyled"
155
- as="button"
156
- ariaLabel="Navigation menu"
163
+ aria-label="Navigation menu"
157
164
  className="flex items-center p-3 navbar-burger text-primary"
158
165
  onClick={showMenu}>
159
166
  <svg
@@ -182,12 +189,7 @@ function ResponsiveNavLinks({
182
189
  onClick={showMenu}></div>
183
190
  <nav className="fixed top-0 bottom-0 left-0 flex flex-col w-5/6 max-w-sm px-6 py-6 overflow-y-auto bg-white border-r">
184
191
  <div className="flex items-center mb-8">
185
- <Button
186
- variant="unstyled"
187
- as="button"
188
- ariaLabel="Navigation menu"
189
- className="navbar-close"
190
- onClick={showMenu}>
192
+ <Button aria-label="Close navigation menu" className="navbar-close" onClick={showMenu}>
191
193
  <svg
192
194
  className="w-6 h-6 text-gray-500 cursor-pointer hover:text-gray-500"
193
195
  xmlns="http://www.w3.org/2000/svg"
@@ -207,11 +209,15 @@ function ResponsiveNavLinks({
207
209
  links.map((link, index) => (
208
210
  <li className="mb-1" key={index}>
209
211
  <Button
210
- as="link"
211
- ariaLabel={link.label}
212
- link={link}
212
+ asChild
213
+ aria-label={link.label}
213
214
  className="block p-4 text-sm font-semibold text-gray-700 no-underline rounded hover:bg-secondary-foreground hover:text-primary">
214
- {link.label}
215
+ <ConditionalLink
216
+ link={link}
217
+ ariaLabel={link.label || "Navigation link"}
218
+ className="block p-4 text-sm font-semibold text-gray-700 no-underline rounded hover:bg-secondary-foreground hover:text-primary">
219
+ {link.label}
220
+ </ConditionalLink>
215
221
  </Button>
216
222
  </li>
217
223
  ))}
@@ -219,20 +225,28 @@ function ResponsiveNavLinks({
219
225
  <div className="mt-auto pt-6">
220
226
  {primaryButton?.label && (
221
227
  <Button
222
- as="link"
223
- ariaLabel={primaryButton.label}
224
- link={primaryButton}
228
+ asChild
229
+ aria-label={primaryButton.label}
225
230
  className="block px-4 py-3 mb-2 text-center font-semibold rounded-global bg-secondary hover:bg-secondary/50">
226
- {primaryButton.label}
231
+ <ConditionalLink
232
+ link={primaryButton}
233
+ ariaLabel={primaryButton.label}
234
+ className="block px-4 py-3 mb-2 text-center font-semibold rounded-global bg-secondary hover:bg-secondary/50">
235
+ {primaryButton.label}
236
+ </ConditionalLink>
227
237
  </Button>
228
238
  )}
229
239
  {secondaryButton?.label && (
230
240
  <Button
231
- as="link"
232
- ariaLabel={secondaryButton.label}
233
- link={secondaryButton}
241
+ asChild
242
+ aria-label={secondaryButton.label}
234
243
  className="block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
235
- {secondaryButton.label}
244
+ <ConditionalLink
245
+ link={secondaryButton}
246
+ ariaLabel={secondaryButton.label}
247
+ className="block px-4 py-3 mb-2 leading-loose text-center text-white font-semibold bg-primary hover:bg-primary-foreground rounded-global">
248
+ {secondaryButton.label}
249
+ </ConditionalLink>
236
250
  </Button>
237
251
  )}
238
252
  </div>
package/src/navigation_e.tsx CHANGED
@@ -6,7 +6,7 @@ import { Link } from "@stackshift-ui/link";
6
6
  import { Section } from "@stackshift-ui/section";
7
7
  import { Fragment, useEffect, useRef, useState } from "react";
8
8
  import { NavigationProps, ResponsiveNavLinksProps } from ".";
9
- import { logoLink } from "./helper";
9
+ import { ConditionalLink, logoLink } from "./helper";
10
10
  import { blockStyle } from "./helper/blockStyle";
11
11
  import { LabeledRouteWithKey, Logo } from "./types";
12
12
 
@@ -145,16 +145,16 @@ function NavItem({ link }: { link?: LabeledRouteWithKey }) {
145
145
  return (
146
146
  <li>
147
147
  <Button
148
- as="link"
148
+ asChild
149
149
  variant="link"
150
- ariaLabel={link?.label}
151
- link={link}
152
150
  className={
153
151
  link?.type === "linkInternal"
154
152
  ? "xl:mr-12 lg:mr-8 font-bold font-heading hover:text-gray-600 no-underline text-black"
155
153
  : "mr-12 font-bold font-heading hover:text-gray-600 no-underline text-black"
156
154
  }>
157
- {link?.label}
155
+ <ConditionalLink ariaLabel={link?.label || "Navigation link"} link={link}>
156
+ {link?.label}
157
+ </ConditionalLink>
158
158
  </Button>
159
159
  </li>
160
160
  );
@@ -169,9 +169,8 @@ function SearchButton({
169
169
  }) {
170
170
  return (
171
171
  <Button
172
- as="button"
173
- variant="unstyled"
174
- ariaLabel="Search button"
172
+ variant="ghost"
173
+ aria-label="Search button"
175
174
  type="button"
176
175
  onClick={() => setShowSearchBar(!showSearchBar)}>
177
176
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
@@ -213,9 +212,8 @@ function SearchForm({
213
212
  type="search"
214
213
  />
215
214
  <Button
216
- as="button"
217
- variant="unstyled"
218
- ariaLabel="Submit product search"
215
+ variant="ghost"
216
+ aria-label="Submit product search"
219
217
  className={`mt-1 inline-flex h-[35px] w-10 items-center justify-center bg-primary ${
220
218
  productQuery === ""
221
219
  ? "cursor-not-allowed opacity-50"
@@ -234,9 +232,8 @@ function SearchForm({
234
232
  function MenuIcon({ showMenu }: { showMenu: () => void }) {
235
233
  return (
236
234
  <Button
237
- variant="unstyled"
238
- as="button"
239
- ariaLabel="Nav Sidebar"
235
+ variant="ghost"
236
+ aria-label="Nav Sidebar"
240
237
  className="self-center mr-12 navbar-burger lg:hidden"
241
238
  onClick={showMenu}>
242
239
  <svg
@@ -322,9 +319,8 @@ function ResponsiveNavLinks({
322
319
  )}
323
320
 
324
321
  <Button
325
- variant="unstyled"
326
- as="button"
327
- ariaLabel="Close navigation menu"
322
+ variant="ghost"
323
+ aria-label="Close navigation menu"
328
324
  className="ml-auto"
329
325
  onClick={showMenu}>
330
326
  <svg
@@ -361,9 +357,8 @@ function ResponsiveNavLinks({
361
357
  type="search"
362
358
  />
363
359
  <Button
364
- variant="unstyled"
365
- as="button"
366
- ariaLabel="Submit product search"
360
+ variant="ghost"
361
+ aria-label="Submit product search"
367
362
  className={`inline-flex h-full w-10 items-center justify-center bg-primary ${
368
363
  productQuery === ""
369
364
  ? "cursor-not-allowed opacity-50"
@@ -391,12 +386,14 @@ function ResponsiveNavLinks({
391
386
  <Fragment key={index}>
392
387
  <li className="mb-8">
393
388
  <Button
394
- as="link"
389
+ asChild
395
390
  variant="link"
396
- ariaLabel={link?.label ?? `navigation link ${index + 1}`}
397
- link={link}
398
391
  className="font-bold text-black no-underline font-heading hover:text-gray-600">
399
- {link?.label}
392
+ <ConditionalLink
393
+ ariaLabel={link?.label || `navigation link ${index + 1}`}
394
+ link={link}>
395
+ {link?.label}
396
+ </ConditionalLink>
400
397
  </Button>
401
398
  </li>
402
399
  </Fragment>
package/src/navigation_h.tsx CHANGED
@@ -23,7 +23,7 @@ import { GoPerson } from "react-icons/go";
23
23
  import { LiaSearchSolid } from "react-icons/lia";
24
24
  import { SlLocationPin } from "react-icons/sl";
25
25
  import { NavigationProps } from ".";
26
- import { logoLink } from "./helper";
26
+ import { ConditionalLink, logoLink } from "./helper";
27
27
  import { LabeledRouteWithKey, Logo, MegaMenu } from "./types";
28
28
 
29
29
  interface AccordionProps {
@@ -222,12 +222,14 @@ const MobileMenuContentItem = React.memo(({ megaMenu }: MobileMenuContentItemPro
222
222
  {groupedLinksItem.links?.map(link => (
223
223
  <Button
224
224
  key={`MobileMenuContent-Item-Group-Link-${link._key}`}
225
- ariaLabel={link.label ?? ""}
226
- as="link"
227
- link={link ?? {}}
228
- variant="unstyled"
225
+ asChild
226
+ variant="ghost"
229
227
  className="text-black text-sm font-normal font-heading-kb leading-[30px] hover:underline block ml-4">
230
- {link.label}
228
+ <ConditionalLink link={link} ariaLabel={link.label ?? "Navigation link"}>
229
+ <ConditionalLink link={link} ariaLabel={link.label ?? "Navigation link"}>
230
+ {link.label}
231
+ </ConditionalLink>
232
+ </ConditionalLink>
231
233
  </Button>
232
234
  ))}
233
235
  </div>
@@ -239,22 +241,24 @@ const MobileMenuContentItem = React.memo(({ megaMenu }: MobileMenuContentItemPro
239
241
  {megaMenu.showcaseLink?.map((link, i) => (
240
242
  <div key={`MobileMenuContent-Item-Images-${link._key}-${i}`} className="mt-4 pl-4">
241
243
  <Button
242
- ariaLabel={link.primaryButton?.label ?? ""}
243
- as="link"
244
- link={link.primaryButton ?? {}}
245
- variant="unstyled"
244
+ asChild
245
+ variant="ghost"
246
246
  className="text-black text-sm font-normal font-heading-kb leading-[30px]">
247
- <Flex direction="col" gap={3}>
248
- <Image
249
- key={i}
250
- src={link.mainImage?.image}
251
- alt={link.mainImage?.alt ?? ""}
252
- width={200}
253
- height={150}
254
- className="w-[188px] h-[147px] object-cover object-center"
255
- />
256
- {link.primaryButton?.label}
257
- </Flex>
247
+ <ConditionalLink
248
+ link={link.primaryButton}
249
+ ariaLabel={link.primaryButton?.label ?? "Navigation link"}>
250
+ <Flex direction="col" gap={3}>
251
+ <Image
252
+ key={i}
253
+ src={link.mainImage?.image}
254
+ alt={link.mainImage?.alt ?? ""}
255
+ width={200}
256
+ height={150}
257
+ className="w-[188px] h-[147px] object-cover object-center"
258
+ />
259
+ {link.primaryButton?.label}
260
+ </Flex>
261
+ </ConditionalLink>
258
262
  </Button>
259
263
  </div>
260
264
  ))}
@@ -414,12 +418,10 @@ const NavItem = ({ link, isIcon }: NavItemProps) => {
414
418
 
415
419
  return (
416
420
  <li>
417
- <Button
418
- as="link"
419
- ariaLabel={link?.label}
420
- link={link}
421
- className="text-sm font-label tracking-wide">
422
- {!isIcon ? link?.label : icon}
421
+ <Button variant="unstyled" asChild className="text-sm font-label tracking-wide">
422
+ <ConditionalLink link={link} ariaLabel={link?.label ?? "Navigation link"}>
423
+ {!isIcon ? link?.label : icon}
424
+ </ConditionalLink>
423
425
  </Button>
424
426
  </li>
425
427
  );
@@ -497,10 +499,8 @@ interface MegaMenuNavLinkProps {
497
499
  const MegaMenuNavLink = ({ link, className }: MegaMenuNavLinkProps) => {
498
500
  return (
499
501
  <Button
500
- ariaLabel={`Go to ${link.label}`}
501
- as="link"
502
+ asChild
502
503
  variant="unstyled"
503
- link={link}
504
504
  className={cn(
505
505
  "relative text-black text-sm font-normal font-label uppercase tracking-widest group",
506
506
  className,
@@ -677,12 +677,15 @@ function MegaDropdownGroupedLinks({ groupedLinks }: { groupedLinks: LabeledRoute
677
677
  return (
678
678
  <Button
679
679
  key={`MegaDropdownContent-Item-Link-${link._key}-${i}`}
680
- ariaLabel={link.label ?? ""}
681
- as="link"
682
- link={link ?? {}}
680
+ aria-label={link.label ?? ""}
683
681
  variant="unstyled"
682
+ asChild
684
683
  className="text-black text-sm font-normal font-heading-kb leading-[30px] hover:underline">
685
- {link?.label}
684
+ <ConditionalLink
685
+ link={link}
686
+ ariaLabel={link.label ?? "Navigation link"}>
687
+ {link?.label}
688
+ </ConditionalLink>
686
689
  </Button>
687
690
  );
688
691
  })}
@@ -715,21 +718,24 @@ function MegaDropdownShowcaseLinks({
715
718
  return (
716
719
  <Button
717
720
  key={`MegaDropdownContent-Item-Images-${link._key}-${i}`}
718
- ariaLabel={link.primaryButton?.label ?? ""}
719
- as="link"
720
- link={link.primaryButton ?? {}}
721
+ aria-label={link.primaryButton?.label ?? ""}
721
722
  variant="unstyled"
723
+ asChild
722
724
  className="text-center text-black text-sm font-normal font-heading-kb leading-[30px] hover:underline">
723
- <Flex direction="col" align="center" justify="center" gap={3}>
724
- <Image
725
- key={i}
726
- src={imageUrl}
727
- alt={link.mainImage?.alt ?? ""}
728
- width={500}
729
- height={500}
730
- className="w-[188px] h-[147px] object-cover object-center"></Image>
731
- {link.primaryButton?.label}
732
- </Flex>
725
+ <ConditionalLink
726
+ link={link.primaryButton}
727
+ ariaLabel={link.primaryButton?.label ?? "Navigation link"}>
728
+ <Flex direction="col" align="center" justify="center" gap={3}>
729
+ <Image
730
+ key={i}
731
+ src={imageUrl}
732
+ alt={link.mainImage?.alt ?? ""}
733
+ width={500}
734
+ height={500}
735
+ className="w-[188px] h-[147px] object-cover object-center"></Image>
736
+ {link.primaryButton?.label}
737
+ </Flex>
738
+ </ConditionalLink>
733
739
  </Button>
734
740
  );
735
741
  })}