UNPKG

@rafacdb/bah/src/Button.js

Version:

7.83 kBJavaScriptView Raw

1/* Buttons pen from https://codepen.io/valentin/pen/kahKl */
2import React from 'react';
3import PropTypes from 'prop-types';
4import styled from 'styled-components';
5
6const ButtonStyled = styled.div`
${props => (props.buttonLink ? 'a' : 'button')} {
  text-decoration: none;
  display: block;
  text-align: center;
  cursor: pointer;
  border: none;
  height: 40px;
  padding: 0 14px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);
  font-size: 18px;
  line-height: 37px;
  -webkit-transition-property: background-color;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
  -moz-transition-property: background-color;
  -moz-transition-duration: 0.2s;
  -moz-transition-timing-function: linear;
  -ms-transition-property: background-color;
  -ms-transition-duration: 0.2s;
  -ms-transition-timing-function: linear;
  -o-transition-property: background-color;
  -o-transition-duration: 0.2s;
  -o-transition-timing-function: linear;
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  background: #fafafa;
  color: #222;
38
  i {
    line-height: 37px;
  }
  &:active,
  &:active i {
    line-height: 40px;
    transform: translateY(2px);
  }
  ${props =>
    (props.primary ||
      props.info ||
      props.success ||
      props.warning ||
      props.danger ||
      props.inverse) &&
    `
    -webkit-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);
  `} ${props =>
      props.primary &&
      `
    background: #0088cc;
    color: #fafafa;
  `} ${props =>
      props.primary &&
      `
      &:hover,
      &:focus {
        background: #006da3;
        color: #fafafa;
      }
  `} ${props =>
      props.info &&
      `
      background: #49afcd;
      color: #fafafa;
  `} ${props =>
      props.info &&
      `
      &:hover,
      &:focus {
        background: #339bba;
        color: #fafafa;
      }
  `} ${props =>
      props.success &&
      `
      background: #5bb75b;
      color: #fafafa;
  `} ${props =>
      props.success &&
      `
      &:hover,
      &:focus {
        background: #47a247;
        color: #fafafa;
      }
  `} ${props =>
      props.warning &&
      `
      background: #faa732;
      color: #fafafa;
  `} ${props =>
      props.warning &&
      `
      &:hover,
      &:focus {
        background: #f9960a;
        color: #fafafa;
      }
  `} ${props =>
      props.danger &&
      `
      background: #da4f49;
      color: #fafafa;
  `} ${props =>
      props.danger &&
      `
      &:hover,
      &:focus {
        background: #d0312a;
        color: #fafafa;
      }
  `} ${props =>
      props.inverse &&
      `
      background: #363636;
      color: #fafafa;
  `} ${props =>
      props.inverse &&
      `
      &:hover,
      &:focus {
        background: #222222;
        color: #fafafa;
      }
  `} span {
    pointer-events: none;
  }
  &:hover {
    text-decoration: none;
  }
  &:focus {
    text-decoration: none;
    outline: none;
  }
  &:active {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
  }
151
  ${props =>
    props.small &&
    `
    height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
    font-size: 14px;
    line-height: 28px;
    i {
      line-height: 28px;
    }
  `} ${props =>
      props.small &&
      `
      &:active,
      &:active i {
        line-height: 30px;
      }
  `} ${props =>
      props.small &&
      (props.primary ||
        props.info ||
        props.success ||
        props.warning ||
        props.danger ||
        props.inverse) &&
      `
      -webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
      -moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
  `} ${props =>
      props.large &&
      `
      height: 50px;
      padding: 0 18px;
      border-radius: 6px;
      -webkit-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15);
      -moz-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15);
      box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15);
      font-size: 22px;
      line-height: 46px;
      i {
        line-height: 46px;
      }
  `} ${props =>
      props.large &&
      `
      &:active,
      &:active i {
        line-height: 50px;
      }
  `} ${props =>
      props.large &&
      (props.primary ||
        props.info ||
        props.success ||
        props.warning ||
        props.danger ||
        props.inverse) &&
      `
      -webkit-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);
      -moz-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);
  `} ${props =>
      props.xlarge &&
      `
      height: 60px;
      padding: 0 22px;
      border-radius: 7px;
      -webkit-box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.15);
      -moz-box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.15);
      box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.15);
      font-size: 26px;
      line-height: 55px;
      i {
        line-height: 55px;
      }
  `} ${props =>
      props.xlarge &&
      `
      &:active,
      &:active i {
        line-height: 60px;
      }
  `} ${props =>
      props.xlarge &&
      (props.primary ||
        props.info ||
        props.success ||
        props.warning ||
        props.danger ||
        props.inverse) &&
      `
      -webkit-box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.2);
      -moz-box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.2);
  `} ${props =>
      props.inline &&
      `
      display: inline-block;
      vertical-align: middle;
  `} &:disabled {
    background: #606263;
    color: #9ea1a3;
  }
}
261`;
262
263const Button = ({
children,
primary,
info,
success,
warning,
danger,
inverse,
inline,
small,
large,
xlarge,
buttonLink,
...props
277}) =>
(<ButtonStyled
  primary={primary}
  info={info}
  success={success}
  warning={warning}
  danger={danger}
  inverse={inverse}
  inline={inline}
  small={small}
  large={large}
  xlarge={xlarge}
  buttonLink={buttonLink}
>
  {buttonLink
    ? <a href="#" {...props}>
      {children}
    </a>
    : <button {...props}>
      {children}
    </button>}
</ButtonStyled>);
299
300Button.defaultProps = {
children: '',
primary: false,
info: false,
success: false,
warning: false,
danger: false,
inverse: false,
inline: false,
small: false,
large: false,
xlarge: false,
buttonLink: false,
313};
314
315Button.propTypes = {
children: PropTypes.node.isRequired,
primary: PropTypes.bool,
info: PropTypes.bool,
success: PropTypes.bool,
warning: PropTypes.bool,
danger: PropTypes.bool,
inverse: PropTypes.bool,
inline: PropTypes.bool,
small: PropTypes.bool,
large: PropTypes.bool,
xlarge: PropTypes.bool,
buttonLink: PropTypes.bool,
328};
329
330export default Button;

1	`/* Buttons pen from https://codepen.io/valentin/pen/kahKl */`
2	`import React from 'react';`
3	`import PropTypes from 'prop-types';`
4	`import styled from 'styled-components';`
5
6	const ButtonStyled = styled.div`
7	`${props => (props.buttonLink ? 'a' : 'button')} {`
8	`text-decoration: none;`
9	`display: block;`
10	`text-align: center;`
11	`cursor: pointer;`
12	`border: none;`
13	`height: 40px;`
14	`padding: 0 14px;`
15	`border-radius: 5px;`
16	`-webkit-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);`
17	`-moz-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);`
18	`box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);`
19	`font-size: 18px;`
20	`line-height: 37px;`
21	`-webkit-transition-property: background-color;`
22	`-webkit-transition-duration: 0.2s;`
23	`-webkit-transition-timing-function: linear;`
24	`-moz-transition-property: background-color;`
25	`-moz-transition-duration: 0.2s;`
26	`-moz-transition-timing-function: linear;`
27	`-ms-transition-property: background-color;`
28	`-ms-transition-duration: 0.2s;`
29	`-ms-transition-timing-function: linear;`
30	`-o-transition-property: background-color;`
31	`-o-transition-duration: 0.2s;`
32	`-o-transition-timing-function: linear;`
33	`transition-property: background-color;`
34	`transition-duration: 0.2s;`
35	`transition-timing-function: linear;`
36	`background: #fafafa;`
37	`color: #222;`
38
39	`i {`
40	`line-height: 37px;`
41	`}`
42	`&:active,`
43	`&:active i {`
44	`line-height: 40px;`
45	`transform: translateY(2px);`
46	`}`
47	`${props =>`
48	`(props.primary \|\|`
49	`props.info \|\|`
50	`props.success \|\|`
51	`props.warning \|\|`
52	`props.danger \|\|`
53	`props.inverse) &&`
54	`
55	`-webkit-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);`
56	`-moz-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);`
57	`box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);`
58	`} ${props =>
59	`props.primary &&`
60	`
61	`background: #0088cc;`
62	`color: #fafafa;`
63	`} ${props =>
64	`props.primary &&`
65	`
66	`&:hover,`
67	`&:focus {`
68	`background: #006da3;`
69	`color: #fafafa;`
70	`}`
71	`} ${props =>
72	`props.info &&`
73	`
74	`background: #49afcd;`
75	`color: #fafafa;`
76	`} ${props =>
77	`props.info &&`
78	`
79	`&:hover,`
80	`&:focus {`
81	`background: #339bba;`
82	`color: #fafafa;`
83	`}`
84	`} ${props =>
85	`props.success &&`
86	`
87	`background: #5bb75b;`
88	`color: #fafafa;`
89	`} ${props =>
90	`props.success &&`
91	`
92	`&:hover,`
93	`&:focus {`
94	`background: #47a247;`
95	`color: #fafafa;`
96	`}`
97	`} ${props =>
98	`props.warning &&`
99	`
100	`background: #faa732;`
101	`color: #fafafa;`
102	`} ${props =>
103	`props.warning &&`
104	`
105	`&:hover,`
106	`&:focus {`
107	`background: #f9960a;`
108	`color: #fafafa;`
109	`}`
110	`} ${props =>
111	`props.danger &&`
112	`
113	`background: #da4f49;`
114	`color: #fafafa;`
115	`} ${props =>
116	`props.danger &&`
117	`
118	`&:hover,`
119	`&:focus {`
120	`background: #d0312a;`
121	`color: #fafafa;`
122	`}`
123	`} ${props =>
124	`props.inverse &&`
125	`
126	`background: #363636;`
127	`color: #fafafa;`
128	`} ${props =>
129	`props.inverse &&`
130	`
131	`&:hover,`
132	`&:focus {`
133	`background: #222222;`
134	`color: #fafafa;`
135	`}`
136	`} span {
137	`pointer-events: none;`
138	`}`
139	`&:hover {`
140	`text-decoration: none;`
141	`}`
142	`&:focus {`
143	`text-decoration: none;`
144	`outline: none;`
145	`}`
146	`&:active {`
147	`-webkit-box-shadow: none !important;`
148	`-moz-box-shadow: none !important;`
149	`box-shadow: none !important;`
150	`}`
151
152	`${props =>`
153	`props.small &&`
154	`
155	`height: 30px;`
156	`padding: 0 10px;`
157	`border-radius: 4px;`
158	`-webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);`
159	`-moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);`
160	`box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);`
161	`font-size: 14px;`
162	`line-height: 28px;`
163	`i {`
164	`line-height: 28px;`
165	`}`
166	`} ${props =>
167	`props.small &&`
168	`
169	`&:active,`
170	`&:active i {`
171	`line-height: 30px;`
172	`}`
173	`} ${props =>
174	`props.small &&`
175	`(props.primary \|\|`
176	`props.info \|\|`
177	`props.success \|\|`
178	`props.warning \|\|`
179	`props.danger \|\|`
180	`props.inverse) &&`
181	`
182	`-webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);`
183	`-moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);`
184	`box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);`
185	`} ${props =>
186	`props.large &&`
187	`
188	`height: 50px;`
189	`padding: 0 18px;`
190	`border-radius: 6px;`
191	`-webkit-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15);`
192	`-moz-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15);`
193	`box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15);`
194	`font-size: 22px;`
195	`line-height: 46px;`
196	`i {`
197	`line-height: 46px;`
198	`}`
199	`} ${props =>
200	`props.large &&`
201	`
202	`&:active,`
203	`&:active i {`
204	`line-height: 50px;`
205	`}`
206	`} ${props =>
207	`props.large &&`
208	`(props.primary \|\|`
209	`props.info \|\|`
210	`props.success \|\|`
211	`props.warning \|\|`
212	`props.danger \|\|`
213	`props.inverse) &&`
214	`
215	`-webkit-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);`
216	`-moz-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);`
217	`box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);`
218	`} ${props =>
219	`props.xlarge &&`
220	`
221	`height: 60px;`
222	`padding: 0 22px;`
223	`border-radius: 7px;`
224	`-webkit-box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.15);`
225	`-moz-box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.15);`
226	`box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.15);`
227	`font-size: 26px;`
228	`line-height: 55px;`
229	`i {`
230	`line-height: 55px;`
231	`}`
232	`} ${props =>
233	`props.xlarge &&`
234	`
235	`&:active,`
236	`&:active i {`
237	`line-height: 60px;`
238	`}`
239	`} ${props =>
240	`props.xlarge &&`
241	`(props.primary \|\|`
242	`props.info \|\|`
243	`props.success \|\|`
244	`props.warning \|\|`
245	`props.danger \|\|`
246	`props.inverse) &&`
247	`
248	`-webkit-box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.2);`
249	`-moz-box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.2);`
250	`box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.2);`
251	`} ${props =>
252	`props.inline &&`
253	`
254	`display: inline-block;`
255	`vertical-align: middle;`
256	`} &:disabled {
257	`background: #606263;`
258	`color: #9ea1a3;`
259	`}`
260	`}`
261	`;
262
263	`const Button = ({`
264	`children,`
265	`primary,`
266	`info,`
267	`success,`
268	`warning,`
269	`danger,`
270	`inverse,`
271	`inline,`
272	`small,`
273	`large,`
274	`xlarge,`
275	`buttonLink,`
276	`...props`
277	`}) =>`
278	`(<ButtonStyled`
279	`primary={primary}`
280	`info={info}`
281	`success={success}`
282	`warning={warning}`
283	`danger={danger}`
284	`inverse={inverse}`
285	`inline={inline}`
286	`small={small}`
287	`large={large}`
288	`xlarge={xlarge}`
289	`buttonLink={buttonLink}`
290	`>`
291	`{buttonLink`
292	`? <a href="#" {...props}>`
293	`{children}`
294	`</a>`
295	`: <button {...props}>`
296	`{children}`
297	`</button>}`
298	`</ButtonStyled>);`
299
300	`Button.defaultProps = {`
301	`children: '',`
302	`primary: false,`
303	`info: false,`
304	`success: false,`
305	`warning: false,`
306	`danger: false,`
307	`inverse: false,`
308	`inline: false,`
309	`small: false,`
310	`large: false,`
311	`xlarge: false,`
312	`buttonLink: false,`
313	`};`
314
315	`Button.propTypes = {`
316	`children: PropTypes.node.isRequired,`
317	`primary: PropTypes.bool,`
318	`info: PropTypes.bool,`
319	`success: PropTypes.bool,`
320	`warning: PropTypes.bool,`
321	`danger: PropTypes.bool,`
322	`inverse: PropTypes.bool,`
323	`inline: PropTypes.bool,`
324	`small: PropTypes.bool,`
325	`large: PropTypes.bool,`
326	`xlarge: PropTypes.bool,`
327	`buttonLink: PropTypes.bool,`
328	`};`
329
330	`export default Button;`