feat(carbon-react): add Layer component

config/jest-config-carbon/index.js

@@ -37,6 +37,7 @@ module.exports = {
     'e2e',
     'examples',
     '/umd/',
+    '/vendor/',
   ],
   transformIgnorePatterns: [
     '/build/',

packages/carbon-react/.storybook/preview.js

@@ -136,7 +136,7 @@ export const decorators = [
     const { locale, theme } = context.globals;
 
     React.useEffect(() => {
-      document.body.setAttribute('data-carbon-theme', theme);
+      document.documentElement.setAttribute('data-carbon-theme', theme);
     }, [theme]);
 
     React.useEffect(() => {

packages/carbon-react/src/components/Layer/Layer-story.scss

@@ -0,0 +1,14 @@
+//
+// 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.
+//
+
+@use '@carbon/styles/scss/theme';
+
+.example-layer-test-component {
+  padding: 1rem;
+  background: theme.$layer;
+  color: theme.$text-primary;
+}

packages/carbon-react/src/components/Layer/Layer-test.js

@@ -0,0 +1,41 @@
+/**
+ * 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 { screen, render } from '@testing-library/react';
+import React from 'react';
+import { Layer } from '../Layer';
+
+describe('Layer', () => {
+  it('should render the children passed in as a prop', () => {
+    render(
+      <Layer>
+        <span data-testid="test">test</span>
+      </Layer>
+    );
+
+    expect(screen.getByTestId('test')).toBeInTheDocument();
+  });
+
+  it('should spread any additional props onto the top-level element', () => {
+    render(
+      <Layer data-testid="test">
+        <span>test</span>
+      </Layer>
+    );
+
+    expect(screen.getByTestId('test')).toBeInTheDocument();
+  });
+
+  it('should accept a custom class name', () => {
+    render(
+      <Layer className="custom-class" data-testid="test">
+        <span>test</span>
+      </Layer>
+    );
+    expect(screen.getByTestId('test')).toHaveClass('custom-class');
+  });
+});

packages/carbon-react/src/components/Layer/Layer.mdx

@@ -0,0 +1,66 @@
+import { Story, Props, Source, Preview } from '@storybook/addon-docs/blocks';
+
+# Layer
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/carbon-react/src/components/Layer)
+
+<!-- prettier-ignore-start -->
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## Table of Contents
+
+- [Overview](#overview)
+- [Component API](#component-api)
+  - [Layer as](#layer-as)
+- [Feedback](#feedback)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+<!-- prettier-ignore-end -->
+
+## Overview
+
+The `Layer` component is used to render components on different layers. Each
+layer has a specific set of token values associated with it. You can use these
+tokens directly, or use contextual tokens from our styles package like `$layer`
+or `$field`.
+
+The `Layer` component accepts `children` as a prop. Each child of a `Layer`
+component is rendered using the layer tokens at that layer. `Layer` components
+can be nested indefinitely, but the token sets typically end after 3 layers.
+
+```jsx
+<Layer>
+  <ChildComponent />
+  <Layer>
+    <ChildComponent />
+    <Layer>
+      <ChildComponent />
+    </Layer>
+  </Layer>
+</Layer>
+```
+
+## Component API
+
+<Props />
+
+### Layer as
+
+You can configure the base element rendered by `Layer` using the `as` prop. For
+example, if you would like the `Layer` component to render as a `section` you
+could write the following:
+
+```jsx
+<Layer as="section">
+  <ChildComponent />
+</Layer>
+```
+
+Similarly, you can provide any custom component to the `as` prop which the
+`Layer` component will use.
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/carbon-react/src/components/Layer/Layer.mdx).

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

@@ -0,0 +1,59 @@
+/**
+ * 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 './Layer-story.scss';
+import React from 'react';
+import { Layer } from '../Layer';
+import mdx from './Layer.mdx';
+
+export default {
+  title: 'Components/Layer',
+  component: Layer,
+  parameters: {
+    controls: {
+      hideNoControlsWarning: true,
+    },
+    docs: {
+      page: mdx,
+    },
+  },
+  argTypes: {
+    as: {
+      table: {
+        disable: true,
+      },
+    },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+    className: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export const Default = () => {
+  function TestComponent() {
+    return <div className="example-layer-test-component">Test component</div>;
+  }
+
+  return (
+    <>
+      <TestComponent />
+      <Layer>
+        <TestComponent />
+        <Layer>
+          <TestComponent />
+        </Layer>
+      </Layer>
+    </>
+  );
+};

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

@@ -0,0 +1,47 @@
+/**
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+export function Layer({
+  as: BaseComponent = 'div',
+  className: customClassName,
+  children,
+  ...rest
+}) {
+  const className = cx('bx--layer', customClassName);
+  return (
+    <BaseComponent {...rest} className={className}>
+      {children}
+    </BaseComponent>
+  );
+}
+
+Layer.propTypes = {
+  /**
+   * Specify a custom component or element to be rendered as the top-level
+   * element in the component
+   */
+  as: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string,
+    PropTypes.elementType,
+  ]),
+
+  /**
+   * Provide child elements to be rendered inside of `Theme`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be used on the outermost element rendered by
+   * the component
+   */
+  className: PropTypes.string,
+};

packages/styles/scss/__tests__/theme-test.js

@@ -132,16 +132,19 @@ Array [
   "focus-inverse",
   "skeleton-background",
   "skeleton-element",
-  "border-subtle",
-  "border-strong",
   "layer",
   "layer-active",
   "layer-hover",
-  "layer-accent",
   "layer-selected",
   "layer-selected-hover",
+  "layer-accent",
+  "layer-accent-hover",
+  "layer-accent-active",
   "field",
   "field-hover",
+  "border-subtle",
+  "border-subtle-selected",
+  "border-strong",
   "interactive-01",
   "interactive-04",
   "decorative-01",

packages/styles/scss/_theme.scss

@@ -12,20 +12,93 @@
 @use '@carbon/themes/scss/modules/tokens';
 @forward '@carbon/themes/scss/modules/theme';
 @forward '@carbon/themes/scss/modules/tokens';
+@use './utilities/custom-property';
+@use './utilities/layer-set' with (
+  $layer-sets: (
+    layer: (
+      tokens.$layer-01,
+      tokens.$layer-02,
+      tokens.$layer-03,
+    ),
+    layer-active: (
+      tokens.$layer-active-01,
+      tokens.$layer-active-02,
+      tokens.$layer-active-03,
+    ),
+    layer-hover: (
+      tokens.$layer-hover-01,
+      tokens.$layer-hover-02,
+      tokens.$layer-hover-03,
+    ),
+    layer-selected: (
+      tokens.$layer-selected-01,
+      tokens.$layer-selected-02,
+      tokens.$layer-selected-03,
+    ),
+    layer-selected-hover: (
+      tokens.$layer-selected-hover-01,
+      tokens.$layer-selected-hover-02,
+      tokens.$layer-selected-hover-03,
+    ),
+    layer-accent: (
+      tokens.$layer-accent-01,
+      tokens.$layer-accent-02,
+      tokens.$layer-accent-03,
+    ),
+    layer-accent-hover: (
+      tokens.$layer-accent-hover-01,
+      tokens.$layer-accent-hover-02,
+      tokens.$layer-accent-hover-03,
+    ),
+    layer-accent-active: (
+      tokens.$layer-accent-active-01,
+      tokens.$layer-accent-active-02,
+      tokens.$layer-accent-active-03,
+    ),
+    field: (
+      tokens.$field-01,
+      tokens.$field-02,
+      tokens.$field-03,
+    ),
+    field-hover: (
+      tokens.$field-hover-01,
+      tokens.$field-hover-02,
+      tokens.$field-hover-03,
+    ),
+    border-subtle: (
+      tokens.$border-subtle-01,
+      tokens.$border-subtle-02,
+      tokens.$border-subtle-03,
+    ),
+    border-subtle-selected: (
+      tokens.$border-subtle-selected-01,
+      tokens.$border-subtle-selected-02,
+      tokens.$border-subtle-selected-03,
+    ),
+    border-strong: (
+      tokens.$border-strong-01,
+      tokens.$border-strong-02,
+      tokens.$border-strong-03,
+    ),
+  ),
+);
 
-// TODO: add contextual tokens
-$border-subtle: tokens.$border-subtle-01;
-$border-strong: tokens.$border-strong-01;
+// Layer sets
+$layer: custom-property.get-var('layer');
+$layer-active: custom-property.get-var('layer-active');
+$layer-hover: custom-property.get-var('layer-hover');
+$layer-selected: custom-property.get-var('layer-selected');
+$layer-selected-hover: custom-property.get-var('layer-selected-hover');
+$layer-accent: custom-property.get-var('layer-accent');
+$layer-accent-hover: custom-property.get-var('layer-accent-hover');
+$layer-accent-active: custom-property.get-var('layer-accent-active');
 
-$layer: tokens.$layer-01;
-$layer-active: tokens.$layer-active-01;
-$layer-hover: tokens.$layer-hover-01;
-$layer-accent: tokens.$layer-accent-01;
-$layer-selected: tokens.$layer-selected-01;
-$layer-selected-hover: tokens.$layer-selected-hover-01;
+$field: custom-property.get-var('field');
+$field-hover: custom-property.get-var('field-hover');
 
-$field: tokens.$field-01;
-$field-hover: tokens.$field-hover-01;
+$border-subtle: custom-property.get-var('border-subtle');
+$border-subtle-selected: custom-property.get-var('border-subtle-selected');
+$border-strong: custom-property.get-var('border-strong');
 
 // TODO remove
 $interactive-01: #0f62fe;