Make Alerts dismissible (#11)

react-ui-org · Jun 5, 2020 · 548657c · 548657c
1 parent aad877f
commit 548657c
Show file tree

Hide file tree

Showing 10 changed files with 216 additions and 107 deletions.
diff --git a/src/demo/pages/DemoContainer.jsx b/src/demo/pages/DemoContainer.jsx
@@ -864,57 +864,90 @@ class DemoContainer extends React.Component {
             <Documentation
               name="Alert types"
               component={(
-                <div>
-                  <Alert type="success">
-                    <span>
-                      <strong>Success: </strong>
-                      Success message
-                    </span>
-                  </Alert>
-                  <Alert type="warning">
-                    <span>
-                      <strong>Warning: </strong>
-                      Warning message
-                    </span>
-                  </Alert>
-                  <Alert type="error">
-                    <span>
-                      <strong>Error: </strong>
-                      Error message
-                    </span>
-                  </Alert>
-                  <Alert type="info">
-                    <span>
-                      <strong>Info: </strong>
-                      Info message
-                    </span>
-                  </Alert>
-                  <Alert type="help">
-                    <span>
-                      <strong>Help: </strong>
-                      Help message
-                    </span>
-                  </Alert>
-                  <Alert>
-                    <span>
-                      <strong>Note: </strong>
-                      Note message
-                    </span>
-                  </Alert>
-                </div>
+                <>
+                  <div className="mb-4">
+                    <Alert type="success">
+                      <span>
+                        <strong>Success: </strong>
+                        Success message
+                      </span>
+                    </Alert>
+                  </div>
+                  <div className="mb-4">
+                    <Alert type="warning">
+                      <span>
+                        <strong>Warning: </strong>
+                        Warning message
+                      </span>
+                    </Alert>
+                  </div>
+                  <div className="mb-4">
+                    <Alert type="error">
+                      <span>
+                        <strong>Error: </strong>
+                        Error message
+                      </span>
+                    </Alert>
+                  </div>
+                  <div className="mb-4">
+                    <Alert type="info">
+                      <span>
+                        <strong>Info: </strong>
+                        Info message
+                      </span>
+                    </Alert>
+                  </div>
+                  <div className="mb-4">
+                    <Alert type="help">
+                      <span>
+                        <strong>Help: </strong>
+                        Help message
+                      </span>
+                    </Alert>
+                  </div>
+                  <div>
+                    <Alert>
+                      <span>
+                        <strong>Note: </strong>
+                        Note message
+                      </span>
+                    </Alert>
+                  </div>
+                </>
               )}
             />
             <Documentation
-              name="Alert with icon"
+              name="Dismissible alert with icon"
               component={(
-                <div>
-                  <Alert type="success" icon={<Icon icon="success" />}>
-                    <span>
-                      <strong>Success: </strong>
-                      Success message
-                    </span>
-                  </Alert>
-                </div>
+                <Alert
+                  closeHandler={loggerClick}
+                  icon={<Icon icon="success" />}
+                  type="success"
+                >
+                  <span>
+                    <strong>Success: </strong>
+                    Success message
+                  </span>
+                </Alert>
+              )}
+            />
+            <Documentation
+              name="Dismissible alert with long content"
+              component={(
+                <Alert
+                  closeHandler={loggerClick}
+                  icon={<Icon icon="success" />}
+                  type="success"
+                >
+                  <span>
+                    <strong>Success: </strong>
+                    Curabitur sagittis hendrerit ante. Integer pellentesque quam vel velit. Sed vel
+                    lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem.
+                    Pellentesque sapien. Ut enim ad minima veniam, quis nostrum exercitationem ullam
+                    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
+                    Maecenas sollicitudin.
+                  </span>
+                </Alert>
               )}
             />
             <h3 id="ui-components-badge" className="typography-size-4 mb-6">Badge</h3>

diff --git a/src/lib/components/ui/Alert/Alert.jsx b/src/lib/components/ui/Alert/Alert.jsx
@@ -3,54 +3,84 @@ import React from 'react';
 import styles from './Alert.scss';
 
 const Alert = (props) => {
-  let rootTypeClass = styles.note;
-
-  if (props.type) {
-    if (props.type === 'success') {
-      rootTypeClass = styles.success;
-    } else if (props.type === 'error') {
-      rootTypeClass = styles.error;
-    } else if (props.type === 'warning') {
-      rootTypeClass = styles.warning;
-    } else if (props.type === 'info') {
-      rootTypeClass = styles.info;
-    } else if (props.type === 'help') {
-      rootTypeClass = styles.help;
+  const {
+    children,
+    closeHandler,
+    icon,
+    id,
+    type,
+  } = props;
+
+  const rootTypeClass = (variant) => {
+    if (variant === 'success') {
+      return styles.isRootSuccess;
+    }
+
+    if (variant === 'error') {
+      return styles.isRootError;
     }
-  }
+
+    if (variant === 'warning') {
+      return styles.isRootWarning;
+    }
+
+    if (variant === 'info') {
+      return styles.isRootInfo;
+    }
+
+    if (variant === 'help') {
+      return styles.isRootHelp;
+    }
+
+    return styles.isRootNote;
+  };
 
   return (
     <div
-      className={(`
-        ${styles.root}
-        ${rootTypeClass}
-      `).trim()}
-      id={props.id}
+      className={[
+        styles.root,
+        rootTypeClass(type),
+      ].join(' ')}
+      id={id}
       role="alert"
     >
-      {props.icon && (
+      {icon && (
         <div className={styles.icon}>
-          {props.icon}
+          {icon}
         </div>
       )}
       <div
         className={styles.message}
-        {...(props.id && { id: `${props.id}__content` })}
+        {...(id && { id: `${id}__content` })}
       >
-        {props.children}
+        {children}
       </div>
+      {closeHandler && (
+        <button
+          type="button"
+          {...(id && { id: `${id}__close` })}
+          className={styles.close}
+          onClick={() => closeHandler()}
+          onKeyPress={() => closeHandler()}
+          tabIndex="0"
+        >
+          <span className={styles.closeSign}>×</span>
+        </button>
+      )}
     </div>
   );
 };
 
 Alert.defaultProps = {
+  closeHandler: null,
   icon: null,
   id: undefined,
   type: 'note',
 };
 
 Alert.propTypes = {
   children: PropTypes.node.isRequired,
+  closeHandler: PropTypes.func,
   icon: PropTypes.node,
   id: PropTypes.string,
   type: PropTypes.oneOf(['error', 'help', 'info', 'note', 'success', 'warning']),

diff --git a/src/lib/components/ui/Alert/Alert.scss b/src/lib/components/ui/Alert/Alert.scss
@@ -1,20 +1,37 @@
+@import '../../../styles/tools/offset';
 @import 'mixins';
 
 .root {
-  @include alert();
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  border-width: $alert-border-width $alert-border-width $alert-border-width $alert-stripe-width;
+  border-style: solid;
+  border-radius: $alert-border-radius;
+}
+
+.close,
+.icon,
+.message {
+  padding: $alert-padding;
+}
+
+.close,
+.icon {
+  height: $alert-min-height;
 }
 
 .icon {
   display: flex;
   flex: none;
   align-items: center;
-  align-self: flex-start;
   justify-content: center;
-  height: calc(#{$alert-line-height} * #{$alert-font-size});
+  padding-right: 0;
 }
 
 .message {
-  padding-left: $alert-padding;
+  flex-grow: 1;
   font-weight: $alert-message-font-weight;
   font-size: $alert-font-size;
   line-height: $alert-line-height;
@@ -24,26 +41,42 @@
   font-weight: $alert-title-font-weight;
 }
 
-.success {
+.close {
+  font-size: map-get($typography-size-values, 3);
+  line-height: 1;
+  border: 0;
+  background: none;
+  box-shadow: none;
+  appearance: none;
+  user-select: none;
+  cursor: pointer;
+}
+
+.closeSign {
+  position: relative;
+  top: -0.1em;
+}
+
+.isRootSuccess {
   @include alert-type(success);
 }
 
-.warning {
+.isRootWarning {
   @include alert-type(warning);
 }
 
-.error {
+.isRootError {
   @include alert-type(error);
 }
 
-.info {
+.isRootInfo {
   @include alert-type(info);
 }
 
-.help {
+.isRootHelp {
   @include alert-type(help);
 }
 
-.note {
+.isRootNote {
   @include alert-type(note);
 }
diff --git a/src/lib/components/ui/Alert/_mixins.scss b/src/lib/components/ui/Alert/_mixins.scss
@@ -1,17 +1,4 @@
-@import '../../../styles/tools/breakpoints';
 @import 'variables';
-@import 'theme';
-
-@mixin alert() {
-  position: relative;
-  display: flex;
-  width: 100%;
-  min-height: $alert-min-height;
-  padding: $alert-padding;
-  border-width: $alert-border-width $alert-border-width $alert-border-width $alert-stripe-width;
-  border-style: solid;
-  border-radius: $alert-border-radius;
-}
 
 @mixin alert-type($type) {
   $type-properties: map-get($alert-types, $type);
@@ -22,6 +9,7 @@
   background-color: map-get($type-properties, background-color);
 
   strong,
+  .close,
   .icon {
     color: $foreground-color;
   }

diff --git a/src/lib/components/ui/Alert/_theme.scss b/src/lib/components/ui/Alert/_theme.scss
@@ -1,7 +1,6 @@
 $alert-border-width: var(--rui-alert-border-width);
 $alert-border-radius: var(--rui-alert-border-radius);
 $alert-padding: var(--rui-alert-padding);
-$alert-icon-size: var(--rui-icon-size-default);
 
 $alert-types: (
   success: (

diff --git a/src/lib/components/ui/Alert/_variables.scss b/src/lib/components/ui/Alert/_variables.scss
@@ -1,14 +1,9 @@
-@import '../../../styles/settings/colors';
-@import '../../../styles/settings/offsets';
 @import '../../../styles/settings/typography';
 @import './theme';
 
 $alert-font-size: map-get($typography-size-values, 0);
-$alert-line-height: 1.2;
-$alert-min-height:
-  calc(
-    #{$alert-font-size} * #{$alert-line-height} + 2 * #{$alert-padding} + 2 * #{$alert-border-width}
-  );
+$alert-line-height: 1.5;
+$alert-min-height: calc(#{$alert-font-size} * #{$alert-line-height} + 2 * #{$alert-padding});
 $alert-stripe-width: 5px;
 $alert-message-font-weight: map-get($typography-font-weight-values, light);
 $alert-title-font-weight: map-get($typography-font-weight-values, bold);