feat(components): rename notification components (#541)

* feat(components): rename Message to Notification

This brings it in line with the NotificationBanner and NotificationList

BREAKING CHANGE: The Message component has been renamed to Notification.

* feat(components): rename InlineNotification to InlineMessage

This is to avoid confusion with the Notification components.

BREAKING CHANGE: The InlineNotification component has been renamed to InlineMessage.

src/components/InlineMessage/InlineMessage.docs.mdx

@@ -0,0 +1,43 @@
+import { Status, Props, Story } from '../../../.storybook/components';
+import InlineMessage from './InlineMessage';
+
+# InlineMessage
+
+<Status.Stable />
+
+Inline message is a component that provides a short contextual message about an action taken by a user within the same card structure that they are in.
+
+<Story id="forms-inlinemessage--base" />
+<Props of={InlineMessage} />
+
+## When to use it
+
+Use it when we need to provide contextual information that highlights errors or warnings after the information has been inputted by a user.
+
+## Usage guidelines
+
+- **Do** always place the inline message above the primary call to action
+- **Do** make it clear for our users what they need to do in order to fix the possible error
+- **Do not** place an inline message in another card, it should always be in the same card as the input it is referring to
+
+## Component variants
+
+### Success
+
+Used to provide positive feedback without taking the user to another screen, such as updating the configuration
+on a settings page.
+
+<Story id="forms-inlinemessage--success" />
+
+### Warning
+
+Used to warn users regarding information that is not obligatory to fill or input, but it
+could provide additional help if the fill it.
+
+<Story id="forms-inlinemessage--warning" />
+
+### Alert
+
+The most common inline message type. Used to provide feedback that we cannot proceed forward in completing a task for the user (such as a login) if they don't fix what's wrong. Remember to always provide concrete instructions on how to solve the problem.
+
+<Story id="forms-inlinemessage--alert" />

src/components/InlineNotification/InlineNotification.js → src/components/InlineMessage/InlineMessage.js

@@ -22,7 +22,7 @@ const { SUCCESS, DANGER, WARNING } = colorNames;
 const { MEGA, GIGA } = sizes;
 
 const baseStyles = css`
-  label: inline-notification;
+  label: inline-message;
 `;
 
 const marginStyles = ({ noMargin }) =>
@@ -48,7 +48,7 @@ const createLeftBorderStyles = colorName => ({ theme, size, type }) => {
   return (
     colorName === type &&
     css`
-      label: ${`inline-notification--${type}`};
+      label: ${`inline-message--${type}`};
       color: ${textColors[type]};
       position: relative;
       margin-bottom: ${theme.spacings.mega};
@@ -74,48 +74,48 @@ const warningStyles = createLeftBorderStyles(WARNING);
 const dangerStyles = createLeftBorderStyles(DANGER);
 
 /**
- * An inline notification displayed inside a Card.
+ * An inline message displayed inside a Card.
  */
-const InlineNotification = styled('p')(
+const InlineMessage = styled('p')(
   baseStyles,
   dangerStyles,
   successStyles,
   warningStyles,
   marginStyles
 );
 
-InlineNotification.DANGER = DANGER;
-InlineNotification.SUCCESS = SUCCESS;
-InlineNotification.WARNING = WARNING;
+InlineMessage.DANGER = DANGER;
+InlineMessage.SUCCESS = SUCCESS;
+InlineMessage.WARNING = WARNING;
 
-InlineNotification.MEGA = MEGA;
-InlineNotification.GIGA = GIGA;
+InlineMessage.MEGA = MEGA;
+InlineMessage.GIGA = GIGA;
 
-InlineNotification.propTypes = {
+InlineMessage.propTypes = {
   /**
-   * Indicates the color of the left border and text in the notification.
+   * Indicates the color of the left border and text in the message.
    */
   type: PropTypes.oneOf([
-    InlineNotification.DANGER,
-    InlineNotification.SUCCESS,
-    InlineNotification.WARNING
+    InlineMessage.DANGER,
+    InlineMessage.SUCCESS,
+    InlineMessage.WARNING
   ]),
   /**
    * Should correspond to the size provided to the surrounding Card component.
    */
-  size: PropTypes.oneOf([InlineNotification.MEGA, InlineNotification.GIGA]),
+  size: PropTypes.oneOf([InlineMessage.MEGA, InlineMessage.GIGA]),
   /**
    * Removes the default bottom margin from the text.
    */
   noMargin: PropTypes.bool
 };
 
-InlineNotification.defaultProps = {
-  size: InlineNotification.GIGA,
+InlineMessage.defaultProps = {
+  size: InlineMessage.GIGA,
   noMargin: false
 };
 
 /**
  * @component
  */
-export default InlineNotification;
+export default InlineMessage;

src/components/InlineNotification/InlineNotification.spec.js → src/components/InlineMessage/InlineMessage.spec.js

@@ -15,44 +15,35 @@
 
 import React from 'react';
 
-import InlineNotification from '.';
+import InlineMessage from '.';
 
-describe('InlineNotification', () => {
+describe('InlineMessage', () => {
   /**
    * Style tests.
    */
   it('should render with default styles', () => {
-    const actual = create(<InlineNotification />);
+    const actual = create(<InlineMessage />);
     expect(actual).toMatchSnapshot();
   });
 
   it('should render with success styles', () => {
-    const actual = create(
-      <InlineNotification type={InlineNotification.SUCCESS} />
-    );
+    const actual = create(<InlineMessage type={InlineMessage.SUCCESS} />);
     expect(actual).toMatchSnapshot();
   });
 
   it('should render with warning styles', () => {
-    const actual = create(
-      <InlineNotification type={InlineNotification.WARNING} />
-    );
+    const actual = create(<InlineMessage type={InlineMessage.WARNING} />);
     expect(actual).toMatchSnapshot();
   });
 
   it('should render with danger styles', () => {
-    const actual = create(
-      <InlineNotification type={InlineNotification.DANGER} />
-    );
+    const actual = create(<InlineMessage type={InlineMessage.DANGER} />);
     expect(actual).toMatchSnapshot();
   });
 
   it('should render with giga spacing', () => {
     const actual = create(
-      <InlineNotification
-        type={InlineNotification.DANGER}
-        size={InlineNotification.GIGA}
-      />
+      <InlineMessage type={InlineMessage.DANGER} size={InlineMessage.GIGA} />
     );
     expect(actual).toMatchSnapshot();
   });
@@ -61,7 +52,7 @@ describe('InlineNotification', () => {
    * Accessibility tests.
    */
   it('should meet accessibility guidelines', async () => {
-    const wrapper = renderToHtml(<InlineNotification />);
+    const wrapper = renderToHtml(<InlineMessage />);
     const actual = await axe(wrapper);
     expect(actual).toHaveNoViolations();
   });

src/components/InlineNotification/InlineNotification.story.js → src/components/InlineMessage/InlineMessage.story.js

@@ -15,55 +15,49 @@
 
 import React from 'react';
 
-import docs from './InlineNotification.docs.mdx';
-import InlineNotification from './InlineNotification';
+import docs from './InlineMessage.docs.mdx';
+import InlineMessage from './InlineMessage';
 import Card from '../Card';
 import Text from '../Text';
 
 export default {
-  title: 'Forms/InlineNotification',
-  component: InlineNotification,
+  title: 'Forms/InlineMessage',
+  component: InlineMessage,
   parameters: {
     docs: { page: docs },
-    jest: ['InlineNotification']
+    jest: ['InlineMessage']
   }
 };
 
 export const base = () => (
   <Card>
-    <InlineNotification
-      type={InlineNotification.WARNING}
-      size={InlineNotification.GIGA}
-    >
+    <InlineMessage type={InlineMessage.WARNING} size={InlineMessage.GIGA}>
       Something might go terribly wrong.
-    </InlineNotification>
+    </InlineMessage>
     <Text>Sorry that is how it is.</Text>
   </Card>
 );
 
 export const success = () => (
-  <InlineNotification type={InlineNotification.SUCCESS}>
+  <InlineMessage type={InlineMessage.SUCCESS}>
     Something has gone wonderfully right.
-  </InlineNotification>
+  </InlineMessage>
 );
 
 export const warning = () => (
-  <InlineNotification type={InlineNotification.WARNING}>
+  <InlineMessage type={InlineMessage.WARNING}>
     Something might go sideways.
-  </InlineNotification>
+  </InlineMessage>
 );
 
 export const alert = () => (
-  <InlineNotification type={InlineNotification.DANGER}>
+  <InlineMessage type={InlineMessage.DANGER}>
     Something has gone terribly wrong.
-  </InlineNotification>
+  </InlineMessage>
 );
 
 export const size = () => (
-  <InlineNotification
-    type={InlineNotification.WARNING}
-    size={InlineNotification.MEGA}
-  >
+  <InlineMessage type={InlineMessage.WARNING} size={InlineMessage.MEGA}>
     Something might go terribly wrong with a bigger card.
-  </InlineNotification>
+  </InlineMessage>
 );

src/components/InlineNotification/__snapshots__/InlineNotification.spec.js.snap → src/components/InlineMessage/__snapshots__/InlineMessage.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InlineNotification should render with danger styles 1`] = `
+exports[`InlineMessage should render with danger styles 1`] = `
 .circuit-0 {
   color: #DB4D4D;
   position: relative;
@@ -26,13 +26,13 @@ exports[`InlineNotification should render with danger styles 1`] = `
 />
 `;
 
-exports[`InlineNotification should render with default styles 1`] = `
+exports[`InlineMessage should render with default styles 1`] = `
 <p
-  class="css-sw13lm-inline-notification circuit-0"
+  class="css-42hztf-inline-message circuit-0"
 />
 `;
 
-exports[`InlineNotification should render with giga spacing 1`] = `
+exports[`InlineMessage should render with giga spacing 1`] = `
 .circuit-0 {
   color: #DB4D4D;
   position: relative;
@@ -58,7 +58,7 @@ exports[`InlineNotification should render with giga spacing 1`] = `
 />
 `;
 
-exports[`InlineNotification should render with success styles 1`] = `
+exports[`InlineMessage should render with success styles 1`] = `
 .circuit-0 {
   color: #0F131A;
   position: relative;
@@ -84,7 +84,7 @@ exports[`InlineNotification should render with success styles 1`] = `
 />
 `;
 
-exports[`InlineNotification should render with warning styles 1`] = `
+exports[`InlineMessage should render with warning styles 1`] = `
 .circuit-0 {
   color: #0F131A;
   position: relative;

src/components/InlineNotification/index.js → src/components/InlineMessage/index.js

@@ -13,6 +13,6 @@
  * limitations under the License.
  */
 
-import InlineNotification from './InlineNotification';
+import InlineMessage from './InlineMessage';
 
-export default InlineNotification;
+export default InlineMessage;