Skip to content

Commit 183716b

Browse files
diegonvsdiegonvs
committed
wip
1 parent 71e9849 commit 183716b

13 files changed

Lines changed: 482 additions & 0 deletions

File tree

‎packages/clay-sidebar/.yarnrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Make `yarn version` produce the right commit message and tag for this package.
2+
version-tag-prefix "@clayui/sidebar@"
3+
version-git-message "chore: prepare @clayui/sidebar@%s"

‎packages/clay-sidebar/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# clay-sidebar
2+
3+
My awesome Clay component
4+
5+
## Setup
6+
7+
1. Install `yarn`
8+
9+
2. Install local dependencies:
10+
11+
```
12+
yarn
13+
```
14+
15+
## Contribute
16+
17+
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.

‎packages/clay-sidebar/package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "@clayui/sidebar",
3+
"version": "3.0.0",
4+
"description": "ClaySidebar component",
5+
"license": "BSD-3-Clause",
6+
"repository": "https://github.com/liferay/clay/tree/master/packages/clay-sidebar",
7+
"engines": {
8+
"node": ">=0.12.0",
9+
"npm": ">=3.0.0"
10+
},
11+
"main": "lib/index.js",
12+
"types": "lib/index.d.ts",
13+
"ts:main": "src/index.tsx",
14+
"files": [
15+
"lib",
16+
"src"
17+
],
18+
"scripts": {
19+
"build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
20+
"build:types": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
21+
"prepublishOnly": "yarn build && yarn build:types",
22+
"test": "jest --config ../../jest.config.js"
23+
},
24+
"keywords": [
25+
"clay",
26+
"react"
27+
],
28+
"dependencies": {
29+
"classnames": "^2.2.6"
30+
},
31+
"peerDependencies": {
32+
"@clayui/css": "3.x",
33+
"react": "^16.8.1",
34+
"react-dom": "^16.8.1"
35+
},
36+
"browserslist": [
37+
"extends browserslist-config-clay"
38+
]
39+
}

‎packages/clay-sidebar/src/Search.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* © 2019 Liferay, Inc. <https://liferay.com>
3+
*
4+
* SPDX-License-Identifier: BSD-3-Clause
5+
*/
6+
7+
import ClayButton from '@clayui/button';
8+
import ClayForm, {ClayInput} from '@clayui/form';
9+
import ClayIcon from '@clayui/icon';
10+
import classNames from 'classnames';
11+
import React from 'react';
12+
13+
interface ISearchProps extends React.HTMLAttributes<HTMLDivElement> {
14+
spritemap: string;
15+
}
16+
17+
const Search: React.FunctionComponent<ISearchProps> = ({
18+
className,
19+
spritemap,
20+
...otherProps
21+
}) => {
22+
return (
23+
<ClayForm.Group
24+
className={classNames('cm-panel-search', className)}
25+
{...otherProps}
26+
>
27+
<ClayInput.Group>
28+
<ClayInput.GroupItem prepend>
29+
<ClayInput
30+
placeholder="Search application"
31+
sizing="sm"
32+
type="search"
33+
/>
34+
</ClayInput.GroupItem>
35+
36+
<ClayInput.GroupItem append shrink>
37+
<ClayButton small type="submit">
38+
<ClayIcon spritemap={spritemap} symbol="search" />
39+
</ClayButton>
40+
</ClayInput.GroupItem>
41+
</ClayInput.Group>
42+
</ClayForm.Group>
43+
);
44+
};
45+
46+
export default Search;

‎packages/clay-sidebar/src/Sidebar.scss‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
@import "@clayui/css/src/scss/atlas.scss";
2+
3+
// Variables
4+
5+
$cmWidth: 3rem;
6+
$cmBorderRight: 17rem;
7+
8+
// CM
9+
.cm {
10+
color: $secondary-l1;
11+
width: $cmWidth;
12+
border-right: 0rem solid $dark;
13+
box-sizing: content-box;
14+
transition: border-right 300ms ease-in-out, width 300ms ease-in-out;
15+
will-change: border-right, width;
16+
17+
&.cm-active {
18+
border-right-width: $cmBorderRight;
19+
}
20+
21+
&.cm-deactive {
22+
width: 0rem;
23+
}
24+
25+
@include media-breakpoint-down(sm) {
26+
position: absolute;
27+
}
28+
}
29+
30+
.cm-bar {
31+
position: fixed;
32+
z-index: 1;
33+
display: flex;
34+
width: $cmWidth;
35+
height: 100vh;
36+
padding-bottom: $cmWidth;
37+
flex-direction: column;
38+
// transform: translateX(-100%);
39+
transition: transform 300ms ease-in-out;
40+
will-change: transform;
41+
42+
&:after {
43+
content: "";
44+
position: absolute;
45+
z-index: 1;
46+
top: 0;
47+
right: 0;
48+
bottom: 0;
49+
// height: 100%;
50+
left: 0;
51+
background-color: $dark-d1;
52+
}
53+
54+
.cm-deactive & {
55+
// transition-delay: 300ms;
56+
transform: translateX(-100%);
57+
}
58+
59+
&.cm-open {
60+
// transform: translateX(0%);
61+
}
62+
}
63+
64+
.cm-submenu,
65+
.cm-menu {
66+
list-style: none;
67+
margin-bottom: 0;
68+
padding-left: 0;
69+
overflow-y: auto;
70+
}
71+
72+
.cm-submenu {
73+
// display: none;
74+
overflow-y: hidden;
75+
transition: max-height 300ms ease-in-out;
76+
will-change: max-height;
77+
max-height: 0px;
78+
79+
&.cm-open {
80+
// display: block;
81+
max-height: 1000px;
82+
}
83+
}
84+
85+
.cm-menu-button {
86+
position: relative;
87+
z-index: 2;
88+
display: flex;
89+
justify-content: center;
90+
align-items: center;
91+
transition: color 300ms ease-in-out, border-color 300ms ease-in-out,
92+
background-color 300ms ease-in-out;
93+
will-change: color, border-color, background-color;
94+
border-radius: 0;
95+
border-top: none;
96+
border-right: 4px solid transparent;
97+
border-bottom: none;
98+
border-left: 4px solid transparent;
99+
100+
&:hover,
101+
&:focus {
102+
color: $white;
103+
}
104+
105+
&.cm-active {
106+
color: $white;
107+
border-left-color: $primary-l1;
108+
background-color: $dark;
109+
}
110+
}
111+
112+
.cm-toggle {
113+
position: fixed;
114+
z-index: 3;
115+
bottom: 0;
116+
left: 0;
117+
// background-color: $dark;
118+
background-color: $dark-d1;
119+
120+
.lexicon-icon {
121+
transition: transform 300ms ease-in-out;
122+
will-change: transform;
123+
.cm-deactive & {
124+
transform: rotateY(180deg);
125+
}
126+
}
127+
}
128+
129+
.cm-panel {
130+
position: absolute;
131+
background-color: $dark;
132+
padding: 1rem;
133+
top: 0;
134+
left: 100%;
135+
bottom: 0;
136+
overflow-y: auto;
137+
width: $cmBorderRight;
138+
transition: transform 300ms ease-in-out;
139+
will-change: transform;
140+
transform: translateX(-100%);
141+
142+
.cm-active & {
143+
transition-delay: 300ms;
144+
}
145+
146+
&.cm-active {
147+
transition-delay: 0ms;
148+
transform: translateX(0%);
149+
z-index: 1;
150+
}
151+
}
152+
153+
// Panel Components
154+
155+
.cm-panel-close {
156+
position: absolute;
157+
right: 0.5rem;
158+
top: 0.5rem;
159+
z-index: 2;
160+
161+
&:focus,
162+
&:hover {
163+
color: inherit;
164+
}
165+
}
166+
167+
.cm-panel-title {
168+
font-size: 1rem;
169+
font-weight: 600;
170+
margin-bottom: 1.5rem;
171+
line-height: 1.5;
172+
}
173+
174+
// Panel Content
175+
176+
.cm-panel-search {
177+
.form-control,
178+
.btn {
179+
background-color: $dark-l2;
180+
border-color: $dark-l1;
181+
}
182+
183+
.form-control {
184+
border-right: none;
185+
color: inherit;
186+
187+
&::placeholder {
188+
color: $secondary-l1;
189+
}
190+
191+
// :not(:placeholder-shown) ~ .btn {
192+
// color: $white;
193+
// }
194+
}
195+
196+
.btn {
197+
border-left: none;
198+
color: $secondary-l1;
199+
}
200+
}
201+
202+
.cm-panel-subtitle {
203+
color: $secondary-l1;
204+
font-size: 0.75rem;
205+
font-weight: 400;
206+
text-transform: uppercase;
207+
margin-top: 1.25rem;
208+
line-height: 1.5;
209+
}
210+
211+
.cm-panel-list {
212+
list-style: none;
213+
margin-bottom: 0;
214+
padding-left: 0;
215+
}
216+
217+
.cm-panel-button {
218+
text-align: left;
219+
padding: 0.3215rem 0.75rem;
220+
margin-top: 0.5rem;
221+
font-size: 0.875rem;
222+
color: $secondary-l2;
223+
224+
img {
225+
padding-top: 0.4375rem;
226+
padding-bottom: 0.4375rem;
227+
}
228+
229+
.autofit-col:nth-child(2) {
230+
margin-left: 0.5rem;
231+
}
232+
233+
&:hover,
234+
&:focus {
235+
color: $white;
236+
}
237+
238+
&.cm-active {
239+
color: $white;
240+
background-color: $dark-l1;
241+
}
242+
}

‎packages/clay-sidebar/src/Toolbar.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* © 2019 Liferay, Inc. <https://liferay.com>
3+
*
4+
* SPDX-License-Identifier: BSD-3-Clause
5+
*/
6+
7+
import React from 'react';
8+
9+
interface IToolbarProps extends React.HTMLAttributes<HTMLElement> {}
10+
11+
const Toolbar: React.FunctionComponent<IToolbarProps> = ({
12+
children,
13+
...otherProps
14+
}) => {
15+
return (
16+
<nav className="tbar tbar-dark-l2 tbar-stacked" {...otherProps}>
17+
<ul className="tbar-nav">{children}</ul>
18+
</nav>
19+
);
20+
};
21+
22+
export default Toolbar;

0 commit comments

Comments
 (0)