feat(layout-modules): add withBackground higher-order component (#851)

* feat(layout-modules): add `withBackground` higher-order component

* chore: merge `dev` into `with-background`

.storybook/index.scss

@@ -16,8 +16,6 @@
 @import 'decorators/index';
 @import 'docs/index';
 
-@import 'components/Background/index';
-
 * {
   box-sizing: border-box;
 }

src/__tests__/scss/__snapshots__/SCSS.spec.js.snap

@@ -26179,6 +26179,11 @@ a.bx--navigation-link:focus {
   margin-left: auto;
 }
 
+.security--unstable--layout__module--background {
+  background-color: var(--ui-01, #262626);
+  outline: 0.0625rem solid var(--ui-background, #161616);
+}
+
 .security--unstable--layout__module--button-cluster {
   padding-bottom: 1rem;
 }

src/components/UNSTABLE__LayoutModules/Background/_index.scss

@@ -0,0 +1,17 @@
+////
+/// Background.
+/// @group background
+/// @copyright IBM Security 2020
+////
+
+@import '@carbon/themes/scss/tokens';
+
+@import '../../../globals/border/index';
+
+@import '../../Component/mixins';
+@import '../variables';
+
+@include security--component($name: #{$layout-modules__name}--background) {
+  background-color: $ui-01;
+  outline: $border__sizing__width solid $ui-background;
+}

.storybook/components/Background/index.js → src/components/UNSTABLE__LayoutModules/Background/index.js

@@ -6,10 +6,12 @@
 import classnames from 'classnames';
 import React from 'react';
 
+import { layoutModuleNamespace } from '../LayoutModule';
+
 export default WrappedComponent => {
   const WithBackground = ({ className, ...other }) => (
     <WrappedComponent
-      className={classnames('container--background', className)}
+      className={classnames(`${layoutModuleNamespace}--background`, className)}
       {...other}
     />
   );

src/components/UNSTABLE__LayoutModules/CardModule/CardModule.stories.js

@@ -7,7 +7,6 @@ import { List16, Search16, Table16 } from '@carbon/icons-react';
 import React from 'react';
 
 import { getDocsParameters } from '../../../../.storybook';
-import withBackground from '../../../../.storybook/components/Background';
 
 import {
   ActionBarModule,
@@ -20,6 +19,7 @@ import {
   SummaryCardBody,
   SummaryCardHeader,
   TitleBarModule,
+  withBackground,
 } from '../../..';
 
 import getTitle from '../stories';

src/components/UNSTABLE__LayoutModules/Layout.stories.js

@@ -18,7 +18,6 @@ import { Grid, Row, Column } from 'carbon-components-react';
 import React from 'react';
 
 import { disableCentered, patterns } from '../../../.storybook';
-import withBackground from '../../../.storybook/components/Background';
 
 import {
   ActionBarModule,
@@ -46,6 +45,7 @@ import {
   TypeLayoutBody,
   TypeLayoutCell,
   TypeLayoutRow,
+  withBackground,
 } from '../..';
 
 const ColumnWithBackground = withBackground(Column);

src/components/UNSTABLE__LayoutModules/_index.scss

@@ -5,6 +5,7 @@
 ////
 
 @import 'ActionBarModule/index';
+@import 'Background/index';
 @import 'ButtonClusterModule/index';
 @import 'CardModule/index';
 @import 'DescriptionListModule/index';

src/components/UNSTABLE__LayoutModules/index.js

@@ -8,6 +8,7 @@ export {
   ActionBarModuleItems,
 } from './ActionBarModule';
 
+export { default as withBackground } from './Background';
 export { default as ButtonClusterModule } from './ButtonClusterModule';
 export { default as CardModule } from './CardModule';
 export { default as DescriptionListModule } from './DescriptionListModule';

src/components/__tests__/__snapshots__/publicAPI.spec.js.snap

@@ -14039,5 +14039,6 @@ Map {
       },
     },
   },
+  "withBackground" => Object {},
 }
 `;

src/index.js

@@ -270,6 +270,7 @@ export {
   DescriptionModule,
   ICAModule,
   TitleBarModule,
+  withBackground,
 } from './components/UNSTABLE__LayoutModules';
 
 export UNSTABLE__Pagination, {