feat(clerk-js): Better align new card structure with old descriptors

clerk · Jan 8, 2024 · b2e3a98 · b2e3a98
1 parent ea49336
commit b2e3a98
Show file tree

Hide file tree

Showing 21 changed files with 185 additions and 203 deletions.
diff --git a/.changeset/tiny-pants-change.md b/.changeset/tiny-pants-change.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx b/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
@@ -103,22 +103,18 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
               />
             )}
           </Flex>
+
+          <Card.Action elementId='havingTrouble'>
+            <Card.ActionText localizationKey={localizationKeys('signIn.alternativeMethods.actionText')} />
+            <Card.ActionLink
+              localizationKey={localizationKeys('signIn.alternativeMethods.actionLink')}
+              onClick={onHavingTroubleClick}
+            />
+          </Card.Action>
         </Card.Content>
 
-        <Footer.Root>
-          <Footer.Links />
-        </Footer.Root>
         <Card.Footer>
-          <Footer.Root key='signIn.alternativeMethods.actionLink'>
-            <Footer.Action elementId='havingTrouble'>
-              <Footer.ActionText localizationKey={localizationKeys('signIn.alternativeMethods.actionText')} />
-              <Footer.ActionLink
-                localizationKey={localizationKeys('signIn.alternativeMethods.actionLink')}
-                onClick={onHavingTroubleClick}
-              />
-            </Footer.Action>
-            <Footer.Links />
-          </Footer.Root>
+          <Footer.Links />
         </Card.Footer>
       </Card.Root>
     </Flow.Part>

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePasswordCard.tsx
@@ -128,19 +128,19 @@ export const SignInFactorOnePasswordCard = (props: SignInFactorOnePasswordProps)
             </Form.Root>
           </Flex>
 
-          <Footer.Root>
-            <Footer.Action elementId={onShowAlternativeMethodsClick ? 'alternativeMethods' : 'havingTrouble'}>
-              <Footer.ActionLink
-                localizationKey={localizationKeys(
-                  onShowAlternativeMethodsClick ? 'signIn.password.actionLink' : 'signIn.alternativeMethods.actionLink',
-                )}
-                onClick={onShowAlternativeMethodsClick || toggleHavingTrouble}
-              />
-            </Footer.Action>
-            <Footer.Links />
-          </Footer.Root>
+          <Card.Action elementId={onShowAlternativeMethodsClick ? 'alternativeMethods' : 'havingTrouble'}>
+            <Card.ActionLink
+              localizationKey={localizationKeys(
+                onShowAlternativeMethodsClick ? 'signIn.password.actionLink' : 'signIn.alternativeMethods.actionLink',
+              )}
+              onClick={onShowAlternativeMethodsClick || toggleHavingTrouble}
+            />
+          </Card.Action>
         </Card.Content>
-        <Card.Footer />
+
+        <Card.Footer>
+          <Footer.Links />
+        </Card.Footer>
       </Card.Root>
     </Flow.Part>
   );

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoAlternativeMethods.tsx
@@ -64,18 +64,18 @@ const AlternativeMethodsList = (props: AlternativeMethodsProps & { onHavingTroub
               ))}
             </Col>
           </Col>
+
+          <Card.Action elementId='havingTrouble'>
+            <Card.ActionText localizationKey={localizationKeys('signIn.alternativeMethods.actionText')} />
+            <Card.ActionLink
+              localizationKey={localizationKeys('signIn.alternativeMethods.actionLink')}
+              onClick={onHavingTroubleClick}
+            />
+          </Card.Action>
         </Card.Content>
+
         <Card.Footer>
-          <Footer.Root key='signIn.alternativeMethods.actionLink'>
-            <Footer.Action elementId='havingTrouble'>
-              <Footer.ActionText localizationKey={localizationKeys('signIn.alternativeMethods.actionText')} />
-              <Footer.ActionLink
-                localizationKey={localizationKeys('signIn.alternativeMethods.actionLink')}
-                onClick={onHavingTroubleClick}
-              />
-            </Footer.Action>
-            <Footer.Links />
-          </Footer.Root>
+          <Footer.Links />
         </Card.Footer>
       </Card.Root>
     </Flow.Part>

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoBackupCodeCard.tsx
@@ -91,19 +91,20 @@ export const SignInFactorTwoBackupCodeCard = (props: SignInFactorTwoBackupCodeCa
             <Form.SubmitButton hasArrow />
           </Form.Root>
         </Col>
-        <Footer.Root>
-          <Footer.Action elementId='alternativeMethods'>
-            {onShowAlternativeMethodsClicked && (
-              <Footer.ActionLink
-                localizationKey={localizationKeys('footerActionLink__useAnotherMethod')}
-                onClick={onShowAlternativeMethodsClicked}
-              />
-            )}
-          </Footer.Action>
-          <Footer.Links />
-        </Footer.Root>
+
+        <Card.Action elementId='alternativeMethods'>
+          {onShowAlternativeMethodsClicked && (
+            <Card.ActionLink
+              localizationKey={localizationKeys('footerActionLink__useAnotherMethod')}
+              onClick={onShowAlternativeMethodsClicked}
+            />
+          )}
+        </Card.Action>
       </Card.Content>
-      <Card.Footer />
+
+      <Card.Footer>
+        <Footer.Links />
+      </Card.Footer>
     </Card.Root>
   );
 };
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -321,19 +321,18 @@ export function _SignInStart(): JSX.Element {
               ) : null}
             </SocialButtonsReversibleContainerWithDivider>
           </Col>
+
+          <Card.Action elementId='signIn'>
+            <Card.ActionText localizationKey={localizationKeys('signIn.start.actionText')} />
+            <Card.ActionLink
+              localizationKey={localizationKeys('signIn.start.actionLink')}
+              to={clerk.buildUrlWithAuth(signUpUrl)}
+            />
+          </Card.Action>
         </Card.Content>
 
         <Card.Footer>
-          <Footer.Root key='signIn.start.actionLink'>
-            <Footer.Action elementId='signIn'>
-              <Footer.ActionText localizationKey={localizationKeys('signIn.start.actionText')} />
-              <Footer.ActionLink
-                localizationKey={localizationKeys('signIn.start.actionLink')}
-                to={clerk.buildUrlWithAuth(signUpUrl)}
-              />
-            </Footer.Action>
-            <Footer.Links />
-          </Footer.Root>
+          <Footer.Links />
         </Card.Footer>
       </Card.Root>
     </Flow.Part>

diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
@@ -187,18 +187,18 @@ function _SignUpContinue() {
               />
             </SocialButtonsReversibleContainerWithDivider>
           </Flex>
+
+          <Card.Action elementId='signUp'>
+            <Card.ActionText localizationKey={localizationKeys('signUp.continue.actionText')} />
+            <Card.ActionLink
+              localizationKey={localizationKeys('signUp.continue.actionLink')}
+              to={clerk.buildUrlWithAuth(signInUrl)}
+            />
+          </Card.Action>
         </Card.Content>
+
         <Card.Footer>
-          <Footer.Root>
-            <Footer.Action elementId='signUp'>
-              <Footer.ActionText localizationKey={localizationKeys('signUp.continue.actionText')} />
-              <Footer.ActionLink
-                localizationKey={localizationKeys('signUp.continue.actionLink')}
-                to={clerk.buildUrlWithAuth(signInUrl)}
-              />
-            </Footer.Action>
-            <Footer.Links />
-          </Footer.Root>
+          <Footer.Links />
         </Card.Footer>
       </Card.Root>
     </Flow.Part>

diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
@@ -274,18 +274,18 @@ function _SignUpStart(): JSX.Element {
               )}
             </SocialButtonsReversibleContainerWithDivider>
           </Flex>
+
+          <Card.Action elementId='signUp'>
+            <Card.ActionText localizationKey={localizationKeys('signUp.start.actionText')} />
+            <Card.ActionLink
+              localizationKey={localizationKeys('signUp.start.actionLink')}
+              to={clerk.buildUrlWithAuth(signInUrl)}
+            />
+          </Card.Action>
         </Card.Content>
+
         <Card.Footer>
-          <Footer.Root>
-            <Footer.Action elementId='signUp'>
-              <Footer.ActionText localizationKey={localizationKeys('signUp.start.actionText')} />
-              <Footer.ActionLink
-                localizationKey={localizationKeys('signUp.start.actionLink')}
-                to={clerk.buildUrlWithAuth(signInUrl)}
-              />
-            </Footer.Action>
-            <Footer.Links />
-          </Footer.Root>
+          <Footer.Links />
         </Card.Footer>
       </Card.Root>
     </Flow.Part>

diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -15,10 +15,9 @@ const camelize = (s: string) => s.replace(/-./g, x => x[1].toUpperCase());
  */
 export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'rootBox',
+  'cardBox',
   'card',
-  'cardContent',
-  'cardFooter',
-  'cardFooterItem',
+  'footerItem',
 
   'logoBox',
   'logoImage',

diff --git a/packages/clerk-js/src/ui/elements/Card/CardAction.tsx b/packages/clerk-js/src/ui/elements/Card/CardAction.tsx
@@ -0,0 +1,47 @@
+import type { CardActionId } from '@clerk/types';
+import React from 'react';
+
+import { descriptors, Flex, Text } from '../../customizables';
+import type { PropsOfComponent } from '../../styledSystem';
+import { RouterLink } from '../RouterLink';
+
+type CardActionProps = Omit<PropsOfComponent<typeof Flex>, 'elementId'> & {
+  elementId?: CardActionId;
+};
+export const CardAction = (props: CardActionProps): JSX.Element => {
+  const { elementId, ...rest } = props;
+  return (
+    <Flex
+      elementDescriptor={descriptors.footerAction}
+      elementId={descriptors.footerAction.setId(elementId)}
+      {...rest}
+      gap={1}
+      sx={t => ({
+        margin: `${t.space.$none} auto`,
+      })}
+    />
+  );
+};
+
+export const CardActionText = (props: React.PropsWithChildren<any>): JSX.Element => {
+  return (
+    <Text
+      elementDescriptor={descriptors.footerActionText}
+      {...props}
+      as='span'
+      variant='body'
+      colorScheme='neutral'
+    />
+  );
+};
+
+export const CardActionLink = (props: PropsOfComponent<typeof RouterLink>): JSX.Element => {
+  return (
+    <RouterLink
+      elementDescriptor={descriptors.footerActionLink}
+      {...props}
+      colorScheme='primary'
+      variant='buttonLarge'
+    />
+  );
+};
diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 
 import { descriptors, Flex, generateFlowPartClassname, Icon, useAppearance } from '../../customizables';
-import { shadows } from '../../foundations/shadows';
 import { Close } from '../../icons';
-import type { PropsOfComponent } from '../../styledSystem';
+import { common, type PropsOfComponent } from '../../styledSystem';
 import { ApplicationLogo } from '..';
 import { useFlowMetadata } from '../contexts';
 import { IconButton } from '../IconButton';
@@ -21,15 +20,15 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
       direction='col'
       className={generateFlowPartClassname(flowMetadata)}
       {...rest}
-      elementDescriptor={descriptors.cardContent}
+      elementDescriptor={descriptors.card}
       sx={[
         t => ({
           backgroundColor: t.colors.$colorBackground,
           transitionProperty: t.transitionProperty.$common,
           transitionDuration: '200ms',
           textAlign: 'center',
           zIndex: t.zIndices.$card,
-          boxShadow: shadows.cardContentShadow,
+          boxShadow: common.shadows(t).cardContentShadow,
           borderRadius: `${t.radii.$card} ${t.radii.$card} ${t.radii.$lg} ${t.radii.$lg}`,
           position: 'relative',
           padding: t.space.$8,

diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
@@ -5,28 +5,6 @@ import { descriptors, Flex } from '../../customizables';
 import type { PropsOfComponent } from '../../styledSystem';
 import { PoweredByClerkTag } from '..';
 
-type CardFooterItemProps = PropsOfComponent<typeof Flex>;
-const CardFooterItem = React.forwardRef<HTMLDivElement, CardFooterItemProps>((props, ref) => {
-  const { sx, ...rest } = props;
-
-  return (
-    <Flex
-      align='center'
-      justify='center'
-      elementDescriptor={descriptors.cardFooterItem}
-      sx={[
-        sx,
-        {
-          position: 'relative',
-          width: '100%',
-        },
-      ]}
-      {...rest}
-      ref={ref}
-    />
-  );
-});
-
 type CardFooterProps = PropsOfComponent<typeof Flex>;
 export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((props, ref) => {
   const { children, sx, ...rest } = props;
@@ -36,12 +14,14 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
       direction='col'
       align='center'
       justify='center'
-      elementDescriptor={descriptors.cardFooter}
+      elementDescriptor={descriptors.footer}
       sx={[
         t => ({
+          marginTop: `-${t.space.$2}`,
+          paddingTop: t.space.$2,
+          background: `linear-gradient(${t.colors.$blackAlpha100},${t.colors.$blackAlpha100}), linear-gradient(${t.colors.$colorBackground}, ${t.colors.$colorBackground})`,
           '>:first-of-type': {
-            padding: `${t.space.$6} ${t.space.$2} ${t.space.$4} ${t.space.$2}`,
-            marginTop: `-${t.space.$2}`,
+            padding: `${t.space.$4} ${t.space.$2} ${t.space.$4} ${t.space.$2}`,
           },
           '>:not(:first-of-type)': {
             padding: `${t.space.$4} ${t.space.$2}`,
@@ -55,11 +35,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
       ref={ref}
     >
       {children}
-      {branded && (
-        <CardFooterItem>
-          <PoweredByClerkTag />
-        </CardFooterItem>
-      )}
+      {branded && <PoweredByClerkTag />}
     </Flex>
   );
 });
diff --git a/packages/clerk-js/src/ui/elements/Card/CardRoot.tsx b/packages/clerk-js/src/ui/elements/Card/CardRoot.tsx
@@ -25,16 +25,16 @@ export const CardRoot = React.forwardRef<HTMLDivElement, CardRootProps>((props,
         />
       )}
       <Col
-        elementDescriptor={[descriptors.card, props.elementDescriptor as ElementDescriptor]}
+        elementDescriptor={[descriptors.cardBox, props.elementDescriptor as ElementDescriptor]}
         className={generateFlowPartClassname(flowMetadata)}
         ref={ref}
         sx={[
           t => ({
-            background: `linear-gradient(${t.colors.$blackAlpha100},${t.colors.$blackAlpha100}), linear-gradient(${t.colors.$colorBackground}, ${t.colors.$colorBackground})`,
             maxWidth: `calc(100vw - ${t.sizes.$20})`,
             width: t.sizes.$100,
             boxShadow: common.shadows(t).cardRootShadow,
             borderRadius: t.radii.$xl,
+            overflow: 'hidden',
             color: t.colors.$colorText,
           }),
           sx,

diff --git a/packages/clerk-js/src/ui/elements/Card/index.ts b/packages/clerk-js/src/ui/elements/Card/index.ts
@@ -1,3 +1,4 @@
+import { CardAction, CardActionLink, CardActionText } from './CardAction';
 import { CardAlert } from './CardAlert';
 import { CardContent } from './CardContent';
 import { CardFooter } from './CardFooter';
@@ -8,4 +9,7 @@ export const Card = {
   Content: CardContent,
   Footer: CardFooter,
   Alert: CardAlert,
+  Action: CardAction,
+  ActionLink: CardActionLink,
+  ActionText: CardActionText,
 };