Skip to content

Commit bd16460

Browse files
john-raymonjohn-raymon
committed
version 0.2.9, add secondary button types.
1 parent ea7d909 commit bd16460

File tree

13 files changed

+141
-57
lines changed

13 files changed

+141
-57
lines changed

‎dist/lite-react-ui.es.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/lite-react-ui.umd.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/style.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"@mdx-js/react": "^1.6.18",
1212
"@next/mdx": "^9.1.1",
1313
"@tailwindcss/aspect-ratio": "^0.2.1",
14-
"lite-react-ui": "^0.2.7",
14+
"lite-react-ui": "^0.2.9",
1515
"next": "latest",
1616
"react": "^16.8.6",
1717
"react-dom": "^16.8.6",

‎docs/pages/_app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function MyApp({ Component, pageProps}) {
6464
</p>
6565
</div>
6666

67-
<Navigation onNavLinkClick={() => alert('clicked')} className="twr-sticky twr-top-0 twr-z-20 twr-mb-4" navLinks={[
67+
<Navigation buttonTypes="primary" onNavLinkClick={() => alert('clicked')} className="twr-sticky twr-top-0 twr-z-20 twr-mb-4" navLinks={[
6868
{
6969
label: "Getting Started",
7070
onClick: () => goTo('/'),

‎docs/pages/buttons.mdx‎

Lines changed: 52 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,56 +7,95 @@ import { useState } from 'react';
77
# Buttons
88

99
The button component by default renders with a button type of
10-
"primary". The secondary, tertiary types are being developed.
10+
"primary". Tertiary button types are in development.
1111

1212
<br/>
1313

14-
<Button>
15-
Hello World 🌍
16-
</Button>
14+
<div className="flex space-x-4">
15+
<Button>
16+
Hello World 🌍
17+
</Button>
18+
19+
<Button buttonType="secondary">
20+
Hello World 🌍
21+
</Button>
22+
</div>
23+
1724

1825
```js
1926

2027
<Button>
2128
Hello World 🌍
2229
</Button>
30+
31+
<Button buttonType="secondary">
32+
Hello World 🌍
33+
</Button>
2334
```
2435

2536
<br/>
2637

27-
<Button onClick={() => { alert('Thank you ☄️')}}>
28-
Click me! 🙏🏾
29-
</Button>
38+
<div className="flex space-x-4">
39+
<Button onClick={() => { alert('Thank you ☄️')}}>
40+
Click me! 🙏🏾
41+
</Button>
42+
43+
<Button buttonType="secondary" onClick={() => { alert('Thank you ☄️')}}>
44+
Click me! 🙏🏾
45+
</Button>
46+
</div>
3047

3148
```js
3249

3350
<Button onClick={() => { alert('Thank you ☄️')}}>
3451
Click me! 🙏🏾
3552
</Button>
53+
54+
<Button buttonType="secondary" onClick={() => { alert('Thank you ☄️')}}>
55+
Click me! 🙏🏾
56+
</Button>
3657
```
3758

3859
<br/>
3960

40-
<Button loading>
41-
Pay Now 🤑
42-
</Button>
61+
<div className="flex space-x-4">
62+
<Button loading>
63+
Pay Now 🤑
64+
</Button>
65+
<Button buttonType="secondary" loading>
66+
Pay Now 🤑
67+
</Button>
68+
</div>
4369

4470
```js
4571

4672
<Button loading>
4773
Pay Now 🤑
4874
</Button>
75+
76+
<Button buttonType="secondary" loading>
77+
Pay Now 🤑
78+
</Button>
4979
```
5080

5181
<br/>
5282

53-
<Button disabled>
54-
Checkout
55-
</Button>
83+
<div className="flex space-x-4">
84+
<Button disabled>
85+
Checkout
86+
</Button>
87+
<Button buttonType="secondary" disabled>
88+
Checkout
89+
</Button>
90+
</div>
5691

5792
```js
5893

5994
<Button disabled>
6095
Checkout
6196
</Button>
97+
98+
<Button buttonType="secondary" disabled>
99+
Checkout
100+
</Button>
62101
```

‎docs/yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2181,10 +2181,10 @@ lines-and-columns@^1.1.6:
21812181
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
21822182
integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
21832183

2184-
lite-react-ui@^0.2.6, lite-react-ui@^0.2.7:
2185-
version "0.2.7"
2186-
resolved "https://registry.yarnpkg.com/lite-react-ui/-/lite-react-ui-0.2.7.tgz#79109a5f8aa72a2862995510e9c73d9cad25a821"
2187-
integrity sha512-colppgn0Ju9fL1V+8AV+OCAUg9x2hm7nd55iEc9DrR16N59OKgB+ayeuuEUBAH00izlgtPdgSvc1EM5mnrrbKg==
2184+
lite-react-ui@^0.2.6, lite-react-ui@^0.2.9:
2185+
version "0.2.9"
2186+
resolved "https://registry.yarnpkg.com/lite-react-ui/-/lite-react-ui-0.2.9.tgz#187481374e463e52e31603342340c88679c75ede"
2187+
integrity sha512-DJt4Q8M+8Avssjyy9qtYj6OQctHPG8JvXMjO5TixxiGL3mkZNqpnhNZgLHbO+pMnN6/SOAEq62wWP6sk81w+lA==
21882188
dependencies:
21892189
concurrently "^6.2.0"
21902190
lite-react-ui "^0.2.6"

‎example/main.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,16 @@ function App() {
3131
</Button>
3232
<Button className="twr-font-bold">
3333
Sign up now 🏄🏽‍♂️
34-
</Button>
34+
</Button>
3535
<Button loading="true" disabled={true}>
3636
Test
37-
</Button>
37+
</Button>
38+
<Button buttonType="secondary" loading className="twr-w-auto">
39+
Test
40+
</Button>
41+
<Button buttonType="secondary" disabled className="twr-w-auto">
42+
Test
43+
</Button>
3844
</li>
3945
<li>
4046
<p>{`<Navigation> component:`}</p>

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "lite-react-ui",
3-
"version": "0.2.7",
4-
"homepage": "https://github.com/john-raymon/lite-react-UI-components",
3+
"version": "0.2.9",
4+
"homepage": "htps://github.com/john-raymon/lite-react-UI-components",
55
"author": "john-raymon",
66
"repository": {
77
"type": "git",

‎src/assets/styles/buttons.css‎

Lines changed: 64 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,94 @@
11
.twr-button {
22
@apply twr-relative
33
twr-flex
4-
twr-py-4
5-
twr-px-8
4+
/* twr-py-4
5+
twr-px-8 */
66
twr-rounded-lg
77
twr-transition
88
twr-outline-none
9-
twr-text-center;
10-
&__primary {
11-
@apply twr-outline-none;
12-
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.1);
13-
background: #FFFFFF;
9+
twr-text-center
10+
twr-text-black;
11+
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.1);
12+
padding: calc(1rem - 2px) calc(2rem - 2px) calc(1rem - 2px) calc(2rem - 2px);
13+
14+
&__secondary {
15+
@apply twr-bg-black twr-text-white twr-outline-none twr-border-2 twr-border-black;
16+
box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.2);
17+
1418
&:hover:enabled {
1519
@apply twr-outline-none;
16-
background: #ECECEC;
17-
box-shadow: 0px 0px 19px 2px rgba(0, 0, 0, 0.04);
20+
background: #2F2F2F;
21+
border-color: #2F2F2F;
1822
}
1923

2024
&:focus:enabled {
2125
@apply twr-outline-none;
2226
}
2327

24-
&:not(&--no-focus):focus:enabled {
25-
@apply twr-outline-none twr-border-2;
28+
&:not(:active):not(&--no-focus):focus:enabled {
29+
@apply twr-outline-none;
2630
/* offset 2px sides from increasing border-width of 0px to 2px */
27-
padding: calc(1rem - 2px) calc(2rem - 2px) calc(1rem - 2px) calc(2rem - 2px);
28-
background: #ECECEC;
29-
border-color: rgba(179, 179, 179, 0.26);
30-
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.1);
31+
background: #2F2F2F;
32+
border-color: rgba(116, 116, 116, 0.69);;
33+
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.39);
3134
}
3235

3336
&:active:enabled {
34-
@apply twr-border-2;
35-
/* offset 2px sides from increasing border-width of 0px to 2px */
36-
padding: calc(1rem - 2px) calc(2rem - 2px) calc(1rem - 2px) calc(2rem - 2px);
37-
background: #FCFCFC;
38-
border-color: rgba(178, 178, 178, 0.26);
37+
background: #494949;
38+
border-color: rgba(116, 116, 116, 0.69);
3939
box-shadow: none;
4040
}
4141

42+
&--focus {
43+
@apply twr-outline-none;
44+
background: #2F2F2F;
45+
border-color: rgba(116, 116, 116, 0.69);;
46+
box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.1);
47+
}
4248
&:disabled {
43-
@apply twr-cursor-not-allowed twr-opacity-50;
49+
box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.2);
50+
}
51+
}
52+
53+
&__primary {
54+
@apply twr-outline-none twr-border-2;
55+
background: #FFFFFF;
56+
border-color: #FFF;
57+
58+
&:hover:enabled {
59+
@apply twr-outline-none;
60+
background: #7e7e7e75;
61+
border-color: #7e7e7e75;
62+
}
63+
64+
&:focus:enabled {
65+
@apply twr-outline-none;
66+
}
67+
68+
&:not(:active):not(&--no-focus):focus:enabled {
69+
@apply twr-outline-none twr-bg-opacity-25;
70+
background: #BABABA;
71+
border-color: #a2a2a245;
4472
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.1);
4573
}
4674

75+
&:active:enabled {
76+
background: #FCFCFC;
77+
border-color: #a2a2a245;
78+
box-shadow: none;
79+
}
80+
4781
&--focus {
48-
@apply twr-outline-none twr-border-2;
49-
/* offset 2px sides from increasing border-width of 0px to 2px */
50-
padding: calc(1rem - 2px) calc(2rem - 2px) calc(1rem - 2px) calc(2rem - 2px);
51-
background: #ECECEC;
52-
border-color: rgba(179, 179, 179, 0.26);
82+
@apply twr-outline-none ;
83+
background: #E6E6E6;
84+
border-color: #a2a2a245;
5385
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.1);
5486
}
87+
&:disabled {
88+
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.1);
89+
}
90+
}
91+
&:disabled {
92+
@apply twr-cursor-not-allowed twr-opacity-50;
5593
}
5694
}

0 commit comments

Comments
 (0)