diff --git a/package.json b/package.json
index fef652d..76037ae 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"registry": "https://npm.pkg.github.com"
},
"repository": "git://github.com/contacto-io/contacto-console",
- "version": "0.5.26",
+ "version": "0.5.28",
"main": "build/index.js",
"module": "build/index.es.js",
"files": [
diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
index b9cef31..8a76635 100644
--- a/src/components/Button/Button.stories.js
+++ b/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',
+}
diff --git a/src/components/Button/button.scss b/src/components/Button/button.scss
index ee444ea..2c7906a 100644
--- a/src/components/Button/button.scss
+++ b/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
}
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index 932184f..3d84a3b 100644
--- a/src/components/Button/index.js
+++ b/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 ? : null}
{...props}
@@ -101,6 +105,7 @@ Button.propTypes = {
*/
align: PropTypes.oneOf(['left', 'right', 'center']),
children: PropTypes.any,
+ variant: PropTypes.string,
}
Button.defaultProps = {
diff --git a/src/components/TopBanner/TopBanner.stories.js b/src/components/TopBanner/TopBanner.stories.js
new file mode 100644
index 0000000..beffbee
--- /dev/null
+++ b/src/components/TopBanner/TopBanner.stories.js
@@ -0,0 +1,68 @@
+import React from 'react'
+import { TopBanner, BannerType } from './'
+import { Button } from '../Button'
+
+export default {
+ title: 'Components/TopBanner',
+ component: TopBanner,
+ argTypes: {
+ type: {
+ options: BannerType,
+ control: { type: 'select' },
+ },
+ },
+}
+
+const Template = (args) =>
+
+export const Default = Template.bind({})
+Default.args = {
+ visible: true,
+ content: 'This is default type banner.',
+}
+
+export const Success = Template.bind({})
+Success.args = {
+ visible: true,
+ content: 'This is success type banner.',
+ type: 'success',
+}
+
+export const Danger = Template.bind({})
+Danger.args = {
+ visible: true,
+ content: 'This is danger type banner.',
+ type: 'danger',
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+ visible: true,
+ content: 'This is warning type banner.',
+ type: 'warning',
+}
+
+export const BannerWithButton = Template.bind({})
+BannerWithButton.args = {
+ visible: true,
+ content: 'This is banner with action button.',
+ type: 'default',
+ buttons: [
+