@khanacademy/wonder-blocks-link 6.1.7 → 6.1.8

package/src/components/link-core.tsx

@@ -1,289 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-import {Link} from "react-router-dom";
-import {__RouterContext} from "react-router";
-
-import {addStyle} from "@khanacademy/wonder-blocks-core";
-import {mix, fade, color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {isClientSideUrl} from "@khanacademy/wonder-blocks-clickable";
-import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import externalLinkIcon from "@phosphor-icons/core/bold/arrow-square-out-bold.svg";
-
-import type {
-    ChildrenProps,
-    ClickableState,
-} from "@khanacademy/wonder-blocks-clickable";
-import type {StyleDeclaration} from "aphrodite";
-import type {SharedProps} from "./link";
-
-type Props = SharedProps &
-    ChildrenProps &
-    ClickableState & {
-        href: string;
-    };
-
-const StyledAnchor = addStyle("a");
-const StyledLink = addStyle(Link);
-
-const LinkCore = React.forwardRef(function LinkCore(
-    props: Props,
-    ref: React.ForwardedRef<typeof Link | HTMLAnchorElement>,
-) {
-    const renderInner = (router: any): React.ReactNode => {
-        const {
-            children,
-            skipClientNav,
-            focused,
-            hovered,
-            href,
-            inline = false,
-            kind = "primary",
-            light = false,
-            visitable = false,
-            pressed,
-            style,
-            testId,
-            waiting: _,
-            target,
-            startIcon,
-            endIcon,
-            ...restProps
-        } = props;
-
-        const linkStyles = _generateStyles(inline, kind, light, visitable);
-        const restingStyles = inline
-            ? linkStyles.restingInline
-            : linkStyles.resting;
-
-        const defaultStyles = [
-            sharedStyles.shared,
-            restingStyles,
-            pressed && linkStyles.active,
-            // A11y: The focus ring should always be present when the
-            // the link has focus, even the link is being hovered over.
-            // TODO(WB-1498): Udpate ClickableBehavior so that focus doesn't
-            // stop on mouseleave. We want the focus ring to remain on a
-            // focused link even after hovering and un-hovering on it.
-            !pressed && hovered && linkStyles.hover,
-            !pressed && focused && linkStyles.focus,
-        ];
-
-        const commonProps = {
-            "data-testid": testId,
-            style: [defaultStyles, style],
-            target,
-            ...restProps,
-        } as const;
-
-        const linkUrl = new URL(href, window.location.origin);
-
-        const isExternalLink = linkUrl.origin !== window.location.origin;
-
-        const externalIcon = (
-            <PhosphorIcon
-                icon={externalLinkIcon}
-                size="small"
-                style={[linkContentStyles.endIcon, linkContentStyles.centered]}
-                testId="external-icon"
-            />
-        );
-
-        let startIconElement;
-        let endIconElement;
-
-        if (startIcon) {
-            startIconElement = React.cloneElement(startIcon, {
-                style: [
-                    linkContentStyles.startIcon,
-                    linkContentStyles.centered,
-                ],
-                testId: "start-icon",
-                "aria-hidden": "true",
-                ...startIcon.props,
-            } as Partial<React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>>);
-        }
-
-        if (endIcon) {
-            endIconElement = React.cloneElement(endIcon, {
-                style: [linkContentStyles.endIcon, linkContentStyles.centered],
-                testId: "end-icon",
-                "aria-hidden": "true",
-                ...endIcon.props,
-            } as Partial<React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>>);
-        }
-
-        const linkContent = (
-            <>
-                {startIcon && startIconElement}
-                {children}
-                {endIcon
-                    ? endIconElement
-                    : isExternalLink && target === "_blank" && externalIcon}
-            </>
-        );
-
-        return router && !skipClientNav && isClientSideUrl(href) ? (
-            <StyledLink
-                {...commonProps}
-                to={href}
-                ref={ref as React.ForwardedRef<typeof Link>}
-            >
-                {linkContent}
-            </StyledLink>
-        ) : (
-            <StyledAnchor
-                {...commonProps}
-                href={href}
-                ref={ref as React.ForwardedRef<HTMLAnchorElement>}
-            >
-                {linkContent}
-            </StyledAnchor>
-        );
-    };
-
-    return (
-        <__RouterContext.Consumer>
-            {(router) => renderInner(router)}
-        </__RouterContext.Consumer>
-    );
-});
-
-const styles: Record<string, any> = {};
-
-const linkContentStyles = StyleSheet.create({
-    startIcon: {
-        marginInlineEnd: spacing.xxxSmall_4,
-    },
-    endIcon: {
-        marginInlineStart: spacing.xxxSmall_4,
-    },
-    centered: {
-        // Manually align the bottom of start/end icons with the text baseline.
-        verticalAlign: "-10%",
-    },
-});
-
-const sharedStyles = StyleSheet.create({
-    shared: {
-        cursor: "pointer",
-        textDecoration: "none",
-        outline: "none",
-        alignItems: "center",
-    },
-});
-
-const _generateStyles = (
-    inline: boolean,
-    kind: "primary" | "secondary",
-    light: boolean,
-    visitable: boolean,
-) => {
-    const buttonType = `${kind}-${inline.toString()}-${light.toString()}-${visitable.toString()}`;
-    if (styles[buttonType]) {
-        return styles[buttonType];
-    }
-
-    if (kind === "secondary" && light) {
-        throw new Error("Secondary Light links are not supported");
-    }
-
-    if (visitable && kind !== "primary") {
-        throw new Error("Only primary link is visitable");
-    }
-
-    const {blue, purple, white, offBlack, offBlack32, offBlack64} = color;
-
-    // NOTE: This color is only used here.
-    const pink = "#fa50ae";
-
-    // Standard purple
-    const linkPurple = mix(fade(offBlack, 0.08), purple);
-    // Light blue
-    const fadedBlue = color.fadedBlue;
-    // Light pink
-    const activeLightVisited = mix(fade(white, 0.32), pink);
-    // Dark blue
-    const activeDefaultPrimary = color.activeBlue;
-
-    const primaryDefaultTextColor = light ? white : blue;
-    const secondaryDefaultTextColor = inline ? offBlack : offBlack64;
-    const defaultTextColor =
-        kind === "primary"
-            ? primaryDefaultTextColor
-            : secondaryDefaultTextColor;
-
-    const primaryActiveColor = light ? fadedBlue : activeDefaultPrimary;
-    const secondaryActiveColor = inline ? activeDefaultPrimary : offBlack;
-    const activeColor =
-        kind === "primary" ? primaryActiveColor : secondaryActiveColor;
-
-    const defaultVisited = visitable
-        ? {
-              ":visited": {
-                  color: light ? pink : linkPurple,
-              },
-          }
-        : Object.freeze({});
-    const activeVisited = visitable
-        ? {
-              ":visited": {
-                  color: light
-                      ? activeLightVisited
-                      : mix(offBlack32, linkPurple),
-              },
-          }
-        : Object.freeze({});
-
-    const newStyles: StyleDeclaration = {
-        resting: {
-            color: defaultTextColor,
-            ...defaultVisited,
-        },
-        restingInline: {
-            color: defaultTextColor,
-            // TODO(WB-1521): Update text decoration to the 1px dashed
-            // underline after the Link audit.
-            // textDecoration: "underline currentcolor solid 1px",
-            textDecoration: "underline currentcolor solid",
-            // TODO(WB-1521): Update the underline offset to be 4px after
-            // the Link audit.
-            // textUnderlineOffset: 4,
-            textUnderlineOffset: 2,
-            ...defaultVisited,
-        },
-        hover: {
-            // TODO(WB-1521): Update text decoration to the 1px dashed
-            // underline after the Link audit.
-            // textDecoration: "underline currentcolor dashed 2px",
-            textDecoration: "underline currentcolor solid",
-            color: defaultTextColor,
-            // TODO(WB-1521): Update the underline offset to be 4px after
-            // the Link audit.
-            // textUnderlineOffset: 4,
-            ...defaultVisited,
-        },
-        focus: {
-            // Focus styles only show up with keyboard navigation.
-            // Mouse users don't see focus styles.
-            ":focus-visible": {
-                color: defaultTextColor,
-                outline: `1px solid ${light ? white : blue}`,
-                borderRadius: 3,
-                ...defaultVisited,
-            },
-        },
-        active: {
-            color: activeColor,
-            textDecoration: "underline currentcolor solid",
-            // TODO(WB-1521): Update the underline offset to be 4px after
-            // the Link audit.
-            // textUnderlineOffset: 4,
-            ...activeVisited,
-        },
-    };
-
-    styles[buttonType] = StyleSheet.create(newStyles);
-    return styles[buttonType];
-};
-
-export default LinkCore;

package/src/components/link.tsx

@@ -1,291 +0,0 @@
-import * as React from "react";
-import {__RouterContext} from "react-router";
-import {Link as ReactRouterLink} from "react-router-dom";
-import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
-
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import type {Typography} from "@khanacademy/wonder-blocks-typography";
-import LinkCore from "./link-core";
-
-type CommonProps = AriaProps & {
-    /**
-     * Text to appear on the link. It can be a plain text or a Typography element.
-     */
-    children: string | React.ReactElement<React.ComponentProps<Typography>>;
-    /**
-     * URL to navigate to.
-     */
-    href: string;
-    /**
-     * An optional id attribute.
-     */
-    id?: string;
-    /**
-     * Indicates that this link is used within a body of text.
-     * This styles the link with an underline to distinguish it
-     * from surrounding text.
-     */
-    inline?: boolean;
-    /**
-     * Kind of Link. Note: Secondary light Links are not supported.
-     */
-    kind?: "primary" | "secondary";
-    /**
-     * Whether the button is on a dark/colored background.
-     */
-    light?: boolean;
-    /**
-     * Whether the link should change color once it's visited.
-     * secondary or primary (light) links are not allowed to be visitable.
-     */
-    visitable?: boolean;
-    /**
-     * Specifies the type of relationship between the current document and the
-     * linked document. Should only be used when `href` is specified. This
-     * defaults to "noopener noreferrer" when `target="_blank"`, but can be
-     * overridden by setting this prop to something else.
-     */
-    rel?: string;
-    /**
-     * Set the tabindex attribute on the rendered element.
-     */
-    tabIndex?: number;
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string;
-    /**
-     * Whether to avoid using client-side navigation.
-     *
-     * If the URL passed to href is local to the client-side, e.g.
-     * /math/algebra/eval-exprs, then it tries to use react-router-dom's Link
-     * component which handles the client-side navigation. You can set
-     * `skipClientNav` to true avoid using client-side nav entirely.
-     *
-     * NOTE: All URLs containing a protocol are considered external, e.g.
-     * https://khanacademy.org/math/algebra/eval-exprs will trigger a full
-     * page reload.
-     */
-    skipClientNav?: boolean;
-    /**
-     * Custom styles.
-     */
-    style?: StyleType;
-    // TODO(yejia): use this if ADR #47 has been implemented
-    /*
-    style?: Style<Exact<{
-        width?: number | string
-        position: Position,
-        ...MarginStyles,
-        ...FlexItemStyles,
-    }>>,
-    */
-
-    /**
-     * Adds CSS classes to the Link.
-     */
-    className?: string;
-    // NOTE(jeresig): Currently React Docgen (used by Styleguidist) doesn't
-    // support ... inside of an exact object type. Thus we had to move the
-    // following propers into this SharedProps, even though they should be
-    // external. Once that's fixed we can split them back apart.
-
-    /**
-     * Function to call when button is clicked.
-     *
-     * This callback should be used for things like marking BigBingo
-     * conversions. It should NOT be used to redirect to a different URL or to
-     * prevent navigation via e.preventDefault(). The event passed to this
-     * handler will have its preventDefault() and stopPropagation() methods
-     * stubbed out.
-     */
-    onClick?: (e: React.SyntheticEvent) => unknown;
-    /**
-     * Run async code in the background while client-side navigating. If the
-     * browser does a full page load navigation, the callback promise must be
-     * settled before the navigation will occur. Errors are ignored so that
-     * navigation is guaranteed to succeed.
-     */
-    safeWithNav?: () => Promise<unknown>;
-    /**
-     * Respond to raw "keydown" event.
-     */
-    onKeyDown?: (e: React.KeyboardEvent) => unknown;
-    /**
-     * Respond to raw "keyup" event.
-     */
-    onKeyUp?: (e: React.KeyboardEvent) => unknown;
-    /**
-     * An optional title attribute.
-     */
-    title?: string;
-    /**
-     * An optional icon displayed before the link label.
-     */
-    startIcon?: React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>;
-    /**
-     * An optional icon displayed after the link label.
-     * If `target="_blank"` and `endIcon` is passed in, `endIcon` will override
-     * the default `externalIcon`.
-     */
-    endIcon?: React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>;
-};
-
-export type SharedProps =
-    | (CommonProps & {
-          /**
-           * A target destination window for a link to open in.  We only support
-           * "_blank" which opens the URL in a new tab.
-           *
-           * TODO(WB-1262): only allow this prop when `href` is also set.t
-           */
-          target?: "_blank";
-
-          beforeNav?: never; // disallow beforeNav when target="_blank"
-      })
-    | (CommonProps & {
-          /**
-           * Run async code before navigating to the URL passed to `href`. If the
-           * promise returned rejects then navigation will not occur.
-           *
-           * If both safeWithNav and beforeNav are provided, beforeNav will be run
-           * first and safeWithNav will only be run if beforeNav does not reject.
-           *
-           * WARNING: Using this with `target="_blank"` will trigger built-in popup
-           * blockers in Firefox and Safari.  This is because we do navigation
-           * programmatically and `beforeNav` causes a delay which means that the
-           * browser can't make a directly link between a user action and the
-           * navigation.
-           */
-          beforeNav?: () => Promise<unknown>;
-
-          target?: never; // disallow target="_blank" when using beforeNav
-      });
-
-/**
- * Reusable link component.
- *
- * Consisting of a [`ClickableBehavior`](#clickablebehavior) surrounding a
- * `LinkCore`. `ClickableBehavior` handles interactions and state changes.
- * `LinkCore` is a stateless component which displays the different states
- * the `Link` can take.
- *
- * ### Usage
- *
- * ```jsx
- * <Link
- *     href="https://khanacademy.org/"
- * >
- *     Label
- * </Link>
- * ```
- */
-const Link = React.forwardRef(function Link(
-    props: SharedProps,
-    ref: React.ForwardedRef<typeof ReactRouterLink | HTMLAnchorElement>,
-) {
-    const {
-        onClick,
-        beforeNav = undefined,
-        safeWithNav,
-        href,
-        skipClientNav,
-        children,
-        tabIndex,
-        onKeyDown,
-        onKeyUp,
-        target = undefined,
-        inline = false,
-        kind = "primary",
-        light = false,
-        visitable = false,
-        ...sharedProps
-    } = props;
-
-    const renderClickableBehavior = (router: any): React.ReactNode => {
-        const ClickableBehavior = getClickableBehavior(
-            href,
-            skipClientNav,
-            router,
-        );
-
-        if (beforeNav) {
-            return (
-                <ClickableBehavior
-                    disabled={false}
-                    href={href}
-                    role="link"
-                    onClick={onClick}
-                    beforeNav={beforeNav}
-                    safeWithNav={safeWithNav}
-                    onKeyDown={onKeyDown}
-                    onKeyUp={onKeyUp}
-                >
-                    {(state, {...childrenProps}) => {
-                        return (
-                            <LinkCore
-                                {...sharedProps}
-                                {...state}
-                                {...childrenProps}
-                                skipClientNav={skipClientNav}
-                                href={href}
-                                target={target}
-                                tabIndex={tabIndex}
-                                inline={inline}
-                                kind={kind}
-                                light={light}
-                                visitable={visitable}
-                                ref={ref}
-                            >
-                                {children}
-                            </LinkCore>
-                        );
-                    }}
-                </ClickableBehavior>
-            );
-        } else {
-            return (
-                <ClickableBehavior
-                    disabled={false}
-                    href={href}
-                    role="link"
-                    onClick={onClick}
-                    safeWithNav={safeWithNav}
-                    target={target}
-                    onKeyDown={onKeyDown}
-                    onKeyUp={onKeyUp}
-                >
-                    {(state, {...childrenProps}) => {
-                        return (
-                            <LinkCore
-                                {...sharedProps}
-                                {...state}
-                                {...childrenProps}
-                                skipClientNav={skipClientNav}
-                                href={href}
-                                target={target}
-                                tabIndex={tabIndex}
-                                inline={inline}
-                                kind={kind}
-                                light={light}
-                                visitable={visitable}
-                                ref={ref}
-                            >
-                                {children}
-                            </LinkCore>
-                        );
-                    }}
-                </ClickableBehavior>
-            );
-        }
-    };
-
-    return (
-        <__RouterContext.Consumer>
-            {(router) => renderClickableBehavior(router)}
-        </__RouterContext.Consumer>
-    );
-});
-
-export default Link;

package/src/index.ts

@@ -1,3 +0,0 @@
-import Link from "./components/link";
-
-export {Link as default};

package/tsconfig-build.json

@@ -1,15 +0,0 @@
-{
-    "exclude": ["dist"],
-    "extends": "../tsconfig-shared.json",
-    "compilerOptions": {
-        "outDir": "./dist",
-        "rootDir": "src",
-    },
-    "references": [
-        {"path": "../wonder-blocks-clickable/tsconfig-build.json"},
-        {"path": "../wonder-blocks-core/tsconfig-build.json"},
-        {"path": "../wonder-blocks-typography/tsconfig-build.json"},
-        {"path": "../wonder-blocks-icon/tsconfig-build.json"},
-        {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
-    ]
-}