Skip to content

Commit a8ff1ee

Browse files
runelyrunely
authored
Merge pull request #426 from vtfk/chips
Chips
2 parents a054ffe + 532b12f commit a8ff1ee

File tree

4 files changed

+289
-0
lines changed

4 files changed

+289
-0
lines changed

‎src/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export * from './ui/BaseStyle'
22
export * from './ui/Button'
33
export * from './ui/CardLink'
44
export * from './ui/Checkbox'
5+
export * from './ui/Chip'
56
export * from './ui/Datepicker'
67
export * from './ui/Icon'
78
export * from './ui/IconDropdownNav'

‎src/ui/Chip/Chip.stories.js

+174
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import { getConfig } from '../../../scripts/storybook/storyConfig'
4+
import { withKnobs, select } from '@storybook/addon-knobs'
5+
6+
import { Chip, types } from '.'
7+
import { Icon } from '../Icon'
8+
9+
export default getConfig({
10+
title: 'Chip',
11+
component: Chip,
12+
decorators: [withKnobs]
13+
})
14+
15+
function Table ({ chips }) {
16+
return (
17+
<table style={{ border: '1px solid grey' }}>
18+
<thead>
19+
<tr>
20+
<th style={{ border: '1px solid grey' }}>Navn</th>
21+
<th style={{ border: '1px solid grey' }}>Alder</th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
{
26+
chips && Array.isArray(chips) && chips.map((chip, index) => {
27+
return (
28+
<tr key={index}>
29+
<td style={{ border: '1px solid grey' }}>Turid Laila {chip}</td>
30+
<td style={{ border: '1px solid grey' }}>168</td>
31+
</tr>
32+
)
33+
})
34+
}
35+
</tbody>
36+
</table>
37+
)
38+
}
39+
40+
export function Information () {
41+
return (
42+
<Table chips={[
43+
<Chip
44+
key='1'
45+
message='information'
46+
type='information'
47+
/>
48+
]}
49+
/>
50+
)
51+
}
52+
53+
export function Success () {
54+
return (
55+
<Table chips={[
56+
<Chip
57+
key='1'
58+
message='success'
59+
type='success'
60+
/>,
61+
<Chip
62+
key='2'
63+
icon={<Icon name='check' size='small' />}
64+
message='success'
65+
type='success'
66+
/>
67+
]}
68+
/>
69+
)
70+
}
71+
72+
export function Warning () {
73+
return (
74+
<Table chips={[
75+
<Chip
76+
key='1'
77+
message='warning'
78+
type='warning'
79+
/>,
80+
<Chip
81+
key='2'
82+
icon={<Icon name='warning' size='small' />}
83+
message='warning'
84+
type='warning'
85+
/>
86+
]}
87+
/>
88+
)
89+
}
90+
91+
export function Error () {
92+
return (
93+
<Table chips={[
94+
<Chip
95+
key='1'
96+
message='error'
97+
type='error'
98+
/>,
99+
<Chip
100+
key='2'
101+
icon={<Icon name='error' size='small' />}
102+
message='error'
103+
type='error'
104+
/>
105+
]}
106+
/>
107+
)
108+
}
109+
110+
export function Styles () {
111+
return (
112+
<div>
113+
<h1>style</h1>
114+
<Table chips={[
115+
<Chip
116+
key='1'
117+
message='no style'
118+
type={select('type', types, 'information')}
119+
/>,
120+
<Chip
121+
key='2'
122+
message='bold'
123+
style='bold'
124+
type={select('type', types, 'information')}
125+
/>,
126+
<Chip
127+
key='3'
128+
message="['bold', 'italic']"
129+
style={['bold', 'italic']}
130+
type={select('type', types, 'information')}
131+
/>,
132+
<Chip
133+
key='4'
134+
message="['bold', 'uppercase', 'underline']"
135+
style={['bold', 'uppercase', 'underline']}
136+
type={select('type', types, 'information')}
137+
/>
138+
]}
139+
/>
140+
141+
<h1>fontSize</h1>
142+
<Table chips={[
143+
<Chip
144+
key='1'
145+
message='default (0.8rem)'
146+
type={select('type', types, 'information')}
147+
/>,
148+
<Chip
149+
key='2'
150+
fontSize='2rem'
151+
message='2rem'
152+
type={select('type', types, 'information')}
153+
/>,
154+
<Chip
155+
key='3'
156+
fontSize='16px'
157+
message='16px'
158+
type={select('type', types, 'information')}
159+
/>,
160+
<Chip
161+
key='4'
162+
fontSize='200%'
163+
message='200%'
164+
type={select('type', types, 'information')}
165+
/>
166+
]}
167+
/>
168+
</div>
169+
)
170+
}
171+
172+
Table.propTypes = {
173+
chips: PropTypes.arrayOf(PropTypes.object)
174+
}

‎src/ui/Chip/index.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
4+
import './styles.scss'
5+
6+
export const types = [
7+
'error',
8+
'information',
9+
'success',
10+
'warning'
11+
]
12+
13+
export function Chip ({ fontSize, icon, message, type, style, ...props }) {
14+
const getStyle = value => {
15+
if (!value) return undefined
16+
else if (typeof value === 'string') return value
17+
else if (Array.isArray(value)) return value.join(' ')
18+
}
19+
20+
return (
21+
<div className={`chip ${type}`} {...props}>
22+
{
23+
icon &&
24+
<div className='chip-container'>
25+
<div className='chip-icon'>{icon}</div>
26+
<div className={`chip-message${style ? ` ${getStyle(style)}` : ''}`} style={{ fontSize }}>{message}</div>
27+
</div>
28+
}
29+
30+
{
31+
!icon && <div className={`chip-message${style ? ` ${getStyle(style)}` : ''}`} style={{ fontSize }}>{message}</div>
32+
}
33+
</div>
34+
)
35+
}
36+
37+
Chip.propTypes = {
38+
fontSize: PropTypes.any,
39+
icon: PropTypes.object,
40+
message: PropTypes.string.isRequired,
41+
style: PropTypes.oneOf([
42+
'bold',
43+
'italic',
44+
'lowercase',
45+
'uppercase',
46+
'overline',
47+
'striketrough',
48+
'underline'
49+
]),
50+
type: PropTypes.oneOf(types).isRequired
51+
}
52+
53+
Chip.defaultProps = {
54+
fontSize: '0.8rem'
55+
}

‎src/ui/Chip/styles.scss

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.chip {
2+
display: inline-block;
3+
padding: 0.3rem 0.6rem;
4+
border-radius: 1rem;
5+
6+
&.error {
7+
background-color: red;
8+
color: white;
9+
fill: white;
10+
}
11+
12+
&.information {
13+
background-color: #f1f1f1;
14+
}
15+
16+
&.success {
17+
background-color: lightgreen;
18+
}
19+
20+
&.warning {
21+
background-color: yellow;
22+
}
23+
24+
.chip-container {
25+
display: flex;
26+
gap: 0.1rem;
27+
align-items: center;
28+
}
29+
30+
.chip-message {
31+
&.bold {
32+
font-weight: bold;
33+
}
34+
35+
&.italic {
36+
font-style: italic;
37+
}
38+
39+
&.lowercase {
40+
text-transform: lowercase;
41+
}
42+
43+
&.uppercase {
44+
text-transform: uppercase;
45+
}
46+
47+
&.overline {
48+
text-decoration: overline;
49+
}
50+
51+
&.striketrough {
52+
text-decoration: line-through;
53+
}
54+
55+
&.underline {
56+
text-decoration: underline;
57+
}
58+
}
59+
}

0 commit comments

Comments
 (0)