From 973575a5a281eb9f137b88e343ff2a5da9224293 Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Thu, 16 Mar 2023 15:36:19 +0200 Subject: [PATCH 01/26] add mock files for link list --- src/core/Link/LinkList/LinkList.baseStyles.ts | 7 +++ src/core/Link/LinkList/LinkList.md | 0 src/core/Link/LinkList/LinkList.test.tsx | 0 src/core/Link/LinkList/LinkList.tsx | 52 +++++++++++++++++++ 4 files changed, 59 insertions(+) create mode 100644 src/core/Link/LinkList/LinkList.baseStyles.ts create mode 100644 src/core/Link/LinkList/LinkList.md create mode 100644 src/core/Link/LinkList/LinkList.test.tsx create mode 100644 src/core/Link/LinkList/LinkList.tsx diff --git a/src/core/Link/LinkList/LinkList.baseStyles.ts b/src/core/Link/LinkList/LinkList.baseStyles.ts new file mode 100644 index 000000000..bb9ccb85d --- /dev/null +++ b/src/core/Link/LinkList/LinkList.baseStyles.ts @@ -0,0 +1,7 @@ +import { SuomifiTheme } from '../../theme'; +import { css } from 'styled-components'; +import { baseStyles } from '../BaseLink/BaseLink.baseStyles'; + +export const LinkListStyles = (theme: SuomifiTheme) => css` + ${baseStyles(theme)} +`; diff --git a/src/core/Link/LinkList/LinkList.md b/src/core/Link/LinkList/LinkList.md new file mode 100644 index 000000000..e69de29bb diff --git a/src/core/Link/LinkList/LinkList.test.tsx b/src/core/Link/LinkList/LinkList.test.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/core/Link/LinkList/LinkList.tsx b/src/core/Link/LinkList/LinkList.tsx new file mode 100644 index 000000000..8a2ce85ba --- /dev/null +++ b/src/core/Link/LinkList/LinkList.tsx @@ -0,0 +1,52 @@ +import React, { forwardRef } from 'react'; +import { default as styled } from 'styled-components'; +import { LinkListStyles } from './LinkList.baseStyles'; +import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme'; +import { HtmlLi, HtmlUlWithRef } from '../../../reset'; +import { BaseLinkProps } from '../BaseLink/BaseLink'; +import { Icon } from '../../Icon/Icon'; + +export interface LinkListProps extends BaseLinkProps { + /** Ref is passed to the anchor element. Alternative to React `ref` attribute. */ + forwardedRef?: React.Ref; +} + +export const ListLink = (children: any, ...passProps: any) => { + + + {children} + ; +}; + +const StyledLinkList = styled( + ({ + asProp, + className, + theme, + children, + ...passProps + }: LinkListProps & SuomifiThemeProp) => ( + + {children} + + ), +)` + ${({ theme }) => LinkListStyles(theme)} +`; + +/** + * + * Used for adding a link + */ +const Link = forwardRef( + (props: LinkListProps, ref: React.Ref) => ( + + {({ suomifiTheme }) => ( + + )} + + ), +); + +Link.displayName = 'Link'; +export { Link }; From 5bad1a6353fde2ae219a7040704297e89def4216 Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Wed, 22 Mar 2023 08:57:05 +0200 Subject: [PATCH 02/26] create list link and link list components --- src/core/Link/LinkList/LinkList.baseStyles.ts | 10 ++- src/core/Link/LinkList/LinkList.tsx | 42 +++++++---- src/core/Link/ListLink/ListLink.baseStyles.ts | 22 ++++++ src/core/Link/ListLink/ListLink.md | 0 src/core/Link/ListLink/ListLink.test.tsx | 26 +++++++ src/core/Link/ListLink/ListLink.tsx | 74 +++++++++++++++++++ 6 files changed, 154 insertions(+), 20 deletions(-) create mode 100644 src/core/Link/ListLink/ListLink.baseStyles.ts create mode 100644 src/core/Link/ListLink/ListLink.md create mode 100644 src/core/Link/ListLink/ListLink.test.tsx create mode 100644 src/core/Link/ListLink/ListLink.tsx diff --git a/src/core/Link/LinkList/LinkList.baseStyles.ts b/src/core/Link/LinkList/LinkList.baseStyles.ts index bb9ccb85d..374fccf39 100644 --- a/src/core/Link/LinkList/LinkList.baseStyles.ts +++ b/src/core/Link/LinkList/LinkList.baseStyles.ts @@ -1,7 +1,9 @@ -import { SuomifiTheme } from '../../theme'; import { css } from 'styled-components'; -import { baseStyles } from '../BaseLink/BaseLink.baseStyles'; -export const LinkListStyles = (theme: SuomifiTheme) => css` - ${baseStyles(theme)} +export const LinkListStyles = () => css` + &.fi-link-list { + list-style: none; + padding: 0; + margin: 5px 0 0 0; + } `; diff --git a/src/core/Link/LinkList/LinkList.tsx b/src/core/Link/LinkList/LinkList.tsx index 8a2ce85ba..37e9c5380 100644 --- a/src/core/Link/LinkList/LinkList.tsx +++ b/src/core/Link/LinkList/LinkList.tsx @@ -1,44 +1,54 @@ import React, { forwardRef } from 'react'; import { default as styled } from 'styled-components'; +import classnames from 'classnames'; import { LinkListStyles } from './LinkList.baseStyles'; import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme'; -import { HtmlLi, HtmlUlWithRef } from '../../../reset'; +import { hLevels, HtmlDiv, HtmlUlWithRef } from '../../../reset'; import { BaseLinkProps } from '../BaseLink/BaseLink'; -import { Icon } from '../../Icon/Icon'; +import { Heading } from '../../Heading/Heading'; + +const LinkListClassName = 'fi-link-list'; export interface LinkListProps extends BaseLinkProps { /** Ref is passed to the anchor element. Alternative to React `ref` attribute. */ forwardedRef?: React.Ref; + /** Heading element content */ + headingText: string; + /** Semantic heading level. Look will always match h5 styles */ + headingLevel?: hLevels; } -export const ListLink = (children: any, ...passProps: any) => { - - - {children} - ; -}; - const StyledLinkList = styled( ({ asProp, className, theme, children, + headingText, + headingLevel, ...passProps }: LinkListProps & SuomifiThemeProp) => ( - - {children} - + + + {headingText} + + + {children} + + ), )` - ${({ theme }) => LinkListStyles(theme)} + ${() => LinkListStyles()} `; /** * * Used for adding a link */ -const Link = forwardRef( +const LinkList = forwardRef( (props: LinkListProps, ref: React.Ref) => ( {({ suomifiTheme }) => ( @@ -48,5 +58,5 @@ const Link = forwardRef( ), ); -Link.displayName = 'Link'; -export { Link }; +LinkList.displayName = 'LinkList'; +export { LinkList }; diff --git a/src/core/Link/ListLink/ListLink.baseStyles.ts b/src/core/Link/ListLink/ListLink.baseStyles.ts new file mode 100644 index 000000000..f39626098 --- /dev/null +++ b/src/core/Link/ListLink/ListLink.baseStyles.ts @@ -0,0 +1,22 @@ +import { SuomifiTheme } from '../../theme'; +import { css } from 'styled-components'; + +export const ListLinkStyles = (theme: SuomifiTheme) => css` + &.fi-list-link { + list-style: none; + & .fi-link { + font-size: 16px; + } + & .fi-list-link_icon { + margin-right: 2px; + & .fi-icon { + vertical-align: middle; + margin-left: -3px; + transform: translateY(-0.1em); + & .fi-icon-base-fill { + fill: ${theme.colors.accentBase}; + } + } + } + } +`; diff --git a/src/core/Link/ListLink/ListLink.md b/src/core/Link/ListLink/ListLink.md new file mode 100644 index 000000000..e69de29bb diff --git a/src/core/Link/ListLink/ListLink.test.tsx b/src/core/Link/ListLink/ListLink.test.tsx new file mode 100644 index 000000000..bae5416a7 --- /dev/null +++ b/src/core/Link/ListLink/ListLink.test.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { axeTest } from '../../../utils/test'; + +import { ListLink } from './ListLink'; +import { Link } from '../Link/Link'; + +const TestListLink = ( + + Linkki + +); + +test('calling render with the same component on the same container does not remount', () => { + const ListLinkRendered = render(TestListLink); + const { getByTestId, container } = ListLinkRendered; + expect(container.firstChild).toMatchSnapshot(); + expect(getByTestId('test-link').textContent).toBe('Hey this is test'); +}); + +test('should not have underline class by default', () => { + const { container } = render(TestListLink); + expect(container.firstChild).not.toHaveClass('fi-link--initial-underline'); +}); + +test('should not have basic accessibility issues', axeTest(TestListLink)); diff --git a/src/core/Link/ListLink/ListLink.tsx b/src/core/Link/ListLink/ListLink.tsx new file mode 100644 index 000000000..c02a2c76f --- /dev/null +++ b/src/core/Link/ListLink/ListLink.tsx @@ -0,0 +1,74 @@ +import React, { forwardRef, ReactElement } from 'react'; +import { default as styled } from 'styled-components'; +import classnames from 'classnames'; +import { ListLinkStyles } from './ListLink.baseStyles'; +import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme'; +import { HtmlLi, HtmlSpan } from '../../../reset'; +import { LinkProps } from '../Link/Link'; +import { ExternalLinkProps } from 'core/Link/ExternalLink/ExternalLink'; +import { RouterLinkProps } from 'core/Link/RouterLink/RouterLink'; +import { Icon } from '../../Icon/Icon'; +import { BaseIconKeys } from 'suomifi-icons'; + +const baseClassName = 'fi-list-link'; + +const listLinkClassNames = { + icon: `${baseClassName}_icon`, +}; + +export interface ListLinkProps { + /** Ref is passed to the anchor element. Alternative to React `ref` attribute. */ + forwardedRef?: React.Ref; + /** + * Custom icon to use for the list item + */ + icon?: BaseIconKeys; + /** + * The link element of the list item + */ + children: ReactElement>; + className?: string; +} + +const StyledListLink = styled( + ({ + children, + theme, + className, + icon = 'chevronRight', + ...passProps + }: ListLinkProps & SuomifiThemeProp) => ( + + + {!!icon ? ( + + ) : ( + + )} + + {children} + + ), +)` + ${({ theme }) => ListLinkStyles(theme)} +`; + +/** + * + * Used for adding a link + */ +const ListLink = forwardRef( + ( + props: ListLinkProps, + ref: React.Ref /* TODO: ref typing */, + ) => ( + + {({ suomifiTheme }) => ( + + )} + + ), +); + +ListLink.displayName = 'ListLink'; +export { ListLink }; From 47ed65e535ea7bd31583b72c570b2db1b070bac8 Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Wed, 22 Mar 2023 09:17:09 +0200 Subject: [PATCH 03/26] add exampe and index and styleguidist entries --- .styleguidist/styleguidist.sections.js | 2 + src/core/Link/Link/Link.md | 51 ++++++++++++++++++++++++++ src/core/Link/index.ts | 2 + src/index.tsx | 4 ++ 4 files changed, 59 insertions(+) diff --git a/.styleguidist/styleguidist.sections.js b/.styleguidist/styleguidist.sections.js index 6b8122314..fe078daf7 100644 --- a/.styleguidist/styleguidist.sections.js +++ b/.styleguidist/styleguidist.sections.js @@ -155,6 +155,8 @@ module.exports = { 'SkipLink/SkipLink', 'ExternalLink/ExternalLink', 'RouterLink/RouterLink', + 'ListLink/ListLink', + 'LinkList/LinkList', ]), }, { diff --git a/src/core/Link/Link/Link.md b/src/core/Link/Link/Link.md index 565a7984a..8257f734b 100644 --- a/src/core/Link/Link/Link.md +++ b/src/core/Link/Link/Link.md @@ -106,3 +106,54 @@ const r = useRef(); ; ``` + +### Link List + +```js +import { + Link, + ExternalLink, + ListLink, + RouterLink, + LinkList, + Heading +} from 'suomifi-ui-components'; +import { forwardRef, useRef } from 'react'; + +const Component = forwardRef((props, ref) => { + const { children, ...passProps } = props; + return ( + + Some component - {children} + + ); +}); + +const r = useRef(); + +<> + + + Linkki listassa + + + + External link opens to new window + + + + + Testing + + + +; +``` diff --git a/src/core/Link/index.ts b/src/core/Link/index.ts index 763972c33..24e7c8f55 100644 --- a/src/core/Link/index.ts +++ b/src/core/Link/index.ts @@ -2,3 +2,5 @@ export { Link, LinkProps } from './Link/Link'; export { ExternalLink, ExternalLinkProps } from './ExternalLink/ExternalLink'; export { SkipLink, SkipLinkProps } from './SkipLink/SkipLink'; export { RouterLink, RouterLinkProps } from './RouterLink/RouterLink'; +export { ListLink, ListLinkProps } from './ListLink/ListLink'; +export { LinkList, LinkListProps } from './LinkList/LinkList'; diff --git a/src/index.tsx b/src/index.tsx index 7b20a71e0..29b4c5033 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -67,6 +67,10 @@ export { SkipLinkProps, RouterLink, RouterLinkProps, + ListLink, + ListLinkProps, + LinkList, + LinkListProps, } from './core/Link/'; export { LanguageMenu, From 40cd7caacc5541df9a6fd4d49b55c4f96297b33d Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Fri, 24 Mar 2023 09:29:29 +0200 Subject: [PATCH 04/26] refine routerlink typing in ListLink props --- src/core/Link/ListLink/ListLink.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core/Link/ListLink/ListLink.tsx b/src/core/Link/ListLink/ListLink.tsx index c02a2c76f..c951741bc 100644 --- a/src/core/Link/ListLink/ListLink.tsx +++ b/src/core/Link/ListLink/ListLink.tsx @@ -26,7 +26,9 @@ export interface ListLinkProps { /** * The link element of the list item */ - children: ReactElement>; + children: ReactElement< + LinkProps | ExternalLinkProps | RouterLinkProps + >; className?: string; } From 9aaf7a46ab96ce79634adc5249ca9ef64b98a6f4 Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Fri, 24 Mar 2023 09:31:18 +0200 Subject: [PATCH 05/26] remove built-in heading from link list --- src/core/Link/LinkList/LinkList.tsx | 28 ++++++++-------------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/src/core/Link/LinkList/LinkList.tsx b/src/core/Link/LinkList/LinkList.tsx index 37e9c5380..55961fe20 100644 --- a/src/core/Link/LinkList/LinkList.tsx +++ b/src/core/Link/LinkList/LinkList.tsx @@ -3,19 +3,14 @@ import { default as styled } from 'styled-components'; import classnames from 'classnames'; import { LinkListStyles } from './LinkList.baseStyles'; import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme'; -import { hLevels, HtmlDiv, HtmlUlWithRef } from '../../../reset'; +import { HtmlUlWithRef } from '../../../reset'; import { BaseLinkProps } from '../BaseLink/BaseLink'; -import { Heading } from '../../Heading/Heading'; const LinkListClassName = 'fi-link-list'; export interface LinkListProps extends BaseLinkProps { /** Ref is passed to the anchor element. Alternative to React `ref` attribute. */ forwardedRef?: React.Ref; - /** Heading element content */ - headingText: string; - /** Semantic heading level. Look will always match h5 styles */ - headingLevel?: hLevels; } const StyledLinkList = styled( @@ -24,21 +19,14 @@ const StyledLinkList = styled( className, theme, children, - headingText, - headingLevel, ...passProps }: LinkListProps & SuomifiThemeProp) => ( - - - {headingText} - - - {children} - - + + {children} + ), )` ${() => LinkListStyles()} @@ -49,7 +37,7 @@ const StyledLinkList = styled( * Used for adding a link */ const LinkList = forwardRef( - (props: LinkListProps, ref: React.Ref) => ( + (props: LinkListProps, ref: React.Ref) => ( {({ suomifiTheme }) => ( From 46809435d5afe5c71bfa02311deed93d6908196d Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Mon, 27 Mar 2023 13:53:43 +0300 Subject: [PATCH 06/26] adjust styles --- src/core/Link/LinkList/LinkList.baseStyles.ts | 1 - src/core/Link/ListLink/ListLink.baseStyles.ts | 7 ++----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/core/Link/LinkList/LinkList.baseStyles.ts b/src/core/Link/LinkList/LinkList.baseStyles.ts index 374fccf39..470f879b3 100644 --- a/src/core/Link/LinkList/LinkList.baseStyles.ts +++ b/src/core/Link/LinkList/LinkList.baseStyles.ts @@ -2,7 +2,6 @@ import { css } from 'styled-components'; export const LinkListStyles = () => css` &.fi-link-list { - list-style: none; padding: 0; margin: 5px 0 0 0; } diff --git a/src/core/Link/ListLink/ListLink.baseStyles.ts b/src/core/Link/ListLink/ListLink.baseStyles.ts index f39626098..49d2a2c28 100644 --- a/src/core/Link/ListLink/ListLink.baseStyles.ts +++ b/src/core/Link/ListLink/ListLink.baseStyles.ts @@ -4,15 +4,12 @@ import { css } from 'styled-components'; export const ListLinkStyles = (theme: SuomifiTheme) => css` &.fi-list-link { list-style: none; - & .fi-link { - font-size: 16px; - } + padding: 0; & .fi-list-link_icon { margin-right: 2px; & .fi-icon { - vertical-align: middle; margin-left: -3px; - transform: translateY(-0.1em); + transform: translateY(0.1em); & .fi-icon-base-fill { fill: ${theme.colors.accentBase}; } From f671bff8385b0d7dbadd0bf2efbc88bdb30ec09f Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Mon, 27 Mar 2023 13:54:42 +0300 Subject: [PATCH 07/26] fix link list interface and tests --- src/core/Link/LinkList/LinkList.tsx | 6 +- src/core/Link/ListLink/ListLink.test.tsx | 11 +- .../__snapshots__/ListLink.test.tsx.snap | 279 ++++++++++++++++++ 3 files changed, 288 insertions(+), 8 deletions(-) create mode 100644 src/core/Link/ListLink/__snapshots__/ListLink.test.tsx.snap diff --git a/src/core/Link/LinkList/LinkList.tsx b/src/core/Link/LinkList/LinkList.tsx index 55961fe20..f668f5932 100644 --- a/src/core/Link/LinkList/LinkList.tsx +++ b/src/core/Link/LinkList/LinkList.tsx @@ -3,19 +3,17 @@ import { default as styled } from 'styled-components'; import classnames from 'classnames'; import { LinkListStyles } from './LinkList.baseStyles'; import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme'; -import { HtmlUlWithRef } from '../../../reset'; -import { BaseLinkProps } from '../BaseLink/BaseLink'; +import { HtmlUlProps, HtmlUlWithRef } from '../../../reset'; const LinkListClassName = 'fi-link-list'; -export interface LinkListProps extends BaseLinkProps { +export interface LinkListProps extends HtmlUlProps { /** Ref is passed to the anchor element. Alternative to React `ref` attribute. */ forwardedRef?: React.Ref; } const StyledLinkList = styled( ({ - asProp, className, theme, children, diff --git a/src/core/Link/ListLink/ListLink.test.tsx b/src/core/Link/ListLink/ListLink.test.tsx index bae5416a7..4751454e8 100644 --- a/src/core/Link/ListLink/ListLink.test.tsx +++ b/src/core/Link/ListLink/ListLink.test.tsx @@ -3,19 +3,22 @@ import { render } from '@testing-library/react'; import { axeTest } from '../../../utils/test'; import { ListLink } from './ListLink'; +import { LinkList } from '../LinkList/LinkList'; import { Link } from '../Link/Link'; const TestListLink = ( - - Linkki - + + + Linkki + + ); test('calling render with the same component on the same container does not remount', () => { const ListLinkRendered = render(TestListLink); const { getByTestId, container } = ListLinkRendered; expect(container.firstChild).toMatchSnapshot(); - expect(getByTestId('test-link').textContent).toBe('Hey this is test'); + expect(getByTestId('test-link').textContent).toBe('Linkki'); }); test('should not have underline class by default', () => { diff --git a/src/core/Link/ListLink/__snapshots__/ListLink.test.tsx.snap b/src/core/Link/ListLink/__snapshots__/ListLink.test.tsx.snap new file mode 100644 index 000000000..10cfbb001 --- /dev/null +++ b/src/core/Link/ListLink/__snapshots__/ListLink.test.tsx.snap @@ -0,0 +1,279 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`calling render with the same component on the same container does not remount 1`] = ` +.c6 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + background-color: transparent; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c6::before, +.c6::after { + box-sizing: border-box; +} + +.c6:hover, +.c6:active, +.c6:focus, +.c6:focus-within { + color: inherit; + -webkit-text-decoration: underline; + text-decoration: underline; + cursor: pointer; +} + +.c2 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: list-item; +} + +.c2::before, +.c2::after { + box-sizing: border-box; +} + +.c4 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: inline; + max-width: 100%; + word-wrap: normal; + word-break: normal; + white-space: normal; +} + +.c4::before, +.c4::after { + box-sizing: border-box; +} + +.c0 { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font: 100% inherit; + line-height: 1; + text-align: left; + -webkit-text-decoration: none; + text-decoration: none; + vertical-align: baseline; + color: inherit; + background: none; + cursor: inherit; + display: block; + list-style-type: decimal; + margin-top: 1em; + margin-bottom: 1em; + margin-left: 0; + margin-right: 0; + padding-left: 40px; +} + +.c0::before, +.c0::after { + box-sizing: border-box; +} + +.c5 { + vertical-align: baseline; +} + +.c5.fi-icon { + display: inline-block; +} + +.c5 .fi-icon-base-fill { + fill: currentColor; +} + +.c5 .fi-icon-base-stroke { + stroke: currentColor; +} + +.c5.fi-icon--cursor-pointer { + cursor: pointer; +} + +.c5.fi-icon--cursor-pointer * { + cursor: inherit; +} + +.c3.fi-list-link { + list-style: none; +} + +.c3.fi-list-link .fi-list-link_icon { + margin-right: 2px; +} + +.c3.fi-list-link .fi-list-link_icon .fi-icon { + margin-left: -3px; + -webkit-transform: translateY(0.1em); + -ms-transform: translateY(0.1em); + transform: translateY(0.1em); +} + +.c3.fi-list-link .fi-list-link_icon .fi-icon .fi-icon-base-fill { + fill: hsl(23,82%,51%); +} + +.c1.fi-link-list { + list-style: none; + padding: 0; + margin: 5px 0 0 0; +} + +.c7 { + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 18px; + line-height: 1.5; + font-weight: 400; +} + +.c7.fi-link { + color: hsl(212,63%,45%); + -webkit-text-decoration: none; + text-decoration: none; +} + +.c7.fi-link:hover, +.c7.fi-link:active, +.c7.fi-link:focus, +.c7.fi-link:focus-within { + color: hsl(212,63%,45%); +} + +.c7.fi-link:focus, +.c7.fi-link:focus-within { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c7.fi-link:focus { + border-radius: 2px; + box-shadow: 0 0 0 2px hsl(196,77%,44%); + outline: 0; +} + +.c7.fi-link:hover, +.c7.fi-link:active { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c7.fi-link:visited { + color: hsl(284,36%,45%); +} + +.c7.fi-link--initial-underline { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c7.fi-link--initial-underline:focus, +.c7.fi-link--initial-underline:focus-within { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c7.fi-link--initial-underline:hover, +.c7.fi-link--initial-underline:active { + -webkit-text-decoration: none; + text-decoration: none; +} + + +`; From 508fa5adb56e2ffbaeb2194f6a9a817223a32081 Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Mon, 27 Mar 2023 13:55:07 +0300 Subject: [PATCH 08/26] create standalone variant of list link --- src/core/Link/ListLink/ListLink.tsx | 43 +++++++++++++++++++---------- 1 file changed, 29 insertions(+), 14 deletions(-) diff --git a/src/core/Link/ListLink/ListLink.tsx b/src/core/Link/ListLink/ListLink.tsx index c951741bc..5a3c22886 100644 --- a/src/core/Link/ListLink/ListLink.tsx +++ b/src/core/Link/ListLink/ListLink.tsx @@ -3,7 +3,7 @@ import { default as styled } from 'styled-components'; import classnames from 'classnames'; import { ListLinkStyles } from './ListLink.baseStyles'; import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme'; -import { HtmlLi, HtmlSpan } from '../../../reset'; +import { HtmlDiv, HtmlLi, HtmlSpan } from '../../../reset'; import { LinkProps } from '../Link/Link'; import { ExternalLinkProps } from 'core/Link/ExternalLink/ExternalLink'; import { RouterLinkProps } from 'core/Link/RouterLink/RouterLink'; @@ -30,6 +30,8 @@ export interface ListLinkProps { LinkProps | ExternalLinkProps | RouterLinkProps >; className?: string; + /** Use for list style links outside of a list element. Changes outermost element from `li` to `div` */ + standalone?: boolean; } const StyledListLink = styled( @@ -37,20 +39,33 @@ const StyledListLink = styled( children, theme, className, - icon = 'chevronRight', + standalone = false, + icon, ...passProps - }: ListLinkProps & SuomifiThemeProp) => ( - - - {!!icon ? ( - - ) : ( - - )} - - {children} - - ), + }: ListLinkProps & SuomifiThemeProp) => + standalone ? ( + + + {!!icon ? ( + + ) : ( + + )} + + {children} + + ) : ( + + + {!!icon ? ( + + ) : ( + + )} + + {children} + + ), )` ${({ theme }) => ListLinkStyles(theme)} `; From a9a4c27d2eec00806ba467386513a96779e0e1b1 Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Mon, 27 Mar 2023 13:55:49 +0300 Subject: [PATCH 09/26] add standalone variant to component example --- src/core/Link/Link/Link.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/core/Link/Link/Link.md b/src/core/Link/Link/Link.md index 8257f734b..84fc236fe 100644 --- a/src/core/Link/Link/Link.md +++ b/src/core/Link/Link/Link.md @@ -131,8 +131,14 @@ const Component = forwardRef((props, ref) => { const r = useRef(); -<> - +
+ + Erillinen listalinkki + + + Hyödyllisiä linkkejä + + Linkki listassa @@ -155,5 +161,5 @@ const r = useRef(); -; +
; ``` From dd499513571cf31e25c78a3ddf0a548b13fad064 Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Wed, 12 Apr 2023 15:52:57 +0300 Subject: [PATCH 10/26] rename ListLink to LinkListItem and move under correct folder --- .../LinkListItem.baseStyles.ts} | 9 +- .../LinkListItem.md} | 0 .../LinkListItem.test.tsx} | 25 +- src/core/Link/LinkListItem/LinkListItem.tsx | 80 +++++ src/core/Link/ListLink/ListLink.tsx | 91 ------ .../__snapshots__/ListLink.test.tsx.snap | 279 ------------------ src/core/Link/index.ts | 2 +- src/index.tsx | 4 +- 8 files changed, 103 insertions(+), 387 deletions(-) rename src/core/Link/{ListLink/ListLink.baseStyles.ts => LinkListItem/LinkListItem.baseStyles.ts} (61%) rename src/core/Link/{ListLink/ListLink.md => LinkListItem/LinkListItem.md} (100%) rename src/core/Link/{ListLink/ListLink.test.tsx => LinkListItem/LinkListItem.test.tsx} (58%) create mode 100644 src/core/Link/LinkListItem/LinkListItem.tsx delete mode 100644 src/core/Link/ListLink/ListLink.tsx delete mode 100644 src/core/Link/ListLink/__snapshots__/ListLink.test.tsx.snap diff --git a/src/core/Link/ListLink/ListLink.baseStyles.ts b/src/core/Link/LinkListItem/LinkListItem.baseStyles.ts similarity index 61% rename from src/core/Link/ListLink/ListLink.baseStyles.ts rename to src/core/Link/LinkListItem/LinkListItem.baseStyles.ts index 49d2a2c28..76a3ad5b2 100644 --- a/src/core/Link/ListLink/ListLink.baseStyles.ts +++ b/src/core/Link/LinkListItem/LinkListItem.baseStyles.ts @@ -1,14 +1,17 @@ import { SuomifiTheme } from '../../theme'; import { css } from 'styled-components'; +import { font } from '../../theme/reset'; -export const ListLinkStyles = (theme: SuomifiTheme) => css` - &.fi-list-link { +export const LinkListItemStyles = (theme: SuomifiTheme) => css` + ${font(theme)('bodyText')} + &.fi-link-list-item { list-style: none; padding: 0; - & .fi-list-link_icon { + & .fi-link-list-item_icon { margin-right: 2px; & .fi-icon { margin-left: -3px; + font-size: 16px; transform: translateY(0.1em); & .fi-icon-base-fill { fill: ${theme.colors.accentBase}; diff --git a/src/core/Link/ListLink/ListLink.md b/src/core/Link/LinkListItem/LinkListItem.md similarity index 100% rename from src/core/Link/ListLink/ListLink.md rename to src/core/Link/LinkListItem/LinkListItem.md diff --git a/src/core/Link/ListLink/ListLink.test.tsx b/src/core/Link/LinkListItem/LinkListItem.test.tsx similarity index 58% rename from src/core/Link/ListLink/ListLink.test.tsx rename to src/core/Link/LinkListItem/LinkListItem.test.tsx index 4751454e8..6d9eb854c 100644 --- a/src/core/Link/ListLink/ListLink.test.tsx +++ b/src/core/Link/LinkListItem/LinkListItem.test.tsx @@ -2,28 +2,31 @@ import React from 'react'; import { render } from '@testing-library/react'; import { axeTest } from '../../../utils/test'; -import { ListLink } from './ListLink'; +import { LinkListItem } from './LinkListItem'; import { LinkList } from '../LinkList/LinkList'; import { Link } from '../Link/Link'; -const TestListLink = ( - - - Linkki - - +const TestLinkListItem = ( + <> +

Heading

+ + + Linkki + + + ); test('calling render with the same component on the same container does not remount', () => { - const ListLinkRendered = render(TestListLink); - const { getByTestId, container } = ListLinkRendered; + const LinkListItemRendered = render(TestLinkListItem); + const { getByTestId, container } = LinkListItemRendered; expect(container.firstChild).toMatchSnapshot(); expect(getByTestId('test-link').textContent).toBe('Linkki'); }); test('should not have underline class by default', () => { - const { container } = render(TestListLink); + const { container } = render(TestLinkListItem); expect(container.firstChild).not.toHaveClass('fi-link--initial-underline'); }); -test('should not have basic accessibility issues', axeTest(TestListLink)); +test('should not have basic accessibility issues', axeTest(TestLinkListItem)); diff --git a/src/core/Link/LinkListItem/LinkListItem.tsx b/src/core/Link/LinkListItem/LinkListItem.tsx new file mode 100644 index 000000000..36ea089a2 --- /dev/null +++ b/src/core/Link/LinkListItem/LinkListItem.tsx @@ -0,0 +1,80 @@ +import React, { forwardRef, ReactElement } from 'react'; +import { default as styled } from 'styled-components'; +import classnames from 'classnames'; +import { LinkListItemStyles } from './LinkListItem.baseStyles'; +import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme'; +import { HtmlLi, HtmlLiProps, HtmlSpan } from '../../../reset'; +import { LinkProps } from '../Link/Link'; +import { ExternalLinkProps } from 'core/Link/ExternalLink/ExternalLink'; +import { RouterLinkProps } from 'core/Link/RouterLink/RouterLink'; +import { Icon } from '../../Icon/Icon'; +import { BaseIconKeys } from 'suomifi-icons'; + +const baseClassName = 'fi-link-list-item'; + +const listLinkClassNames = { + icon: `${baseClassName}_icon`, +}; + +export interface LinkListItemProps extends Omit { + /** Ref is passed to the anchor element. Alternative to React `ref` attribute. */ + forwardedRef?: React.Ref; + /** + * Custom icon to use for the list item + */ + icon?: BaseIconKeys; + /** + * The link element of the list item + */ + children: ReactElement< + LinkProps | ExternalLinkProps | RouterLinkProps + >; + /** + * Custom className for list item + */ + className?: string; +} + +const StyledLinkListItem = styled( + ({ + children, + theme, + className, + icon, + ...passProps + }: LinkListItemProps & SuomifiThemeProp) => ( + + + {!!icon ? ( + + ) : ( + + )} + + {children} + + ), +)` + ${({ theme }) => LinkListItemStyles(theme)} +`; + +/** + * + * Used for adding a link + */ +const LinkListItem = forwardRef( + (props: LinkListItemProps, ref: React.Ref) => ( + + {({ suomifiTheme }) => ( + + )} + + ), +); + +LinkListItem.displayName = 'LinkListItem'; +export { LinkListItem }; diff --git a/src/core/Link/ListLink/ListLink.tsx b/src/core/Link/ListLink/ListLink.tsx deleted file mode 100644 index 5a3c22886..000000000 --- a/src/core/Link/ListLink/ListLink.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import React, { forwardRef, ReactElement } from 'react'; -import { default as styled } from 'styled-components'; -import classnames from 'classnames'; -import { ListLinkStyles } from './ListLink.baseStyles'; -import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme'; -import { HtmlDiv, HtmlLi, HtmlSpan } from '../../../reset'; -import { LinkProps } from '../Link/Link'; -import { ExternalLinkProps } from 'core/Link/ExternalLink/ExternalLink'; -import { RouterLinkProps } from 'core/Link/RouterLink/RouterLink'; -import { Icon } from '../../Icon/Icon'; -import { BaseIconKeys } from 'suomifi-icons'; - -const baseClassName = 'fi-list-link'; - -const listLinkClassNames = { - icon: `${baseClassName}_icon`, -}; - -export interface ListLinkProps { - /** Ref is passed to the anchor element. Alternative to React `ref` attribute. */ - forwardedRef?: React.Ref; - /** - * Custom icon to use for the list item - */ - icon?: BaseIconKeys; - /** - * The link element of the list item - */ - children: ReactElement< - LinkProps | ExternalLinkProps | RouterLinkProps - >; - className?: string; - /** Use for list style links outside of a list element. Changes outermost element from `li` to `div` */ - standalone?: boolean; -} - -const StyledListLink = styled( - ({ - children, - theme, - className, - standalone = false, - icon, - ...passProps - }: ListLinkProps & SuomifiThemeProp) => - standalone ? ( - - - {!!icon ? ( - - ) : ( - - )} - - {children} - - ) : ( - - - {!!icon ? ( - - ) : ( - - )} - - {children} - - ), -)` - ${({ theme }) => ListLinkStyles(theme)} -`; - -/** - * - * Used for adding a link - */ -const ListLink = forwardRef( - ( - props: ListLinkProps, - ref: React.Ref /* TODO: ref typing */, - ) => ( - - {({ suomifiTheme }) => ( - - )} - - ), -); - -ListLink.displayName = 'ListLink'; -export { ListLink }; diff --git a/src/core/Link/ListLink/__snapshots__/ListLink.test.tsx.snap b/src/core/Link/ListLink/__snapshots__/ListLink.test.tsx.snap deleted file mode 100644 index 10cfbb001..000000000 --- a/src/core/Link/ListLink/__snapshots__/ListLink.test.tsx.snap +++ /dev/null @@ -1,279 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`calling render with the same component on the same container does not remount 1`] = ` -.c6 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - background-color: transparent; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline; - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c6::before, -.c6::after { - box-sizing: border-box; -} - -.c6:hover, -.c6:active, -.c6:focus, -.c6:focus-within { - color: inherit; - -webkit-text-decoration: underline; - text-decoration: underline; - cursor: pointer; -} - -.c2 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: list-item; -} - -.c2::before, -.c2::after { - box-sizing: border-box; -} - -.c4 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: inline; - max-width: 100%; - word-wrap: normal; - word-break: normal; - white-space: normal; -} - -.c4::before, -.c4::after { - box-sizing: border-box; -} - -.c0 { - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - padding: 0; - border: 0; - box-sizing: border-box; - font: 100% inherit; - line-height: 1; - text-align: left; - -webkit-text-decoration: none; - text-decoration: none; - vertical-align: baseline; - color: inherit; - background: none; - cursor: inherit; - display: block; - list-style-type: decimal; - margin-top: 1em; - margin-bottom: 1em; - margin-left: 0; - margin-right: 0; - padding-left: 40px; -} - -.c0::before, -.c0::after { - box-sizing: border-box; -} - -.c5 { - vertical-align: baseline; -} - -.c5.fi-icon { - display: inline-block; -} - -.c5 .fi-icon-base-fill { - fill: currentColor; -} - -.c5 .fi-icon-base-stroke { - stroke: currentColor; -} - -.c5.fi-icon--cursor-pointer { - cursor: pointer; -} - -.c5.fi-icon--cursor-pointer * { - cursor: inherit; -} - -.c3.fi-list-link { - list-style: none; -} - -.c3.fi-list-link .fi-list-link_icon { - margin-right: 2px; -} - -.c3.fi-list-link .fi-list-link_icon .fi-icon { - margin-left: -3px; - -webkit-transform: translateY(0.1em); - -ms-transform: translateY(0.1em); - transform: translateY(0.1em); -} - -.c3.fi-list-link .fi-list-link_icon .fi-icon .fi-icon-base-fill { - fill: hsl(23,82%,51%); -} - -.c1.fi-link-list { - list-style: none; - padding: 0; - margin: 5px 0 0 0; -} - -.c7 { - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - -webkit-text-decoration: none; - text-decoration: none; - word-break: break-word; - overflow-wrap: break-word; - -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; - font-size: 18px; - line-height: 1.5; - font-weight: 400; -} - -.c7.fi-link { - color: hsl(212,63%,45%); - -webkit-text-decoration: none; - text-decoration: none; -} - -.c7.fi-link:hover, -.c7.fi-link:active, -.c7.fi-link:focus, -.c7.fi-link:focus-within { - color: hsl(212,63%,45%); -} - -.c7.fi-link:focus, -.c7.fi-link:focus-within { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c7.fi-link:focus { - border-radius: 2px; - box-shadow: 0 0 0 2px hsl(196,77%,44%); - outline: 0; -} - -.c7.fi-link:hover, -.c7.fi-link:active { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c7.fi-link:visited { - color: hsl(284,36%,45%); -} - -.c7.fi-link--initial-underline { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c7.fi-link--initial-underline:focus, -.c7.fi-link--initial-underline:focus-within { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c7.fi-link--initial-underline:hover, -.c7.fi-link--initial-underline:active { - -webkit-text-decoration: none; - text-decoration: none; -} - - -`; diff --git a/src/core/Link/index.ts b/src/core/Link/index.ts index 24e7c8f55..542050132 100644 --- a/src/core/Link/index.ts +++ b/src/core/Link/index.ts @@ -2,5 +2,5 @@ export { Link, LinkProps } from './Link/Link'; export { ExternalLink, ExternalLinkProps } from './ExternalLink/ExternalLink'; export { SkipLink, SkipLinkProps } from './SkipLink/SkipLink'; export { RouterLink, RouterLinkProps } from './RouterLink/RouterLink'; -export { ListLink, ListLinkProps } from './ListLink/ListLink'; +export { LinkListItem, LinkListItemProps } from './LinkListItem/LinkListItem'; export { LinkList, LinkListProps } from './LinkList/LinkList'; diff --git a/src/index.tsx b/src/index.tsx index 29b4c5033..61a885577 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -67,8 +67,8 @@ export { SkipLinkProps, RouterLink, RouterLinkProps, - ListLink, - ListLinkProps, + LinkListItem, + LinkListItemProps, LinkList, LinkListProps, } from './core/Link/'; From 5d53b733fe363ac70d63125987bd43efec6e160d Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Wed, 12 Apr 2023 15:53:47 +0300 Subject: [PATCH 11/26] clean up styling and examples across links --- src/core/Link/BaseLink/BaseLink.baseStyles.ts | 12 ++++ src/core/Link/BaseLink/BaseLink.tsx | 6 ++ .../ExternalLink/ExternalLink.baseStyles.ts | 1 + .../Link/ExternalLink/ExternalLink.test.tsx | 2 +- src/core/Link/ExternalLink/ExternalLink.tsx | 16 ++++- src/core/Link/Link/Link.md | 72 ++++++++++--------- src/core/Link/Link/Link.tsx | 17 ++++- src/core/Link/LinkList/LinkList.tsx | 6 +- .../Link/RouterLink/RouterLink.baseStyles.ts | 41 +---------- src/core/Link/RouterLink/RouterLink.tsx | 10 ++- 10 files changed, 105 insertions(+), 78 deletions(-) diff --git a/src/core/Link/BaseLink/BaseLink.baseStyles.ts b/src/core/Link/BaseLink/BaseLink.baseStyles.ts index 53bf4da72..494418b12 100644 --- a/src/core/Link/BaseLink/BaseLink.baseStyles.ts +++ b/src/core/Link/BaseLink/BaseLink.baseStyles.ts @@ -42,5 +42,17 @@ export const baseStyles = (theme: SuomifiTheme) => css` text-decoration: none; } } + &.fi-link--accent { + text-decoration: none; + & .fi-link--accent_icon { + font-size: 16px; + margin-left: -3px; + margin-right: 2px; + transform: translateY(0.1em); + } + } + &.fi-link--small { + ${font(theme)('bodyTextSmall')} + } } `; diff --git a/src/core/Link/BaseLink/BaseLink.tsx b/src/core/Link/BaseLink/BaseLink.tsx index 4ccf684b0..648a45f75 100644 --- a/src/core/Link/BaseLink/BaseLink.tsx +++ b/src/core/Link/BaseLink/BaseLink.tsx @@ -6,6 +6,9 @@ export const baseClassName = 'fi-link'; export const linkClassNames = { linkUnderline: `${baseClassName}--initial-underline`, + accent: `${baseClassName}--accent`, + accentIcon: `${baseClassName}--accent_icon`, + small: `${baseClassName}--small`, }; export type UnderlineVariant = 'initial' | 'hover'; @@ -29,5 +32,8 @@ export interface BaseLinkProps extends HtmlAProps { * @default hover */ underline?: UnderlineVariant; + /** Style variant for the link */ + variant?: 'default' | 'accent'; asProp?: asPropType; + smallScreen?: boolean; } diff --git a/src/core/Link/ExternalLink/ExternalLink.baseStyles.ts b/src/core/Link/ExternalLink/ExternalLink.baseStyles.ts index 2a3a8b470..8355198e2 100644 --- a/src/core/Link/ExternalLink/ExternalLink.baseStyles.ts +++ b/src/core/Link/ExternalLink/ExternalLink.baseStyles.ts @@ -5,6 +5,7 @@ import { baseStyles } from '../BaseLink/BaseLink.baseStyles'; export const ExternalLinkStyles = (theme: SuomifiTheme) => css` ${baseStyles(theme)} & .fi-link_icon { + margin: 0; padding-left: ${theme.spacing.insetXs}; font-size: 16px; box-sizing: content-box; diff --git a/src/core/Link/ExternalLink/ExternalLink.test.tsx b/src/core/Link/ExternalLink/ExternalLink.test.tsx index 31cf78f3b..b41294eb3 100644 --- a/src/core/Link/ExternalLink/ExternalLink.test.tsx +++ b/src/core/Link/ExternalLink/ExternalLink.test.tsx @@ -14,7 +14,7 @@ const TestExternalLink = ( ); -test('calling render with the same component on the same container does not remount', () => { +test('matches snapshot', () => { const LinkRendered = render(TestExternalLink); const { getByTestId, container } = LinkRendered; expect(container.firstChild).toMatchSnapshot(); diff --git a/src/core/Link/ExternalLink/ExternalLink.tsx b/src/core/Link/ExternalLink/ExternalLink.tsx index f831f2be2..a41626c19 100644 --- a/src/core/Link/ExternalLink/ExternalLink.tsx +++ b/src/core/Link/ExternalLink/ExternalLink.tsx @@ -38,14 +38,17 @@ interface InternalExternalLinkProps extends BaseLinkProps { export type ExternalLinkProps = newWindowProps & InternalExternalLinkProps; -class BaseExternalLink extends Component { +class BaseExternalLink extends Component { render() { const { asProp, children, className, + variant = 'default', toNewWindow = true, labelNewWindow, + smallScreen, + theme, hideIcon, underline = 'hover', ...passProps @@ -55,11 +58,20 @@ class BaseExternalLink extends Component { {...passProps} className={classnames(baseClassName, className, externalClassName, { [linkClassNames.linkUnderline]: underline === 'initial', + [linkClassNames.accent]: variant === 'accent', + [linkClassNames.small]: smallScreen, })} target={!!toNewWindow ? '_blank' : undefined} rel={!!toNewWindow ? 'noopener' : undefined} as={asProp} > + {variant === 'accent' && ( + + )} {children} {toNewWindow && {labelNewWindow}} {!hideIcon && } @@ -71,7 +83,7 @@ class BaseExternalLink extends Component { const StyledExternalLink = styled( (props: ExternalLinkProps & SuomifiThemeProp) => { const { theme, ...passProps } = props; - return ; + return ; }, )` ${({ theme }) => ExternalLinkStyles(theme)} diff --git a/src/core/Link/Link/Link.md b/src/core/Link/Link/Link.md index 84fc236fe..60ab230d7 100644 --- a/src/core/Link/Link/Link.md +++ b/src/core/Link/Link/Link.md @@ -1,25 +1,36 @@ ```js import { Link, Paragraph } from 'suomifi-ui-components'; - - - - Not visited link - {' '} - - Visited link - {' '} - - Link without underline - -; +<> + + + Not visited link + {' '} + + Visited link + {' '} + + Link without underline + + + + + Not visited link + + +; ``` ### Skip link @@ -113,7 +124,7 @@ const r = useRef(); import { Link, ExternalLink, - ListLink, + LinkListItem, RouterLink, LinkList, Heading @@ -132,25 +143,22 @@ const Component = forwardRef((props, ref) => { const r = useRef();
- - Erillinen listalinkki - - + Hyödyllisiä linkkejä - - + + Linkki listassa - - + + External link opens to new window - - + + Testing - +
; ``` diff --git a/src/core/Link/Link/Link.tsx b/src/core/Link/Link/Link.tsx index d4a92ffee..39bba8d28 100644 --- a/src/core/Link/Link/Link.tsx +++ b/src/core/Link/Link/Link.tsx @@ -4,6 +4,7 @@ import classnames from 'classnames'; import { LinkStyles } from '../Link/Link.baseStyles'; import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme'; import { HtmlA } from '../../../reset'; +import { Icon } from '../../Icon/Icon'; import { BaseLinkProps, baseClassName, @@ -19,7 +20,10 @@ const StyledLink = styled( ({ asProp, className, + smallScreen, theme, + variant = 'default', + children, underline = 'hover', ...passProps }: LinkProps & SuomifiThemeProp) => ( @@ -27,9 +31,20 @@ const StyledLink = styled( {...passProps} className={classnames(baseClassName, className, { [linkClassNames.linkUnderline]: underline === 'initial', + [linkClassNames.accent]: variant === 'accent', + [linkClassNames.small]: smallScreen, })} as={asProp} - /> + > + {variant === 'accent' && ( + + )} + {children} + ), )` ${({ theme }) => LinkStyles(theme)} diff --git a/src/core/Link/LinkList/LinkList.tsx b/src/core/Link/LinkList/LinkList.tsx index f668f5932..d0569cf2e 100644 --- a/src/core/Link/LinkList/LinkList.tsx +++ b/src/core/Link/LinkList/LinkList.tsx @@ -8,8 +8,10 @@ import { HtmlUlProps, HtmlUlWithRef } from '../../../reset'; const LinkListClassName = 'fi-link-list'; export interface LinkListProps extends HtmlUlProps { - /** Ref is passed to the anchor element. Alternative to React `ref` attribute. */ - forwardedRef?: React.Ref; + /** Ref is passed to the list element. Alternative to React `ref` attribute. */ + forwardedRef?: React.Ref; + /** Id of the heading or label of the list */ + ariaDescribedBy: string; } const StyledLinkList = styled( diff --git a/src/core/Link/RouterLink/RouterLink.baseStyles.ts b/src/core/Link/RouterLink/RouterLink.baseStyles.ts index 7887e7bbb..eb5030ef9 100644 --- a/src/core/Link/RouterLink/RouterLink.baseStyles.ts +++ b/src/core/Link/RouterLink/RouterLink.baseStyles.ts @@ -1,46 +1,9 @@ import { css } from 'styled-components'; import { SuomifiTheme } from '../../theme'; import { font } from '../../theme/reset'; -import { allStates } from '../../../utils/css'; +import { baseStyles } from '../BaseLink/BaseLink.baseStyles'; export const RouterLinkStyles = (theme: SuomifiTheme) => css` + ${baseStyles(theme)} ${font(theme)('bodyText')} - - &.fi-link--router { - ${allStates(`color: ${theme.colors.highlightBase};`)} - color: ${theme.colors.highlightBase}; - text-decoration: none; - - &:focus, - &:focus-within { - text-decoration: none; - } - - &:focus { - ${theme.focuses.boxShadowFocus} - ${theme.focuses.highContrastFocus} /* For high contrast mode */ - } - - &:hover, - &:active { - text-decoration: underline; - } - &:visited { - color: ${theme.colors.accentTertiaryDark1}; - } - } - - &.fi-link--initial-underline { - text-decoration: underline; - - &:focus, - &:focus-within { - text-decoration: underline; - } - - &:hover, - &:active { - text-decoration: none; - } - } `; diff --git a/src/core/Link/RouterLink/RouterLink.tsx b/src/core/Link/RouterLink/RouterLink.tsx index 3a1e4b1d0..437fbdcb7 100644 --- a/src/core/Link/RouterLink/RouterLink.tsx +++ b/src/core/Link/RouterLink/RouterLink.tsx @@ -3,6 +3,7 @@ import React, { forwardRef, ReactNode } from 'react'; import { default as styled } from 'styled-components'; import { RouterLinkStyles } from './RouterLink.baseStyles'; import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme'; +import { Icon } from '../../Icon/Icon'; import { baseClassName, linkClassNames, @@ -112,6 +113,8 @@ const PolymorphicLink = ( asComponent, children, className, + smallScreen, + variant, theme, underline = 'hover', forwardedRef, @@ -119,14 +122,19 @@ const PolymorphicLink = ( } = props; const Component = asComponent || HtmlA; - const classNames = classnames(routerLinkClassName, className, { + const classNames = classnames(baseClassName, routerLinkClassName, className, { [linkClassNames.linkUnderline]: underline === 'initial', + [linkClassNames.accent]: variant === 'accent', + [linkClassNames.small]: smallScreen, }); // If asComponent is included, we assume it can take a normal ref-prop if (!!asComponent) { return ( + {variant === 'accent' && ( + + )} {children} ); From f7d2814e839317b0800589ce363d42c88f147c60 Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Thu, 13 Apr 2023 13:13:38 +0300 Subject: [PATCH 12/26] add smallScreen option to link list --- src/core/Link/LinkList/LinkList.baseStyles.ts | 12 +++++++++++- src/core/Link/LinkList/LinkList.tsx | 12 ++++++++++-- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/core/Link/LinkList/LinkList.baseStyles.ts b/src/core/Link/LinkList/LinkList.baseStyles.ts index 470f879b3..9ef4d9a2b 100644 --- a/src/core/Link/LinkList/LinkList.baseStyles.ts +++ b/src/core/Link/LinkList/LinkList.baseStyles.ts @@ -1,8 +1,18 @@ +import { SuomifiTheme } from 'core/theme'; import { css } from 'styled-components'; +import { font } from '../../theme/reset'; -export const LinkListStyles = () => css` +export const LinkListStyles = (theme: SuomifiTheme) => css` &.fi-link-list { padding: 0; margin: 5px 0 0 0; } + &.fi-link-list--small { + & .fi-link-list-item_icon .fi-icon { + transform: translateY(0.15em); + } + & .fi-link { + ${font(theme)('bodyTextSmall')} + } + } `; diff --git a/src/core/Link/LinkList/LinkList.tsx b/src/core/Link/LinkList/LinkList.tsx index d0569cf2e..bae218365 100644 --- a/src/core/Link/LinkList/LinkList.tsx +++ b/src/core/Link/LinkList/LinkList.tsx @@ -6,12 +6,17 @@ import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme'; import { HtmlUlProps, HtmlUlWithRef } from '../../../reset'; const LinkListClassName = 'fi-link-list'; +const SmallScreenClassName = 'fi-link-list--small'; export interface LinkListProps extends HtmlUlProps { /** Ref is passed to the list element. Alternative to React `ref` attribute. */ forwardedRef?: React.Ref; /** Id of the heading or label of the list */ ariaDescribedBy: string; + /** + * Set 16px font size for the list elements + */ + smallScreen?: boolean; } const StyledLinkList = styled( @@ -19,17 +24,20 @@ const StyledLinkList = styled( className, theme, children, + smallScreen, ...passProps }: LinkListProps & SuomifiThemeProp) => ( {children} ), )` - ${() => LinkListStyles()} + ${({ theme }) => LinkListStyles(theme)} `; /** From 5ca143e146972311e7b57d2aa32d3b19c18eefe7 Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Thu, 13 Apr 2023 13:14:41 +0300 Subject: [PATCH 13/26] add smallScreen option to links and update examples --- src/core/Link/BaseLink/BaseLink.baseStyles.ts | 11 ++- src/core/Link/Link/Link.md | 97 +++++++++---------- 2 files changed, 58 insertions(+), 50 deletions(-) diff --git a/src/core/Link/BaseLink/BaseLink.baseStyles.ts b/src/core/Link/BaseLink/BaseLink.baseStyles.ts index 494418b12..dfa6ea231 100644 --- a/src/core/Link/BaseLink/BaseLink.baseStyles.ts +++ b/src/core/Link/BaseLink/BaseLink.baseStyles.ts @@ -52,7 +52,16 @@ export const baseStyles = (theme: SuomifiTheme) => css` } } &.fi-link--small { - ${font(theme)('bodyTextSmall')} + font-size: 16px; + &.fi-link--accent { + text-decoration: none; + & .fi-link--accent_icon { + font-size: 16px; + margin-left: -3px; + margin-right: 2px; + transform: translateY(0.15em); + } + } } } `; diff --git a/src/core/Link/Link/Link.md b/src/core/Link/Link/Link.md index 60ab230d7..840ff5831 100644 --- a/src/core/Link/Link/Link.md +++ b/src/core/Link/Link/Link.md @@ -1,35 +1,38 @@ ```js import { Link, Paragraph } from 'suomifi-ui-components'; <> - - - Not visited link - {' '} - - Visited link - {' '} - - Link without underline - - - - - Not visited link - - + + Not visited link + + + + Visited link + + + + Link without underline + + + + Arrow link + + + + Small text arrow link + ; ``` @@ -49,9 +52,7 @@ import { SkipLink } from 'suomifi-ui-components'; style={{ height: '80px', width: '210px', - borderStyle: 'dashed', - borderColor: '#000', - borderWidth: '1px' + border: '1px dashed #000' }} > Skip to main content @@ -77,6 +78,13 @@ import { ExternalLink } from 'suomifi-ui-components'; > External link in same window + + Accented external link + ; ``` @@ -120,6 +128,10 @@ const r = useRef(); ### Link List +A styled list for providing a list of links. + +Make sure you use a descriptive heading or a label with the list and link it to the list via the `ariaDescribedBy` prop. Make sure you use the right heading level semantically and use the `as` prop for changing the styling if needed. + ```js import { Link, @@ -129,41 +141,28 @@ import { LinkList, Heading } from 'suomifi-ui-components'; -import { forwardRef, useRef } from 'react'; - -const Component = forwardRef((props, ref) => { - const { children, ...passProps } = props; - return ( - - Some component - {children} - - ); -}); - -const r = useRef();
- Hyödyllisiä linkkejä + Useful resources - Linkki listassa + A useful link - External link opens to new window + A useful resource on a third party site Testing From 7ec8b031d5ed69a8e584d7fe54a79c2012cbf66f Mon Sep 17 00:00:00 2001 From: Joonas Kaski Date: Fri, 14 Apr 2023 10:15:19 +0300 Subject: [PATCH 14/26] adjust styles and tests and update snapshots --- .../__snapshots__/Breadcrumb.test.tsx.snap | 57 ++- src/core/Link/BaseLink/BaseLink.baseStyles.ts | 3 - .../__snapshots__/ExternalLink.test.tsx.snap | 32 +- .../Link/__snapshots__/Link.test.tsx.snap | 29 ++ src/core/Link/LinkList/LinkList.test.tsx | 36 ++ src/core/Link/LinkList/LinkList.tsx | 2 + .../__snapshots__/LinkList.test.tsx.snap | 388 ++++++++++++++++++ .../Link/LinkListItem/LinkListItem.test.tsx | 32 -- .../__snapshots__/RouterLink.test.tsx.snap | 66 ++- .../__snapshots__/SkipLink.test.tsx.snap | 58 +++ .../ServiceNavigation.test.tsx.snap | 106 ++++- .../SideNavigation.test.tsx.snap | 110 ++++- .../WizardNavigation.test.tsx.snap | 78 +++- 13 files changed, 881 insertions(+), 116 deletions(-) create mode 100644 src/core/Link/LinkList/__snapshots__/LinkList.test.tsx.snap delete mode 100644 src/core/Link/LinkListItem/LinkListItem.test.tsx diff --git a/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index 31edf19d9..f3fe03f2c 100644 --- a/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -182,6 +182,30 @@ exports[`calling render with the same component on the same container does not r float: left; } +.c8 { + vertical-align: baseline; +} + +.c8.fi-icon { + display: inline-block; +} + +.c8 .fi-icon-base-fill { + fill: currentColor; +} + +.c8 .fi-icon-base-stroke { + stroke: currentColor; +} + +.c8.fi-icon--cursor-pointer { + cursor: pointer; +} + +.c8.fi-icon--cursor-pointer * { + cursor: inherit; +} + .c7 { -webkit-letter-spacing: 0; -moz-letter-spacing: 0; @@ -251,28 +275,33 @@ exports[`calling render with the same component on the same container does not r text-decoration: none; } -.c8 { - vertical-align: baseline; -} - -.c8.fi-icon { - display: inline-block; +.c7.fi-link.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; } -.c8 .fi-icon-base-fill { - fill: currentColor; +.c7.fi-link.fi-link--accent .fi-link--accent_icon { + font-size: 16px; + margin-left: -3px; + margin-right: 2px; + -webkit-transform: translateY(0.1em); + -ms-transform: translateY(0.1em); + transform: translateY(0.1em); } -.c8 .fi-icon-base-stroke { - stroke: currentColor; +.c7.fi-link.fi-link--small { + font-size: 16px; } -.c8.fi-icon--cursor-pointer { - cursor: pointer; +.c7.fi-link.fi-link--small.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; } -.c8.fi-icon--cursor-pointer * { - cursor: inherit; +.c7.fi-link.fi-link--small.fi-link--accent .fi-link--accent_icon { + -webkit-transform: translateY(0.15em); + -ms-transform: translateY(0.15em); + transform: translateY(0.15em); } .c5 { diff --git a/src/core/Link/BaseLink/BaseLink.baseStyles.ts b/src/core/Link/BaseLink/BaseLink.baseStyles.ts index dfa6ea231..d1cc30575 100644 --- a/src/core/Link/BaseLink/BaseLink.baseStyles.ts +++ b/src/core/Link/BaseLink/BaseLink.baseStyles.ts @@ -56,9 +56,6 @@ export const baseStyles = (theme: SuomifiTheme) => css` &.fi-link--accent { text-decoration: none; & .fi-link--accent_icon { - font-size: 16px; - margin-left: -3px; - margin-right: 2px; transform: translateY(0.15em); } } diff --git a/src/core/Link/ExternalLink/__snapshots__/ExternalLink.test.tsx.snap b/src/core/Link/ExternalLink/__snapshots__/ExternalLink.test.tsx.snap index 439fee0e9..a2e625ed1 100644 --- a/src/core/Link/ExternalLink/__snapshots__/ExternalLink.test.tsx.snap +++ b/src/core/Link/ExternalLink/__snapshots__/ExternalLink.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`calling render with the same component on the same container does not remount 1`] = ` +exports[`matches snapshot 1`] = ` .c4 { vertical-align: baseline; } @@ -173,7 +173,37 @@ exports[`calling render with the same component on the same container does not r text-decoration: none; } +.c1.fi-link.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c1.fi-link.fi-link--accent .fi-link--accent_icon { + font-size: 16px; + margin-left: -3px; + margin-right: 2px; + -webkit-transform: translateY(0.1em); + -ms-transform: translateY(0.1em); + transform: translateY(0.1em); +} + +.c1.fi-link.fi-link--small { + font-size: 16px; +} + +.c1.fi-link.fi-link--small.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c1.fi-link.fi-link--small.fi-link--accent .fi-link--accent_icon { + -webkit-transform: translateY(0.15em); + -ms-transform: translateY(0.15em); + transform: translateY(0.15em); +} + .c1 .fi-link_icon { + margin: 0; padding-left: 4px; font-size: 16px; box-sizing: content-box; diff --git a/src/core/Link/Link/__snapshots__/Link.test.tsx.snap b/src/core/Link/Link/__snapshots__/Link.test.tsx.snap index fe94f1d88..f936a48e8 100644 --- a/src/core/Link/Link/__snapshots__/Link.test.tsx.snap +++ b/src/core/Link/Link/__snapshots__/Link.test.tsx.snap @@ -108,6 +108,35 @@ exports[`calling render with the same component on the same container does not r text-decoration: none; } +.c1.fi-link.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c1.fi-link.fi-link--accent .fi-link--accent_icon { + font-size: 16px; + margin-left: -3px; + margin-right: 2px; + -webkit-transform: translateY(0.1em); + -ms-transform: translateY(0.1em); + transform: translateY(0.1em); +} + +.c1.fi-link.fi-link--small { + font-size: 16px; +} + +.c1.fi-link.fi-link--small.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c1.fi-link.fi-link--small.fi-link--accent .fi-link--accent_icon { + -webkit-transform: translateY(0.15em); + -ms-transform: translateY(0.15em); + transform: translateY(0.15em); +} + +

Heading

+ + + Link + + + AA Link + + + +); + +describe('Simple link list with one item', () => { + it('Should be unordered', () => { + const { getAllByRole } = render(TestLinkList); + const firstLink = getAllByRole('link')[0]; + expect(firstLink.textContent).toBe('Link'); + }); + + it('should match snapshot', () => { + const { baseElement } = render(TestLinkList); + expect(baseElement).toMatchSnapshot(); + }); + + it('should not have basic accessibility issues', axeTest(TestLinkList)); +}); diff --git a/src/core/Link/LinkList/LinkList.tsx b/src/core/Link/LinkList/LinkList.tsx index bae218365..1d37aba66 100644 --- a/src/core/Link/LinkList/LinkList.tsx +++ b/src/core/Link/LinkList/LinkList.tsx @@ -25,9 +25,11 @@ const StyledLinkList = styled( theme, children, smallScreen, + forwardedRef, ...passProps }: LinkListProps & SuomifiThemeProp) => ( +
+ +`; diff --git a/src/core/Link/LinkListItem/LinkListItem.test.tsx b/src/core/Link/LinkListItem/LinkListItem.test.tsx deleted file mode 100644 index 6d9eb854c..000000000 --- a/src/core/Link/LinkListItem/LinkListItem.test.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import { axeTest } from '../../../utils/test'; - -import { LinkListItem } from './LinkListItem'; -import { LinkList } from '../LinkList/LinkList'; -import { Link } from '../Link/Link'; - -const TestLinkListItem = ( - <> -

Heading

- - - Linkki - - - -); - -test('calling render with the same component on the same container does not remount', () => { - const LinkListItemRendered = render(TestLinkListItem); - const { getByTestId, container } = LinkListItemRendered; - expect(container.firstChild).toMatchSnapshot(); - expect(getByTestId('test-link').textContent).toBe('Linkki'); -}); - -test('should not have underline class by default', () => { - const { container } = render(TestLinkListItem); - expect(container.firstChild).not.toHaveClass('fi-link--initial-underline'); -}); - -test('should not have basic accessibility issues', axeTest(TestLinkListItem)); diff --git a/src/core/Link/RouterLink/__snapshots__/RouterLink.test.tsx.snap b/src/core/Link/RouterLink/__snapshots__/RouterLink.test.tsx.snap index dbc5a34ad..624da849e 100644 --- a/src/core/Link/RouterLink/__snapshots__/RouterLink.test.tsx.snap +++ b/src/core/Link/RouterLink/__snapshots__/RouterLink.test.tsx.snap @@ -53,41 +53,54 @@ exports[`calling render with the same component on the same container does not r font-size: 18px; line-height: 1.5; font-weight: 400; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 18px; + line-height: 1.5; + font-weight: 400; } -.c1.fi-link--router { +.c1.fi-link { color: hsl(212,63%,45%); -webkit-text-decoration: none; text-decoration: none; } -.c1.fi-link--router:hover, -.c1.fi-link--router:active, -.c1.fi-link--router:focus, -.c1.fi-link--router:focus-within { +.c1.fi-link:hover, +.c1.fi-link:active, +.c1.fi-link:focus, +.c1.fi-link:focus-within { color: hsl(212,63%,45%); } -.c1.fi-link--router:focus, -.c1.fi-link--router:focus-within { +.c1.fi-link:focus, +.c1.fi-link:focus-within { -webkit-text-decoration: none; text-decoration: none; } -.c1.fi-link--router:focus { +.c1.fi-link:focus { border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); outline: 0; outline: 3px solid transparent; } -.c1.fi-link--router:hover, -.c1.fi-link--router:active { +.c1.fi-link:hover, +.c1.fi-link:active { -webkit-text-decoration: underline; text-decoration: underline; } -.c1.fi-link--router:visited { +.c1.fi-link:visited { color: hsl(284,36%,45%); } @@ -108,8 +121,37 @@ exports[`calling render with the same component on the same container does not r text-decoration: none; } +.c1.fi-link.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c1.fi-link.fi-link--accent .fi-link--accent_icon { + font-size: 16px; + margin-left: -3px; + margin-right: 2px; + -webkit-transform: translateY(0.1em); + -ms-transform: translateY(0.1em); + transform: translateY(0.1em); +} + +.c1.fi-link.fi-link--small { + font-size: 16px; +} + +.c1.fi-link.fi-link--small.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c1.fi-link.fi-link--small.fi-link--accent .fi-link--accent_icon { + -webkit-transform: translateY(0.15em); + -ms-transform: translateY(0.15em); + transform: translateY(0.15em); +} + diff --git a/src/core/Link/SkipLink/__snapshots__/SkipLink.test.tsx.snap b/src/core/Link/SkipLink/__snapshots__/SkipLink.test.tsx.snap index 30eb24652..0f5d6fdde 100644 --- a/src/core/Link/SkipLink/__snapshots__/SkipLink.test.tsx.snap +++ b/src/core/Link/SkipLink/__snapshots__/SkipLink.test.tsx.snap @@ -108,6 +108,35 @@ exports[`should match snapshot 1`] = ` text-decoration: none; } +.c1.fi-link.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c1.fi-link.fi-link--accent .fi-link--accent_icon { + font-size: 16px; + margin-left: -3px; + margin-right: 2px; + -webkit-transform: translateY(0.1em); + -ms-transform: translateY(0.1em); + transform: translateY(0.1em); +} + +.c1.fi-link.fi-link--small { + font-size: 16px; +} + +.c1.fi-link.fi-link--small.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c1.fi-link.fi-link--small.fi-link--accent .fi-link--accent_icon { + -webkit-transform: translateY(0.15em); + -ms-transform: translateY(0.15em); + transform: translateY(0.15em); +} + .c2 { -webkit-letter-spacing: 0; -moz-letter-spacing: 0; @@ -177,6 +206,35 @@ exports[`should match snapshot 1`] = ` text-decoration: none; } +.c2.fi-link.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c2.fi-link.fi-link--accent .fi-link--accent_icon { + font-size: 16px; + margin-left: -3px; + margin-right: 2px; + -webkit-transform: translateY(0.1em); + -ms-transform: translateY(0.1em); + transform: translateY(0.1em); +} + +.c2.fi-link.fi-link--small { + font-size: 16px; +} + +.c2.fi-link.fi-link--small.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c2.fi-link.fi-link--small.fi-link--accent .fi-link--accent_icon { + -webkit-transform: translateY(0.15em); + -ms-transform: translateY(0.15em); + transform: translateY(0.15em); +} + .c2.fi-link--skip { position: absolute; z-index: 10000; diff --git a/src/core/Navigation/ServiceNavigation/ServiceNavigation/__snapshots__/ServiceNavigation.test.tsx.snap b/src/core/Navigation/ServiceNavigation/ServiceNavigation/__snapshots__/ServiceNavigation.test.tsx.snap index eb2679fa8..1b986cfd4 100644 --- a/src/core/Navigation/ServiceNavigation/ServiceNavigation/__snapshots__/ServiceNavigation.test.tsx.snap +++ b/src/core/Navigation/ServiceNavigation/ServiceNavigation/__snapshots__/ServiceNavigation.test.tsx.snap @@ -522,7 +522,37 @@ exports[`should match snapshot 1`] = ` text-decoration: none; } +.c10.fi-link.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c10.fi-link.fi-link--accent .fi-link--accent_icon { + font-size: 16px; + margin-left: -3px; + margin-right: 2px; + -webkit-transform: translateY(0.1em); + -ms-transform: translateY(0.1em); + transform: translateY(0.1em); +} + +.c10.fi-link.fi-link--small { + font-size: 16px; +} + +.c10.fi-link.fi-link--small.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c10.fi-link.fi-link--small.fi-link--accent .fi-link--accent_icon { + -webkit-transform: translateY(0.15em); + -ms-transform: translateY(0.15em); + transform: translateY(0.15em); +} + .c10 .fi-link_icon { + margin: 0; padding-left: 4px; font-size: 16px; box-sizing: content-box; @@ -542,41 +572,54 @@ exports[`should match snapshot 1`] = ` font-size: 18px; line-height: 1.5; font-weight: 400; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 18px; + line-height: 1.5; + font-weight: 400; } -.c7.fi-link--router { +.c7.fi-link { color: hsl(212,63%,45%); -webkit-text-decoration: none; text-decoration: none; } -.c7.fi-link--router:hover, -.c7.fi-link--router:active, -.c7.fi-link--router:focus, -.c7.fi-link--router:focus-within { +.c7.fi-link:hover, +.c7.fi-link:active, +.c7.fi-link:focus, +.c7.fi-link:focus-within { color: hsl(212,63%,45%); } -.c7.fi-link--router:focus, -.c7.fi-link--router:focus-within { +.c7.fi-link:focus, +.c7.fi-link:focus-within { -webkit-text-decoration: none; text-decoration: none; } -.c7.fi-link--router:focus { +.c7.fi-link:focus { border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); outline: 0; outline: 3px solid transparent; } -.c7.fi-link--router:hover, -.c7.fi-link--router:active { +.c7.fi-link:hover, +.c7.fi-link:active { -webkit-text-decoration: underline; text-decoration: underline; } -.c7.fi-link--router:visited { +.c7.fi-link:visited { color: hsl(284,36%,45%); } @@ -597,6 +640,35 @@ exports[`should match snapshot 1`] = ` text-decoration: none; } +.c7.fi-link.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c7.fi-link.fi-link--accent .fi-link--accent_icon { + font-size: 16px; + margin-left: -3px; + margin-right: 2px; + -webkit-transform: translateY(0.1em); + -ms-transform: translateY(0.1em); + transform: translateY(0.1em); +} + +.c7.fi-link.fi-link--small { + font-size: 16px; +} + +.c7.fi-link.fi-link--small.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c7.fi-link.fi-link--small.fi-link--accent .fi-link--accent_icon { + -webkit-transform: translateY(0.15em); + -ms-transform: translateY(0.15em); + transform: translateY(0.15em); +} + .c9 { color: hsl(0,0%,13%); -webkit-letter-spacing: 0; @@ -678,7 +750,7 @@ exports[`should match snapshot 1`] = ` > Inbox @@ -699,7 +771,7 @@ exports[`should match snapshot 1`] = ` class="c4 c5 fi-service-navigation-item" > @@ -755,7 +827,7 @@ exports[`should match snapshot 1`] = ` class="c4 c5 fi-service-navigation-item fi-service-navigation-item--disabled" > Devices diff --git a/src/core/Navigation/SideNavigation/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap b/src/core/Navigation/SideNavigation/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap index fff3a8d3f..8edff3a2c 100644 --- a/src/core/Navigation/SideNavigation/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap +++ b/src/core/Navigation/SideNavigation/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap @@ -641,7 +641,37 @@ exports[`calling render with the same component on the same container does not r text-decoration: none; } +.c11.fi-link.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c11.fi-link.fi-link--accent .fi-link--accent_icon { + font-size: 16px; + margin-left: -3px; + margin-right: 2px; + -webkit-transform: translateY(0.1em); + -ms-transform: translateY(0.1em); + transform: translateY(0.1em); +} + +.c11.fi-link.fi-link--small { + font-size: 16px; +} + +.c11.fi-link.fi-link--small.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c11.fi-link.fi-link--small.fi-link--accent .fi-link--accent_icon { + -webkit-transform: translateY(0.15em); + -ms-transform: translateY(0.15em); + transform: translateY(0.15em); +} + .c11 .fi-link_icon { + margin: 0; padding-left: 4px; font-size: 16px; box-sizing: content-box; @@ -661,41 +691,54 @@ exports[`calling render with the same component on the same container does not r font-size: 18px; line-height: 1.5; font-weight: 400; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 18px; + line-height: 1.5; + font-weight: 400; } -.c9.fi-link--router { +.c9.fi-link { color: hsl(212,63%,45%); -webkit-text-decoration: none; text-decoration: none; } -.c9.fi-link--router:hover, -.c9.fi-link--router:active, -.c9.fi-link--router:focus, -.c9.fi-link--router:focus-within { +.c9.fi-link:hover, +.c9.fi-link:active, +.c9.fi-link:focus, +.c9.fi-link:focus-within { color: hsl(212,63%,45%); } -.c9.fi-link--router:focus, -.c9.fi-link--router:focus-within { +.c9.fi-link:focus, +.c9.fi-link:focus-within { -webkit-text-decoration: none; text-decoration: none; } -.c9.fi-link--router:focus { +.c9.fi-link:focus { border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); outline: 0; outline: 3px solid transparent; } -.c9.fi-link--router:hover, -.c9.fi-link--router:active { +.c9.fi-link:hover, +.c9.fi-link:active { -webkit-text-decoration: underline; text-decoration: underline; } -.c9.fi-link--router:visited { +.c9.fi-link:visited { color: hsl(284,36%,45%); } @@ -716,6 +759,35 @@ exports[`calling render with the same component on the same container does not r text-decoration: none; } +.c9.fi-link.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c9.fi-link.fi-link--accent .fi-link--accent_icon { + font-size: 16px; + margin-left: -3px; + margin-right: 2px; + -webkit-transform: translateY(0.1em); + -ms-transform: translateY(0.1em); + transform: translateY(0.1em); +} + +.c9.fi-link.fi-link--small { + font-size: 16px; +} + +.c9.fi-link.fi-link--small.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c9.fi-link.fi-link--small.fi-link--accent .fi-link--accent_icon { + -webkit-transform: translateY(0.15em); + -ms-transform: translateY(0.15em); + transform: translateY(0.15em); +} +
@@ -799,7 +871,7 @@ exports[`calling render with the same component on the same container does not r > Personal economy @@ -832,7 +904,7 @@ exports[`calling render with the same component on the same container does not r Crisis situations in personal finances @@ -848,7 +920,7 @@ exports[`calling render with the same component on the same container does not r class="c2 fi-side-navigation-item_content-wrapper" > If you are unable to pay your debts @@ -863,7 +935,7 @@ exports[`calling render with the same component on the same container does not r > Advice on banking and insurance matters @@ -895,7 +967,7 @@ exports[`calling render with the same component on the same container does not r /> Last will and testament @@ -911,7 +983,7 @@ exports[`calling render with the same component on the same container does not r class="c2 fi-side-navigation-item_content-wrapper" > @@ -944,7 +1016,7 @@ exports[`calling render with the same component on the same container does not r class="c2 fi-side-navigation-item_content-wrapper" > Finance diff --git a/src/core/Navigation/WizardNavigation/WizardNavigation/__snapshots__/WizardNavigation.test.tsx.snap b/src/core/Navigation/WizardNavigation/WizardNavigation/__snapshots__/WizardNavigation.test.tsx.snap index c79764f7d..55e213f25 100644 --- a/src/core/Navigation/WizardNavigation/WizardNavigation/__snapshots__/WizardNavigation.test.tsx.snap +++ b/src/core/Navigation/WizardNavigation/WizardNavigation/__snapshots__/WizardNavigation.test.tsx.snap @@ -763,41 +763,54 @@ exports[`calling render with the same component on the same container does not r font-size: 18px; line-height: 1.5; font-weight: 400; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 18px; + line-height: 1.5; + font-weight: 400; } -.c8.fi-link--router { +.c8.fi-link { color: hsl(212,63%,45%); -webkit-text-decoration: none; text-decoration: none; } -.c8.fi-link--router:hover, -.c8.fi-link--router:active, -.c8.fi-link--router:focus, -.c8.fi-link--router:focus-within { +.c8.fi-link:hover, +.c8.fi-link:active, +.c8.fi-link:focus, +.c8.fi-link:focus-within { color: hsl(212,63%,45%); } -.c8.fi-link--router:focus, -.c8.fi-link--router:focus-within { +.c8.fi-link:focus, +.c8.fi-link:focus-within { -webkit-text-decoration: none; text-decoration: none; } -.c8.fi-link--router:focus { +.c8.fi-link:focus { border-radius: 2px; box-shadow: 0 0 0 2px hsl(196,77%,44%); outline: 0; outline: 3px solid transparent; } -.c8.fi-link--router:hover, -.c8.fi-link--router:active { +.c8.fi-link:hover, +.c8.fi-link:active { -webkit-text-decoration: underline; text-decoration: underline; } -.c8.fi-link--router:visited { +.c8.fi-link:visited { color: hsl(284,36%,45%); } @@ -818,6 +831,35 @@ exports[`calling render with the same component on the same container does not r text-decoration: none; } +.c8.fi-link.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c8.fi-link.fi-link--accent .fi-link--accent_icon { + font-size: 16px; + margin-left: -3px; + margin-right: 2px; + -webkit-transform: translateY(0.1em); + -ms-transform: translateY(0.1em); + transform: translateY(0.1em); +} + +.c8.fi-link.fi-link--small { + font-size: 16px; +} + +.c8.fi-link.fi-link--small.fi-link--accent { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c8.fi-link.fi-link--small.fi-link--accent .fi-link--accent_icon { + -webkit-transform: translateY(0.15em); + -ms-transform: translateY(0.15em); + transform: translateY(0.15em); +} +
@@ -847,7 +889,7 @@ exports[`calling render with the same component on the same container does not r class="c6 fi-wizard-navigation-item_left-icon" /> 1. Step @@ -882,7 +924,7 @@ exports[`calling render with the same component on the same container does not r 2. Step @@ -900,7 +942,7 @@ exports[`calling render with the same component on the same container does not r /> 3. Step @@ -918,7 +960,7 @@ exports[`calling render with the same component on the same container does not r /> @@ -937,7 +979,7 @@ exports[`calling render with the same component on the same container does not r /> @@ -957,7 +999,7 @@ exports[`calling render with the same component on the same container does not r /> @@ -976,7 +1018,7 @@ exports[`calling render with the same component on the same container does not r />