diff --git a/modules/docs/lib/MDXElements.tsx b/modules/docs/lib/MDXElements.tsx index f0d067f191..5a926533af 100644 --- a/modules/docs/lib/MDXElements.tsx +++ b/modules/docs/lib/MDXElements.tsx @@ -31,9 +31,9 @@ const Button = (props: any) => { diff --git a/modules/react/button/lib/ExternalHyperlink.tsx b/modules/react/button/lib/ExternalHyperlink.tsx index eb5ebd3bdc..826ac27d84 100644 --- a/modules/react/button/lib/ExternalHyperlink.tsx +++ b/modules/react/button/lib/ExternalHyperlink.tsx @@ -1,8 +1,13 @@ import React from 'react'; -import {styled, createComponent, StyledType} from '@workday/canvas-kit-react/common'; + +import {createComponent} from '@workday/canvas-kit-react/common'; +import {SystemIcon} from '@workday/canvas-kit-react/icon'; +import {calc, createStencil, createStyles, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; + import {extLinkIcon} from '@workday/canvas-system-icons-web'; -import {SystemIcon, systemIconStyles} from '@workday/canvas-kit-react/icon'; -import {Hyperlink, HyperlinkProps} from './Hyperlink'; +import {system} from '@workday/canvas-tokens-web'; + +import {hyperlinkStencil, HyperlinkProps} from './Hyperlink'; export interface ExternalHyperlinkProps extends HyperlinkProps { /** @@ -13,25 +18,26 @@ export interface ExternalHyperlinkProps extends HyperlinkProps { iconLabel?: string; } -const iconStyles = { - ...systemIconStyles({fill: 'currentColor', fillHover: 'currentColor'}), -}; +const iconSize = '1em'; +const minIconSize = system.space.x4; -const Anchor = styled(Hyperlink)({ - ...iconStyles, - display: 'inline-flex', - flexDirection: 'row', - alignItems: 'center', +const externalHyperlinkStencil = createStencil({ + extends: hyperlinkStencil, + base: { + display: 'inline-flex', + flexDirection: 'row', + alignItems: 'center', + }, }); -const iconSize = '1em'; -const minIconSize = '16px'; - -const StyledSystemIcon = styled(SystemIcon)({ - ...iconStyles, - width: `calc(${iconSize} - 1px)`, - minWidth: `calc(${minIconSize} - 1px)`, - marginLeft: '2px', +const externalHyperlinkIconStyles = createStyles({ + width: calc.subtract(iconSize, px2rem(1)), + minWidth: calc.subtract(minIconSize, px2rem(1)), + marginInlineStart: px2rem(2), + '& svg': { + minWidth: minIconSize, + minHeight: minIconSize, + }, }); /** @@ -41,18 +47,30 @@ const StyledSystemIcon = styled(SystemIcon)({ export const ExternalHyperlink = createComponent('a')({ displayName: 'ExternalHyperlink', Component: ( - {children, iconLabel = 'Opens link in new window', ...elemProps}: ExternalHyperlinkProps, - ref + { + variant, + children, + iconLabel = 'Opens link in new window', + ...elemProps + }: ExternalHyperlinkProps, + ref, + Element ) => ( - + {children} - - + ), }); diff --git a/modules/react/button/lib/Hyperlink.tsx b/modules/react/button/lib/Hyperlink.tsx index cde1199436..a5d460c746 100644 --- a/modules/react/button/lib/Hyperlink.tsx +++ b/modules/react/button/lib/Hyperlink.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; -import {borderRadius, colors, type} from '@workday/canvas-kit-react/tokens'; -import {styled, createComponent, StyledType} from '@workday/canvas-kit-react/common'; +import {createComponent} from '@workday/canvas-kit-react/common'; +import {createStencil, CSProps, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; -export interface HyperlinkProps { +import {system} from '@workday/canvas-tokens-web'; + +export interface HyperlinkProps extends CSProps { /** * sets modifier styles for Hyperlink * - `inverse`: sets the color to frenchVanilla100 and updates hover, focus, and active pseudo-classes @@ -12,59 +14,57 @@ export interface HyperlinkProps { * attribute for the hyperlink URL */ href?: string; + /** + * The children of the `Expandable` container. This should contain `Expandable.Target` and + * `Expandable.Container` + */ children?: React.ReactNode; } -const variantStyles = { - inverse: { - color: colors.frenchVanilla100, - '&:hover': { - color: colors.frenchVanilla100, - background: 'rgba(255, 255, 255, 0.1)', - }, - '&:focus': { - boxShadow: `0 0 0 2px ${colors.frenchVanilla100}`, - }, - '&:active': { - color: colors.blueberry600, - background: colors.soap200, - }, - }, -}; - -const anchorVariants = (props: HyperlinkProps) => { - if (props.variant === 'inverse') { - return variantStyles.inverse; - } - return {}; -}; - -const Anchor = styled('a')( - { - fontFamily: type.properties.fontFamilies.default, +export const hyperlinkStencil = createStencil({ + base: { + fontFamily: system.fontFamily.default, // type.properties.fontFamilies.default, textDecoration: 'underline', - color: colors.blueberry400, + color: system.color.text.primary.default, // colors.blueberry400, cursor: 'pointer', - borderRadius: borderRadius.s, + borderRadius: system.shape.half, display: 'inline-block', - padding: '0 2px', - margin: '0 -2px', + padding: `0 ${px2rem(2)}`, + margin: `0 -${px2rem(2)}`, transition: 'color 0.15s,background-color 0.15s', '&:hover': { - color: colors.blueberry500, - background: colors.soap200, + color: system.color.text.primary.strong, // colors.blueberry500, + background: system.color.bg.alt.soft, // colors.soap200, }, '&:focus': { - boxShadow: `0 0 0 2px ${colors.blueberry400}`, + boxShadow: `0 0 0 ${px2rem(2)} ${system.color.text.primary.default}`, // colors.blueberry400 outline: 'none', }, '&:active': { - color: colors.blueberry600, - background: colors.soap300, + color: system.color.text.primary.stronger, // colors.blueberry600, + background: system.color.bg.alt.default, // colors.soap300, }, }, - anchorVariants -); + modifiers: { + variant: { + inverse: { + color: system.color.text.inverse, // colors.frenchVanilla100, + '&:hover': { + color: system.color.text.inverse, // colors.frenchVanilla100, + background: 'rgba(255, 255, 255, 0.1)', + }, + '&:focus': { + boxShadow: `0 0 0 ${px2rem(2)} ${system.color.text.inverse}`, // colors.frenchVanilla100 + }, + '&:active': { + color: system.color.text.primary.stronger, // colors.blueberry600, + // It's weird to me that this is soap 200 and not 300 like the default active state. + background: system.color.bg.alt.soft, // colors.soap200, + }, + }, + }, + }, +}); /** * `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor @@ -72,9 +72,7 @@ const Anchor = styled('a')( */ export const Hyperlink = createComponent('a')({ displayName: 'Hyperlink', - Component: ({children, ...elemProps}: HyperlinkProps, ref, Element) => ( - - {children} - + Component: ({variant, ...elemProps}: HyperlinkProps, ref, Element) => ( + ), }); diff --git a/modules/react/button/stories/button/Hyperlink.mdx b/modules/react/button/stories/button/Hyperlink.mdx index 7e43f2d8c1..1b3c184dff 100644 --- a/modules/react/button/stories/button/Hyperlink.mdx +++ b/modules/react/button/stories/button/Hyperlink.mdx @@ -8,9 +8,9 @@ import * as HyperlinkStories from './Hyperlink.stories'; -# Canvas Kit Hyperlinks +# Canvas Kit Hyperlink -Clickable anchor elements that extend the native `` element with Canvas styling. +A clickable anchor element that extends the native `` element with Canvas styling. [> Workday Design Reference](https://design.workday.com/components/buttons/buttons)