[Feature / Breaking change] Link list and link improvements

.styleguidist/styleguidist.sections.js

@@ -157,6 +157,13 @@ module.exports = {
             'RouterLink/RouterLink',
           ]),
         },
+        {
+          name: 'LinkList',
+          components: getComponentWithVariants('Link')([
+            'LinkList/LinkList',
+            'LinkListItem/LinkListItem',
+          ]),
+        },
         {
           name: 'Chip',
           components: getComponentWithVariants('Chip')([

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,22 @@ 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;
-}
-
-.c8 .fi-icon-base-fill {
-  fill: currentColor;
-}
-
-.c8 .fi-icon-base-stroke {
-  stroke: currentColor;
+.c7.fi-link.fi-link--accent {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.c8.fi-icon--cursor-pointer {
-  cursor: pointer;
+.c7.fi-link.fi-link--accent .fi-link--accent_icon {
+  font-size: 16px;
+  margin-left: -3px;
+  margin-right: 2px;
+  -webkit-transform: translateY(0.15em);
+  -ms-transform: translateY(0.15em);
+  transform: translateY(0.15em);
 }
 
-.c8.fi-icon--cursor-pointer * {
-  cursor: inherit;
+.c7.fi-link.fi-link--small {
+  font-size: 16px;
 }
 
 .c5 {

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.15em);
+      }
+    }
+    &.fi-link--small {
+      font-size: 16px;
+    }
   }
 `;

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;
 }

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;

src/core/Link/ExternalLink/ExternalLink.test.tsx

@@ -14,7 +14,7 @@ const TestExternalLink = (
   </ExternalLink>
 );
 
-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();

src/core/Link/ExternalLink/ExternalLink.tsx

@@ -2,7 +2,7 @@ import React, { Component, forwardRef } from 'react';
 import { default as styled } from 'styled-components';
 import classnames from 'classnames';
 import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme';
-import { IconLinkExternal } from 'suomifi-icons';
+import { IconChevronRight, IconLinkExternal } from 'suomifi-icons';
 import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import { ExternalLinkStyles } from './ExternalLink.baseStyles';
 import { HtmlA } from '../../../reset';
@@ -38,14 +38,17 @@ interface InternalExternalLinkProps extends BaseLinkProps {
 
 export type ExternalLinkProps = newWindowProps & InternalExternalLinkProps;
 
-class BaseExternalLink extends Component<ExternalLinkProps> {
+class BaseExternalLink extends Component<ExternalLinkProps & SuomifiThemeProp> {
   render() {
     const {
       asProp,
       children,
       className,
+      variant = 'default',
       toNewWindow = true,
       labelNewWindow,
+      smallScreen,
+      theme,
       hideIcon,
       underline = 'hover',
       ...passProps
@@ -55,11 +58,19 @@ class BaseExternalLink extends Component<ExternalLinkProps> {
         {...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' && (
+          <IconChevronRight
+            color={theme.colors.accentBase}
+            className={linkClassNames.accentIcon}
+          />
+        )}
         {children}
         {toNewWindow && <VisuallyHidden>{labelNewWindow}</VisuallyHidden>}
         {!hideIcon && <IconLinkExternal className={iconClassName} />}
@@ -71,7 +82,7 @@ class BaseExternalLink extends Component<ExternalLinkProps> {
 const StyledExternalLink = styled(
   (props: ExternalLinkProps & SuomifiThemeProp) => {
     const { theme, ...passProps } = props;
-    return <BaseExternalLink {...passProps} />;
+    return <BaseExternalLink theme={theme} {...passProps} />;
   },
 )`
   ${({ theme }) => ExternalLinkStyles(theme)}

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,26 @@ 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.15em);
+  -ms-transform: translateY(0.15em);
+  transform: translateY(0.15em);
+}
+
+.c1.fi-link.fi-link--small {
+  font-size: 16px;
+}
+
 .c1 .fi-link_icon {
+  margin: 0;
   padding-left: 4px;
   font-size: 16px;
   box-sizing: content-box;

src/core/Link/Link/Link.md

@@ -1,25 +1,39 @@
 ```js
 import { Link, Paragraph } from 'suomifi-ui-components';
-
-<Paragraph>
+<>
   <Link
     className="test-classname"
     href="https://www.notvisitedlink.com/"
     underline="initial"
   >
     Not visited link
-  </Link>{' '}
+  </Link>
+
   <Link className="test-classname" href="#" underline="initial">
     Visited link
-  </Link>{' '}
+  </Link>
+
+  <Link href="https://www.notvisitedlink.com/" underline="hover">
+    Link without underline
+  </Link>
+
   <Link
-    className="test-classname"
+    variant="accent"
     href="https://www.notvisitedlink.com/"
-    underline="hover"
+    underline="initial"
   >
-    Link without underline
+    Accented link
   </Link>
-</Paragraph>;
+
+  <Link
+    variant="accent"
+    href="https://www.notvisitedlink.com/"
+    underline="initial"
+    smallScreen
+  >
+    Small text accented link
+  </Link>
+</>;
 ```
 
 ### Skip link
@@ -38,9 +52,7 @@ import { SkipLink } from 'suomifi-ui-components';
     style={{
       height: '80px',
       width: '210px',
-      borderStyle: 'dashed',
-      borderColor: '#000',
-      borderWidth: '1px'
+      border: '1px dashed #000'
     }}
   >
     <SkipLink href="#">Skip to main content</SkipLink>
@@ -66,6 +78,13 @@ import { ExternalLink } from 'suomifi-ui-components';
   >
     External link in same window
   </ExternalLink>
+  <ExternalLink
+    href="https://designsystem.suomi.fi/fi/"
+    labelNewWindow="Opens to a new window"
+    variant="accent"
+  >
+    Accented external link
+  </ExternalLink>
 </>;
 ```
 

src/core/Link/Link/Link.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import { default as styled } from 'styled-components';
 import classnames from 'classnames';
+import { IconChevronRight } from 'suomifi-icons';
 import { LinkStyles } from '../Link/Link.baseStyles';
 import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme';
 import { HtmlA } from '../../../reset';
@@ -19,17 +20,30 @@ const StyledLink = styled(
   ({
     asProp,
     className,
+    smallScreen,
     theme,
+    variant = 'default',
+    children,
     underline = 'hover',
     ...passProps
   }: LinkProps & SuomifiThemeProp) => (
     <HtmlA
       {...passProps}
       className={classnames(baseClassName, className, {
         [linkClassNames.linkUnderline]: underline === 'initial',
+        [linkClassNames.accent]: variant === 'accent',
+        [linkClassNames.small]: smallScreen,
       })}
       as={asProp}
-    />
+    >
+      {variant === 'accent' && (
+        <IconChevronRight
+          color={theme.colors.accentBase}
+          className={linkClassNames.accentIcon}
+        />
+      )}
+      {children}
+    </HtmlA>
   ),
 )`
   ${({ theme }) => LinkStyles(theme)}

src/core/Link/Link/__snapshots__/Link.test.tsx.snap

@@ -108,6 +108,24 @@ 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.15em);
+  -ms-transform: translateY(0.15em);
+  transform: translateY(0.15em);
+}
+
+.c1.fi-link.fi-link--small {
+  font-size: 16px;
+}
+
 <a
   class="c0 fi-link c1"
   data-testid="test-link"

src/core/Link/LinkList/LinkList.baseStyles.ts

@@ -0,0 +1,18 @@
+import { SuomifiTheme } from 'core/theme';
+import { css } from 'styled-components';
+import { font } from '../../theme/reset';
+
+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')}
+    }
+  }
+`;