new variant chevron for buttonIcon #89

marketgoo · Mar 9, 2020 · cdc0bb7 · cdc0bb7
1 parent 5a0de95
commit cdc0bb7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/ButtonIcon/index.js b/src/ButtonIcon/index.js
@@ -23,7 +23,7 @@ ButtonIcon.propTypes = {
   /** Render ButtonIcon with any html tag */
   as: PT.string,
   /** Button variants */
-  variant: PT.oneOf(['normal', 'destructive']),
+  variant: PT.oneOf(['normal', 'destructive', 'chevron']),
   /** Extra className */
   extraClass: PT.string,
   /** Childen nodes */

diff --git a/src/ButtonIcon/stories.js b/src/ButtonIcon/stories.js
@@ -12,8 +12,8 @@ storiesOf('ButtonIcon')
     <figure>
       <ButtonIcon
         onClick={action('onClick event')}
-        variant={radios('Variant', ['normal', 'destructive'], 'normal')}>
-        <Icon name="close" />
+        variant={radios('Variant', ['normal', 'destructive', 'chevron'], 'normal')}>
+        <Icon name="user" />
       </ButtonIcon>
     </figure>
   ))

diff --git a/src/ButtonIcon/style.css b/src/ButtonIcon/style.css
@@ -50,5 +50,15 @@
         --color-hover: var(--error-dark);
         --background-active: var(--error-focus);
     }
+
+    &.is-chevron {
+        background-repeat: no-repeat;
+        background-position: right center;
+        padding-right: var(--size-7);
+        border-radius: var(--radius-big);
+
+        /* Chevron gray */
+        background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M22,23.5857864 L27.2928932,18.2928932 C27.6834175,17.9023689 28.3165825,17.9023689 28.7071068,18.2928932 C29.0976311,18.6834175 29.0976311,19.3165825 28.7071068,19.7071068 L22.7071068,25.7071068 C22.3165825,26.0976311 21.6834175,26.0976311 21.2928932,25.7071068 L15.2928932,19.7071068 C14.9023689,19.3165825 14.9023689,18.6834175 15.2928932,18.2928932 C15.6834175,17.9023689 16.3165825,17.9023689 16.7071068,18.2928932 L22,23.5857864 Z" fill="%2357657a"></path></svg>');
+    }
 }