@navinc/base-react-components/src/link.story.js

Nav's Pattern Library

import React from 'react'
import { MemoryRouter, Route } from 'react-router-dom'
import styled from 'styled-components'
import Link from './link.js'
import readme from './link.readme.md'

const View = styled.div`
  display: grid;
  grid-gap: 24px;
  grid-template-columns: 100%;
`

export default {
  title: 'Navigation/Link',
  component: Link,
  parameters: {
    info: { text: readme },
  },
}

export const Basic = (args) => (
  <MemoryRouter initialEntries={['/home']}>
    <View>
      <Route path="/:loc" render={({ match }) => <h1>Location: {match.params.loc}</h1>} />
      <Link {...args} />
    </View>
  </MemoryRouter>
)

Basic.args = {
  href: '/here',
  target: '',
  trackingContext: {
    context: 'link',
    category: 'link',
    type: 'interaction_link',
  },
  children: 'A link here',
}