Top banner

package.json

@@ -4,7 +4,7 @@
     "registry": "https://npm.pkg.github.com"
   },
   "repository": "git://github.com/contacto-io/contacto-console",
-  "version": "0.5.12",
+  "version": "0.5.13",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [

src/components/Button/Button.stories.js

@@ -89,3 +89,10 @@ LinkDanger.args = {
   label: 'Button without border',
   type: 'link-danger',
 }
+
+export const LinkUnderline = Template.bind({})
+LinkUnderline.args = {
+  label: 'Button without border',
+  type: 'link',
+  variant: 'underline',
+}

src/components/Button/button.scss

@@ -183,6 +183,13 @@
     }
   }
 
+  &--underline {
+    text-decoration: underline;
+    height: 24px;
+    padding: 0;
+    min-width: 0;
+  }
+
   .contacto-icon {
     margin-right: 8px
   }

src/components/Button/index.js

@@ -22,6 +22,7 @@ export const getButtonClassName = (
   onlyIcon,
   fullWidth,
   align,
+  variant,
 ) => {
   return [
     'sg',
@@ -34,6 +35,7 @@ export const getButtonClassName = (
     fullWidth ? 'contacto-button--full-width' : '',
     align ? `contacto-button--${align}` : '',
     className,
+    variant ? `contacto-button--${variant}` : '',
   ].join(' ')
 }
 /**
@@ -48,6 +50,7 @@ export const Button = ({
   align,
   className,
   children,
+  variant,
   ...props
 }) => {
   return (
@@ -60,6 +63,7 @@ export const Button = ({
         !(label || children) && icon,
         fullWidth,
         align,
+        variant,
       )}
       icon={icon ? <Icon name={icon} className={size} /> : null}
       {...props}
@@ -101,6 +105,7 @@ Button.propTypes = {
    */
   align: PropTypes.oneOf(['left', 'right', 'center']),
   children: PropTypes.any,
+  variant: PropTypes.string,
 }
 
 Button.defaultProps = {

src/components/TopBanner/TopBanner.stories.js

@@ -54,6 +54,7 @@ BannerWithButton.args = {
       onClick={() => alert('Banner button clicked!')}
       size="small"
       type="link"
+      variant="underline"
     />,
   ],
 }

src/components/TopBanner/index.js

@@ -22,7 +22,7 @@ export const TopBanner = ({
     >
       {loading && (
         <Block>
-          <Icon.Loading size={16} color="white" />
+          <Icon.Loading size={16} trackColor="white" />
         </Block>
       )}
       <Text color="white">{loading ? loadingText : content}</Text>

src/components/TopBanner/topbanner.scss

@@ -6,12 +6,7 @@
     //   margin-left: 4px;
 
       .sg.cnto-btn.contacto-button--small {
-        height: 24px;
-        padding: 0;
-        min-width: 0;
-        font-weight: 600;
         color: white;
-        text-decoration: underline;
       }
       .sg.ant-btn.cnto-btn.contacto-button--link:hover {
         color: white;