From bfe91ee3fc9c37393ecfd0f0472ccdcb2f40393d Mon Sep 17 00:00:00 2001 From: Mike Flood Date: Fri, 31 Mar 2023 12:03:52 +0100 Subject: [PATCH] docs(742): link scenarios --- src/link/__tests__/link.stories.tsx | 991 +++++++++++----------------- 1 file changed, 384 insertions(+), 607 deletions(-) diff --git a/src/link/__tests__/link.stories.tsx b/src/link/__tests__/link.stories.tsx index 577032351b..6bd91fab74 100644 --- a/src/link/__tests__/link.stories.tsx +++ b/src/link/__tests__/link.stories.tsx @@ -1,16 +1,21 @@ import * as React from 'react'; import {Story as StoryType} from '@storybook/react'; -import {LinkInline, LinkStandalone} from '..'; -import {getColorCssFromTheme, styled} from '../../utils/style'; -import { - StorybookHeading, - StorybookSubHeading, - StorybookParah, -} from '../../test/storybook-comps'; -import {IconFilledEmail} from '../../icons'; -import {ThemeProvider, CreateThemeArgs} from '../../theme'; +import {LinkInline as LI, LinkProps, LinkStandalone as LS} from '..'; +import {CreateThemeArgs, StylePreset, ThemeProvider} from '../../theme'; import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object'; -import {TextBlock} from '../../text-block'; +import {StorybookCase, StorybookPage} from '../../test/storybook-comps'; +import {IconOutlinedChevronRight, IconOutlinedStar} from '../../icons'; +import {getColorCssFromTheme, styled} from '../../utils'; +import {Paragraph} from '../../typography'; + +const LinkInline = (props: Omit & {href?: string}) => ( + // eslint-disable-next-line no-script-url +
  • +); +const LinkStandalone = (props: Omit & {href?: string}) => ( + // eslint-disable-next-line no-script-url + +); const linkCustomThemeObject: CreateThemeArgs = { name: 'my-custom-link-theme', @@ -31,649 +36,421 @@ const linkCustomThemeObject: CreateThemeArgs = { }, }, }, - colors: { - inkLinkBase: '{{colors.red080}}', - inkLinkHover: '{{colors.green080}}', - inkLinkVisited: '{{colors.red090}}', - inkLinkActive: '{{colors.purpl020}}', - }, stylePresets: { linkCustom: { base: { - color: '{{colors.inkLinkBase}}', - }, - visited: { - color: '{{colors.inkLinkVisited}}', - }, - hover: { - color: '{{colors.inkLinkHover}}', + color: '{{colors.teal070}}', + iconColor: '{{colors.teal070}}', + textDecoration: 'underline', }, - }, - linkCustomTwo: { - base: { - color: '{{colors.interactivePrimary030}}', - iconColor: '{{colors.interactivePrimary030}}', - }, - active: { - color: '{{colors.inkLinkActive}}', - iconColor: '{{colors.inkLinkActive}}', - }, - hover: { - color: '{{colors.inkLinkHover}}', - iconColor: '{{colors.inkLinkHover}}', - }, - }, - customOutlineColor: { - base: { - color: '{{colors.interactivePrimary030}}', - iconColor: '{{colors.interactivePrimary030}}', - textDecoration: 'none', - }, - 'focus-visible': { - outlineColor: 'red', - outlineStyle: '{{outlines.outlineStyleDefault}}', - outlineWidth: '{{outlines.outlineWidthDefault}}', - outlineOffset: '{{outlines.outlineOffsetDefault}}', - }, - }, - customOutlineStyle: { + } as StylePreset, + linkCustom2: { + __extends: 'linkStandalone', base: { color: '{{colors.interactivePrimary030}}', iconColor: '{{colors.interactivePrimary030}}', textDecoration: 'none', }, - 'focus-visible': { - outlineColor: 'red', - outlineStyle: 'dotted', - outlineWidth: '{{outlines.outlineWidthDefault}}', - outlineOffset: '{{outlines.outlineOffsetDefault}}', - }, - }, - customOutlineWidth: { - base: { - color: '{{colors.interactivePrimary030}}', - iconColor: '{{colors.interactivePrimary030}}', - textDecoration: 'none', + hover: { + color: '{{colors.teal070}}', + iconColor: '{{colors.teal070}}', + textDecoration: 'underline', }, - 'focus-visible': { - outlineColor: 'red', - outlineStyle: 'dotted', - outlineWidth: '5px', - outlineOffset: '{{outlines.outlineOffsetDefault}}', + active: { + color: '{{colors.teal070}}', + iconColor: '{{colors.teal070}}', + textDecoration: 'underline', }, - }, - customOutlineOffset: { + } as StylePreset, + linkCustom3: { + __extends: 'linkInline', base: { - color: '{{colors.interactivePrimary030}}', - iconColor: '{{colors.interactivePrimary030}}', - textDecoration: 'none', - }, - 'focus-visible': { - outlineColor: 'red', - outlineStyle: 'dotted', - outlineWidth: '5px', - outlineOffset: '5px', + color: '{{colors.interactivePrimary040}}', + iconColor: '{{colors.interactivePrimary040}}', + textDecoration: 'underline', }, - }, + } as StylePreset, }, }, }; -const StyledDiv = styled.div` - border: 1px red dotted; -`; - -const Container = styled.div<{hasBackground?: boolean}>` - max-width: 600px; - margin: 0 auto; - ${({hasBackground}) => - hasBackground && getColorCssFromTheme('background', 'inkBase')}; -`; - -const CustomPragraph = styled(StorybookParah)` - margin 0; -`; - -const LinkWithOverrides = ({children}: {children: React.ReactNode}) => ( - - {children} - -); - -const ExternalLinkWithOverrides = ({children}: {children: React.ReactNode}) => ( - - {children} - -); - -export const StoryLink = () => ( - - {/* ------ Link inline -------- */} - Link inline - Inline link -
    -
    - - Inline link with style and type overrides - -
    -
    - - - Inline link with leading and trailing icons - - -
    -
    - - - Inline link with leading and trailing icons and custom space - - -
    -
    - Inline mail link -
    -
    - Inline telephone link - - {/* ------ Link external -------- */} - Link external - - External link with external icon - -
    -
    - - External link with custom size for external icon - -
    -
    - - External link without external icon - - - {/* ------ Link standalone -------- */} - Link standalone - Standalone link -
    -
    - - Standalone link external - -
    -
    - - Link Standalone external with type and style Preset overrides - - - Link with `textOnly` - - This is a long description with this and this and this and this and this - and{' '} - - long textOnly inline link inside{' '} - {' '} - and this and that. - -
    - - This is a great article about this and this and this and that and this and{' '} - - external textOnly link with external icon - {' '} - this and this and this and that. - -     -); -StoryLink.storyName = 'link'; - -export const StoryLinkInverse = () => ( - - {/* ------ Link inline -------- */} - Link inline - - Inline link - -
    -
    - - - Inline link with leading and trailing icons - - -
    -
    - - - Inline link with leading and trailing icons and custom space - - -
    -
    - - Inline mail link - - - {/* ------ Link external -------- */} - Link external - - External link with external icon - -
    -
    - - External link with custom size for external icon - -
    -
    - - External link without external icon - +export default { + title: 'Components/Link', + component: () => 'None', + parameters: { + nkDocs: { + title: 'Link', + url: 'https://apple.comcomponents/link', + description: 'A simple styled anchor element.', + }, + }, + decorators: [ + ( + Story: StoryType, + context: {globals: {backgrounds: {value: string}}; name: string}, + ) => ( + + + + ), + ], +}; - {/* ------ Link standalone -------- */} - - Link standalone - - - Standalone link - -
    -
    - - Standalone link external - -     +export const StoryLinkDefault = () => ( + + + Link + + ); -StoryLinkInverse.storyName = 'link-inverse'; +StoryLinkDefault.storyName = 'Default'; -export const StoryLinkWithinTextParagraph = () => ( - - Link in paragraph - default - - Officials said that the{' '} +export const StoryLinkInline = () => ( + + + Inline link + + + Inline email link + + + Inline telephone link + + + + + Inline link with leading and trailing icons + + + + - Apple-Google model - {' '} - was unable to differentiate between a phone that was in someone’s hand - three metres away from a phone that was in someone’s pocket + + Inline link with leading and trailing icons and custom space + + + + +); +StoryLinkInline.storyName = 'Inline'; + +export const StoryLinkExternal = () => ( + + + + External link with external icon + + + - one metre away. - {' '} - “That is a really important distinction if you’re going to use the app to - determine whether or not you spend 14 days at home,” one{' '} - + + +); +StoryLinkExternal.storyName = 'External'; + +export const StoryLinkStandalone = () => ( + + + Standalone link + + + Standalone email link + + + Standalone telephone link + + + + + Standalone link with leading and trailing icons + + + + + - official - {' '} - said. - + + Standalone link with leading and trailing icons and custom space + + + + +); +StoryLinkStandalone.storyName = 'Standalone'; - with overrides - - Officials said that the{' '} - Apple-Google model was unable to - differentiate between a phone that was in someone’s hand three metres away - from a phone that was in someone’s pocket - one metre away. “That is a really - important distinction if you’re going to use the app to determine whether - or not you spend 14 days at home,” one{' '} - official said. - +const InverseContainer = styled.div` + margin: -16px; + ${getColorCssFromTheme('backgroundColor', 'inkContrast')}; + ${getColorCssFromTheme('color', 'inkInverse')}; +`; - external default - - Officials said that the{' '} - - Apple-Google model - {' '} - was unable to differentiate between a phone that was in{' '} - ( + + + + + Link + + + + + +); +StoryLinkInverse.storyName = 'Inverse'; + +export const StoryLinkInParagraph = () => ( + + + + NewsKit provides components, guidelines and standards to enable{' '} + + digital product teams + {' '} + to create high-quality, consistent products quickly. NewsKit is built on{' '} + + modular design principles + {' '} + and backed by best practice guidance for design and development. + + + + + NewsKit provides components, guidelines and standards to enable{' '} + + digital product teams + {' '} + to create high-quality, consistent products quickly. NewsKit is built on{' '} + + modular design principles + {' '} + and backed by best practice guidance for design and development. + + + + + NewsKit provides components, guidelines and standards to enable{' '} + + digital product teams + {' '} + to create high-quality, consistent products quickly. NewsKit is built on{' '} + + modular design principles + {' '} + and backed by best practice guidance for design and development. + + + + + NewsKit provides components, guidelines and standards to enable{' '} + + digital product teams + {' '} + to create high-quality, consistent products quickly. NewsKit is built on{' '} + + modular design principles + {' '} + and backed by best practice guidance for design and development. + + + +); +StoryLinkInParagraph.storyName = 'Inline link in paragraph'; + +export const StoryLinkTransitions = () => ( + + + - someone’s hand - {' '} - three metres away from a phone that was in someone’s pocket{' '} - + + + - one metre - {' '} - away. - + Standalone link with overrides using extend on transitionDuration + + + +); +StoryLinkTransitions.storyName = 'Transitions'; - external with overrides - - Officials said that the{' '} - Apple-Google model{' '} - was unable to differentiate between a phone that was in{' '} - someone’s hand - three metres away from a phone that was in someone’s pocket one{' '} - metre away. - - +const OutlineContainer = styled.div` + border: 1px dotted red; +`; + +export const StoryLinkLogicalProps = () => ( + + + + + Inline link with logical padding + + + + + + + Inline link with logical margin + + + + + + + Standalone link with logical padding + + + + + + + + Standalone link with logical margin + + + + + + + NewsKit provides components, guidelines and standards to enable{' '} + + digital product teams + {' '} + to create high-quality, consistent products quickly. NewsKit is built on{' '} + + modular design principles + {' '} + and backed by best practice guidance for design and development. + + + ); -StoryLinkWithinTextParagraph.storyName = 'link-within-text-paragraph'; +StoryLinkLogicalProps.storyName = 'Logical Props'; -export const StoryLinkStandAloneTransition = () => ( - - {/* ------ Link standalone -------- */} - Default Transition Presets - Standalone link -
    -
    - LinkInline link - - Default Transition Presets with external icon - - Standalone link{' '} -
    -
    - LinkInline link - - Link with Transition Preset overrides no icon - - - Standalone link - -
    -
    - - Linkinline link - - - Link with Transition Preset overrides and external icon - - - Standalone link - -
    -
    - - Linkinline link - - - Link with overrides using extend on transitionDuration - - - Standalone Link - -
    -
    - - Inline Link - -     +export const StoryLinkStylingOverrides = () => ( + + + + Inline link + + + ); -StoryLinkStandAloneTransition.storyName = 'link-standalone-transition'; -export const StoryLinkWithLogicalPropsOverrides = () => ( - - Standalone link with logical padding - - - Standalone link - - -
    -
    - Standalone link with logical margin - - - Standalone link - - -
    -
    - Inline link with logical padding - - +StoryLinkStylingOverrides.storyName = 'Styling overrides'; + +const Width = styled.div` + max-width: 50px; +`; + +export const StoryLinkOverrides = () => ( + + + Inline link - -
    -
    - Inline link with logical margin - - + + + + Inline link + + + + Inline link - - - Inline link in a parapgraph with logical margin & padding - - - Officials said that the{' '} - - Apple-Google model - {' '} - was unable to differentiate between a phone that was in someone’s hand - three metres away from a phone that was in someone’s pocket - - - - one metre away. - {' '} - “That is a really important distinction if you’re going to use the app to - determine whether or not you spend 14 days at home,” one said. - -     + + ); -StoryLinkWithLogicalPropsOverrides.storyName = - 'link-with-logical-props-overrides'; - -export const StoryLinkOutlineOverride = () => ( - - Outline overrides - - Custom Color - -
    -
    - - Custom Style - -
    -
    - - Custom Width - -
    -
    - - Custom Offset - -
    -
    -     -); -StoryLinkOutlineOverride.storyName = 'link with outline override'; - -export default { - title: 'Components/LinkInline\\LinkStandalone', - component: () => 'None', - decorators: [ - (Story: StoryType, context: {globals: {backgrounds: {value: string}}}) => ( - - - - ), - ], -}; +StoryLinkOverrides.storyName = 'Overrides';