chore: Fix links to Reactist components in storybook stories using LinkTo (#795)

Author: engfragui

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v21.2.2
+
+-   [Docs] Fix links to Reactist components in storybook stories.
+
 # v21.2.1
 
 -   [Docs] Fix links to Reactist components in storybook stories.

package-lock.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "21.2.1",
+    "version": "21.2.2",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

package.json

@@ -4,6 +4,7 @@ import Button from '../../src/components/deprecated-button'
 import Dropdown from '../../src/components/deprecated-dropdown'
 import { Alert } from '../../src/alert'
 import { Stack } from '../../src/stack'
+import LinkTo from '@storybook/addon-links/react'
 
 export default {
     title: 'Components/Dropdown',
@@ -19,8 +20,7 @@ export const DropdownStory = () => (
         <Stack as="section" exceptionallySetClassName="story" space="large">
             <Alert tone="critical">
                 <strong>Deprecated:</strong> While not a 1:1 replacement, consider using{' '}
-                <a href={`${window.location.origin}?path=/docs/components-menu`}>Menu</a> as an
-                alternative
+                <LinkTo kind="design-system-menu">Menu</LinkTo> as an alternative
             </Alert>
 
             <Dropdown.Box>

stories/components/Dropdown.stories.tsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import Input from '../../src/components/deprecated-input'
 import { Alert } from '../../src/alert'
 import './styles/input_story.less'
+import LinkTo from '@storybook/addon-links/react'
 
 // Story setup ================================================================
 
@@ -21,10 +22,7 @@ export const InputStory = () => (
         <div className="story-info">
             <Alert tone="critical">
                 <strong>Deprecated:</strong> Please use{' '}
-                <a href={`${window.location.origin}?path=/docs/design-system-textfield`}>
-                    TextField
-                </a>{' '}
-                instead
+                <LinkTo kind="design-system-textfield">TextField</LinkTo> instead
             </Alert>
             <p>
                 This component is a dumb wrapper around the

stories/components/Input.stories.tsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import Select from '../../src/components/deprecated-select'
 import { Alert } from '../../src/alert'
 import { Stack } from '../../src/stack'
+import LinkTo from '@storybook/addon-links/react'
 
 const options = [
     { value: 'intro', text: 'Select a fruit', disabled: true },
@@ -32,10 +33,7 @@ export function SelectStory() {
         <Stack as="section" exceptionallySetClassName="story" space="large">
             <Alert tone="critical">
                 <strong>Deprecated:</strong> Please use{' '}
-                <a href={`${window.location.origin}?path=/docs/design-system-selectfield`}>
-                    SelectField
-                </a>{' '}
-                instead
+                <LinkTo kind="design-system-selectfield">SelectField</LinkTo> instead
             </Alert>
 
             <Select value={value} options={options} onChange={setValue} />