Merge pull request #488 from CraveFood/link-type

Link - Allow any CSS color for `type` prop
CraveFood · Aug 14, 2018 · 3d1bfb5 · 3d1bfb5
2 parents e46f7f7 + afd12c3
commit 3d1bfb5
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 23 deletions.
diff --git a/packages/link/README.md b/packages/link/README.md
@@ -11,15 +11,6 @@ A React component to create links. See
 npm install @crave/farmblocks-link
 ```
 
-## Design Spec
-
-See it on zeplin:
-https://scene.zeplin.io/project/595a9cd3b401bf1876faab27/screen/59ee42d9ed214b77c54c4e1f
-https://scene.zeplin.io/project/595a9cd3b401bf1876faab27/screen/59ee42d9b95cec4ea9ed4e14
-https://scene.zeplin.io/project/595a9cd3b401bf1876faab27/screen/59ee42dab95cec4ea9ed4e48
-https://scene.zeplin.io/project/595a9cd3b401bf1876faab27/screen/59ee42dac5418ce9dc27ffa2
-https://scene.zeplin.io/project/595a9cd3b401bf1876faab27/screen/59ee42da064e270badd9be38
-
 ## Usage
 
 A Link renders a stylized `<a>` tag, which has to have a `href` value or a
@@ -45,18 +36,18 @@ document.body.appendChild(root);
 
 ## API
 
-| Property   | Description                                                                              | Type                                                                |
-| ---------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
-| children   | the contents of the card                                                                 | React.Node                                                          |
-| href       | an URI to a desired destination                                                          | string                                                              |
-| type       | the type of link (reflects on color and text-decoration)                                 | one of "FEATURED", "NEUTRAL", "NORMAL" or "WHITE" from linkTypes.js |
-| disabled   | indicates a disabled link                                                                | boolean                                                             |
-| onClick    | a function to handle an onClick event                                                    | function                                                            |
-| leftIcon   | an icon to be placed on the left side of the link                                        | string                                                              |
-| rightIcon  | an icon to be placed on the right side of the link                                       | string                                                              |
-| external   | an indication of an external link (an icon will be placed on the right side of the link) | boolean                                                             |
-| size       | a `font-size` css value for `children`                                                   | number                                                              |
-| lineHeight | a `line-height` css value for `children`                                                 | number or string                                                    |
+| Property   | Description                                                                              | Type                                                                                                         |
+| ---------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| children   | the contents of the card                                                                 | React.Node                                                                                                   |
+| href       | an URI to a desired destination                                                          | string                                                                                                       |
+| type       | the type of link (reflects on color and text-decoration)                                 | string. One of `FEATURED`, `NEUTRAL`, `NORMAL` or `WHITE` constants from linkTypes.js or any valid CSS color |
+| disabled   | indicates a disabled link                                                                | boolean                                                                                                      |
+| onClick    | a function to handle an onClick event                                                    | function                                                                                                     |
+| leftIcon   | an icon to be placed on the left side of the link                                        | string                                                                                                       |
+| rightIcon  | an icon to be placed on the right side of the link                                       | string                                                                                                       |
+| external   | an indication of an external link (an icon will be placed on the right side of the link) | boolean                                                                                                      |
+| size       | a `font-size` css value for `children`                                                   | number                                                                                                       |
+| lineHeight | a `line-height` css value for `children`                                                 | number or string                                                                                             |
 
 ## License
 

diff --git a/packages/link/src/components/Link.js b/packages/link/src/components/Link.js
@@ -1,6 +1,5 @@
 import * as React from "react";
 import PropTypes from "prop-types";
-import values from "object.values";
 import { fontSizes } from "@crave/farmblocks-theme";
 
 import linkTypes from "../constants/linkTypes";
@@ -40,7 +39,7 @@ const Link = props => {
 
 Link.propTypes = {
   children: PropTypes.node.isRequired,
-  type: PropTypes.oneOf(values(linkTypes)),
+  type: PropTypes.string,
   leftIcon: PropTypes.string,
   rightIcon: PropTypes.string,
   external: PropTypes.bool,

diff --git a/packages/link/src/components/Link.story.js b/packages/link/src/components/Link.story.js
@@ -144,4 +144,12 @@ storiesOf("Link/Featured", module)
   .add(
     "no href with left icon",
     withInfo()(() => <Link leftIcon="wg-place">Awesome Link</Link>)
+  )
+  .add(
+    "Custom color",
+    withInfo()(() => (
+      <Link href="#" type="hotpink">
+        Awesome Link
+      </Link>
+    ))
   );
diff --git a/packages/link/src/components/__snapshots__/Link.story.storyshot b/packages/link/src/components/__snapshots__/Link.story.storyshot
@@ -1,5 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Link/Featured Custom color 1`] = `
+.c0 {
+  font-family: Lato,sans-serif;
+  display: inline-block;
+  position: relative;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  color: hotpink;
+}
+
+.c0 > i.margin-left {
+  margin-left: 8px;
+}
+
+.c0 > i.margin-right {
+  margin-right: 8px;
+}
+
+.c0 > a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 > a:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0 > a {
+  color: inherit;
+}
+
+<div
+  className="c0"
+  disabled={false}
+  size={16}
+  type="hotpink"
+>
+  <a
+    href="#"
+  >
+    Awesome Link
+  </a>
+</div>
+`;
+
 exports[`Storyshots Link/Featured Default - left aligned, medium size 1`] = `
 .c0 {
   font-family: Lato,sans-serif;