8905 notification refactor inline toast (#9004)

* wip-testing

* feat(notifications): figure out tests and add storybook

* feat(notification): refactor for toast and inline

* update feature-flag enabled

* Update packages/styles/scss/components/notification/_toast-notification.scss

Co-authored-by: TJ Egan <tw15egan@gmail.com>

* update: remove knobs

* Update packages/styles/scss/components/notification/_toast-notification.scss

Co-authored-by: TJ Egan <tw15egan@gmail.com>

* feat(notification): remove unnecessary props

Co-authored-by: TJ Egan <tw15egan@gmail.com>

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

@@ -0,0 +1,45 @@
+/**
+ * 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';
+
+const notificationProps = () => ({
+  kind: 'info',
+  role: 'alert',
+  title: 'Notification title',
+  subtitle: 'Subtitle text goes here.',
+});
+
+const toastNotificationProps = () => ({
+  ...notificationProps(),
+});
+
+export default {
+  title: 'Components/Notifications',
+};
+
+export const Toast = () => (
+  <ToastNotification
+    {...toastNotificationProps()}
+    caption={('Caption (caption)', '00:00:00 AM')}
+    style={{ marginBottom: '.5rem' }}
+  />
+);
+
+export const Inline = () => (
+  <InlineNotification
+    {...notificationProps()}
+    actions={<NotificationActionButton>{'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

@@ -21,6 +21,7 @@
 @use 'tooltip';
 @use 'radio-button';
 @use 'modal';
+@use 'notification';
 @use 'search';
 @use 'data-table';
 @use 'data-table/action';

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;