@stackshift-ui/signin-signup 6.0.14 → 7.0.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/signin-signup",
   "description": "",
-  "version": "6.0.14",
+  "version": "7.0.0-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -29,32 +29,32 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/typescript-config": "6.0.10",
-    "@stackshift-ui/eslint-config": "6.0.10"
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/scripts": "6.0.10",
-    "@stackshift-ui/card": "6.0.11",
-    "@stackshift-ui/heading": "6.0.11",
-    "@stackshift-ui/text": "6.0.11",
-    "@stackshift-ui/button": "6.0.11",
-    "@stackshift-ui/link": "6.0.11",
-    "@stackshift-ui/image": "6.0.11",
-    "@stackshift-ui/form": "6.0.11",
-    "@stackshift-ui/system": "6.0.11",
-    "@stackshift-ui/form-field": "6.0.13",
-    "@stackshift-ui/section": "6.0.11",
-    "@stackshift-ui/container": "6.0.11",
-    "@stackshift-ui/flex": "6.0.11",
-    "@stackshift-ui/input": "6.0.12"
+    "@stackshift-ui/system": "6.1.0-beta.0",
+    "@stackshift-ui/card": "7.0.0-beta.0",
+    "@stackshift-ui/heading": "7.0.0-beta.0",
+    "@stackshift-ui/button": "6.1.0-beta.0",
+    "@stackshift-ui/input": "7.0.0-beta.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/text": "7.0.0-beta.0",
+    "@stackshift-ui/form": "7.0.0-beta.0",
+    "@stackshift-ui/link": "6.0.12-beta.0",
+    "@stackshift-ui/image": "6.1.0-beta.0",
+    "@stackshift-ui/form-field": "7.0.0-beta.0",
+    "@stackshift-ui/section": "7.0.0-beta.0",
+    "@stackshift-ui/container": "7.0.0-beta.0",
+    "@stackshift-ui/flex": "7.0.0-beta.0"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
     "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.11"
+    "@stackshift-ui/system": ">=6.1.0-beta.0"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/signin-signup.test.tsx

@@ -7,7 +7,7 @@ describe.concurrent("signin-signup", () => {
 
   test.skip("Dummy test - test if renders without errors", ({ expect }) => {
     const clx = "my-class";
-    render(<SigninSignup />);
-    expect(screen.getByTestId("{ kebabCase name }}").classList).toContain(clx);
+    render(<SigninSignup data-testid="signin-signup" />);
+    expect(screen.getByTestId("signin-signup").classList).toContain(clx);
   });
 });

package/src/signin_signup_a.tsx

@@ -11,6 +11,7 @@ import { Section } from "@stackshift-ui/section";
 import { Text } from "@stackshift-ui/text";
 import React from "react";
 
+import { buildSanityLink } from "@stackshift-ui/system";
 import { SignUpFormProps } from ".";
 import { logoLink, thankYouPageLink } from "./helper";
 import { LabeledRoute, LabeledRouteWithKey, Logo, Form as iForm } from "./types";
@@ -104,9 +105,8 @@ function SignupForm({
       <div className="text-center">
         {form?.buttonLabel && (
           <Button
-            as="button"
-            variant="custom"
-            ariaLabel={form?.buttonLabel ?? "Sign Up form submit button"}
+            variant="default"
+            aria-label={form?.buttonLabel ?? "Sign Up form submit button"}
             className="w-full py-4 text-sm font-bold tex-gray-50"
             type="submit">
             {form?.buttonLabel}
@@ -134,14 +134,11 @@ function FormFields({
           <div className="w-full px-2 mb-3 lg:w-1/2" key={index}>
             {formFields.type === "inputText" ? (
               <Input
-                textSize="sm"
-                variant="primary"
-                noLabel
                 placeholder={formFields?.placeholder}
                 required={formFields?.isRequired}
                 className="w-full py-4 text-xs bg-white"
                 name={formFields?.name}
-                ariaLabel={formFields?.label}
+                aria-label={formFields?.label}
                 {...formFields}
                 type="text"
               />
@@ -193,16 +190,23 @@ function FormFields({
 function SignInLink({ signInLink }: { signInLink?: LabeledRoute }) {
   if (!signInLink?.label) return null;
 
+  const link = buildSanityLink({
+    type: signInLink?.type ?? "",
+    internalLink: signInLink?.internalLink ?? "",
+    externalLink: signInLink?.externalLink ?? "",
+  });
+
   return (
     <div className="w-full text-center mt-3">
       <span className="text-xs text-gray-500">Already have an account? </span>
       <Button
-        as="link"
         variant="link"
-        link={signInLink}
         className="text-xs text-primary cursor-pointer hover:underline"
-        ariaLabel={signInLink?.label}>
-        {signInLink?.label}
+        aria-label={signInLink?.label}
+        asChild>
+        <Link href={link.href} target={link.target} rel={link.rel}>
+          {signInLink?.label}
+        </Link>
       </Button>
     </div>
   );
@@ -221,10 +225,7 @@ function PasswordField({
     <div className="flex flex-col sm:flex-row gap-2 sm:items-center">
       <Input
         className="py-4"
-        textSize="sm"
-        noLabel
         aria-label={formFields?.placeholder ?? formFields?.name}
-        variant="primary"
         type={showPassword ? "text" : "password"}
         placeholder={formFields?.placeholder}
         name={formFields?.name}
@@ -233,8 +234,7 @@ function PasswordField({
       {/* SVG icon on the right of the password input field */}
       <Button
         variant="unstyled"
-        as="button"
-        ariaLabel={showPassword ? "Show password" : "Hide password"}
+        aria-label={showPassword ? "Show password" : "Hide password"}
         className="focus:outline-none"
         type="button"
         onClick={togglePassword}>
@@ -252,23 +252,32 @@ function FormLinks({ formLinks }: { formLinks?: LabeledRouteWithKey[] }) {
 
   return (
     <p className="mt-10 lg:mt-3 text-xs text-center text-gray-700">
-      {formLinks?.map((link: any, index: number, { length }: any) => (
-        <span key={index}>
-          <Button
-            as="link"
-            variant="link"
-            link={link}
-            className="text-xs text-primary cursor-pointer hover:underline"
-            ariaLabel={link?.label}>
-            {link?.label}
-          </Button>
-          {index === length - 1 ? null : index === length - 2 ? (
-            <span>&nbsp;and&nbsp;</span>
-          ) : (
-            <span>&nbsp;,&nbsp;</span>
-          )}
-        </span>
-      ))}
+      {formLinks?.map((link: any, index: number, { length }: any) => {
+        const linkObj = buildSanityLink({
+          type: link?.type ?? "",
+          internalLink: link?.internalLink ?? "",
+          externalLink: link?.externalLink ?? "",
+        });
+
+        return (
+          <span key={index}>
+            <Button
+              variant="link"
+              className="text-xs text-primary cursor-pointer hover:underline"
+              aria-label={link?.label}
+              asChild>
+              <Link href={linkObj.href} target={linkObj.target} rel={linkObj.rel}>
+                {link?.label}
+              </Link>
+            </Button>
+            {index === length - 1 ? null : index === length - 2 ? (
+              <span>&nbsp;and&nbsp;</span>
+            ) : (
+              <span>&nbsp;,&nbsp;</span>
+            )}
+          </span>
+        );
+      })}
     </p>
   );
 }

package/src/signin_signup_b.tsx

@@ -9,6 +9,7 @@ import { Image } from "@stackshift-ui/image";
 import { Input } from "@stackshift-ui/input";
 import { Link } from "@stackshift-ui/link";
 import { Section } from "@stackshift-ui/section";
+import { buildSanityLink } from "@stackshift-ui/system";
 import { Text } from "@stackshift-ui/text";
 import React from "react";
 import { SignUpFormProps } from ".";
@@ -21,7 +22,7 @@ export default function SigninSignup_B({ logo, form, formLinks, signInLink }: Si
       <Container maxWidth={1280}>
         <Container maxWidth={576}>
           <LogoSection logo={logo} />
-          <Card borderRadius="md" className="p-6 mb-6 bg-white lg:mb-10 lg:p-12">
+          <Card className="p-6 mb-6 bg-white lg:mb-10 lg:p-12 rounded-md">
             <SubtitleAndHeadingText form={form} />
             <SignupForm form={form} signInLink={signInLink} />
           </Card>
@@ -167,9 +168,7 @@ function PasswordField({
   return (
     <div className="flex flex-col sm:flex-row gap-2 items-center">
       <Input
-        noLabel
-        ariaLabel={formFields?.placeholder ?? formFields?.name}
-        variant="secondary"
+        aria-label={formFields?.placeholder ?? formFields?.name}
         type={showPassword ? "text" : "password"}
         placeholder={formFields?.placeholder}
         name={formFields?.name}
@@ -178,8 +177,7 @@ function PasswordField({
       {/* SVG icon on the right of the password input field */}
       <Button
         variant="unstyled"
-        as="button"
-        ariaLabel={showPassword ? "Show password" : "Hide password"}
+        aria-label={showPassword ? "Show password" : "Hide password"}
         className="focus:outline-none"
         type="button"
         onClick={togglePassword}>
@@ -197,10 +195,9 @@ function FormButtonLabel({ form }: { form?: iForm }) {
 
   return (
     <Button
-      as="button"
       className="w-full py-4 mb-3"
-      ariaLabel={form?.buttonLabel ?? "Sign Up form submit button"}
-      variant="custom"
+      aria-label={form?.buttonLabel ?? "Sign Up form submit button"}
+      variant="default"
       type="submit">
       {form?.buttonLabel}
     </Button>
@@ -210,16 +207,23 @@ function FormButtonLabel({ form }: { form?: iForm }) {
 function SigninLink({ signInLink }: { signInLink?: LabeledRoute }) {
   if (!signInLink?.label) return null;
 
+  const link = buildSanityLink({
+    type: signInLink?.type ?? "",
+    internalLink: signInLink?.internalLink ?? "",
+    externalLink: signInLink?.externalLink ?? "",
+  });
+
   return (
     <span className="text-xs text-gray-900">
       <span>Already have an account?</span>{" "}
       <Button
-        as="link"
         variant="link"
-        link={signInLink}
         className="text-xs text-primary hover:underline"
-        ariaLabel={signInLink?.label}>
-        {signInLink?.label}
+        aria-label={signInLink?.label}
+        asChild>
+        <Link href={link.href} target={link.target} rel={link.rel}>
+          {signInLink?.label}
+        </Link>
       </Button>
     </span>
   );
@@ -230,23 +234,32 @@ function FormLinks({ formLinks }: { formLinks?: LabeledRoute[] }) {
 
   return (
     <p className="text-xs text-center text-secondary-foreground">
-      {formLinks?.map((link, index, { length }) => (
-        <span key={index}>
-          <Button
-            as="link"
-            variant="link"
-            link={link}
-            className="text-xs underline text-secondary-foreground hover:text-gray-50"
-            ariaLabel={link?.label}>
-            {link?.label}
-          </Button>
-          {index === length - 1 ? null : index === length - 2 ? (
-            <span>&nbsp;and&nbsp;</span>
-          ) : (
-            <span>&nbsp;,&nbsp;</span>
-          )}
-        </span>
-      ))}
+      {formLinks?.map((link, index, { length }) => {
+        const linkObj = buildSanityLink({
+          type: link?.type ?? "",
+          internalLink: link?.internalLink ?? "",
+          externalLink: link?.externalLink ?? "",
+        });
+
+        return (
+          <span key={index}>
+            <Button
+              variant="link"
+              className="text-xs underline text-secondary-foreground hover:text-gray-50"
+              aria-label={link?.label}
+              asChild>
+              <Link href={linkObj?.href} target={linkObj?.target} rel={linkObj?.rel}>
+                {link?.label}
+              </Link>
+            </Button>
+            {index === length - 1 ? null : index === length - 2 ? (
+              <span>&nbsp;and&nbsp;</span>
+            ) : (
+              <span>&nbsp;,&nbsp;</span>
+            )}
+          </span>
+        );
+      })}
     </p>
   );
 }