-
Notifications
You must be signed in to change notification settings - Fork 470
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixes #1941 - Implement panel component with collapse ability
- Loading branch information
1 parent
cbb9cae
commit 1b9127a
Showing
10 changed files
with
607 additions
and
19 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| /** | ||
| * © 2019 Liferay, Inc. <https://liferay.com> | ||
| * | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */ | ||
|
|
||
| import * as React from 'react'; | ||
| import classNames from 'classnames'; | ||
|
|
||
| interface Props extends React.HTMLAttributes<HTMLDivElement> {} | ||
|
|
||
| const ClayPanelBody: React.FunctionComponent<Props> = ({ | ||
| children, | ||
| className, | ||
| ...otherProps | ||
| }) => { | ||
| return ( | ||
| <div {...otherProps} className={classNames('panel-body', className)}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ClayPanelBody; |
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,24 @@ | ||
| /** | ||
| * © 2019 Liferay, Inc. <https://liferay.com> | ||
| * | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */ | ||
|
|
||
| import * as React from 'react'; | ||
| import classNames from 'classnames'; | ||
|
|
||
| interface Props extends React.HTMLAttributes<HTMLDivElement> {} | ||
|
|
||
| const ClayPanelFooter: React.FunctionComponent<Props> = ({ | ||
| children, | ||
| className, | ||
| ...otherProps | ||
| }) => { | ||
| return ( | ||
| <div {...otherProps} className={classNames('panel-footer', className)}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ClayPanelFooter; |
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,62 @@ | ||
| /** | ||
| * © 2019 Liferay, Inc. <https://liferay.com> | ||
| * | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */ | ||
|
|
||
| import * as React from 'react'; | ||
| import classNames from 'classnames'; | ||
|
|
||
| interface Props extends React.HTMLAttributes<HTMLDivElement> { | ||
| /** | ||
| * Flag to signify that `panel-group-fluid-first` class should be added. | ||
| * This class generally should be used inside card or sheet | ||
| */ | ||
| fluidFirst?: boolean; | ||
|
|
||
| /** | ||
| * Flag to signify that `panel-group-fluid-last` class should be added. | ||
| * This class generally should be used inside card or sheet | ||
| */ | ||
| fluidLast?: boolean; | ||
|
|
||
| /** | ||
| * Flag to signify that `panel-group-fluid` class should be added. | ||
| * This class generally should be used inside card or sheet | ||
| */ | ||
| fluid?: boolean; | ||
|
|
||
| /** | ||
| * Flag to signify that `panel-group-flush` class should be added. | ||
| * This class generally should be used inside card, sheet, or a type of padded container. | ||
| */ | ||
| flush?: boolean; | ||
| } | ||
|
|
||
| const ClayPanelGroup: React.FunctionComponent<Props> = ({ | ||
| children, | ||
| className, | ||
| fluid, | ||
| fluidFirst, | ||
| fluidLast, | ||
| flush, | ||
| ...otherProps | ||
| }) => { | ||
| return ( | ||
| <div | ||
| {...otherProps} | ||
| aria-orientation="vertical" | ||
| className={classNames('panel-group', className, { | ||
| 'panel-group-fluid': fluid, | ||
| 'panel-group-fluid-first': fluidFirst, | ||
| 'panel-group-fluid-last': fluidLast, | ||
| 'panel-group-flush': flush, | ||
| })} | ||
| role="tablist" | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ClayPanelGroup; |
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,24 @@ | ||
| /** | ||
| * © 2019 Liferay, Inc. <https://liferay.com> | ||
| * | ||
| * SPDX-License-Identifier: BSD-3-Clause | ||
| */ | ||
|
|
||
| import * as React from 'react'; | ||
| import classNames from 'classnames'; | ||
|
|
||
| interface Props extends React.HTMLAttributes<HTMLDivElement> {} | ||
|
|
||
| const ClayPanelHeader: React.FunctionComponent<Props> = ({ | ||
| children, | ||
| className, | ||
| ...otherProps | ||
| }) => { | ||
| return ( | ||
| <div {...otherProps} className={classNames('panel-header', className)}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ClayPanelHeader; |
157 changes: 157 additions & 0 deletions
157
packages/clay-panel/src/__tests__/__snapshots__/index.tsx.snap
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 |
|---|---|---|
| @@ -1 +1,158 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`ClayPanel renders 1`] = ` | ||
| <div | ||
| className="panel" | ||
| > | ||
| <div | ||
| className="panel-header" | ||
| > | ||
| <span | ||
| className="panel-title" | ||
| > | ||
| Display Title | ||
| </span> | ||
| </div> | ||
| <div | ||
| className="panel-header" | ||
| > | ||
| Header! | ||
| </div> | ||
| <div | ||
| className="panel-body" | ||
| > | ||
| Body! | ||
| </div> | ||
| <div | ||
| className="panel-footer" | ||
| > | ||
| Footer! | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`ClayPanel renders with different displayType 1`] = ` | ||
| <div | ||
| className="panel panel-secondary" | ||
| > | ||
| <div | ||
| className="panel-header" | ||
| > | ||
| <span | ||
| className="panel-title" | ||
| > | ||
| Display Title | ||
| </span> | ||
| </div> | ||
| <div | ||
| className="panel-header" | ||
| > | ||
| Header! | ||
| </div> | ||
| <div | ||
| className="panel-body" | ||
| > | ||
| Body! | ||
| </div> | ||
| <div | ||
| className="panel-footer" | ||
| > | ||
| Footer! | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`ClayPanel renders with multiple panels 1`] = ` | ||
| <div | ||
| aria-orientation="vertical" | ||
| className="panel-group" | ||
| role="tablist" | ||
| > | ||
| <div | ||
| className="panel" | ||
| > | ||
| <div | ||
| className="panel-header" | ||
| > | ||
| <span | ||
| className="panel-title" | ||
| > | ||
| Display Title | ||
| </span> | ||
| </div> | ||
| <div | ||
| className="panel-body" | ||
| > | ||
| Body! | ||
| </div> | ||
| </div> | ||
| <div | ||
| className="panel" | ||
| > | ||
| <div | ||
| className="panel-header" | ||
| > | ||
| <span | ||
| className="panel-title" | ||
| > | ||
| Display Title | ||
| </span> | ||
| </div> | ||
| <div | ||
| className="panel-body" | ||
| > | ||
| Body! | ||
| </div> | ||
| </div> | ||
| <div | ||
| className="panel" | ||
| > | ||
| <button | ||
| aria-expanded={false} | ||
| className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed" | ||
| onClick={[Function]} | ||
| role="tab" | ||
| > | ||
| <span | ||
| className="panel-title" | ||
| > | ||
| Display Title | ||
| </span> | ||
| <span | ||
| className="collapse-icon-closed" | ||
| > | ||
| <svg | ||
| className="lexicon-icon lexicon-icon-angle-right" | ||
| role="presentation" | ||
| > | ||
| <use | ||
| xlinkHref="/foo/bar#angle-right" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| <span | ||
| className="collapse-icon-open" | ||
| > | ||
| <svg | ||
| className="lexicon-icon lexicon-icon-angle-down" | ||
| role="presentation" | ||
| > | ||
| <use | ||
| xlinkHref="/foo/bar#angle-down" | ||
| /> | ||
| </svg> | ||
| </span> | ||
| </button> | ||
| <div | ||
| className="panel-collapse collapse" | ||
| role="tabpanel" | ||
| > | ||
| <div | ||
| className="panel-body" | ||
| > | ||
| Body! | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; |
Oops, something went wrong.