From e8d8efe5c28106eee6775811e43128155cb41d5e Mon Sep 17 00:00:00 2001 From: Diego Nascimento Date: Mon, 17 Feb 2020 15:07:24 -0300 Subject: [PATCH 1/3] wip --- packages/clay-sidebar/.yarnrc | 3 + packages/clay-sidebar/README.md | 17 ++ packages/clay-sidebar/package.json | 39 +++ packages/clay-sidebar/src/Divider.tsx | 17 ++ packages/clay-sidebar/src/Search.tsx | 48 ++++ packages/clay-sidebar/src/Sidebar.scss | 242 ++++++++++++++++++ packages/clay-sidebar/src/Toolbar.tsx | 24 ++ packages/clay-sidebar/src/ToolbarItems.tsx | 89 +++++++ .../__tests__/__snapshots__/index.tsx.snap | 1 + packages/clay-sidebar/src/__tests__/index.tsx | 19 ++ packages/clay-sidebar/src/index.tsx | 48 ++++ packages/clay-sidebar/stories/index.tsx | 34 +++ .../clay-sidebar/tsconfig.declarations.json | 7 + packages/clay-sidebar/tsconfig.json | 4 + 14 files changed, 592 insertions(+) create mode 100644 packages/clay-sidebar/.yarnrc create mode 100644 packages/clay-sidebar/README.md create mode 100644 packages/clay-sidebar/package.json create mode 100644 packages/clay-sidebar/src/Divider.tsx create mode 100644 packages/clay-sidebar/src/Search.tsx create mode 100644 packages/clay-sidebar/src/Sidebar.scss create mode 100644 packages/clay-sidebar/src/Toolbar.tsx create mode 100644 packages/clay-sidebar/src/ToolbarItems.tsx create mode 100644 packages/clay-sidebar/src/__tests__/__snapshots__/index.tsx.snap create mode 100644 packages/clay-sidebar/src/__tests__/index.tsx create mode 100644 packages/clay-sidebar/src/index.tsx create mode 100644 packages/clay-sidebar/stories/index.tsx create mode 100644 packages/clay-sidebar/tsconfig.declarations.json create mode 100644 packages/clay-sidebar/tsconfig.json diff --git a/packages/clay-sidebar/.yarnrc b/packages/clay-sidebar/.yarnrc new file mode 100644 index 0000000000..4effba9a12 --- /dev/null +++ b/packages/clay-sidebar/.yarnrc @@ -0,0 +1,3 @@ +# Make `yarn version` produce the right commit message and tag for this package. +version-tag-prefix "@clayui/sidebar@" +version-git-message "chore: prepare @clayui/sidebar@%s" diff --git a/packages/clay-sidebar/README.md b/packages/clay-sidebar/README.md new file mode 100644 index 0000000000..47e6c9fcc5 --- /dev/null +++ b/packages/clay-sidebar/README.md @@ -0,0 +1,17 @@ +# clay-sidebar + +My awesome Clay component + +## Setup + +1. Install `yarn` + +2. Install local dependencies: + +``` +yarn +``` + +## Contribute + +We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve. diff --git a/packages/clay-sidebar/package.json b/packages/clay-sidebar/package.json new file mode 100644 index 0000000000..f78bffe908 --- /dev/null +++ b/packages/clay-sidebar/package.json @@ -0,0 +1,39 @@ +{ + "name": "@clayui/sidebar", + "version": "3.0.0", + "description": "ClaySidebar component", + "license": "BSD-3-Clause", + "repository": "https://github.com/liferay/clay/tree/master/packages/clay-sidebar", + "engines": { + "node": ">=0.12.0", + "npm": ">=3.0.0" + }, + "main": "lib/index.js", + "types": "lib/index.d.ts", + "ts:main": "src/index.tsx", + "files": [ + "lib", + "src" + ], + "scripts": { + "build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx", + "build:types": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json", + "prepublishOnly": "yarn build && yarn build:types", + "test": "jest --config ../../jest.config.js" + }, + "keywords": [ + "clay", + "react" + ], + "dependencies": { + "classnames": "^2.2.6" + }, + "peerDependencies": { + "@clayui/css": "3.x", + "react": "^16.8.1", + "react-dom": "^16.8.1" + }, + "browserslist": [ + "extends browserslist-config-clay" + ] +} diff --git a/packages/clay-sidebar/src/Divider.tsx b/packages/clay-sidebar/src/Divider.tsx new file mode 100644 index 0000000000..113c663f91 --- /dev/null +++ b/packages/clay-sidebar/src/Divider.tsx @@ -0,0 +1,17 @@ +/** + * © 2019 Liferay, Inc. + * + * SPDX-License-Identifier: BSD-3-Clause + */ + +import React from 'react'; + +interface IDividerProps extends React.HTMLAttributes {} + +const Divider: React.FunctionComponent = ({...otherProps}) => { + return
{'Should be a divider'}
; +}; + +Divider.displayName = 'Divider'; + +export default Divider; diff --git a/packages/clay-sidebar/src/Search.tsx b/packages/clay-sidebar/src/Search.tsx new file mode 100644 index 0000000000..c4d12fe76a --- /dev/null +++ b/packages/clay-sidebar/src/Search.tsx @@ -0,0 +1,48 @@ +/** + * © 2019 Liferay, Inc. + * + * SPDX-License-Identifier: BSD-3-Clause + */ + +import ClayButton from '@clayui/button'; +import ClayForm, {ClayInput} from '@clayui/form'; +import ClayIcon from '@clayui/icon'; +import classNames from 'classnames'; +import React from 'react'; + +interface ISearchProps extends React.HTMLAttributes { + spritemap: string; +} + +const Search: React.FunctionComponent = ({ + className, + spritemap, + ...otherProps +}) => { + return ( + + + + + + + + + + + + + + ); +}; + +Search.displayName = 'Search'; + +export default Search; diff --git a/packages/clay-sidebar/src/Sidebar.scss b/packages/clay-sidebar/src/Sidebar.scss new file mode 100644 index 0000000000..62185d83a5 --- /dev/null +++ b/packages/clay-sidebar/src/Sidebar.scss @@ -0,0 +1,242 @@ +@import "@clayui/css/src/scss/atlas.scss"; + +// Variables + +$cmWidth: 3rem; +$cmBorderRight: 17rem; + +// CM +.cm { + color: $secondary-l1; + width: $cmWidth; + border-right: 0rem solid $dark; + box-sizing: content-box; + transition: border-right 300ms ease-in-out, width 300ms ease-in-out; + will-change: border-right, width; + + &.cm-active { + border-right-width: $cmBorderRight; + } + + &.cm-deactive { + width: 0rem; + } + + @include media-breakpoint-down(sm) { + position: absolute; + } +} + +.cm-bar { + position: fixed; + z-index: 1; + display: flex; + width: $cmWidth; + height: 100vh; + padding-bottom: $cmWidth; + flex-direction: column; + // transform: translateX(-100%); + transition: transform 300ms ease-in-out; + will-change: transform; + + &:after { + content: ""; + position: absolute; + z-index: 1; + top: 0; + right: 0; + bottom: 0; + // height: 100%; + left: 0; + background-color: $dark-d1; + } + + .cm-deactive & { + // transition-delay: 300ms; + transform: translateX(-100%); + } + + &.cm-open { + // transform: translateX(0%); + } +} + +.cm-submenu, +.cm-menu { + list-style: none; + margin-bottom: 0; + padding-left: 0; + overflow-y: auto; +} + +.cm-submenu { + // display: none; + overflow-y: hidden; + transition: max-height 300ms ease-in-out; + will-change: max-height; + max-height: 0px; + + &.cm-open { + // display: block; + max-height: 1000px; + } +} + +.cm-menu-button { + position: relative; + z-index: 2; + display: flex; + justify-content: center; + align-items: center; + transition: color 300ms ease-in-out, border-color 300ms ease-in-out, + background-color 300ms ease-in-out; + will-change: color, border-color, background-color; + border-radius: 0; + border-top: none; + border-right: 4px solid transparent; + border-bottom: none; + border-left: 4px solid transparent; + + &:hover, + &:focus { + color: $white; + } + + &.cm-active { + color: $white; + border-left-color: $primary-l1; + background-color: $dark; + } +} + +.cm-toggle { + position: fixed; + z-index: 3; + bottom: 0; + left: 0; + // background-color: $dark; + background-color: $dark-d1; + + .lexicon-icon { + transition: transform 300ms ease-in-out; + will-change: transform; + .cm-deactive & { + transform: rotateY(180deg); + } + } +} + +.cm-panel { + position: absolute; + background-color: $dark; + padding: 1rem; + top: 0; + left: 100%; + bottom: 0; + overflow-y: auto; + width: $cmBorderRight; + transition: transform 300ms ease-in-out; + will-change: transform; + transform: translateX(-100%); + + .cm-active & { + transition-delay: 300ms; + } + + &.cm-active { + transition-delay: 0ms; + transform: translateX(0%); + z-index: 1; + } +} + +// Panel Components + +.cm-panel-close { + position: absolute; + right: 0.5rem; + top: 0.5rem; + z-index: 2; + + &:focus, + &:hover { + color: inherit; + } +} + +.cm-panel-title { + font-size: 1rem; + font-weight: 600; + margin-bottom: 1.5rem; + line-height: 1.5; +} + +// Panel Content + +.cm-panel-search { + .form-control, + .btn { + background-color: $dark-l2; + border-color: $dark-l1; + } + + .form-control { + border-right: none; + color: inherit; + + &::placeholder { + color: $secondary-l1; + } + + // :not(:placeholder-shown) ~ .btn { + // color: $white; + // } + } + + .btn { + border-left: none; + color: $secondary-l1; + } +} + +.cm-panel-subtitle { + color: $secondary-l1; + font-size: 0.75rem; + font-weight: 400; + text-transform: uppercase; + margin-top: 1.25rem; + line-height: 1.5; +} + +.cm-panel-list { + list-style: none; + margin-bottom: 0; + padding-left: 0; +} + +.cm-panel-button { + text-align: left; + padding: 0.3215rem 0.75rem; + margin-top: 0.5rem; + font-size: 0.875rem; + color: $secondary-l2; + + img { + padding-top: 0.4375rem; + padding-bottom: 0.4375rem; + } + + .autofit-col:nth-child(2) { + margin-left: 0.5rem; + } + + &:hover, + &:focus { + color: $white; + } + + &.cm-active { + color: $white; + background-color: $dark-l1; + } +} diff --git a/packages/clay-sidebar/src/Toolbar.tsx b/packages/clay-sidebar/src/Toolbar.tsx new file mode 100644 index 0000000000..0152b25af0 --- /dev/null +++ b/packages/clay-sidebar/src/Toolbar.tsx @@ -0,0 +1,24 @@ +/** + * © 2019 Liferay, Inc. + * + * SPDX-License-Identifier: BSD-3-Clause + */ + +import React from 'react'; + +interface IToolbarProps extends React.HTMLAttributes {} + +const Toolbar: React.FunctionComponent = ({ + children, + ...otherProps +}) => { + return ( + + ); +}; + +Toolbar.displayName = 'Toolbar'; + +export default Toolbar; diff --git a/packages/clay-sidebar/src/ToolbarItems.tsx b/packages/clay-sidebar/src/ToolbarItems.tsx new file mode 100644 index 0000000000..138d34b053 --- /dev/null +++ b/packages/clay-sidebar/src/ToolbarItems.tsx @@ -0,0 +1,89 @@ +/** + * © 2019 Liferay, Inc. + * + * SPDX-License-Identifier: BSD-3-Clause + */ + +import {ClayButtonWithIcon} from '@clayui/button'; +import ClayIcon from '@clayui/icon'; +import classNames from 'classnames'; +import React, {useState} from 'react'; + +interface ISidebarItem { + href?: string; + icon: string; + label: string; + panelId: number; + panels?: Array; + renderIcon?: Function; +} + +interface IToolbarItemsProps extends React.HTMLAttributes { + panels: Array; + spritemap: string; +} + +const ToolbarItems: React.FunctionComponent = ({ + panels, + spritemap, + ...otherProps +}) => { + const [activePanelId, setActivePanelId] = useState(0); + + const ToolbarElement = ({ + href, + icon, + label, + panelId, + ...otherProps + }: ISidebarItem) => + href ? ( + <> + + + + {label} + + ) : ( + <> + + panelId !== activePanelId && setActivePanelId(panelId) + } + spritemap={spritemap} + symbol={icon} + {...otherProps} + /> + {label} + + ); + + return ( +
    + {panels.map(({href, icon, label, panelId}) => ( +
  • + +
    • + ))} +
+ ); +}; + +ToolbarItems.displayName = 'ToolbarItems'; + +export default ToolbarItems; diff --git a/packages/clay-sidebar/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-sidebar/src/__tests__/__snapshots__/index.tsx.snap new file mode 100644 index 0000000000..d1e5c85a7a --- /dev/null +++ b/packages/clay-sidebar/src/__tests__/__snapshots__/index.tsx.snap @@ -0,0 +1 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP diff --git a/packages/clay-sidebar/src/__tests__/index.tsx b/packages/clay-sidebar/src/__tests__/index.tsx new file mode 100644 index 0000000000..4636998523 --- /dev/null +++ b/packages/clay-sidebar/src/__tests__/index.tsx @@ -0,0 +1,19 @@ +/** + * © 2019 Liferay, Inc. + * + * SPDX-License-Identifier: BSD-3-Clause + */ + +import ClaySidebar from '..'; +import {cleanup, render} from '@testing-library/react'; +import React from 'react'; + +describe('ClaySidebar', () => { + afterEach(cleanup); + + it('renders', () => { + const {container} = render(); + + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/clay-sidebar/src/index.tsx b/packages/clay-sidebar/src/index.tsx new file mode 100644 index 0000000000..fae49ed35d --- /dev/null +++ b/packages/clay-sidebar/src/index.tsx @@ -0,0 +1,48 @@ +/* eslint-disable no-console */ +/** + * © 2019 Liferay, Inc. + * + * SPDX-License-Identifier: BSD-3-Clause + */ + +import React from 'react'; + +import Divider from './Divider'; +import Search from './Search'; +import Toolbar from './Toolbar'; +import ToolbarItems from './ToolbarItems'; + +type TDirection = 'left' | 'right'; + +type TDisplayType = 'dark' | 'light'; + +type TOpeningMode = 'overlay' | 'hover'; + +interface IProps extends React.HTMLAttributes { + direction?: TDirection; + displayType?: TDisplayType; + openingMode?: TOpeningMode; +} + +const ClaySidebar: React.FunctionComponent = ({ + children, + direction = 'left', + displayType = 'light', + openingMode = 'overlay', + ...otherProps +}) => { + console.log({direction, displayType, openingMode}); + + return ( +
+
{children}
+
+ ); +}; + +export default Object.assign(ClaySidebar, { + Divider, + Search, + Toolbar, + ToolbarItems, +}); diff --git a/packages/clay-sidebar/stories/index.tsx b/packages/clay-sidebar/stories/index.tsx new file mode 100644 index 0000000000..23b9b6425e --- /dev/null +++ b/packages/clay-sidebar/stories/index.tsx @@ -0,0 +1,34 @@ +/** + * © 2019 Liferay, Inc. + * + * SPDX-License-Identifier: BSD-3-Clause + */ + +import '@clayui/css/lib/css/atlas.css'; +const spritemap = require('@clayui/css/lib/images/icons/icons.svg'); +import {storiesOf} from '@storybook/react'; +import React from 'react'; + +import ClaySidebar from '../src'; + +const panels = [ + { + icon: 'chip', + label: 'Infrastructure', + panelId: 0, + }, + { + icon: 'calendar', + label: 'Calendar', + panelId: 1, + }, +]; + +storiesOf('Components|ClaySidebar', module).add('default', () => ( + + + + + + +)); diff --git a/packages/clay-sidebar/tsconfig.declarations.json b/packages/clay-sidebar/tsconfig.declarations.json new file mode 100644 index 0000000000..24ffcb6625 --- /dev/null +++ b/packages/clay-sidebar/tsconfig.declarations.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "declarationDir": "./lib" + }, + "extends": "../../tsconfig.declarations.json", + "include": ["src"] +} diff --git a/packages/clay-sidebar/tsconfig.json b/packages/clay-sidebar/tsconfig.json new file mode 100644 index 0000000000..0c91d62848 --- /dev/null +++ b/packages/clay-sidebar/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src"] +} From 2f4d62f786cf5a2e09d123da14decad3f825751d Mon Sep 17 00:00:00 2001 From: Diego Nascimento Date: Tue, 18 Feb 2020 10:46:11 -0300 Subject: [PATCH 2/3] v1 low level --- packages/clay-sidebar/src/Panel.tsx | 37 +++++++++ packages/clay-sidebar/src/ToolbarItem.tsx | 67 ++++++++++++++++ packages/clay-sidebar/src/ToolbarItems.tsx | 89 ---------------------- packages/clay-sidebar/src/index.tsx | 6 +- packages/clay-sidebar/stories/index.tsx | 47 +++++++++--- 5 files changed, 146 insertions(+), 100 deletions(-) create mode 100644 packages/clay-sidebar/src/Panel.tsx create mode 100644 packages/clay-sidebar/src/ToolbarItem.tsx delete mode 100644 packages/clay-sidebar/src/ToolbarItems.tsx diff --git a/packages/clay-sidebar/src/Panel.tsx b/packages/clay-sidebar/src/Panel.tsx new file mode 100644 index 0000000000..e9a4015a7d --- /dev/null +++ b/packages/clay-sidebar/src/Panel.tsx @@ -0,0 +1,37 @@ +/** + * © 2019 Liferay, Inc. + * + * SPDX-License-Identifier: BSD-3-Clause + */ + +import classNames from 'classnames'; +import React from 'react'; + +interface IPanelProps extends React.HTMLAttributes { + show?: boolean; +} + +const Panel: React.FunctionComponent = ({ + children, + show = false, + ...otherProps +}) => { + if (show) { + return ( +
+ {children} +
+ ); + } + + return null; +}; + +Panel.displayName = 'Panel'; + +export default Panel; diff --git a/packages/clay-sidebar/src/ToolbarItem.tsx b/packages/clay-sidebar/src/ToolbarItem.tsx new file mode 100644 index 0000000000..661b9b585b --- /dev/null +++ b/packages/clay-sidebar/src/ToolbarItem.tsx @@ -0,0 +1,67 @@ +/* eslint-disable no-console */ +/** + * © 2019 Liferay, Inc. + * + * SPDX-License-Identifier: BSD-3-Clause + */ + +import {ClayButtonWithIcon} from '@clayui/button'; +import ClayIcon from '@clayui/icon'; +import classNames from 'classnames'; +import React from 'react'; + +interface IToolbarItemProps + extends React.HTMLAttributes { + active?: boolean; + href?: string; + icon: string; + label: string; + panelId: number; + renderIcon?: Function; + spritemap: string; +} + +const ToolbarElement = ({ + active = false, + href, + icon, + label, + spritemap, + ...otherProps +}: IToolbarItemProps) => + href ? ( + + + + ) : ( + + ); + +const ToolbarItem: React.FunctionComponent = props => { + return ( +
    +
  • + +
    • +
+ ); +}; + +ToolbarItem.displayName = 'ToolbarItem'; + +export default ToolbarItem; diff --git a/packages/clay-sidebar/src/ToolbarItems.tsx b/packages/clay-sidebar/src/ToolbarItems.tsx deleted file mode 100644 index 138d34b053..0000000000 --- a/packages/clay-sidebar/src/ToolbarItems.tsx +++ /dev/null @@ -1,89 +0,0 @@ -/** - * © 2019 Liferay, Inc. - * - * SPDX-License-Identifier: BSD-3-Clause - */ - -import {ClayButtonWithIcon} from '@clayui/button'; -import ClayIcon from '@clayui/icon'; -import classNames from 'classnames'; -import React, {useState} from 'react'; - -interface ISidebarItem { - href?: string; - icon: string; - label: string; - panelId: number; - panels?: Array; - renderIcon?: Function; -} - -interface IToolbarItemsProps extends React.HTMLAttributes { - panels: Array; - spritemap: string; -} - -const ToolbarItems: React.FunctionComponent = ({ - panels, - spritemap, - ...otherProps -}) => { - const [activePanelId, setActivePanelId] = useState(0); - - const ToolbarElement = ({ - href, - icon, - label, - panelId, - ...otherProps - }: ISidebarItem) => - href ? ( - <> - - - - {label} - - ) : ( - <> - - panelId !== activePanelId && setActivePanelId(panelId) - } - spritemap={spritemap} - symbol={icon} - {...otherProps} - /> - {label} - - ); - - return ( -
    - {panels.map(({href, icon, label, panelId}) => ( -
  • - -
    • - ))} -
- ); -}; - -ToolbarItems.displayName = 'ToolbarItems'; - -export default ToolbarItems; diff --git a/packages/clay-sidebar/src/index.tsx b/packages/clay-sidebar/src/index.tsx index fae49ed35d..caae736b72 100644 --- a/packages/clay-sidebar/src/index.tsx +++ b/packages/clay-sidebar/src/index.tsx @@ -8,9 +8,10 @@ import React from 'react'; import Divider from './Divider'; +import Panel from './Panel'; import Search from './Search'; import Toolbar from './Toolbar'; -import ToolbarItems from './ToolbarItems'; +import ToolbarItem from './ToolbarItem'; type TDirection = 'left' | 'right'; @@ -42,7 +43,8 @@ const ClaySidebar: React.FunctionComponent = ({ export default Object.assign(ClaySidebar, { Divider, + Panel, Search, Toolbar, - ToolbarItems, + ToolbarItem, }); diff --git a/packages/clay-sidebar/stories/index.tsx b/packages/clay-sidebar/stories/index.tsx index 23b9b6425e..d716ccd572 100644 --- a/packages/clay-sidebar/stories/index.tsx +++ b/packages/clay-sidebar/stories/index.tsx @@ -7,7 +7,7 @@ import '@clayui/css/lib/css/atlas.css'; const spritemap = require('@clayui/css/lib/images/icons/icons.svg'); import {storiesOf} from '@storybook/react'; -import React from 'react'; +import React, {useState} from 'react'; import ClaySidebar from '../src'; @@ -22,13 +22,42 @@ const panels = [ label: 'Calendar', panelId: 1, }, + { + icon: 'bolt', + label: 'Speed', + panelId: 2, + }, ]; -storiesOf('Components|ClaySidebar', module).add('default', () => ( - - - - - - -)); +storiesOf('Components|ClaySidebar', module).add('default', () => { + const [activePanelId, setActivePanelId] = useState(0); + + return ( + + + +

{'Panel 1'}

+ + + +

{'Panel 2'}

+ + + +

{'Panel 3'}

+ + + {panels.map(({icon, label, panelId}) => ( + setActivePanelId(panelId)} + panelId={panelId} + spritemap={spritemap} + /> + ))} + + + ); +}); From b86e38bb4ba1de451f692cc0be881b1e2b4791a7 Mon Sep 17 00:00:00 2001 From: Diego Nascimento Date: Tue, 18 Feb 2020 11:45:43 -0300 Subject: [PATCH 3/3] v2 --- packages/clay-sidebar/src/Panel.tsx | 8 +-- packages/clay-sidebar/src/Search.tsx | 3 +- packages/clay-sidebar/src/ToolbarItem.tsx | 59 ++++++----------------- packages/clay-sidebar/src/index.tsx | 2 +- packages/clay-sidebar/stories/index.tsx | 55 ++++++++++++++------- 5 files changed, 56 insertions(+), 71 deletions(-) diff --git a/packages/clay-sidebar/src/Panel.tsx b/packages/clay-sidebar/src/Panel.tsx index e9a4015a7d..d601627286 100644 --- a/packages/clay-sidebar/src/Panel.tsx +++ b/packages/clay-sidebar/src/Panel.tsx @@ -4,7 +4,6 @@ * SPDX-License-Identifier: BSD-3-Clause */ -import classNames from 'classnames'; import React from 'react'; interface IPanelProps extends React.HTMLAttributes { @@ -18,12 +17,7 @@ const Panel: React.FunctionComponent = ({ }) => { if (show) { return ( -
+
{children}
); diff --git a/packages/clay-sidebar/src/Search.tsx b/packages/clay-sidebar/src/Search.tsx index c4d12fe76a..db4ff5d51d 100644 --- a/packages/clay-sidebar/src/Search.tsx +++ b/packages/clay-sidebar/src/Search.tsx @@ -16,6 +16,7 @@ interface ISearchProps extends React.HTMLAttributes { const Search: React.FunctionComponent = ({ className, + placeholder, spritemap, ...otherProps }) => { @@ -27,7 +28,7 @@ const Search: React.FunctionComponent = ({ diff --git a/packages/clay-sidebar/src/ToolbarItem.tsx b/packages/clay-sidebar/src/ToolbarItem.tsx index 661b9b585b..cf250c4271 100644 --- a/packages/clay-sidebar/src/ToolbarItem.tsx +++ b/packages/clay-sidebar/src/ToolbarItem.tsx @@ -5,60 +5,29 @@ * SPDX-License-Identifier: BSD-3-Clause */ -import {ClayButtonWithIcon} from '@clayui/button'; -import ClayIcon from '@clayui/icon'; import classNames from 'classnames'; import React from 'react'; interface IToolbarItemProps extends React.HTMLAttributes { active?: boolean; - href?: string; - icon: string; - label: string; - panelId: number; - renderIcon?: Function; - spritemap: string; + expand?: boolean; } -const ToolbarElement = ({ - active = false, - href, - icon, - label, - spritemap, - ...otherProps -}: IToolbarItemProps) => - href ? ( - - - - ) : ( - - ); - -const ToolbarItem: React.FunctionComponent = props => { +const ToolbarItem: React.FunctionComponent = ({ + active, + children, + expand = false, +}) => { return ( -
    -
  • - -
    • -
+
  • + {children} +
    • ); }; diff --git a/packages/clay-sidebar/src/index.tsx b/packages/clay-sidebar/src/index.tsx index caae736b72..8745b1a5a7 100644 --- a/packages/clay-sidebar/src/index.tsx +++ b/packages/clay-sidebar/src/index.tsx @@ -36,7 +36,7 @@ const ClaySidebar: React.FunctionComponent = ({ return (
    -
    {children}
    +
      {children}
    ); }; diff --git a/packages/clay-sidebar/stories/index.tsx b/packages/clay-sidebar/stories/index.tsx index d716ccd572..84f47af7f1 100644 --- a/packages/clay-sidebar/stories/index.tsx +++ b/packages/clay-sidebar/stories/index.tsx @@ -5,6 +5,7 @@ */ import '@clayui/css/lib/css/atlas.css'; +import {ClayButtonWithIcon} from '@clayui/button'; const spritemap = require('@clayui/css/lib/images/icons/icons.svg'); import {storiesOf} from '@storybook/react'; import React, {useState} from 'react'; @@ -13,49 +14,69 @@ import ClaySidebar from '../src'; const panels = [ { + expand: true, icon: 'chip', label: 'Infrastructure', - panelId: 0, + panelId: 'infra', }, { icon: 'calendar', label: 'Calendar', - panelId: 1, + panelId: 'cal', }, { + expand: true, icon: 'bolt', label: 'Speed', - panelId: 2, + panelId: 'speed', }, ]; storiesOf('Components|ClaySidebar', module).add('default', () => { - const [activePanelId, setActivePanelId] = useState(0); + const [activePanelId, setActivePanelId] = useState(''); return ( - - +

    {'Panel 1'}

    +     - - +

    {'Panel 2'}

    +     - - +

    {'Panel 3'}

    +     - {panels.map(({icon, label, panelId}) => ( + {panels.map(({expand, icon, label, panelId}) => ( setActivePanelId(panelId)} - panelId={panelId} - spritemap={spritemap} - /> + > + { + if (activePanelId === panelId) { + setActivePanelId(''); + return; + } + setActivePanelId(panelId); + }} + spritemap={spritemap} + symbol={icon} + /> + ))}