fix(tag): add link styles (#100)

* fix(tag): add link styles * chore(tag): add a story
wework · May 16, 2019 · 8c5cf4b · 8c5cf4b
1 parent ff33608
commit 8c5cf4b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git a/docs/components/tag.md b/docs/components/tag.md
@@ -10,3 +10,9 @@ title: Tag
     variation="tag"
     >
 </component>
+
+<component
+    component="tag"
+    variation="tag-link"
+    >
+</component>
diff --git a/docs/html/tag/tag-link.html b/docs/html/tag/tag-link.html
@@ -0,0 +1 @@
+<a href="javascript:;" class="ray-tag">Enterprise</a>
diff --git a/packages/core/src/components/tag/_tag.scss b/packages/core/src/components/tag/_tag.scss
@@ -4,12 +4,23 @@
 @include exports('ray-tag') {
   .#{$ray-class-prefix}tag {
     font-family: $ray-font-stack-mono;
-    border: 1px solid $ray-color-black;
+    border: 1px solid $ray-color-gray-30;
     border-radius: $ray-border-radius;
     display: inline;
     padding: $ray-spacing-3xs $ray-spacing-xs;
     text-transform: uppercase;
     font-weight: 400;
     font-size: 0.875rem;
   }
+
+  a.#{$ray-class-prefix}tag {
+    border-color: $ray-color-black;
+    color: $ray-color-black;
+
+    &:hover {
+      border-color: $ray-color-blue-50;
+      color: $ray-color-blue-50;
+      text-decoration: none;
+    }
+  }
 }
diff --git a/packages/core/stories/tag.stories.js b/packages/core/stories/tag.stories.js
@@ -1,8 +1,16 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-storiesOf('Tag', module).add('default', () => (
-  <>
-    <span className="ray-tag">Enterprise</span>
-  </>
-));
+storiesOf('Tag', module)
+  .add('default', () => (
+    <>
+      <span className="ray-tag">Enterprise</span>
+    </>
+  ))
+  .add('as a link', () => (
+    <>
+      <a href="javascript:;" className="ray-tag">
+        Enterprise
+      </a>
+    </>
+  ));
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<a href="javascript:;" class="ray-tag">Enterprise</a>