git.iko.soy/bridge
on 05c1914 help sign in
bridge/src/components/OldLink.js
127 lines 2.6 kB history raw
1import React from 'react';
2import PropTypes from 'prop-types';
4const Link = ({
5 disabled,
6 onClick,
7 className,
8 autoFocus,
9 style,
10 href,
11 target,
12 children,
13 size,
14 color,
15 type,
16}) => {
20 const _color = disabled ? 'disabled' : color
21 const _s = getStyles(styleManifest, type, _color, size)
22 const _disabled = disabled ? 'disabled': ''
24 return (
25 <a
26 className={`${_s} ${className} ${_disabled} sans`}
27 style={style}
28 onClick={onClick}
29 disabled={disabled}
30 autoFocus={autoFocus}
31 href={href}
32 target={target}
33 >
34 { children }
35 </a>
36 )
39const getStyles = (m, t, c, s) => `${m[t][c]} ${m[t][s]} ${m[t]['all']}`;
41const styleManifest = {
42 link: {
43 // Color selection
44 blue: 'blue',
45 black: 'black',
46 green: 'green',
47 yellow: 'yellow',
48 gray: 'gray-50',
49 disabled: 'gray-30',
50 // Size selection
51 s: 'text-sans-serif fs-35 mb-0',
52 m: 'text-sans-serif fs-4 mb-1',
53 l: 'fs-5 mb-2',
54 // Applied to all link buttons
55 all: 'bg-transparent text-400 underline user-select-auto p-0',
56 },
57 outline: {
58 // Color selection
59 blue: 'b-blue blue',
60 black: 'b-black black',
61 green: 'b-green green',
62 yellow: 'b-yellow yellow',
63 gray: 'b-gray-50 gray-50',
64 disabled: 'b-gray-30 gray-30',
65 // Size selection
66 s: 'h-7 ph-2 fs-3 b-1',
67 m: 'h-9 ph-4 fs-4 b-2',
68 l: 'h-13 ph-6 fs-5 b-2',
69 // Applied to all outline buttons
70 all: 'bg-transparent b-solid',
71 },
72 text: {
73 // Color selection
74 blue: 'blue',
75 black: 'black',
76 green: 'green',
77 yellow: 'yellow',
78 gray: 'gray-50',
79 disabled: 'gray-30',
80 // Size selection
81 s: 'h-6 ph-2 fs-35',
82 m: 'h-9 ph-4 fs-4',
83 l: 'h-13 ph-6 fs-5',
84 // Applied to all outline buttons
85 all: 'bg-transparent b-0',
86 },
87 block: {
88 // Color selection
89 blue: 'bg-blue b-blue',
90 black: 'bg-black b-black',
91 green: 'bg-green b-green',
92 yellow: 'bg-yellow b-yellow',
93 gray: 'bg-gray b-gray',
94 disabled: 'b-gray-30 bg-gray-30',
95 // Size selection
96 s: 'h-6 ph-2 fs-3 sans',
97 m: 'h-9 ph-4 fs-4',
98 l: 'h-13 ph-6 fs-5',
99 // Applied to all block buttons
100 all: 'white b-2 br-solid',
101 }
105Link.propTypes = {
106 disabled: PropTypes.bool,
107 onClick: PropTypes.func,
108 className: PropTypes.string,
109 children: PropTypes.node,
110 autoFocus: PropTypes.bool,
111 style: PropTypes.object,
112};
115Link.defaultProps = {
116 className: '',
117 autoFocus: false,
118 onClick: () => {},
119 disabled: false,
120 size: 'm',
121 color: 'blue',
122 type: 'block',
123 style: {},
124};
127export default Link;