@performant-software/semantic-components 1.0.22 → 1.0.23-beta.1

package/types/components/Toaster.js.flow

@@ -6,14 +6,37 @@ import _ from 'underscore';
 import './Toaster.css';
 
 type Props = {
+  /**
+   * A child element that will be displayed in the toaster pane.
+   * It can be a simple as a Text string or any child component.
+   */
   children: Array<Element<any>>,
+  /**
+   * An optional function to be called when the toaster pane closes.
+   */
   onDismiss?: () => void,
+  /**
+   * Time in milliseconds that the toaster should be displayed to the
+   * user.
+   */
   timeout: number,
+  /**
+   * The type of Toaster that should be displayed. The Toaster component supports:
+   *  * "info" - A yellow Toaster pane used to display useful but non-critical information
+   *  * "positive" - A green toaster pane. This should be used for postive user feedback
+   *  * "negative" - A red toaster pane. This should be used for negative user feedback and errors
+   *  * "warning"
+   */
   type: string
 };
 
 const TRANSITION_DURATION = 700;
 
+/**
+ *
+ * This is a simple messaging pane that drops from the top of
+ * the page and displays that child elements
+ */
 const Toaster = (props: Props) => {
   const [visible, setVisible] = useState(true);
 
@@ -49,7 +72,7 @@ const Toaster = (props: Props) => {
         negative={props.type === Toaster.MessageTypes.negative}
         onDismiss={() => setVisible(false)}
         positive={props.type === Toaster.MessageTypes.positive}
-        warning={props.type === Toaster.MessageTypes.negative}
+        warning={props.type === Toaster.MessageTypes.warning}
       >
         { props.children }
       </Message>