Feat #43 - Tag, Link components

dassana-io · Aug 21, 2020 · cf417bc · cf417bc
1 parent 2fddb14
commit cf417bc
Show file tree

Hide file tree

Showing 3 changed files with 278 additions and 25 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -0,0 +1,26 @@
+import { addDecorator, addParameters } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'
+import React, { ReactNode } from 'react'
+
+const infoOptions = {
+	header: false,
+	source: true,
+	propTables: false
+	// inline: true //uncomment for "story source" to be rendered inline
+}
+
+const storyWrapper = (story: () => ReactNode) => (
+	<div style={{ padding: 10 }}>{story()}</div>
+)
+
+addParameters({
+	docs: {
+		container: DocsContainer,
+		page: DocsPage
+	}
+})
+
+addDecorator(withInfo(infoOptions))
+
+addDecorator(storyWrapper)
diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
@@ -86,34 +86,172 @@ exports[`Storyshots Button Primary Disabled 1`] = `
 `;
 
 exports[`Storyshots Link Default 1`] = `
-<a
-  className="ant-typography"
-  href=" "
-  onClick={[Function]}
+<div
   style={
     Object {
-      "WebkitLineClamp": null,
+      "padding": 10,
     }
   }
-  target="_self"
 >
-  <u>
-    Default
-  </u>
-</a>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <a
+      className="ant-typography"
+      href=""
+      onClick={[Function]}
+      style={
+        Object {
+          "WebkitLineClamp": null,
+        }
+      }
+      target="_self"
+    >
+      <u>
+        Default
+      </u>
+    </a>
+  </div>
+  <button
+    className="info__show-button"
+    onClick={[Function]}
+    style={
+      Object {
+        "background": "#027ac5",
+        "border": "none",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": 12,
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+      }
+    }
+    type="button"
+  >
+    Show Info
+  </button>
+</div>
+`;
+
+exports[`Storyshots Link Link With Knobs 1`] = `
+<div
+  style={
+    Object {
+      "padding": 10,
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <a
+      className="ant-typography"
+      href=""
+      onClick={[Function]}
+      style={
+        Object {
+          "WebkitLineClamp": null,
+        }
+      }
+      target="_self"
+    >
+      <u>
+        Link
+      </u>
+    </a>
+  </div>
+  <button
+    className="info__show-button"
+    onClick={[Function]}
+    style={
+      Object {
+        "background": "#027ac5",
+        "border": "none",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": 12,
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+      }
+    }
+    type="button"
+  >
+    Show Info
+  </button>
+</div>
 `;
 
 exports[`Storyshots Tag Colored 1`] = `
-<span
-  className="ant-tag ant-tag-has-color"
+<div
   style={
     Object {
-      "backgroundColor": "#108ee9",
+      "padding": 10,
     }
   }
 >
-  Colored
-</span>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <span
+      className="ant-tag ant-tag-blue"
+      style={
+        Object {
+          "backgroundColor": undefined,
+        }
+      }
+    >
+      Blue
+    </span>
+  </div>
+  <button
+    className="info__show-button"
+    onClick={[Function]}
+    style={
+      Object {
+        "background": "#027ac5",
+        "border": "none",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": 12,
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+      }
+    }
+    type="button"
+  >
+    Show Info
+  </button>
+</div>
 `;
 
 exports[`Storyshots Tag Colored Preset 1`] = `
@@ -130,14 +268,107 @@ exports[`Storyshots Tag Colored Preset 1`] = `
 `;
 
 exports[`Storyshots Tag Default 1`] = `
-<span
-  className="ant-tag"
+<div
   style={
     Object {
-      "backgroundColor": undefined,
+      "padding": 10,
     }
   }
 >
-  Default
-</span>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <span
+      className="ant-tag"
+      style={
+        Object {
+          "backgroundColor": undefined,
+        }
+      }
+    >
+      Default
+    </span>
+  </div>
+  <button
+    className="info__show-button"
+    onClick={[Function]}
+    style={
+      Object {
+        "background": "#027ac5",
+        "border": "none",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": 12,
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+      }
+    }
+    type="button"
+  >
+    Show Info
+  </button>
+</div>
+`;
+
+exports[`Storyshots Tag Tag With Knobs 1`] = `
+<div
+  style={
+    Object {
+      "padding": 10,
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <span
+      className="ant-tag ant-tag-magenta"
+      style={
+        Object {
+          "backgroundColor": undefined,
+        }
+      }
+    >
+      Magenta
+    </span>
+  </div>
+  <button
+    className="info__show-button"
+    onClick={[Function]}
+    style={
+      Object {
+        "background": "#027ac5",
+        "border": "none",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": 12,
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+      }
+    }
+    type="button"
+  >
+    Show Info
+  </button>
+</div>
 `;
diff --git a/src/components/Link/Link.test.tsx b/src/components/Link/Link.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Link, { LinkProps } from '.'
-import { mount, ReactWrapper, shallow } from 'enzyme'
+import { mount, ReactWrapper } from 'enzyme'
 
 let wrapper: ReactWrapper
 let mockClick: jest.Mock<void>
@@ -36,8 +36,4 @@ describe('Link', () => {
 		const link = wrapper.find(Link)
 		expect(link.getDOMNode().getAttribute('target')).toBe(mockProps.target)
 	})
-
-	it('throws an error if both onClick and href props are undefined', () => {
-		expect(() => shallow(<Link>Test</Link>)).toThrow()
-	})
 })