Merge pull request #60 from contacto-io/top-banner

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.26",
+  "version": "0.5.28",
   "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

@@ -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) => <TopBanner {...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: [
+    <Button
+      label="Alert"
+      key="button"
+      onClick={() => alert('Banner button clicked!')}
+      size="small"
+      type="link"
+      variant="underline"
+    />,
+  ],
+}
+
+export const BannerWithLoading = Template.bind({})
+BannerWithLoading.args = {
+  visible: true,
+  content: 'This is banner with action button.',
+  type: 'danger',
+  loading: true,
+}

src/components/TopBanner/index.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Block } from '../Block/index'
+import { Icon } from '../Icon/index'
+import { Text } from '../Typography/index'
+import './topbanner.scss'
+
+export const BannerType = ['warning', 'danger', 'success', 'default']
+export const TopBanner = ({
+  type = 'default',
+  content,
+  buttons,
+  loading,
+  visible,
+  loadingText = 'Loading',
+}) => {
+  return visible ? (
+    <Block
+      className={`top-banner ${type}`}
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+    >
+      {loading && (
+        <Block>
+          <Icon.Loading size={16} trackColor="white" />
+        </Block>
+      )}
+      <Text color="white">{loading ? loadingText : content}</Text>
+      {!loading && buttons && (
+        <Block display="flex" className="top-banner-buttons-container">
+          {buttons.map((button) => button)}
+        </Block>
+      )}
+    </Block>
+  ) : null
+}

src/components/TopBanner/topbanner.scss

@@ -0,0 +1,36 @@
+.top-banner {
+    height: 36px;
+    gap: 4px;
+
+    .contacto-typography--body {
+      text-align: center;
+    }
+
+    &-buttons-container {
+      gap: 16px;
+
+      .sg.cnto-btn.contacto-button--small {
+        color: white;
+      }
+      .sg.ant-btn.cnto-btn.contacto-button--link:hover {
+        color: white;
+      }
+    }
+
+    &.default {
+        background-color: var(--primary-text-color);
+    }
+
+    &.success {
+      background-color: var(--success-color);
+    }
+
+    &.danger {
+      background-color: var(--danger-color);
+    }
+
+    &.warning {
+      background-color: var(--warning-color);
+    }
+  }
+

src/index.js

@@ -22,4 +22,5 @@ export * from './components/GroupAndSearchDropdown/index'
 export * from './components/Cascader/index'
 export * from './components/DatePicker/index'
 export * from './components/KeyValueEditor/index'
+export * from './components/TopBanner/index'
 export * from './components/TimeLeftBar/index'