diff --git a/components/scoped-notification/__docs__/__snapshots__/storybook-stories.storyshot b/components/scoped-notification/__docs__/__snapshots__/storybook-stories.storyshot new file mode 100644 index 0000000000..699b2d18ed --- /dev/null +++ b/components/scoped-notification/__docs__/__snapshots__/storybook-stories.storyshot @@ -0,0 +1,82 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DOM snapshots SLDSScopedNotification Dark 1`] = ` +
+
+
+ + + + +
+
+

+ It looks as if duplicates exist for this lead. + + + View Duplicates. + +

+
+
+
+`; + +exports[`DOM snapshots SLDSScopedNotification Light 1`] = ` +
+
+
+ + + + +
+
+

+ It looks as if duplicates exist for this lead. + + + View Duplicates. + + +

+
+
+
+`; diff --git a/components/scoped-notification/__docs__/site-stories.js b/components/scoped-notification/__docs__/site-stories.js new file mode 100644 index 0000000000..f3758f8937 --- /dev/null +++ b/components/scoped-notification/__docs__/site-stories.js @@ -0,0 +1,11 @@ +// This object is imported into the documentation site. An example for the documentation site should be part of the pull request for the component. The object key is the kabob case of the "URL folder". In the case of `http://localhost:8080/components/app-launcher/`, `app-launcher` is the `key`. The folder name is created by `components.component` value in `package.json`. The following uses webpack's raw-loader plugin to get "text files" that will be eval()'d by CodeMirror within the documentation site on page load. + +/* eslint-env node */ +/* eslint-disable global-require */ + +const siteStories = [ + require('raw-loader!@salesforce/design-system-react/components/scoped-notification/__examples__/light.jsx'), + require('raw-loader!@salesforce/design-system-react/components/scoped-notification/__examples__/dark.jsx'), +]; + +module.exports = siteStories; diff --git a/components/scoped-notification/__docs__/storybook-stories.jsx b/components/scoped-notification/__docs__/storybook-stories.jsx new file mode 100644 index 0000000000..86b34a82a5 --- /dev/null +++ b/components/scoped-notification/__docs__/storybook-stories.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { SCOPED_NOTIFICATION } from '../../../utilities/constants'; +import Light from '../__examples__/light'; +import Dark from '../__examples__/dark'; + +storiesOf(SCOPED_NOTIFICATION, module) + .addDecorator((getStory) => ( +
{getStory()}
+ )) + .add('Light', () => ) + .add('Dark', () => ); diff --git a/components/scoped-notification/__examples__/dark.jsx b/components/scoped-notification/__examples__/dark.jsx new file mode 100644 index 0000000000..cb90cad983 --- /dev/null +++ b/components/scoped-notification/__examples__/dark.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import IconSettings from '~/components/icon-settings'; +import ScopedNotification from '~/components/scoped-notification'; + +class Example extends React.Component { + render() { + return ( + + +

+ It looks as if duplicates exist for this lead.{' '} + View Duplicates. +

+ + + ); + } +} +Example.displayName = 'ScopedNotificationLight'; + +export default Example; // export is replaced with `ReactDOM.render(, mountNode);` at runtime diff --git a/components/scoped-notification/__examples__/light.jsx b/components/scoped-notification/__examples__/light.jsx new file mode 100644 index 0000000000..8474a91547 --- /dev/null +++ b/components/scoped-notification/__examples__/light.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import IconSettings from '~/components/icon-settings'; +import ScopedNotification from '~/components/scoped-notification'; + +class Example extends React.Component { + render() { + return ( + + +

+ It looks as if duplicates exist for this lead.{' '} + View Duplicates.{' '} +

+ + + ); + } +} +Example.displayName = 'ScopedNotificationLight'; + +export default Example; // export is replaced with `ReactDOM.render(, mountNode);` at runtime diff --git a/components/scoped-notification/docs.json b/components/scoped-notification/docs.json new file mode 100644 index 0000000000..b4fe8f7bae --- /dev/null +++ b/components/scoped-notification/docs.json @@ -0,0 +1,7 @@ +{ + "component": "scoped-notification", + "status": "prod", + "display-name": "Scoped Notifications", + "SLDS-component-path": "/components/scoped-notification", + "url-slug": "scoped-notifications" +} diff --git a/components/scoped-notification/index.jsx b/components/scoped-notification/index.jsx new file mode 100644 index 0000000000..ba463d6d03 --- /dev/null +++ b/components/scoped-notification/index.jsx @@ -0,0 +1,75 @@ +/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */ +/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */ + +// Implements the [Scoped Notification design pattern](https://lightningdesignsystem.com/components/scoped-notifications/) in React. +// Based on SLDS v2.4.5 +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import Icon from '../icon'; + +import { SCOPED_NOTIFICATION } from '../../utilities/constants'; + +const propTypes = { + /** + * CSS classes to be added to tag with `.slds-scoped-notification`. Uses `classNames` [API](https://github.com/JedWatson/classnames). + */ + className: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.object, + PropTypes.string, + ]), + /** + * Theme for the scoped notification + */ + theme: PropTypes.oneOf(['dark', 'light']), + /** + * Icon for the scoped notification. This is currently limited to the utility set of icons. + */ + iconName: PropTypes.string, +}; + +const defaultProps = { + theme: 'light', + iconName: 'info', +}; + +/** + * A Scoped Notification Component serve advisory information for the user that is not important enough to justify an alert. + */ +class ScopedNotification extends React.Component { + render() { + return ( +
+
+ +
+
{this.props.children}
+
+ ); + } +} + +ScopedNotification.displayName = SCOPED_NOTIFICATION; +ScopedNotification.propTypes = propTypes; +ScopedNotification.defaultProps = defaultProps; + +export default ScopedNotification; diff --git a/components/site-stories.js b/components/site-stories.js index 5042b7403a..e1ca223b36 100644 --- a/components/site-stories.js +++ b/components/site-stories.js @@ -49,6 +49,7 @@ const documentationSiteLiveExamples = { 'radio-group': require('@salesforce/design-system-react/components/radio-group/__docs__/site-stories.js'), radio: require('@salesforce/design-system-react/components/radio/__docs__/site-stories.js'), tabs: require('@salesforce/design-system-react/components/tabs/__docs__/site-stories.js'), + 'scoped-notification': require('@salesforce/design-system-react/components/scoped-notification/__docs__/site-stories.js'), slider: require('@salesforce/design-system-react/components/slider/__docs__/site-stories.js'), spinner: require('@salesforce/design-system-react/components/spinner/__docs__/site-stories.js'), 'split-view': require('@salesforce/design-system-react/components/split-view/__docs__/site-stories.js'), diff --git a/components/story-based-tests.js b/components/story-based-tests.js index a6322b6cf0..a61a975bf8 100644 --- a/components/story-based-tests.js +++ b/components/story-based-tests.js @@ -48,6 +48,7 @@ export Spinner from '../components/spinner/__docs__/storybook-stories'; // export ProgressRing from '../components/progress-ring/__docs__/storybook-stories'; // export RadioGroup from '../components/radio-group/__docs__/storybook-stories'; // export RadioButtonGroup from '../components/radio-button-group/__docs__/storybook-stories'; +export ScopedNotification from '../components/scoped-notification/__docs__/storybook-stories'; // export Search from '../components/input/__docs__/search/storybook-stories'; // export Slider from '../components/slider/__docs__/storybook-stories'; // export SplitView from '../components/split-view/__docs__/storybook-stories'; diff --git a/components/storybook-stories.js b/components/storybook-stories.js index 94124e4814..7d059c6558 100644 --- a/components/storybook-stories.js +++ b/components/storybook-stories.js @@ -54,6 +54,7 @@ export Picklist from '../components/menu-picklist/__docs__/storybook-stories'; export RadioGroup from '../components/radio-group/__docs__/storybook-stories'; export Radio from '../components/radio/__docs__/storybook-stories'; export RadioButtonGroup from '../components/radio-button-group/__docs__/storybook-stories'; +export ScopedNotification from '../components/scoped-notification/__docs__/storybook-stories'; export Slider from '../components/slider/__docs__/storybook-stories'; export SplitView from '../components/split-view/__docs__/storybook-stories'; export Spinner from '../components/spinner/__docs__/storybook-stories'; diff --git a/package.json b/package.json index 4e1f1b553d..5c2c6de3c9 100644 --- a/package.json +++ b/package.json @@ -674,6 +674,13 @@ "SLDS-component-path": "/components/radio-button-group", "url-slug": "radio-button-groups" }, + { + "component": "scoped-notification", + "status": "prod", + "display-name": "Scoped Notifications", + "SLDS-component-path": "/components/scoped-notification", + "url-slug": "scoped-notifications" + }, { "component": "slider", "status": "prod", diff --git a/tests/__image_snapshots__/story-based-tests-snapshot-test-js-image-snapshots-image-storyshots-slds-scoped-notification-dark-1-snap.png b/tests/__image_snapshots__/story-based-tests-snapshot-test-js-image-snapshots-image-storyshots-slds-scoped-notification-dark-1-snap.png new file mode 100644 index 0000000000..e74bb79c8e Binary files /dev/null and b/tests/__image_snapshots__/story-based-tests-snapshot-test-js-image-snapshots-image-storyshots-slds-scoped-notification-dark-1-snap.png differ diff --git a/tests/__image_snapshots__/story-based-tests-snapshot-test-js-image-snapshots-image-storyshots-slds-scoped-notification-light-1-snap.png b/tests/__image_snapshots__/story-based-tests-snapshot-test-js-image-snapshots-image-storyshots-slds-scoped-notification-light-1-snap.png new file mode 100644 index 0000000000..0469e744a9 Binary files /dev/null and b/tests/__image_snapshots__/story-based-tests-snapshot-test-js-image-snapshots-image-storyshots-slds-scoped-notification-light-1-snap.png differ diff --git a/utilities/constants.js b/utilities/constants.js index 3a32a47312..a40c7d444a 100644 --- a/utilities/constants.js +++ b/utilities/constants.js @@ -101,6 +101,7 @@ export const PROGRESS_INDICATOR_STEP_VERTICAL = 'SLDSProgressIndicatorStepVertical'; export const PROGRESS_RING = 'SLDSProgressRing'; export const PROGRESS_BAR = 'SLDSProgressBar'; +export const SCOPED_NOTIFICATION = 'SLDSScopedNotification'; export const SLIDER = 'SLDSSlider'; export const SPINNER = 'SLDSSpinner'; export const SPLIT_VIEW = 'SLDSSplitView';