Skip to content
This repository was archived by the owner on Jun 20, 2022. It is now read-only.

Commit 4f000ef

Browse files
gregbergegregberge
committed
feat: add Card, Menu, Separator, Text
Also fix issue with forwardedAs on Button
1 parent 453ed10 commit 4f000ef

File tree

20 files changed

+1176
-96
lines changed

20 files changed

+1176
-96
lines changed

‎CONTRIBUTING.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ _Before_ submitting a pull request, please make sure the following is done…
4444

4545
```sh
4646
# build packages continuously:
47-
yarn run build:watch
47+
yarn dev
4848
# in website folder have to run:
49-
yarn && yarn run dev
49+
yarn && yarn dev
5050
# each time you want to update the documentation to reflect your change, use:
5151
yarn update-website
5252
```

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@
55
],
66
"scripts": {
77
"build": "lerna run build",
8-
"build:docs": "yarn build && docz build && cp _redirects .docz/dist",
9-
"build:watch": "WATCH_MODE=true lerna run --parallel build -- --watch",
8+
"dev": "WATCH_MODE=true lerna run --parallel build -- --watch",
109
"update-website": "cp -r ./packages/core-sc/dist ./website/node_modules/smooth-ui-sc-next && cp -r ./packages/core-em/dist ./website/node_modules/smooth-ui-em-next",
1110
"ci": "yarn lint && yarn test && yarn build && bundlesize && yarn tsc:check || true",
12-
"dev": "docz dev",
1311
"format": "prettier --write \"**/*.{js,json,md,mdx}\"",
1412
"lint": "eslint .",
1513
"release": "lerna publish --conventional-commits --force-publish=* && conventional-github-releaser --preset angular",
14+
"prerelease": "lerna publish prerelease --force-publish=* && conventional-github-releaser --preset angular",
1615
"test": "jest"
1716
},
1817
"bundlesize": [

‎packages/core-em/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
"polished": "^3.4.1",
3131
"prop-desc": "^1.0.0",
3232
"prop-types": "^15.7.2",
33-
"react-flatten-children": "^1.0.0"
33+
"react-flatten-children": "^1.0.0",
34+
"react-merge-refs": "^1.0.0"
3435
},
3536
"peerDependencies": {
3637
"@emotion/core": "^10.0.0",

‎packages/core-sc/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
"polished": "^3.4.1",
3131
"prop-desc": "^1.0.0",
3232
"prop-types": "^15.7.2",
33-
"react-flatten-children": "^1.0.0"
33+
"react-flatten-children": "^1.0.0",
34+
"react-merge-refs": "^1.0.0"
3435
},
3536
"peerDependencies": {
3637
"react": ">=16.8.0",

‎packages/shared/core/Button.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,10 @@ export const Button = createComponent({
5252
/* When used as link */
5353
text-decoration: none;
5454
55+
&[type='button'] {
56+
appearance: none;
57+
}
58+
5559
&:disabled {
5660
opacity: 0.8;
5761
}
@@ -67,6 +71,7 @@ export const Button = createComponent({
6771
6872
&:not(:disabled):hover,
6973
&:not(:disabled):active {
74+
color: ${colorYik(baseColor)(p)};
7075
background-color: ${darken(0.05, baseColor)};
7176
}
7277
`(p)}

‎packages/shared/core/Card.js‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
import React from 'react'
2+
import { th, system } from '@xstyled/system'
3+
import { node } from 'prop-desc'
4+
import { css, createComponent, getSystemPropTypes } from './util'
5+
import * as theme from './theme/common'
6+
7+
export const Card = createComponent({
8+
name: 'Card',
9+
render: ({ as: As = 'div', ...props }) => <As {...props} />,
10+
theme: [
11+
theme,
12+
{
13+
components: {
14+
Card: p => {
15+
return css`
16+
position: relative;
17+
display: flex;
18+
flex-direction: column;
19+
min-width: 0;
20+
word-wrap: break-word;
21+
background-color: ${th.color('white')(p)};
22+
background-clip: border-box;
23+
border: 0.0625rem solid;
24+
border-color: ${th.color('highlightBorder')(p)};
25+
border-radius: ${th.radius('base')(p)};
26+
font-family: ${th.font('base')(p)};
27+
28+
&& {
29+
${system(p)}
30+
}
31+
`
32+
},
33+
},
34+
},
35+
],
36+
propTypes: {
37+
children: node,
38+
...getSystemPropTypes(system),
39+
},
40+
})
41+
42+
export const CardBody = createComponent({
43+
name: 'CardBody',
44+
render: ({ as: As = 'div', ...props }) => <As {...props} />,
45+
theme: [
46+
theme,
47+
{
48+
components: {
49+
CardBody: p => {
50+
return css`
51+
flex: 1 1 auto;
52+
padding: 20rpx;
53+
54+
&& {
55+
${system(p)}
56+
}
57+
`
58+
},
59+
},
60+
},
61+
],
62+
propTypes: {
63+
children: node,
64+
...getSystemPropTypes(system),
65+
},
66+
})
67+
68+
export const CardTitle = createComponent({
69+
name: 'CardTitle',
70+
render: ({ as: As = 'div', ...props }) => <As {...props} />,
71+
theme: [
72+
theme,
73+
{
74+
components: {
75+
CardTitle: p => {
76+
return css`
77+
margin-bottom: 12rpx;
78+
79+
&& {
80+
${system(p)}
81+
}
82+
`
83+
},
84+
},
85+
},
86+
],
87+
propTypes: {
88+
children: node,
89+
...getSystemPropTypes(system),
90+
},
91+
})
92+
93+
export const CardText = createComponent({
94+
name: 'CardText',
95+
render: ({ as: As = 'p', ...props }) => <As {...props} />,
96+
theme: [
97+
theme,
98+
{
99+
components: {
100+
CardText: p => {
101+
return css`
102+
&:last-child {
103+
margin-bottom: 0;
104+
}
105+
106+
&& {
107+
${system(p)}
108+
}
109+
`
110+
},
111+
},
112+
},
113+
],
114+
propTypes: {
115+
children: node,
116+
...getSystemPropTypes(system),
117+
},
118+
})
119+
120+
export const CardHeader = createComponent({
121+
name: 'CardHeader',
122+
render: ({ as: As = 'div', ...props }) => <As {...props} />,
123+
theme: [
124+
theme,
125+
{
126+
components: {
127+
CardHeader: p => {
128+
const baseRadius = th.radius('base')(p)
129+
return css`
130+
padding: 0.75rem 1.25rem;
131+
margin-bottom: 0; /* Removes the default margin-bottom of <hN> */
132+
background-color: ${th.color('highlightBackground')(p)};
133+
border-bottom: 0.0625rem;
134+
border-bottom-color: ${th.color('highlightBorder')(p)};
135+
136+
&:first-child {
137+
border-radius: calc(${baseRadius} - 1px) calc(${baseRadius} - 1px)
138+
0 0;
139+
}
140+
141+
&& {
142+
${system(p)}
143+
}
144+
`
145+
},
146+
},
147+
},
148+
],
149+
propTypes: {
150+
children: node,
151+
...getSystemPropTypes(system),
152+
},
153+
})
154+
155+
export const CardFooter = createComponent({
156+
name: 'CardFooter',
157+
render: ({ as: As = 'div', ...props }) => <As {...props} />,
158+
theme: [
159+
theme,
160+
{
161+
components: {
162+
CardFooter: p => {
163+
const baseRadius = th.radius('base')(p)
164+
return css`
165+
padding: 0.75rem 1.25rem;
166+
background-color: ${th.color('highlightBackground')(p)};
167+
border-top: 0.0625rem;
168+
border-top-color: ${th.color('highlightBorder')(p)};
169+
170+
&:last-child {
171+
border-radius: 0 0 calc(${baseRadius} - 1px)
172+
calc(${baseRadius} - 1px);
173+
}
174+
175+
&& {
176+
${system(p)}
177+
}
178+
`
179+
},
180+
},
181+
},
182+
],
183+
propTypes: {
184+
children: node,
185+
...getSystemPropTypes(system),
186+
},
187+
})
188+
189+
export const CardImg = createComponent({
190+
name: 'CardImg',
191+
render: ({ as: As = 'img', ...props }) => <As {...props} />,
192+
theme: [
193+
theme,
194+
{
195+
components: {
196+
CardImg: p => {
197+
const baseRadius = th.radius('base')(p)
198+
return css`
199+
flex-shrink: 0; /* For IE: https://github.com/twbs/bootstrap/issues/29396 */
200+
width: 100%; /* Required because we use flexbox and this inherently applies align-self: stretch */
201+
202+
&:first-child {
203+
border-radius: calc(${baseRadius} - 1px) calc(${baseRadius} - 1px)
204+
0 0;
205+
}
206+
207+
&:last-child {
208+
border-radius: 0 0 calc(${baseRadius} - 1px)
209+
calc(${baseRadius} - 1px);
210+
}
211+
212+
&& {
213+
${system(p)}
214+
}
215+
`
216+
},
217+
},
218+
},
219+
],
220+
propTypes: {
221+
children: node,
222+
...getSystemPropTypes(system),
223+
},
224+
})

0 commit comments

Comments
 (0)