chore: Add support for custom class names.

jessy1092 · May 22, 2018 · 0b5319b · 0b5319b
1 parent 58bb114
commit 0b5319b
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -60,6 +60,10 @@ It has four color.
 - `black`
 - `green`
 
+#### className
+
+It would be an html tag's attribute `class`.
+
 ## Release Notes
 
 ### Version 0.5.1 - 2017/10/05

diff --git a/dst/react-github-fork-ribbon.js b/dst/react-github-fork-ribbon.js
@@ -39,8 +39,9 @@ var GitHubForkRibbon = function GitHubForkRibbon(_ref) {
       target = _ref.target,
       _ref$color = _ref.color,
       color = _ref$color === undefined ? 'red' : _ref$color,
+      className = _ref.className,
       children = _ref.children,
-      other = _objectWithoutProperties(_ref, ['position', 'href', 'target', 'color', 'children']);
+      other = _objectWithoutProperties(_ref, ['position', 'href', 'target', 'color', 'className', 'children']);
 
   var positionStyle = positionMapping[position] || [_ribbonStyle.RibbonStyle.rightStyle, _ribbonStyle.RibbonStyleWrapper.rightStyle];
   var colorStyle = colorMapping[color] || _ribbonStyle.RibbonStyle.redColor;
@@ -56,7 +57,7 @@ var GitHubForkRibbon = function GitHubForkRibbon(_ref) {
   return _react2.default.createElement(
     'div',
     _extends({}, other, {
-      className: 'github-fork-ribbon-wrapper ' + position,
+      className: 'github-fork-ribbon-wrapper ' + position + ' ' + className,
       style: wrapperStyle }),
     _react2.default.createElement(
       'div',
@@ -138,7 +139,7 @@ var RibbonStyle = exports.RibbonStyle = {
 
     /* Add "stitching" effect */
     borderWidth: '1px 0',
-    borderStyle: 'dotted',
+    borderStyle: 'dashed',
     // borderColor: '#fff',
     borderColor: 'rgba(255, 255, 255, 0.7)'
   },

diff --git a/dst/react-github-fork-ribbon.min.js b/dst/react-github-fork-ribbon.min.js
diff --git a/src/index.js b/src/index.js
@@ -19,7 +19,7 @@ const colorMapping = {
   green: RibbonStyle.greenColor,
 };
 
-const GitHubForkRibbon = ({position = 'right', href, target, color = 'red', children, ...other}) => {
+const GitHubForkRibbon = ({position = 'right', href, target, color = 'red', className = '', children, ...other}) => {
 
   const positionStyle = positionMapping[position] || [RibbonStyle.rightStyle, RibbonStyleWrapper.rightStyle];
   const colorStyle = colorMapping[color] || RibbonStyle.redColor;
@@ -41,7 +41,7 @@ const GitHubForkRibbon = ({position = 'right', href, target, color = 'red', chil
 
   return (
     <div {...other}
-         className={`github-fork-ribbon-wrapper ${position}`}
+         className={`github-fork-ribbon-wrapper ${position} ${className}`}
          style={wrapperStyle}>
       <div className="github-fork-ribbon"
            style={ribbonStyle}>

diff --git a/storybook/__tests__/GithubForkRibbon.stories.js b/storybook/__tests__/GithubForkRibbon.stories.js
@@ -108,3 +108,25 @@ storiesOf('GitHub fork ribbon/color', module)
 
     return component;
   });
+
+storiesOf('GitHub fork ribbon/className', module)
+  .add('hidden on small devices up to 576px', () => {
+    const component = (
+      <div>
+        <style>
+        {`
+          @media (max-width: 576px) {
+            .custom-class {
+              display: none;
+            }
+          }
+        `}
+        </style>
+        <GitHubForkRibbon href="//www.google.com" target="_blank" className="custom-class">
+          Fork me on GitHub
+        </GitHubForkRibbon>
+      </div>
+    );
+
+    return component;
+  });