@stackshift-ui/header 6.1.4 → 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 (9) hide show
  1. package/package.json +14 -14
  2. package/src/header.test.tsx +2 -2
  3. package/src/header_a.tsx +31 -7
  4. package/src/header_b.tsx +34 -8
  5. package/src/header_c.tsx +37 -8
  6. package/src/header_d.tsx +39 -19
  7. package/src/header_e.tsx +37 -8
  8. package/src/header_f.tsx +32 -15
  9. package/src/header_g.tsx +35 -17
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackshift-ui/header",
3
3
  "description": "",
4
- "version": "6.1.4",
4
+ "version": "7.0.0-beta.0",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "main": "./dist/index.js",
@@ -33,21 +33,21 @@
33
33
  "dependencies": {
34
34
  "@portabletext/react": "^3.1.0",
35
35
  "react-icons": "^5.3.0",
36
- "@stackshift-ui/flex": "6.0.11",
37
- "@stackshift-ui/button": "6.0.11",
38
- "@stackshift-ui/heading": "6.0.11",
39
- "@stackshift-ui/image": "6.0.11",
40
- "@stackshift-ui/link": "6.0.11",
41
- "@stackshift-ui/container": "6.0.11",
42
- "@stackshift-ui/signin-signup": "6.0.14",
43
- "@stackshift-ui/system": "6.0.11",
44
- "@stackshift-ui/text": "6.0.11",
45
- "@stackshift-ui/scripts": "6.0.10",
46
- "@stackshift-ui/section": "6.0.11",
47
- "@stackshift-ui/swiper-pagination": "6.0.11"
36
+ "@stackshift-ui/heading": "7.0.0-beta.0",
37
+ "@stackshift-ui/button": "6.1.0-beta.0",
38
+ "@stackshift-ui/container": "7.0.0-beta.0",
39
+ "@stackshift-ui/section": "7.0.0-beta.0",
40
+ "@stackshift-ui/flex": "7.0.0-beta.0",
41
+ "@stackshift-ui/image": "6.1.0-beta.0",
42
+ "@stackshift-ui/scripts": "6.1.0-beta.0",
43
+ "@stackshift-ui/system": "6.1.0-beta.0",
44
+ "@stackshift-ui/text": "7.0.0-beta.0",
45
+ "@stackshift-ui/signin-signup": "7.0.0-beta.0",
46
+ "@stackshift-ui/swiper-pagination": "7.0.0-beta.0",
47
+ "@stackshift-ui/link": "6.0.12-beta.0"
48
48
  },
49
49
  "peerDependencies": {
50
- "@stackshift-ui/system": ">=6.0.11",
50
+ "@stackshift-ui/system": ">=6.1.0-beta.0",
51
51
  "@types/react": "16.8 - 19",
52
52
  "next": "10 - 14",
53
53
  "react": "16.8 - 19",
package/src/header.test.tsx CHANGED
@@ -7,7 +7,7 @@ describe.concurrent("header", () => {
7
7
 
8
8
  test.skip("Dummy test - test if renders without errors", ({ expect }) => {
9
9
  const clx = "my-class";
10
- render(<Header />);
11
- expect(screen.getByTestId("{ kebabCase name }}").classList).toContain(clx);
10
+ render(<Header data-testid="header" />);
11
+ expect(screen.getByTestId("header").classList).toContain(clx);
12
12
  });
13
13
  });
package/src/header_a.tsx CHANGED
@@ -3,7 +3,9 @@ import { Container } from "@stackshift-ui/container";
3
3
  import { Flex } from "@stackshift-ui/flex";
4
4
  import { Heading } from "@stackshift-ui/heading";
5
5
  import { Image } from "@stackshift-ui/image";
6
+ import { Link } from "@stackshift-ui/link";
6
7
  import { Section } from "@stackshift-ui/section";
8
+ import { buildSanityLink } from "@stackshift-ui/system";
7
9
  import { Text } from "@stackshift-ui/text";
8
10
  import React from "react";
9
11
  import { ButtonProps, HeaderProps } from ".";
@@ -56,6 +58,18 @@ function Buttons({
56
58
  primaryButton?: ButtonProps;
57
59
  secondaryButton?: ButtonProps;
58
60
  }) {
61
+ const primaryButtonLink = buildSanityLink({
62
+ type: "linkInternal",
63
+ internalLink: primaryButton?.link?.target === "_self" ? primaryButton?.link?.route : "",
64
+ externalLink: primaryButton?.link?.target != "_self" ? primaryButton?.link?.route : "",
65
+ });
66
+
67
+ const secondaryButtonLink = buildSanityLink({
68
+ type: "linkInternal",
69
+ internalLink: secondaryButton?.link?.target === "_self" ? secondaryButton?.link?.route : "",
70
+ externalLink: secondaryButton?.link?.target != "_self" ? secondaryButton?.link?.route : "",
71
+ });
72
+
59
73
  return (
60
74
  <Flex
61
75
  align="center"
@@ -64,17 +78,27 @@ function Buttons({
64
78
  direction="col"
65
79
  className="lg:justify-start md:flex-row">
66
80
  {primaryButton?.label && (
67
- <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
68
- {primaryButton?.label}
81
+ <Button variant="default" aria-label={primaryButton?.label} asChild>
82
+ <Link
83
+ href={primaryButtonLink.href}
84
+ target={primaryButtonLink.target}
85
+ rel={primaryButtonLink.rel}>
86
+ {primaryButton?.label}
87
+ </Link>
69
88
  </Button>
70
89
  )}
71
90
  {secondaryButton?.label && (
72
91
  <Button
73
- as="link"
74
- link={secondaryButton}
75
- className="bg-secondary hover:bg-secondary/50 inline-block font-default text-default transition duration-200 py-3 px-6 rounded-global"
76
- ariaLabel={secondaryButton?.label}>
77
- {secondaryButton?.label}
92
+ variant="secondary"
93
+ className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global"
94
+ aria-label={secondaryButton?.label}
95
+ asChild>
96
+ <Link
97
+ href={secondaryButtonLink.href}
98
+ target={secondaryButtonLink.target}
99
+ rel={secondaryButtonLink.rel}>
100
+ {secondaryButton?.label}
101
+ </Link>
78
102
  </Button>
79
103
  )}
80
104
  </Flex>
package/src/header_b.tsx CHANGED
@@ -3,7 +3,9 @@ import { Container } from "@stackshift-ui/container";
3
3
  import { Flex } from "@stackshift-ui/flex";
4
4
  import { Heading } from "@stackshift-ui/heading";
5
5
  import { Image } from "@stackshift-ui/image";
6
+ import { Link } from "@stackshift-ui/link";
6
7
  import { Section } from "@stackshift-ui/section";
8
+ import { buildSanityLink } from "@stackshift-ui/system";
7
9
  import { Text } from "@stackshift-ui/text";
8
10
  import React from "react";
9
11
  import { ButtonProps, HeaderProps } from ".";
@@ -57,23 +59,47 @@ function Buttons({
57
59
  primaryButton?: ButtonProps;
58
60
  secondaryButton?: ButtonProps;
59
61
  }) {
62
+ const primaryButtonLink = buildSanityLink({
63
+ type: "linkInternal",
64
+ internalLink: primaryButton?.link?.target === "_self" ? primaryButton?.link?.route : "",
65
+ externalLink: primaryButton?.link?.target != "_self" ? primaryButton?.link?.route : "",
66
+ });
67
+
68
+ const secondaryButtonLink = buildSanityLink({
69
+ type: "linkInternal",
70
+ internalLink: secondaryButton?.link?.target === "_self" ? secondaryButton?.link?.route : "",
71
+ externalLink: secondaryButton?.link?.target != "_self" ? secondaryButton?.link?.route : "",
72
+ });
73
+
60
74
  return (
61
75
  <Flex
62
76
  align="center"
77
+ justify="center"
63
78
  gap={2}
64
- className="flex items-center justify-center lg:justify-start gap-2 flex-col md:flex-row">
79
+ direction="col"
80
+ className="lg:justify-start md:flex-row">
65
81
  {primaryButton?.label && (
66
- <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
67
- {primaryButton?.label}
82
+ <Button variant="default" aria-label={primaryButton?.label} asChild>
83
+ <Link
84
+ href={primaryButtonLink.href}
85
+ target={primaryButtonLink.target}
86
+ rel={primaryButtonLink.rel}>
87
+ {primaryButton?.label}
88
+ </Link>
68
89
  </Button>
69
90
  )}
70
91
  {secondaryButton?.label && (
71
92
  <Button
72
- as="link"
73
- link={secondaryButton}
74
- className="bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3"
75
- ariaLabel={secondaryButton?.label}>
76
- {secondaryButton?.label}
93
+ variant="secondary"
94
+ className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global"
95
+ aria-label={secondaryButton?.label}
96
+ asChild>
97
+ <Link
98
+ href={secondaryButtonLink.href}
99
+ target={secondaryButtonLink.target}
100
+ rel={secondaryButtonLink.rel}>
101
+ {secondaryButton?.label}
102
+ </Link>
77
103
  </Button>
78
104
  )}
79
105
  </Flex>
package/src/header_c.tsx CHANGED
@@ -2,7 +2,9 @@ import { Button } from "@stackshift-ui/button";
2
2
  import { Container } from "@stackshift-ui/container";
3
3
  import { Flex } from "@stackshift-ui/flex";
4
4
  import { Heading } from "@stackshift-ui/heading";
5
+ import { Link } from "@stackshift-ui/link";
5
6
  import { Section } from "@stackshift-ui/section";
7
+ import { buildSanityLink } from "@stackshift-ui/system";
6
8
  import { ButtonProps, HeaderProps } from ".";
7
9
 
8
10
  export default function Header_C({
@@ -64,20 +66,47 @@ function Buttons({
64
66
  primaryButton?: ButtonProps;
65
67
  secondaryButton?: ButtonProps;
66
68
  }) {
69
+ const primaryButtonLink = buildSanityLink({
70
+ type: "linkInternal",
71
+ internalLink: primaryButton?.link?.target === "_self" ? primaryButton?.link?.route : "",
72
+ externalLink: primaryButton?.link?.target != "_self" ? primaryButton?.link?.route : "",
73
+ });
74
+
75
+ const secondaryButtonLink = buildSanityLink({
76
+ type: "linkInternal",
77
+ internalLink: secondaryButton?.link?.target === "_self" ? secondaryButton?.link?.route : "",
78
+ externalLink: secondaryButton?.link?.target != "_self" ? secondaryButton?.link?.route : "",
79
+ });
80
+
67
81
  return (
68
- <Flex align="center" gap={4} justify="center" className="flex-col lg:flex-row">
82
+ <Flex
83
+ align="center"
84
+ justify="center"
85
+ gap={2}
86
+ direction="col"
87
+ className="lg:justify-start md:flex-row">
69
88
  {primaryButton?.label && (
70
- <Button as="link" ariaLabel={primaryButton?.label} link={primaryButton}>
71
- {primaryButton?.label}
89
+ <Button variant="default" aria-label={primaryButton?.label} asChild>
90
+ <Link
91
+ href={primaryButtonLink.href}
92
+ target={primaryButtonLink.target}
93
+ rel={primaryButtonLink.rel}>
94
+ {primaryButton?.label}
95
+ </Link>
72
96
  </Button>
73
97
  )}
74
98
  {secondaryButton?.label && (
75
99
  <Button
76
- as="link"
77
- ariaLabel={secondaryButton?.label}
78
- link={secondaryButton}
79
- className="bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3">
80
- {secondaryButton?.label}
100
+ variant="secondary"
101
+ className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global"
102
+ aria-label={secondaryButton?.label}
103
+ asChild>
104
+ <Link
105
+ href={secondaryButtonLink.href}
106
+ target={secondaryButtonLink.target}
107
+ rel={secondaryButtonLink.rel}>
108
+ {secondaryButton?.label}
109
+ </Link>
81
110
  </Button>
82
111
  )}
83
112
  </Flex>
package/src/header_d.tsx CHANGED
@@ -3,7 +3,9 @@ import { Container } from "@stackshift-ui/container";
3
3
  import { Flex } from "@stackshift-ui/flex";
4
4
  import { Heading } from "@stackshift-ui/heading";
5
5
  import { Image } from "@stackshift-ui/image";
6
+ import { Link } from "@stackshift-ui/link";
6
7
  import { Section } from "@stackshift-ui/section";
8
+ import { buildSanityLink } from "@stackshift-ui/system";
7
9
  import { Text } from "@stackshift-ui/text";
8
10
  import React from "react";
9
11
  import { ButtonProps, HeaderProps } from ".";
@@ -56,31 +58,49 @@ function Buttons({
56
58
  primaryButton?: ButtonProps;
57
59
  secondaryButton?: ButtonProps;
58
60
  }) {
61
+ const primaryButtonLink = buildSanityLink({
62
+ type: "linkInternal",
63
+ internalLink: primaryButton?.link?.target === "_self" ? primaryButton?.link?.route : "",
64
+ externalLink: primaryButton?.link?.target != "_self" ? primaryButton?.link?.route : "",
65
+ });
66
+
67
+ const secondaryButtonLink = buildSanityLink({
68
+ type: "linkInternal",
69
+ internalLink: secondaryButton?.link?.target === "_self" ? secondaryButton?.link?.route : "",
70
+ externalLink: secondaryButton?.link?.target != "_self" ? secondaryButton?.link?.route : "",
71
+ });
72
+
59
73
  return (
60
74
  <Flex
61
75
  align="center"
62
- className="flex items-center justify-center lg:justify-start gap-2 flex-col md:flex-row"
63
- gap={2}>
64
- {primaryButton?.label ? (
65
- <Button
66
- as="link"
67
- link={primaryButton}
68
- ariaLabel={primaryButton?.ariaLabel ?? primaryButton?.label}
69
- variant="solid"
70
- className="bg-primary hover:bg-primary/50 rounded-global px-6 py-3 text-white">
71
- {primaryButton.label}
76
+ justify="center"
77
+ gap={2}
78
+ direction="col"
79
+ className="lg:justify-start md:flex-row">
80
+ {primaryButton?.label && (
81
+ <Button variant="default" aria-label={primaryButton?.label} asChild>
82
+ <Link
83
+ href={primaryButtonLink.href}
84
+ target={primaryButtonLink.target}
85
+ rel={primaryButtonLink.rel}>
86
+ {primaryButton?.label}
87
+ </Link>
72
88
  </Button>
73
- ) : null}
74
- {secondaryButton?.label ? (
89
+ )}
90
+ {secondaryButton?.label && (
75
91
  <Button
76
- as="link"
77
- link={secondaryButton}
78
- ariaLabel={secondaryButton.ariaLabel ?? secondaryButton?.label}
79
- variant="solid"
80
- className="bg-secondary hover:bg-secondary/50 rounded-global px-6 py-3">
81
- {secondaryButton.label}
92
+ variant="secondary"
93
+ className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global"
94
+ aria-label={secondaryButton?.label}
95
+ asChild>
96
+ <Link
97
+ href={secondaryButtonLink.href}
98
+ target={secondaryButtonLink.target}
99
+ rel={secondaryButtonLink.rel}>
100
+ {secondaryButton?.label}
101
+ </Link>
82
102
  </Button>
83
- ) : null}
103
+ )}
84
104
  </Flex>
85
105
  );
86
106
  }
package/src/header_e.tsx CHANGED
@@ -2,8 +2,10 @@ import { Button } from "@stackshift-ui/button";
2
2
  import { Container } from "@stackshift-ui/container";
3
3
  import { Flex } from "@stackshift-ui/flex";
4
4
  import { Heading } from "@stackshift-ui/heading";
5
+ import { Link } from "@stackshift-ui/link";
5
6
  import { Section } from "@stackshift-ui/section";
6
7
  import { SigninSignup_A } from "@stackshift-ui/signin-signup";
8
+ import { buildSanityLink } from "@stackshift-ui/system";
7
9
  import { Text } from "@stackshift-ui/text";
8
10
  import React from "react";
9
11
  import { ButtonProps, HeaderProps } from ".";
@@ -61,20 +63,47 @@ function Buttons({
61
63
  primaryButton?: ButtonProps;
62
64
  secondaryButton?: ButtonProps;
63
65
  }) {
66
+ const primaryButtonLink = buildSanityLink({
67
+ type: "linkInternal",
68
+ internalLink: primaryButton?.link?.target === "_self" ? primaryButton?.link?.route : "",
69
+ externalLink: primaryButton?.link?.target != "_self" ? primaryButton?.link?.route : "",
70
+ });
71
+
72
+ const secondaryButtonLink = buildSanityLink({
73
+ type: "linkInternal",
74
+ internalLink: secondaryButton?.link?.target === "_self" ? secondaryButton?.link?.route : "",
75
+ externalLink: secondaryButton?.link?.target != "_self" ? secondaryButton?.link?.route : "",
76
+ });
77
+
64
78
  return (
65
- <Flex align="center" gap={2} className="flex-col md:flex-row justify-center lg:justify-start">
79
+ <Flex
80
+ align="center"
81
+ justify="center"
82
+ gap={2}
83
+ direction="col"
84
+ className="lg:justify-start md:flex-row">
66
85
  {primaryButton?.label && (
67
- <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
68
- {primaryButton?.label}
86
+ <Button variant="default" aria-label={primaryButton?.label} asChild>
87
+ <Link
88
+ href={primaryButtonLink.href}
89
+ target={primaryButtonLink.target}
90
+ rel={primaryButtonLink.rel}>
91
+ {primaryButton?.label}
92
+ </Link>
69
93
  </Button>
70
94
  )}
71
95
  {secondaryButton?.label && (
72
96
  <Button
73
- as="link"
74
- link={secondaryButton}
75
- className="bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3"
76
- ariaLabel={secondaryButton?.label}>
77
- {secondaryButton?.label}
97
+ variant="secondary"
98
+ className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global"
99
+ aria-label={secondaryButton?.label}
100
+ asChild>
101
+ <Link
102
+ href={secondaryButtonLink.href}
103
+ target={secondaryButtonLink.target}
104
+ rel={secondaryButtonLink.rel}>
105
+ {secondaryButton?.label}
106
+ </Link>
78
107
  </Button>
79
108
  )}
80
109
  </Flex>
package/src/header_f.tsx CHANGED
@@ -8,6 +8,8 @@ import { Text } from "@stackshift-ui/text";
8
8
  import { LiaLongArrowAltRightSolid } from "react-icons/lia";
9
9
  import { customBlockStyle } from "./utils/portableText/customBlockStyle";
10
10
 
11
+ import { Link } from "@stackshift-ui/link";
12
+ import { buildSanityLink } from "@stackshift-ui/system";
11
13
  import { HeaderProps } from ".";
12
14
  import { HeaderBox, HeaderSections } from "./types";
13
15
 
@@ -159,21 +161,36 @@ const HeaderTitleSection = ({ header }: { header: HeaderBox }) => (
159
161
  </div>
160
162
  );
161
163
 
162
- const HeaderButton = ({ header }: { header: HeaderSections }) => (
163
- <div className={`flex justify-${header?.alignment} gap-4`}>
164
- {header?.primaryButton?.label && (
165
- <Button
166
- as="link"
167
- link={header?.primaryButton}
168
- ariaLabel={header?.primaryButton?.label}
169
- className="border border-black px-14 py-3.5 text-sm">
170
- <span className="flex items-center gap-2 font-label text-sm font-normal uppercase tracking-widest">
171
- {header?.primaryButton?.label} <LiaLongArrowAltRightSolid />
172
- </span>
173
- </Button>
174
- )}
175
- </div>
176
- );
164
+ const HeaderButton = ({ header }: { header: HeaderSections }) => {
165
+ const primaryButtonLink = buildSanityLink({
166
+ type: "linkInternal",
167
+ internalLink:
168
+ header?.primaryButton?.link?.target === "_self" ? header?.primaryButton?.link?.route : "",
169
+ externalLink:
170
+ header?.primaryButton?.link?.target != "_self" ? header?.primaryButton?.link?.route : "",
171
+ });
172
+
173
+ return (
174
+ <div className={`flex justify-${header?.alignment} gap-4`}>
175
+ {header?.primaryButton?.label && (
176
+ <Button
177
+ variant="link"
178
+ aria-label={header?.primaryButton?.label}
179
+ className="border border-black px-14 py-3.5 text-sm"
180
+ asChild>
181
+ <Link
182
+ href={primaryButtonLink.href}
183
+ target={primaryButtonLink.target}
184
+ rel={primaryButtonLink.rel}>
185
+ <span className="flex items-center gap-2 font-label text-sm font-normal uppercase tracking-widest">
186
+ {header?.primaryButton?.label} <LiaLongArrowAltRightSolid />
187
+ </span>
188
+ </Link>
189
+ </Button>
190
+ )}
191
+ </div>
192
+ );
193
+ };
177
194
 
178
195
  const HeaderItem = ({ header, isImageLeft }: { header: HeaderSections; isImageLeft: boolean }) => (
179
196
  <div
package/src/header_g.tsx CHANGED
@@ -1,8 +1,10 @@
1
1
  import { Button } from "@stackshift-ui/button";
2
2
  import { Flex } from "@stackshift-ui/flex";
3
3
  import { Heading } from "@stackshift-ui/heading";
4
+ import { Link } from "@stackshift-ui/link";
4
5
  import { Section } from "@stackshift-ui/section";
5
6
  import { SwiperPagination } from "@stackshift-ui/swiper-pagination";
7
+ import { buildSanityLink } from "@stackshift-ui/system";
6
8
  import { Text } from "@stackshift-ui/text";
7
9
  import { useEffect, useState } from "react";
8
10
  import { HeaderProps } from ".";
@@ -43,6 +45,18 @@ export default function Header_G({
43
45
  }
44
46
  };
45
47
 
48
+ const primaryButtonLink = buildSanityLink({
49
+ type: "linkInternal",
50
+ internalLink: primaryButton?.link?.target === "_self" ? primaryButton?.link?.route : "",
51
+ externalLink: primaryButton?.link?.target != "_self" ? primaryButton?.link?.route : "",
52
+ });
53
+
54
+ const secondaryButtonLink = buildSanityLink({
55
+ type: "linkInternal",
56
+ internalLink: secondaryButton?.link?.target === "_self" ? secondaryButton?.link?.route : "",
57
+ externalLink: secondaryButton?.link?.target != "_self" ? secondaryButton?.link?.route : "",
58
+ });
59
+
46
60
  return (
47
61
  <Section>
48
62
  <div className="relative w-full h-[80vh] overflow-hidden">
@@ -83,29 +97,33 @@ export default function Header_G({
83
97
  </Heading>
84
98
  {description && <Text className="text-white mb-10">{description}</Text>}
85
99
  <Flex
86
- justify={position === "center" ? "center" : position === "right" ? "end" : "start"}
87
- direction="row"
88
100
  align="center"
89
- wrap
90
- gap={4}>
101
+ justify="center"
102
+ gap={2}
103
+ direction="col"
104
+ className="lg:justify-start md:flex-row">
91
105
  {primaryButton?.label && (
92
- <Button
93
- as="link"
94
- link={primaryButton}
95
- ariaLabel={primaryButton?.ariaLabel}
96
- variant="solid"
97
- className="text-white border text-sm uppercase cursor-pointer px-10 py-4 hover:bg-white hover:text-primary transition-all duration-500 ease-in-out">
98
- {primaryButton.label}
106
+ <Button variant="default" aria-label={primaryButton?.label} asChild>
107
+ <Link
108
+ href={primaryButtonLink.href}
109
+ target={primaryButtonLink.target}
110
+ rel={primaryButtonLink.rel}>
111
+ {primaryButton?.label}
112
+ </Link>
99
113
  </Button>
100
114
  )}
101
115
  {secondaryButton?.label && (
102
116
  <Button
103
- as="link"
104
- link={secondaryButton}
105
- variant="solid"
106
- ariaLabel={secondaryButton?.ariaLabel}
107
- className="text-white border text-sm uppercase cursor-pointer px-10 py-4 hover:bg-white hover:text-secondary transition-all duration-500 ease-in-out">
108
- {secondaryButton.label}
117
+ variant="secondary"
118
+ className="bg-white border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global"
119
+ aria-label={secondaryButton?.label}
120
+ asChild>
121
+ <Link
122
+ href={secondaryButtonLink.href}
123
+ target={secondaryButtonLink.target}
124
+ rel={secondaryButtonLink.rel}>
125
+ {secondaryButton?.label}
126
+ </Link>
109
127
  </Button>
110
128
  )}
111
129
  </Flex>