import Body from '../body/Body'; import { Typography } from '../common'; import Title from '../title/Title'; import SentimentSurface from '../sentimentSurface'; import Link from '.'; export default { component: Link, title: 'Typography/Link', }; export const Basic = () => { return ( <> Standalone examples of links Default link Default link Large link {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */} console.log('click link')}> button as Link {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */} console.log('click link')} > button as Link Disabled links Disabled link Disabled large link {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */} console.log('click disabled button')}> Disabled button as Link {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */} console.log('click disabled button')} > Disabled button as Link (large) Links via <code>{'<Link />'}</code> component in all types of body copy We're building the world's{' '} most international account . We're building the world's most international account We're building the world's{' '} most international account . We're building the world's most international account We're building the world's{' '} most international account . We're building the world's most international account We're building the world's{' '} most international account . We're building the world's most international account Disabled links in body copy We're building the world's{' '} most international account . We're building the world's most international account We're building the world's{' '} most international account . We're building the world's most international account We're building the world's{' '} most international account . We're building the world's most international account We're building the world's{' '} most international account . We're building the world's most international account Links via <code>{'<a>'}</code> tag in all types of body copy We're building the world's{' '} most international account . We're building the world's most international account We're building the world's{' '} most international account . We're building the world's most international account We're building the world's{' '} most international account . We're building the world's most international account We're building the world's{' '} most international account . We're building the world's most international account ); }; /** * `Link` is sentiment-aware and will automatically adjust its colours if wrapped inside * the [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs) component */ export const SentimentAwareness = function Render() { return (['success', 'warning', 'negative'] as const).map((sentiment) => ( {'Some text with an '} inline link {' adjusted to match the current colour scheme. It also works with '} external {' and '} disabled links . )); }; SentimentAwareness.parameters = { docs: { source: { type: 'dynamic' }, }, };