Merge pull request #65 from contacto-io/bug/CNTO-7295-INACTIVITY-UX-R…

…EVIEW

bug: added compact variant for alert component

package.json

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

src/components/Alert/index.js

@@ -14,10 +14,15 @@ const iconMap = {
 /**
  * Component that is used to show alert messages on the UI
  */
-export const Alert = ({ className = '', type, message, ...props }) => {
+export const Alert = ({ className = '', type, message, size = 'default', ...props }) => {
   return (
     <div
-      className={['sg contacto-alert', `contacto-alert--${type}`, className].join(' ')}
+      className={[
+        'sg contacto-alert',
+        `contacto-alert--${type}`,
+        `contacto-alert--${size}`,
+        className,
+      ].join(' ')}
       {...props}
     >
       <div className="contacto-alert-icon">
@@ -43,6 +48,10 @@ Alert.propTypes = {
    * The alert message to be displayed
    */
   message: PropTypes.string,
+  /**
+   * Variant of alert (default/compact).
+   */
+  size: PropTypes.oneOf(['default', 'compact']),
 }
 
 Alert.defaultProps = {}

src/components/Alert/index.stories.js

@@ -14,6 +14,13 @@ export default {
 
 const Template = (args) => <Alert {...args} />
 
+export const Compact = Template.bind({})
+Compact.args = {
+  message: 'This is a warning banner of size compact',
+  type: 'info',
+  size: 'compact',
+}
+
 export const Default = Template.bind({})
 Default.args = {
   message: 'This is a warning banner',

src/components/Alert/styles.scss

@@ -10,6 +10,11 @@
     line-height: 0;
     color: var(--base-color);
     background-color: var(--bg-color);
+
+    &--compact {
+        padding: 8px;
+        gap: 8px;
+    }
 
     &--success {
         --base-color: var(--success-color);