116 lines
2.8 KiB
JavaScript
116 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import remcalc from 'remcalc';
|
|
|
|
import Colors from './colors';
|
|
|
|
export const Tick = props => (
|
|
<svg
|
|
width="9"
|
|
height="9"
|
|
viewBox="0 0 9 9"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
export const Completed = props => (
|
|
<Colors white secondary greenDark>
|
|
{({ white, secondary, greenDark }) => (
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<path
|
|
fill={greenDark}
|
|
fill-rule="evenodd"
|
|
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
fill={white}
|
|
d="M12.017 5l-3.896 5.336-1.487-2.109L5 9.379l3.091 4.389 5.541-7.589L12.017 5z"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</Colors>
|
|
);
|
|
|
|
export const PartCompleted = props => (
|
|
<Colors white secondary greenDark>
|
|
{({ white, secondary, greenDark }) => (
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
style={{ padding: '1px' }}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<path
|
|
fill={white}
|
|
fillRule="evenodd"
|
|
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
|
|
/>
|
|
<path
|
|
fill={greenDark}
|
|
d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
|
|
/>
|
|
<path
|
|
fill={secondary}
|
|
fillRule="evenodd"
|
|
d="M12.316 5l-4.062 5.477-1.55-2.165L5 9.495 8.223 14 14 6.21 12.316 5z"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</Colors>
|
|
);
|
|
|
|
export const Incomplete = props => (
|
|
<Colors white secondary>
|
|
{({ white, secondary }) => (
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
style={{ padding: remcalc(1) }}
|
|
{...props}
|
|
>
|
|
<path
|
|
fill={white}
|
|
fillRule="evenodd"
|
|
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
|
|
/>
|
|
<path
|
|
fill={secondary}
|
|
d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</Colors>
|
|
);
|
|
|
|
export default ({ fill, checked, border, ...rest }) => {
|
|
if (fill && checked) {
|
|
return <Completed {...rest} />;
|
|
}
|
|
|
|
if (checked && border) {
|
|
return <PartCompleted {...rest} />;
|
|
}
|
|
|
|
if (checked) {
|
|
return <Tick {...rest} />;
|
|
}
|
|
|
|
return <Incomplete {...rest} />;
|
|
};
|