Skip to content

Commit dcb617c

Browse files
dogmardogmar
authored
feat: Light mode icon updates (#558)
1 parent 9481c04 commit dcb617c

File tree

6 files changed

+710
-686
lines changed

6 files changed

+710
-686
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,11 @@
5454
"moment": "2.29.4",
5555
"prop-types": "15.8.1",
5656
"react-animate-height": "3.2.3",
57-
"react-aria": "3.30.0",
57+
"react-aria": "3.31.0",
5858
"react-embed": "3.7.0",
5959
"react-markdown": "9.0.1",
6060
"react-merge-refs": "2.1.1",
61-
"react-stately": "3.28.0",
61+
"react-stately": "3.29.0",
6262
"react-use-measure": "2.1.1",
6363
"rehype-raw": "7.0.0",
6464
"resize-observer-polyfill": "1.5.1",

‎src/components/icons/AmazonLogoIcon.tsx

+37-26
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,47 @@
1+
import { useTheme } from 'styled-components'
2+
13
import createIcon from './createIcon'
24

3-
export default createIcon(({ size, color, fullColor }) => (
4-
<svg
5-
width={size}
6-
viewBox="0 0 16 16"
7-
xmlns="http://www.w3.org/2000/svg"
8-
>
9-
<g
10-
fill="none"
11-
fillRule="evenodd"
12-
transform="matrix(.06275371 0 0 .06275371 -.048564 -.027486)"
5+
export default createIcon(({ size, color, fullColor }) => {
6+
const theme = useTheme()
7+
const neutralColor = fullColor
8+
? theme.mode === 'light'
9+
? '#232f3e'
10+
: '#fff'
11+
: color
12+
13+
return (
14+
<svg
15+
width={size}
16+
viewBox="0 0 16 16"
17+
xmlns="http://www.w3.org/2000/svg"
1318
>
14-
<path
15-
d="m221.56504 210.324c-105.235 50.083-170.544999 8.18-212.3519988-17.271-2.587-1.604-6.984.375-3.169 4.757 13.9279998 16.888 59.5729998 57.593 119.1529988 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z"
16-
fill={fullColor ? '#f90' : color}
17-
fillRule="nonzero"
18-
/>
19-
<path
20-
d="m150.80604 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.369999 0-50.477999-17.506-50.477999-52.565 0-27.373 14.85-46.018 35.96-55.126 18.312999-8.066 43.883999-9.489 63.429999-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.798999 6.026-5.834999 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.359999-51.616 75.429999-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095"
21-
fill={fullColor ? '#fff' : color}
22-
/>
23-
<g transform="translate(.062041)">
19+
<g
20+
fill="none"
21+
fillRule="evenodd"
22+
transform="matrix(.06275371 0 0 .06275371 -.048564 -.027486)"
23+
>
2424
<path
25-
d="m221.503 210.324c-105.235 50.083-170.545 8.18-212.352-17.271-2.587-1.604-6.984.375-3.169 4.757 13.928 16.888 59.573 57.593 119.153 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z"
25+
d="m221.56504 210.324c-105.235 50.083-170.544999 8.18-212.3519988-17.271-2.587-1.604-6.984.375-3.169 4.757 13.9279998 16.888 59.5729998 57.593 119.1529988 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z"
2626
fill={fullColor ? '#f90' : color}
2727
fillRule="nonzero"
2828
/>
2929
<path
30-
d="m150.744 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.37 0-50.478-17.506-50.478-52.565 0-27.373 14.85-46.018 35.96-55.126 18.313-8.066 43.884-9.489 63.43-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.799 6.026-5.835 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.36-51.616 75.43-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095"
31-
fill={fullColor ? '#fff' : color}
30+
d="m150.80604 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.369999 0-50.477999-17.506-50.477999-52.565 0-27.373 14.85-46.018 35.96-55.126 18.312999-8.066 43.883999-9.489 63.429999-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.798999 6.026-5.834999 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.359999-51.616 75.429999-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095"
31+
fill={neutralColor}
3232
/>
33+
<g transform="translate(.062041)">
34+
<path
35+
d="m221.503 210.324c-105.235 50.083-170.545 8.18-212.352-17.271-2.587-1.604-6.984.375-3.169 4.757 13.928 16.888 59.573 57.593 119.153 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z"
36+
fill={fullColor ? '#f90' : color}
37+
fillRule="nonzero"
38+
/>
39+
<path
40+
d="m150.744 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.37 0-50.478-17.506-50.478-52.565 0-27.373 14.85-46.018 35.96-55.126 18.313-8.066 43.884-9.489 63.43-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.799 6.026-5.835 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.36-51.616 75.43-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095"
41+
fill={neutralColor}
42+
/>
43+
</g>
3344
</g>
34-
</g>
35-
</svg>
36-
))
45+
</svg>
46+
)
47+
})

‎src/components/icons/AwsLogoIcon.tsx

+33-22
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,36 @@
1+
import { useTheme } from 'styled-components'
2+
13
import createIcon from './createIcon'
24

3-
export default createIcon(({ size, color, fullColor }) => (
4-
<svg
5-
width={size}
6-
viewBox="0 0 16 16"
7-
xmlns="http://www.w3.org/2000/svg"
8-
>
9-
<g transform="matrix(.05321432 0 0 .05321468 3.981399 6.278019)">
10-
<path
11-
d="m11.013826 21.418667c.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3l-6.3 4.2c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2s-7.4-11.2-7.4-19.2c0-8.5 3-15.4 9.1-20.6s14.2-7.8 24.5-7.8c3.4 0 6.9.3 10.6.8s7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3s-7.3 2-10.8 3.4c-1.6.7-2.8 1.1-3.5 1.3s-1.2.3-1.6.3c-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5s1.4-1.4 2.8-2.1c3.5-1.8 7.7-3.3 12.6-4.5 4.9-1.3 10.1-1.9 15.6-1.9 11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6l-.00021 32.4c.00021 3.7.60021 6.7 1.30021 8.9zm-41.7 6.3c3.3 0 6.7-.6 10.3-1.8s6.8-3.4 9.5-6.4c1.6-1.9 2.8-4 3.4-6.4s1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.7s-6.3-.6-9.4-.6c-6.7 0-11.6 1.3-14.9 4s-4.9 6.5-4.9 11.5c0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7zm80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9l-23.5-77.3c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9l16.8 66.2 15.6-66.2c.5-2 1.1-3.3 1.9-3.9s2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.800004 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6s-.3 1.4-.7 2.5l-24.1 77.3c-.6 2-1.3 3.3-2.1 3.9s-2.1 1-3.8 1h-8.6c-1.900004 0-3.200004-.3-4.000004-1s-1.5-2-1.9-4l-15.5-64.5-15.4 64.4c-.5 2-1.1 3.3-1.9 4s-2.2 1-4 1zm128.500004 2.7c-5.2 0-10.4-.6-15.4-1.8s-8.9-2.5-11.5-4c-1.6-.9-2.7-1.9-3.1-2.8s-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1.6 0 1.2.1 1.8.3s1.5.6 2.5 1c3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3s5.2-5.4 5.2-9.5c0-2.8-.9-5.1-2.7-7s-5.2-3.6-10.1-5.2l-14.5-4.5c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5 0-4.2.9-7.9 2.7-11.1s4.2-6 7.2-8.2c3-2.3 6.4-4 10.4-5.2s8.2-1.7 12.6-1.7c2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6s3.2 1.2 4.2 1.8c1.4.8 2.4 1.6 3 2.5.6.8.9 1.9.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2-5.7-2.6-12.1-3.9-19.2-3.9-5.7 0-10.2.9-13.3 2.8s-4.7 4.8-4.7 8.9c0 2.8 1 5.2 3 7.1s5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6s4.6 8.8 4.6 14c0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1z"
12-
fill={fullColor ? '#fff' : color}
13-
/>
14-
<g
15-
clipRule="evenodd"
16-
fill={fullColor ? '#f90' : color}
17-
fillRule="evenodd"
18-
transform="translate(-76.486174 -53.881333)"
19-
>
20-
<path d="m273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6z" />
21-
<path d="m287.2 128.1c-4.2-5.4-27.8-2.6-38.5-1.3-3.2.4-3.7-2.4-.8-4.5 18.8-13.2 49.7-9.4 53.3-5 3.6 4.5-1 35.4-18.6 50.2-2.7 2.3-5.3 1.1-4.1-1.9 4-9.9 12.9-32.2 8.7-37.5z" />
5+
export default createIcon(({ size, color, fullColor }) => {
6+
const theme = useTheme()
7+
const neutralColor = fullColor
8+
? theme.mode === 'light'
9+
? '#232f3e'
10+
: '#fff'
11+
: color
12+
13+
return (
14+
<svg
15+
width={size}
16+
viewBox="0 0 16 16"
17+
xmlns="http://www.w3.org/2000/svg"
18+
>
19+
<g transform="matrix(.05321432 0 0 .05321468 3.981399 6.278019)">
20+
<path
21+
d="m11.013826 21.418667c.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3l-6.3 4.2c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2s-7.4-11.2-7.4-19.2c0-8.5 3-15.4 9.1-20.6s14.2-7.8 24.5-7.8c3.4 0 6.9.3 10.6.8s7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3s-7.3 2-10.8 3.4c-1.6.7-2.8 1.1-3.5 1.3s-1.2.3-1.6.3c-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5s1.4-1.4 2.8-2.1c3.5-1.8 7.7-3.3 12.6-4.5 4.9-1.3 10.1-1.9 15.6-1.9 11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6l-.00021 32.4c.00021 3.7.60021 6.7 1.30021 8.9zm-41.7 6.3c3.3 0 6.7-.6 10.3-1.8s6.8-3.4 9.5-6.4c1.6-1.9 2.8-4 3.4-6.4s1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.7s-6.3-.6-9.4-.6c-6.7 0-11.6 1.3-14.9 4s-4.9 6.5-4.9 11.5c0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7zm80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9l-23.5-77.3c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9l16.8 66.2 15.6-66.2c.5-2 1.1-3.3 1.9-3.9s2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.800004 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6s-.3 1.4-.7 2.5l-24.1 77.3c-.6 2-1.3 3.3-2.1 3.9s-2.1 1-3.8 1h-8.6c-1.900004 0-3.200004-.3-4.000004-1s-1.5-2-1.9-4l-15.5-64.5-15.4 64.4c-.5 2-1.1 3.3-1.9 4s-2.2 1-4 1zm128.500004 2.7c-5.2 0-10.4-.6-15.4-1.8s-8.9-2.5-11.5-4c-1.6-.9-2.7-1.9-3.1-2.8s-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1.6 0 1.2.1 1.8.3s1.5.6 2.5 1c3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3s5.2-5.4 5.2-9.5c0-2.8-.9-5.1-2.7-7s-5.2-3.6-10.1-5.2l-14.5-4.5c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5 0-4.2.9-7.9 2.7-11.1s4.2-6 7.2-8.2c3-2.3 6.4-4 10.4-5.2s8.2-1.7 12.6-1.7c2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6s3.2 1.2 4.2 1.8c1.4.8 2.4 1.6 3 2.5.6.8.9 1.9.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2-5.7-2.6-12.1-3.9-19.2-3.9-5.7 0-10.2.9-13.3 2.8s-4.7 4.8-4.7 8.9c0 2.8 1 5.2 3 7.1s5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6s4.6 8.8 4.6 14c0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1z"
22+
fill={neutralColor}
23+
/>
24+
<g
25+
clipRule="evenodd"
26+
fill={fullColor ? '#f90' : color}
27+
fillRule="evenodd"
28+
transform="translate(-76.486174 -53.881333)"
29+
>
30+
<path d="m273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6z" />
31+
<path d="m287.2 128.1c-4.2-5.4-27.8-2.6-38.5-1.3-3.2.4-3.7-2.4-.8-4.5 18.8-13.2 49.7-9.4 53.3-5 3.6 4.5-1 35.4-18.6 50.2-2.7 2.3-5.3 1.1-4.1-1.9 4-9.9 12.9-32.2 8.7-37.5z" />
32+
</g>
2233
</g>
23-
</g>
24-
</svg>
25-
))
34+
</svg>
35+
)
36+
})

‎src/components/icons/SlackLogoIcon.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,25 @@
11
import createIcon from './createIcon'
22

3-
export default createIcon(({ size, color }) => (
3+
export default createIcon(({ size, color, fullColor }) => (
44
<svg
55
width={size}
66
viewBox="0 0 16 16"
77
fill="none"
88
xmlns="http://www.w3.org/2000/svg"
99
>
10-
<g fill={color}>
10+
<g fill={fullColor ? '#E01E5A' : color}>
1111
<path d="m3.36156 10.1107c0 .9251-.7557 1.6808-1.68078 1.6808-.925079 0-1.68078-.7557-1.68078-1.6808 0-.92507.755701-1.68077 1.68078-1.68077h1.68078z" />
1212
<path d="m4.2085 10.1107c0-.92507.7557-1.68077 1.68078-1.68077s1.68078.7557 1.68078 1.68077v4.2085c0 .9251-.7557 1.6808-1.68078 1.6808s-1.68078-.7557-1.68078-1.6808z" />
13+
</g>
14+
<g fill={fullColor ? '#44BEDF' : color}>
1315
<path d="m5.88928 3.36156c-.92508 0-1.68078-.7557-1.68078-1.68078 0-.925079.7557-1.68078 1.68078-1.68078s1.68078.755701 1.68078 1.68078v1.68078z" />
1416
<path d="m5.88925 4.2085c.92508 0 1.68078.7557 1.68078 1.68078s-.7557 1.68078-1.68078 1.68078h-4.20847c-.925079 0-1.68078-.7557-1.68078-1.68078s.755701-1.68078 1.68078-1.68078z" />
17+
</g>
18+
<g fill={fullColor ? '#2EB67D' : color}>
1519
<path d="m12.6387 5.88928c0-.92508.7557-1.68078 1.6808-1.68078.925 0 1.6807.7557 1.6807 1.68078s-.7557 1.68078-1.6807 1.68078h-1.6808z" />
1620
<path d="m11.7917 5.88925c0 .92508-.7557 1.68078-1.6807 1.68078-.92512 0-1.68082-.7557-1.68082-1.68078v-4.20847c0-.925079.7557-1.68078 1.68082-1.68078.925 0 1.6807.755701 1.6807 1.68078z" />
21+
</g>
22+
<g fill={fullColor ? '#ECB22E' : color}>
1723
<path d="m10.111 12.6384c.925 0 1.6807.7557 1.6807 1.6808s-.7557 1.6808-1.6807 1.6808c-.92512 0-1.68082-.7557-1.68082-1.6808v-1.6808z" />
1824
<path d="m10.111 11.7915c-.92512 0-1.68082-.7557-1.68082-1.6808 0-.92507.7557-1.68077 1.68082-1.68077h4.2084c.9251 0 1.6808.7557 1.6808 1.68077 0 .9251-.7557 1.6808-1.6808 1.6808z" />
1925
</g>

‎src/stories/Radio.stories.tsx

+1-27
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Button, Div } from 'honorable'
21
import { useState } from 'react'
32
import styled, { useTheme } from 'styled-components'
43

4+
import Button from '../components/Button'
55
import Radio from '../components/Radio'
66
import RadioGroup from '../components/RadioGroup'
77

@@ -34,7 +34,6 @@ const H1 = styled.h1(({ theme }) => ({
3434

3535
function Template(args: any) {
3636
const [selectedValueRG, setSelectedValueRG] = useState(undefined)
37-
const [selectedValueManual, setSelectedValueManual] = useState(undefined)
3837
const theme = useTheme()
3938

4039
return (
@@ -62,31 +61,6 @@ function Template(args: any) {
6261
>
6362
Reset
6463
</Button>
65-
66-
<H1>Manually Controlled</H1>
67-
<Div>
68-
{radios.map(({ value, label }) => (
69-
<Radio
70-
name="manually-controlled"
71-
value={value}
72-
checked={selectedValueManual === value}
73-
onChange={({ target: { checked } }: any) => {
74-
if (checked) setSelectedValueManual(value)
75-
}}
76-
{...args}
77-
>
78-
{label}
79-
</Radio>
80-
))}
81-
</Div>
82-
<Button
83-
marginTop={theme.spacing.medium}
84-
onClick={() => {
85-
setSelectedValueManual(null)
86-
}}
87-
>
88-
Reset
89-
</Button>
9064
</>
9165
)
9266
}

0 commit comments

Comments
 (0)