From 9a3939f43971eb5c15482ad76bfc616ded14f6f5 Mon Sep 17 00:00:00 2001
From: mimanshi-plivo <mimanshi.tiwari@plivo.com>
Date: Fri, 4 Aug 2023 15:58:58 +0530
Subject: [PATCH 1/7] feat: added top banner

---
 package-lock.json                             |  6 ++
 src/components/TopBanner/TopBanner.stories.js | 67 +++++++++++++++++++
 src/components/TopBanner/index.js             | 38 +++++++++++
 src/components/TopBanner/topbanner.scss       | 37 ++++++++++
 4 files changed, 148 insertions(+)
 create mode 100644 src/components/TopBanner/TopBanner.stories.js
 create mode 100644 src/components/TopBanner/index.js
 create mode 100644 src/components/TopBanner/topbanner.scss

diff --git a/package-lock.json b/package-lock.json
index 11e7ada..28ec663 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27329,6 +27329,12 @@
         }
       }
     },
+    "wavesurfer.js": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-7.1.1.tgz",
+      "integrity": "sha512-nChYa5M4tOGkTP4EtzyHXY3pk/T7bI2ttv6A5wFPS/3+jjQ8I85esqqPn52+ZJyE72r2hpgk863xekgRswAcaw==",
+      "dev": true
+    },
     "wbuf": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
diff --git a/src/components/TopBanner/TopBanner.stories.js b/src/components/TopBanner/TopBanner.stories.js
new file mode 100644
index 0000000..cdf7f95
--- /dev/null
+++ b/src/components/TopBanner/TopBanner.stories.js
@@ -0,0 +1,67 @@
+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"
+    />,
+  ],
+}
+
+export const BannerWithLoading = Template.bind({})
+BannerWithLoading.args = {
+  visible: true,
+  content: 'This is banner with action button.',
+  type: 'danger',
+  loading: true,
+}
diff --git a/src/components/TopBanner/index.js b/src/components/TopBanner/index.js
new file mode 100644
index 0000000..7c1f010
--- /dev/null
+++ b/src/components/TopBanner/index.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Block } from '../Block'
+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} color="white" />
+        </Block>
+      )}
+      <Text type="headline" color="white">
+        {loading ? loadingText : content}
+      </Text>
+      {!loading && buttons && (
+        <Block display="flex" className="top-banner-buttons-container">
+          {buttons.map((button) => button)}
+        </Block>
+      )}
+    </Block>
+  ) : null
+}
diff --git a/src/components/TopBanner/topbanner.scss b/src/components/TopBanner/topbanner.scss
new file mode 100644
index 0000000..c39d54b
--- /dev/null
+++ b/src/components/TopBanner/topbanner.scss
@@ -0,0 +1,37 @@
+.top-banner {
+    height: 36px;
+    gap: 4px;
+    &-buttons-container {
+      gap: 16px;
+    //   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;
+      }
+    }
+ 
+    &.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);
+    }
+  }
+  
\ No newline at end of file

From a3f0dc81be7377599cf637694bceabce0b65aa58 Mon Sep 17 00:00:00 2001
From: mimanshi-plivo <mimanshi.tiwari@plivo.com>
Date: Fri, 4 Aug 2023 16:22:03 +0530
Subject: [PATCH 2/7] fix: fixes font weight of banner content

---
 package.json                      | 2 +-
 src/components/TopBanner/index.js | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index f95cff7..441b71c 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.10",
+  "version": "0.5.11",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [
diff --git a/src/components/TopBanner/index.js b/src/components/TopBanner/index.js
index 7c1f010..d61a92a 100644
--- a/src/components/TopBanner/index.js
+++ b/src/components/TopBanner/index.js
@@ -25,9 +25,7 @@ export const TopBanner = ({
           <Icon.Loading size={16} color="white" />
         </Block>
       )}
-      <Text type="headline" color="white">
-        {loading ? loadingText : content}
-      </Text>
+      <Text color="white">{loading ? loadingText : content}</Text>
       {!loading && buttons && (
         <Block display="flex" className="top-banner-buttons-container">
           {buttons.map((button) => button)}

From 66b6e80fa4e12dbdfec80f1a0d6ae2eab1e2b49a Mon Sep 17 00:00:00 2001
From: mimanshi-plivo <mimanshi.tiwari@plivo.com>
Date: Fri, 4 Aug 2023 16:29:25 +0530
Subject: [PATCH 3/7] fix: block import

---
 package.json                      | 2 +-
 src/components/TopBanner/index.js | 2 +-
 src/index.js                      | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 441b71c..0ac54e8 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.11",
+  "version": "0.5.12",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [
diff --git a/src/components/TopBanner/index.js b/src/components/TopBanner/index.js
index d61a92a..4ee7021 100644
--- a/src/components/TopBanner/index.js
+++ b/src/components/TopBanner/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Block } from '../Block'
+import { Block } from '../Block/index'
 import { Icon } from '../Icon/index'
 import { Text } from '../Typography/index'
 import './topbanner.scss'
diff --git a/src/index.js b/src/index.js
index e9f5e39..45682c5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,3 +22,4 @@ 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'

From 4de33b78c0b8e1dec9cf7a8f4d2415c35ab22fa2 Mon Sep 17 00:00:00 2001
From: mimanshi-plivo <mimanshi.tiwari@plivo.com>
Date: Fri, 4 Aug 2023 18:15:37 +0530
Subject: [PATCH 4/7] fix: added new button and code review cahnges

---
 src/components/Button/Button.stories.js       | 7 +++++++
 src/components/Button/button.scss             | 7 +++++++
 src/components/Button/index.js                | 5 +++++
 src/components/TopBanner/TopBanner.stories.js | 1 +
 src/components/TopBanner/index.js             | 2 +-
 src/components/TopBanner/topbanner.scss       | 5 -----
 6 files changed, 21 insertions(+), 6 deletions(-)

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 ? <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 = {
diff --git a/src/components/TopBanner/TopBanner.stories.js b/src/components/TopBanner/TopBanner.stories.js
index cdf7f95..beffbee 100644
--- a/src/components/TopBanner/TopBanner.stories.js
+++ b/src/components/TopBanner/TopBanner.stories.js
@@ -54,6 +54,7 @@ BannerWithButton.args = {
       onClick={() => alert('Banner button clicked!')}
       size="small"
       type="link"
+      variant="underline"
     />,
   ],
 }
diff --git a/src/components/TopBanner/index.js b/src/components/TopBanner/index.js
index 4ee7021..22d3764 100644
--- a/src/components/TopBanner/index.js
+++ b/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>
diff --git a/src/components/TopBanner/topbanner.scss b/src/components/TopBanner/topbanner.scss
index c39d54b..e41d606 100644
--- a/src/components/TopBanner/topbanner.scss
+++ b/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;

From 2c69e9f24389f66fbc39a19adc11fef206129a21 Mon Sep 17 00:00:00 2001
From: mimanshi-plivo <mimanshi.tiwari@plivo.com>
Date: Fri, 4 Aug 2023 18:16:45 +0530
Subject: [PATCH 5/7] chore: published version 0.5.13

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0ac54e8..2ea752f 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.12",
+  "version": "0.5.13",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [

From 2c8df3a20353a618e5c8abd504f1416f075b5748 Mon Sep 17 00:00:00 2001
From: mimanshi-plivo <mimanshi.tiwari@plivo.com>
Date: Wed, 9 Aug 2023 20:18:51 +0530
Subject: [PATCH 6/7] fix: fixes banner css

---
 package.json                            | 2 +-
 src/components/TopBanner/topbanner.scss | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 2ea752f..28c7f08 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.13",
+  "version": "0.5.14",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [
diff --git a/src/components/TopBanner/topbanner.scss b/src/components/TopBanner/topbanner.scss
index e41d606..74ee690 100644
--- a/src/components/TopBanner/topbanner.scss
+++ b/src/components/TopBanner/topbanner.scss
@@ -1,9 +1,13 @@
 .top-banner {
     height: 36px;
     gap: 4px;
+
+    .contacto-typography--body {
+      text-align: center;
+    }
+
     &-buttons-container {
       gap: 16px;
-    //   margin-left: 4px;
   
       .sg.cnto-btn.contacto-button--small {
         color: white;

From 338f56c5a93013c756169b83c22418b02044b2be Mon Sep 17 00:00:00 2001
From: mimanshi-plivo <mimanshi.tiwari@plivo.com>
Date: Thu, 24 Aug 2023 15:22:39 +0530
Subject: [PATCH 7/7] chor: updated version to 0.5.20

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5ab7707..ac5d9f3 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.17",
+  "version": "0.5.20",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [