import React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean, select } from '@storybook/addon-knobs/react';
import { IconAddSmallOutline } from '@teamleader/ui-icons';
import { Link, TextDisplay } from '../components';

const elements = ['a', 'button'];
const colors = ['white', 'neutral', 'mint', 'teal', 'violet', 'ruby', 'gold', 'aqua'];
const iconPositions = ['left', 'right'];

storiesOf('Links', module)
  .addParameters({
    info: {
      propTablesExclude: [TextDisplay],
    },
  })
  .add('With text', () => (
    <TextDisplay color={select('Color', colors, 'teal')}>
      Display text with a{' '}
      <Link href="https://www.teamleader.be" target="_blank" inherit={boolean('Inherit', false)}>
        link
      </Link>{' '}
      inside
    </TextDisplay>
  ))
  .add('With text and icon', () => (
    <TextDisplay color={select('Color', colors, 'teal')}>
      <Link
        href="https://www.teamleader.be"
        icon={<IconAddSmallOutline />}
        iconPlacement={select('Icon placement', iconPositions, 'left')}
        target="_blank"
        inherit={boolean('Inherit', false)}
      >
        link
      </Link>
    </TextDisplay>
  ))
  .add('With custom element', () => (
    <TextDisplay color={select('Color', colors, 'teal')}>
      <Link
        element={select('Element', elements, 'button')}
        icon={<IconAddSmallOutline />}
        iconPlacement={select('Icon placement', iconPositions, 'left')}
        inherit={boolean('Inherit', false)}
      >
        link
      </Link>
    </TextDisplay>
  ));

@@ -213,158 +213,138 @@
 Text
-Display %7D from '../components';%0A%0Aconst elements = %5B'a', 'button'%5D
+Body, TextDisplay, TextSmall %7D from '../components';%0Aimport %7B COLORS, TINTS %7D from '../constants'
 ;%0A
+%0A
 const 
-colors = %5B'white', 'neutral', 'mint', 'teal', 'violet', 'ruby', 'gold', 'aqua
+elements = %5B'a', 'button
 '%5D;%0A
@@ -480,16 +480,27 @@
 tDisplay
+, TextSmall
 %5D,%0A    %7D
@@ -506,16 +506,168 @@
 %7D,%0A  %7D)%0A
+  .add('Link only', () =%3E (%0A    %3CLink href=%22https://www.teamleader.be%22 target=%22_blank%22 inherit=%7Bboolean('inherit', false)%7D%3E%0A      link%0A    %3C/Link%3E%0A  ))%0A
   .add('
@@ -687,38 +687,35 @@
 ) =%3E (%0A    %3CText
-Displa
+Bod
 y color=%7Bselect(
@@ -711,38 +711,38 @@
 or=%7Bselect('
-C
+c
 olor', 
-colors
+COLORS
 , 'teal')%7D%3E%0A
@@ -731,32 +731,72 @@
 COLORS, 'teal')%7D
+ tint=%7Bselect('tint', TINTS, 'darkest')%7D
 %3E%0A      Display 
@@ -883,33 +883,33 @@
 herit=%7Bboolean('
-I
+i
 nherit', false)%7D
@@ -957,38 +957,35 @@
 nside%0A    %3C/Text
-Displa
+Bod
 y%3E%0A  ))%0A  .add('
@@ -1014,38 +1014,35 @@
 ) =%3E (%0A    %3CText
-Displa
+Bod
 y color=%7Bselect(
@@ -1038,38 +1038,38 @@
 or=%7Bselect('
-C
+c
 olor', 
-colors
+COLORS
 , 'teal')%7D%3E%0A
@@ -1058,32 +1058,72 @@
 COLORS, 'teal')%7D
+ tint=%7Bselect('tint', TINTS, 'darkest')%7D
 %3E%0A      %3CLink%0A  
@@ -1223,38 +1223,37 @@
 cement=%7Bselect('
-Icon p
+iconP
 lacement', iconP
@@ -1313,33 +1313,33 @@
 herit=%7Bboolean('
-I
+i
 nherit', false)%7D
@@ -1380,30 +1380,27 @@
 %3E%0A    %3C/Text
-Displa
+Bod
 y%3E%0A  ))%0A  .a
@@ -1442,22 +1442,19 @@
    %3CText
-Displa
+Bod
 y color=
@@ -1466,22 +1466,22 @@
 ct('
-C
+c
 olor', 
-colors
+COLORS
 , 't
@@ -1486,16 +1486,56 @@
 'teal')%7D
+ tint=%7Bselect('tint', TINTS, 'darkest')%7D
 %3E%0A      
@@ -1565,17 +1565,17 @@
 select('
-E
+e
 lement',
@@ -1670,14 +1670,13 @@
 ct('
-Icon p
+iconP
 lace
@@ -1732,17 +1732,17 @@
 oolean('
-I
+i
 nherit',
@@ -1795,23 +1795,436 @@
   %3C/Text
-Display
+Body%3E%0A  ))%0A  .add('Subtle icon link', () =%3E (%0A    %3CTextSmall color=%7Bselect('color', COLORS, 'neutral')%7D tint=%7Bselect('tint', TINTS, 'darkest')%7D%3E%0A      %3CLink%0A        element=%7Bselect('element', elements, 'button')%7D%0A        icon=%7B%3CIconAddSmallOutline /%3E%7D%0A        iconPlacement=%7Bselect('iconPlacement', iconPositions, 'left')%7D%0A        inherit=%7Bboolean('inherit', true)%7D%0A      %3E%0A        Discount%0A      %3C/Link%3E%0A    %3C/TextSmall
 %3E%0A  ));%0A

Add story to demo our new Link style & behavior