fix(sass): notification refactor inline toast

packages/carbon-react/src/components/Notification/Notification.stories.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  ToastNotification,
+  InlineNotification,
+  NotificationActionButton,
+} from 'carbon-components-react';
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import { boolean, number, select, text } from '@storybook/addon-knobs';
+
+const kinds = {
+  'Error (error)': 'error',
+  'Info (info)': 'info',
+  'Info square (info-square)': 'info-square',
+  'Success (success)': 'success',
+  'Warning (warning)': 'warning',
+  'Warning (warning-alt)': 'warning-alt',
+};
+const notificationProps = () => ({
+  kind: select('The notification kind (kind)', kinds, 'info'),
+  lowContrast: boolean('Use low contrast variant (lowContrast)', false),
+  role: text('ARIA role (role)', 'alert'),
+  title: text('Title (title)', 'Notification title'),
+  subtitle: text('Subtitle (subtitle)', 'Subtitle text goes here.'),
+  iconDescription: text(
+    'Icon description (iconDescription)',
+    'describes the close button'
+  ),
+  statusIconDescription: text(
+    'Status icon description (statusIconDescription)',
+    'describes the status icon'
+  ),
+  hideCloseButton: boolean('Hide close button (hideCloseButton)', false),
+  onClose: action('onClose'),
+  onCloseButtonClick: action('onCloseButtonClick'),
+});
+
+const toastNotificationProps = () => ({
+  ...notificationProps(),
+  timeout: number(
+    'Duration in milliseconds to display notification (timeout)',
+    0
+  ),
+});
+
+export default {
+  title: 'Components/Notifications',
+};
+
+export const Toast = () => (
+  <ToastNotification
+    {...toastNotificationProps()}
+    caption={text('Caption (caption)', '00:00:00 AM')}
+    style={{ marginBottom: '.5rem' }}
+  />
+);
+
+export const Inline = () => (
+  <InlineNotification
+    {...notificationProps()}
+    actions={
+      <NotificationActionButton
+        onClick={action('NotificationActionButton onClick')}>
+        {text('Action (NotificationActionButton > children)', 'Action')}
+      </NotificationActionButton>
+    }
+  />
+);
+
+Inline.storyName = 'Inline';

packages/carbon-react/src/components/Notification/index.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export {
+  ToastNotification,
+  InlineNotification,
+  NotificationActionButton,
+} from 'carbon-components-react';

packages/styles/scss/components/__tests__/inline-notification-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/notification', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+       @use 'sass:map';
+       @use 'sass:meta';
+       @use '../notification';
+
+       $_: get('mixin', meta.mixin-exists('inline-notification', 'notification'));
+     `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

packages/styles/scss/components/__tests__/toast-notification-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/notification', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+       @use 'sass:map';
+       @use 'sass:meta';
+       @use '../notification';
+
+       $_: get('mixin', meta.mixin-exists('toast-notification', 'notification'));
+     `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

packages/styles/scss/components/_index.scss

@@ -18,6 +18,7 @@
 @use 'loading';
 @use 'menu';
 @use 'modal';
+@use 'notification';
 @use 'data-table';
 @use 'data-table/action';
 @use 'data-table/expandable';

packages/styles/scss/components/notification/_index.scss

@@ -5,4 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'tokens';
+@forward './tokens';
+@forward 'inline-notification';
+@forward 'toast-notification';
+
+@use 'inline-notification';
+@use 'toast-notification';
+
+@include inline-notification.inline-notification;
+@include toast-notification.toast-notification;