Merge pull request #130 from buildo/fix_localized_link

federico-ercoles · web-flow · commit af927d82be8c · 2022-04-12T11:20:31.000+02:00
Fix handling LocalizedLink
diff --git a/packages/bento-design-system/src/BentoProvider.tsx b/packages/bento-design-system/src/BentoProvider.tsx
@@ -2,8 +2,9 @@ import { Children } from ".";
 import { ToastProviderProps } from "./Toast/createToastProvider";
 import { OverlayProvider } from "@react-aria/overlays";
 import { DefaultMessages, DefaultMessagesContext } from "./DefaultMessagesContext";
-import { LinkComponent, LinkComponentContext } from "./util/link";
-import { FunctionComponent, useContext } from "react";
+import { LinkComponentContext, LinkComponentProps } from "./util/link";
+import { ComponentType, FunctionComponent, useContext } from "react";
+import { LinkConfig } from "./Link/Config";
 
 type Props = {
   children?: Children;
@@ -29,7 +30,8 @@ type Props = {
    *
    * Defaults to a regular `<a>` tag.
    */
-  linkComponent?: LinkComponent;
+  linkComponent?: ComponentType<LinkComponentProps>;
+  linkConfig?: LinkConfig;
 } & DefaultMessages;
 
 export function createBentoProvider(ToastProvider: FunctionComponent<ToastProviderProps>) {
@@ -38,13 +40,19 @@ export function createBentoProvider(ToastProvider: FunctionComponent<ToastProvid
     toastDismissAfterMs = 5000,
     defaultMessages,
     linkComponent,
+    linkConfig,
   }: Props) {
     const linkComponentFromContext = useContext(LinkComponentContext);
 
     return (
       <OverlayProvider>
         <DefaultMessagesContext.Provider value={{ defaultMessages }}>
-          <LinkComponentContext.Provider value={linkComponent || linkComponentFromContext}>
+          <LinkComponentContext.Provider
+            value={{
+              component: linkComponent || linkComponentFromContext.component,
+              config: linkConfig || linkComponentFromContext.config,
+            }}
+          >
             <ToastProvider dismissAfterMs={toastDismissAfterMs}>{children}</ToastProvider>
           </LinkComponentContext.Provider>
         </DefaultMessagesContext.Provider>
diff --git a/packages/bento-design-system/src/Button/ButtonLink.tsx b/packages/bento-design-system/src/Button/ButtonLink.tsx
@@ -47,7 +47,7 @@ export function createButtonLink(config: ButtonConfig) {
       <Box
         {...linkProps}
         {...props}
-        as={LinkComponent}
+        as={LinkComponent.component}
         href={href}
         target={target}
         className={[buttonRecipe({ kind, hierarchy, size, active }), element.a]}
diff --git a/packages/bento-design-system/src/Link/createLink.tsx b/packages/bento-design-system/src/Link/createLink.tsx
@@ -34,7 +34,7 @@ export function createLink(config: LinkConfig) {
       <Box
         {...linkProps}
         {...props}
-        as={LinkComponent}
+        as={LinkComponent.component}
         href={href}
         className={[link, extendedHitAreaRecipe({ axis: "y" }), resetStyles.element["a"]]}
         disabled={isDisabled}
diff --git a/packages/bento-design-system/src/List/createListItem.tsx b/packages/bento-design-system/src/List/createListItem.tsx
@@ -92,7 +92,7 @@ export function createListItem(config: ListItemConfig) {
       >
         <Box
           ref={linkRef}
-          as={props.href ? LinkComponent : "div"}
+          as={props.href ? LinkComponent.component : "div"}
           className={element.a}
           {...linkProps}
           href={props.href}
diff --git a/packages/bento-design-system/src/Navigation/createNavigation.tsx b/packages/bento-design-system/src/Navigation/createNavigation.tsx
@@ -79,7 +79,7 @@ export function createNavigation(config: NavigationConfig) {
       <Box
         tabIndex={active || disabled ? -1 : 0}
         className={[destinationRecipe({ active }), element.a]}
-        as={LinkComponent}
+        as={LinkComponent.component}
         {...linkProps}
         href={href}
         display="block"
diff --git a/packages/bento-design-system/src/index.ts b/packages/bento-design-system/src/index.ts
@@ -55,6 +55,7 @@ export * from "./Typography/Title/Title";
 export * from "./sprinkles";
 export * from "./util/Children";
 export * from "./util/LocalizedString";
+export * from "./util/NonEmptyArray";
 export * from "./util/Omit";
 export * from "./util/TextChildren";
 export * from "./util/align";
diff --git a/packages/bento-design-system/src/util/TextChildren.tsx b/packages/bento-design-system/src/util/TextChildren.tsx
@@ -1,11 +1,16 @@
-import { HTMLAttributeAnchorTarget, isValidElement } from "react";
+import clsx from "clsx";
+import { ComponentType, HTMLAttributeAnchorTarget, isValidElement } from "react";
 import flattenChildren from "react-keyed-flatten-children";
+import { ButtonProps } from "../Button/createButton";
 import { Box } from "../internal/Box/Box";
 import { Children } from "./Children";
-import { LinkComponent, useLinkComponent } from "./link";
+import { LinkComponentProps, useLinkComponent } from "./link";
 import { LocalizedString } from "./LocalizedString";
 import { NonEmptyArray } from "./NonEmptyArray";
 import { splitBy } from "./splitBy";
+import { link as linkStyle } from "../Link/Link.css";
+import { LinkConfig } from "../Link/Config";
+import { bentoSprinkles } from "../internal";
 
 /** `TextChildren` is a DSL for building type-safe rich localized strings.
  *  It's the composition of strings that have been localized (`LocalizedString`) and other elements
@@ -51,31 +56,37 @@ export function bold(text: LocalizedString): LocalizedBold {
   return { type: "bold", text };
 }
 
-export function link(
-  text: LocalizedString,
-  href: string,
-  target?: HTMLAttributeAnchorTarget
-): LocalizedLink {
-  return { type: "link", text, href, target };
+export type LinkOptions =
+  | {
+      href: string;
+      target?: HTMLAttributeAnchorTarget;
+    }
+  | {
+      onClick: ButtonProps["onPress"];
+    };
+
+export function link(text: LocalizedString, options: LinkOptions): LocalizedLink {
+  return { type: "link", text, ...options };
 }
 
 export type LocalizedLink = {
   type: "link";
   text: LocalizedString;
-  href: string;
-  target?: HTMLAttributeAnchorTarget;
-};
+} & LinkOptions;
 
 export function makeTextChildrenFromElements(c: TextChildrenConcreteType) {
   return c as TextChildren;
 }
 
-function textChildrenToChildrenArray(
+export function textChildrenToChildrenArray(
   children: TextChildren,
-  LinkComponent: LinkComponent
+  LinkComponent: ComponentType<LinkComponentProps>,
+  linkConfig: LinkConfig
 ): Array<Children> {
   if (Array.isArray(children)) {
-    return children.flatMap((c) => textChildrenToChildrenArray(c as TextChildren, LinkComponent));
+    return children.flatMap((c) =>
+      textChildrenToChildrenArray(c as TextChildren, LinkComponent, linkConfig)
+    );
   } else if (typeof children === "string") {
     return [children];
   }
@@ -92,19 +103,24 @@ function textChildrenToChildrenArray(
       return [<br />];
     case "link":
       return [
-        <Box as={LinkComponent} href={children.href} target={children.target}>
+        <Box
+          as={LinkComponent}
+          className={clsx(linkStyle, bentoSprinkles({ fontWeight: "label" }))}
+          textDecoration={linkConfig.labelDecoration}
+          {...children}
+        >
           {children.text}
         </Box>,
       ];
   }
 }
 
 export function useTextChildrenToChildren() {
-  const LinkComponent = useLinkComponent();
+  const { component: LinkComponent, config: linkConfig } = useLinkComponent();
 
   return function textChildrenToChildren(children: TextChildren): Children {
     const lines = splitBy(
-      textChildrenToChildrenArray(children, LinkComponent),
+      textChildrenToChildrenArray(children, LinkComponent, linkConfig),
       (e) => isValidElement(e) && e.type === "br"
     );
 
diff --git a/packages/bento-design-system/src/util/link.tsx b/packages/bento-design-system/src/util/link.tsx
@@ -6,7 +6,9 @@ import {
   ForwardRefRenderFunction,
   useContext,
 } from "react";
+import { defaultConfigs } from "..";
 import { Box } from "../internal";
+import { LinkConfig } from "../Link/Config";
 
 export type LinkComponentProps = {
   href: string;
@@ -16,11 +18,12 @@ export const makeLinkComponent = (
   render: ForwardRefRenderFunction<HTMLAnchorElement, LinkComponentProps>
 ) => forwardRef(render);
 
-export type LinkComponent = ComponentType<LinkComponentProps>;
+export type LinkComponent = { component: ComponentType<LinkComponentProps>; config: LinkConfig };
 
-export const DefaultLinkComponent = makeLinkComponent((props, ref) => (
-  <Box as="a" ref={ref} {...props} />
-));
+export const DefaultLinkComponent = {
+  component: makeLinkComponent((props, ref) => <Box as="a" ref={ref} {...props} />),
+  config: defaultConfigs.link,
+};
 
 export const LinkComponentContext = createContext<LinkComponent>(DefaultLinkComponent);
 
diff --git a/packages/bento-design-system/test/useTextChildrenToChildren.test.tsx b/packages/bento-design-system/test/useTextChildrenToChildren.test.tsx
@@ -57,7 +57,7 @@ describe("textChildrenToChildren", () => {
 
   test("link", () => {
     const input = makeTextChildrenFromElements(
-      link(formatMessage("Link"), "https://www.google.com", "_blank")
+      link(formatMessage("Link"), { href: "https://www.google.com", target: "_blank" })
     );
     const result = toChildren(input);
     expect(result).toMatchInlineSnapshot(`
@@ -69,8 +69,20 @@ describe("textChildrenToChildren", () => {
               "render": [Function],
             }
           }
+          className="Link__fmzr140 sprinkles_cursor_pointer_default__oc4xkuvq sprinkles_cursor_notAllowed_disabled__oc4xkuw4 sprinkles_outline_none_default__oc4xkuys sprinkles_color_linkEnabled_default__oc4xkuk7 sprinkles_color_linkHover_hover__oc4xkukd sprinkles_color_linkFocus_focus__oc4xkukj sprinkles_color_linkDisabled_disabled__oc4xkukq sprinkles_fontWeight_label__oc4xkuy"
           href="https://www.google.com"
           target="_blank"
+          text="Link"
+          textDecoration={
+            Object {
+              "active": "none",
+              "default": "none",
+              "disabled": "none",
+              "focus": "underline",
+              "hover": "underline",
+            }
+          }
+          type="link"
         >
           Link
         </ForwardRef>,
@@ -117,7 +129,7 @@ describe("textChildrenToChildren", () => {
       lineBreak,
       bold(formatMessage("Second")),
       formatMessage("line"),
-      link(formatMessage("Link"), "https://www.google.com", "_blank"),
+      link(formatMessage("Link"), { href: "https://www.google.com", target: "_blank" }),
     ]);
     const result = toChildren(input);
     expect(result).toMatchInlineSnapshot(`
@@ -144,8 +156,20 @@ describe("textChildrenToChildren", () => {
               "render": [Function],
             }
           }
+          className="Link__fmzr140 sprinkles_cursor_pointer_default__oc4xkuvq sprinkles_cursor_notAllowed_disabled__oc4xkuw4 sprinkles_outline_none_default__oc4xkuys sprinkles_color_linkEnabled_default__oc4xkuk7 sprinkles_color_linkHover_hover__oc4xkukd sprinkles_color_linkFocus_focus__oc4xkukj sprinkles_color_linkDisabled_disabled__oc4xkukq sprinkles_fontWeight_label__oc4xkuy"
           href="https://www.google.com"
           target="_blank"
+          text="Link"
+          textDecoration={
+            Object {
+              "active": "none",
+              "default": "none",
+              "disabled": "none",
+              "focus": "underline",
+              "hover": "underline",
+            }
+          }
+          type="link"
         >
           Link
         </ForwardRef>,
diff --git a/packages/storybook/stories/Components/LinkButton.stories.tsx b/packages/storybook/stories/Components/LinkButton.stories.tsx
@@ -0,0 +1,24 @@
+import { action } from "@storybook/addon-actions";
+import { Body, link, makeTextChildrenFromElements } from "..";
+import { createComponentStories, formatMessage } from "../util";
+
+const { defaultExport, createStory } = createComponentStories({
+  component: Body,
+  args: {},
+  parameters: {
+    // NOTE(gabro): this is to avoid Storybook erroring when trying to parse the DSL
+    // See https://github.com/storybookjs/storybook/issues/11543#issuecomment-684130442
+    docs: { source: { type: "code" } },
+  },
+});
+
+export default defaultExport;
+
+export const LinkButton = createStory({
+  size: "medium",
+  children: makeTextChildrenFromElements(
+    link(formatMessage("I look like a link, but I'm actually a button!"), {
+      onClick: action("onClick"),
+    })
+  ),
+});

Original file line number	Diff line number	Diff line change
`@@ -92,7 +92,7 @@ export function createListItem(config: ListItemConfig) {`
`92`	`92`	`>`
`93`	`93`	`<Box`
`94`	`94`	`ref={linkRef}`
`95`		`- as={props.href ? LinkComponent : "div"}`
	`95`	`+ as={props.href ? LinkComponent.component : "div"}`
`96`	`96`	`className={element.a}`
`97`	`97`	`{...linkProps}`
`98`	`98`	`href={props.href}`