-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into 9183-add-theme-package
- Loading branch information
Showing
31 changed files
with
468 additions
and
164 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -37,6 +37,7 @@ module.exports = { | |
| 'e2e', | ||
| 'examples', | ||
| '/umd/', | ||
| '/vendor/', | ||
| ], | ||
| transformIgnorePatterns: [ | ||
| '/build/', | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
packages/carbon-react/src/components/Layer/Layer-story.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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). |
59 changes: 59 additions & 0 deletions
59
packages/carbon-react/src/components/Layer/Layer.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.