vcc-ui
Version:
VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.
213 lines (190 loc) • 13.9 kB
JavaScript
import React from "react";
import { createComponentWithProxy } from "react-fela";
import PropTypes from "prop-types";
import { Block } from "../block";
const svgStyles = ({ color }) => ({
fill: color,
stroke: color,
height: "100%",
width: "100%",
left: 0,
top: 0,
position: "absolute"
});
const Svg = createComponentWithProxy(svgStyles, "svg");
/* DISCLAIMER
*
* For anyone looking at this and going: WHY????
* The reason: IE11
* http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/
*
* Feel free to simplify and refactor this once we drop IE11 support
*
*/
function SvgIcon({ children, size, type, title = type, viewBox, ...props }) {
return (
<Block
extend={{
display: "inline-block",
height: sizes[size],
position: "relative",
userSelect: "None"
}}
>
<Block
as="canvas"
extend={{ display: "block", height: "100%", visibility: "hidden" }}
height={viewBox.split(" ")[3]}
width={viewBox.split(" ")[2]}
/>
<Svg viewBox={viewBox} {...props}>
<title>{title}</title>
{children}
</Svg>
</Block>
);
}
const AccountIcon = props => (
<SvgIcon {...props} viewBox="0 0 88.99 88.99">
<path d="m44.5 6a38.5 38.5 0 1 1 -38.5 38.5 38.54 38.54 0 0 1 38.5-38.5m0-6a44.5 44.5 0 1 0 44.5 44.5 44.5 44.5 0 0 0 -44.5-44.5z" />
<path
d="m14.83 75v-1.8a14.83 14.83 0 0 1 14.83-14.8h29.67a14.83 14.83 0 0 1 14.83 14.83v1.47"
fill="none"
strokeMiterlimit="10"
strokeWidth="6"
/>
<path d="m44.5 24.07a10.35 10.35 0 1 1 -10.35 10.34 10.35 10.35 0 0 1 10.35-10.34m0-6a16.35 16.35 0 1 0 16.34 16.34 16.35 16.35 0 0 0 -16.34-16.34z" />
</SvgIcon>
);
const EmailIcon = props => (
<SvgIcon {...props} viewBox="0 0 22 14">
<g>
<polygon points="5.967 6.858 0 0.89 0 12.825 5.967 6.858" />
<polygon points="21.173 0 0.889 0 11.031 10.142 21.173 0" />
<polygon points="15.238 7.901 11.046 12.032 11.044 12 11.029 12 6.803 7.91 0.849 14 21.172 14 15.238 7.901" />
<polygon points="15.994 6.878 22 12.885 22 0.872 15.994 6.878" />
</g>
</SvgIcon>
);
const SearchIcon = props => (
<SvgIcon {...props} viewBox="0 0 169.68 170.86">
<path d="M71.64 14A57.64 57.64 0 1 1 14 71.64 57.71 57.71 0 0 1 71.64 14m0-14a71.64 71.64 0 1 0 71.64 71.64A71.64 71.64 0 0 0 71.64 0z" />
<path
strokeMiterlimit="10"
strokeWidth="14px"
d="M118.92 120.7l45.85 45.17"
/>
</SvgIcon>
);
const FacebookIcon = props => (
<SvgIcon {...props} viewBox="0 0 90.33 90.33">
<path d="m85.35 0h-80.35a5 5 0 0 0 -5 5v80.35a5 5 0 0 0 5 5h43.25v-35h-11.77v-13.63h11.77v-10.06c0-11.66 7.13-18 17.53-18a95.19 95.19 0 0 1 10.52.54v12.17h-7.21c-5.67 0-6.76 2.69-6.76 6.63v8.71h13.5l-1.76 13.64h-11.74v35h23a5 5 0 0 0 5-5v-80.35a5 5 0 0 0 -4.98-5z" />
</SvgIcon>
);
const TwitterIcon = props => (
<SvgIcon {...props} viewBox="0 0 90.33 90.33">
<path d="m79 0h-67.71a11.3 11.3 0 0 0 -11.29 11.29v67.71a11.29 11.29 0 0 0 11.29 11.33h67.71a11.28 11.28 0 0 0 11.33-11.33v-67.71a11.29 11.29 0 0 0 -11.33-11.29zm-11.38 33.65q0 .75 0 1.5c0 15.31-11.65 33-33 33a32.81 32.81 0 0 1 -17.75-5.2 25.1 25.1 0 0 0 2.76.16 23.3 23.3 0 0 0 14.39-5 11.61 11.61 0 0 1 -10.82-8 11.09 11.09 0 0 0 2.17.21 11.47 11.47 0 0 0 3.06-.41 11.59 11.59 0 0 1 -9.3-11.35.76.76 0 0 1 0-.15 11.47 11.47 0 0 0 5.24 1.45 11.59 11.59 0 0 1 -3.58-15.46 32.93 32.93 0 0 0 23.87 12.1 11.59 11.59 0 0 1 19.82-10.62 23.17 23.17 0 0 0 7.36-2.81 11.59 11.59 0 0 1 -5.1 6.41 23.2 23.2 0 0 0 6.66-1.82 23.68 23.68 0 0 1 -5.78 5.99z" />
</SvgIcon>
);
const YoutubeIcon = props => (
<SvgIcon {...props} viewBox="0 0 129.55 91.27">
<path d="m126.84 14.25a16.28 16.28 0 0 0 -11.45-11.53c-10.1-2.72-50.61-2.72-50.61-2.72s-40.52 0-50.62 2.72a16.28 16.28 0 0 0 -11.45 11.53c-2.71 10.17-2.71 31.39-2.71 31.39s0 21.21 2.71 31.36a16.28 16.28 0 0 0 11.45 11.55c10.1 2.72 50.62 2.72 50.62 2.72s40.51 0 50.61-2.72a16.28 16.28 0 0 0 11.45-11.55c2.71-10.17 2.71-31.38 2.71-31.38s0-21.2-2.71-31.37zm-75.31 50.65v-38.53l33.86 19.27z" />
</SvgIcon>
);
const InstagramIcon = props => (
<SvgIcon {...props} viewBox="0 0 90.33 90.33">
<g>
<path d="m45.17 8.14c12.06 0 13.49 0 18.25.26a24.86 24.86 0 0 1 8.38 1.6 13.9 13.9 0 0 1 5.2 3.34 14 14 0 0 1 3.38 5.19 24.94 24.94 0 0 1 1.55 8.39c.22 4.76.27 6.19.27 18.25s0 13.49-.27 18.25a24.93 24.93 0 0 1 -1.55 8.38 14.94 14.94 0 0 1 -8.58 8.58 24.93 24.93 0 0 1 -8.38 1.55c-4.76.22-6.19.27-18.25.27s-13.49 0-18.25-.27a24.94 24.94 0 0 1 -8.39-1.55 14 14 0 0 1 -5.19-3.38 13.9 13.9 0 0 1 -3.34-5.2 24.86 24.86 0 0 1 -1.6-8.38c-.22-4.76-.26-6.19-.26-18.25s0-13.49.26-18.25a24.87 24.87 0 0 1 1.6-8.39 13.86 13.86 0 0 1 3.38-5.19 13.86 13.86 0 0 1 5.15-3.34 24.87 24.87 0 0 1 8.39-1.6c4.76-.22 6.19-.26 18.25-.26m0-8.14c-12.27 0-13.81.05-18.63.27a33.08 33.08 0 0 0 -11 2.1 22.22 22.22 0 0 0 -8 5.21 22.22 22.22 0 0 0 -5.21 8 33.08 33.08 0 0 0 -2.1 11c-.18 4.78-.23 6.32-.23 18.59s.05 13.83.27 18.62a33 33 0 0 0 2.1 11 23.1 23.1 0 0 0 13.21 13.21 33.08 33.08 0 0 0 11 2.1c4.82.22 6.36.27 18.63.27s13.8 0 18.62-.27a33 33 0 0 0 11-2.1 23.1 23.1 0 0 0 13.17-13.25 33 33 0 0 0 2.1-11c.22-4.82.27-6.36.27-18.62s0-13.81-.27-18.63a33.08 33.08 0 0 0 -2.1-11 23.1 23.1 0 0 0 -13.25-13.13 33 33 0 0 0 -11-2.1c-4.75-.22-6.32-.27-18.58-.27z" />
<path d="m45.17 22a23.2 23.2 0 1 0 23.19 23.2 23.2 23.2 0 0 0 -23.19-23.2zm0 38.25a15.06 15.06 0 1 1 15-15 15.05 15.05 0 0 1 -15 14.97z" />
<circle cx="69.28" cy="21.06" r="5.42" />
</g>
</SvgIcon>
);
const LinkedinIcon = props => (
<SvgIcon {...props} viewBox="0 0 105.36 89.73">
<g>
<path d="m83.09 0h-76.47a6.55 6.55 0 0 0 -6.62 6.47v76.79a6.55 6.55 0 0 0 6.62 6.47h76.47a6.56 6.56 0 0 0 6.64-6.47v-76.79a6.56 6.56 0 0 0 -6.64-6.47zm-56.47 76.46h-13.32v-42.82h13.32zm-6.62-48.67a7.72 7.72 0 1 1 7.71-7.72 7.72 7.72 0 0 1 -7.71 7.72zm56.5 48.67h-13.34v-20.82c0-5-.09-11.36-6.92-11.36s-8 5.42-8 11v21.18h-13.24v-42.82h12.72v5.85h.19c1.77-3.36 6.11-6.91 12.59-6.91 13.47 0 16 8.86 16 20.4z" />
</g>
</SvgIcon>
);
const GlobeIcon = props => (
<SvgIcon {...props} viewBox="0 0 172.24 172.24">
<path d="m86.12 6a80.12 80.12 0 1 1 -80.12 80.12 80.21 80.21 0 0 1 80.12-80.12m0-6a86.12 86.12 0 1 0 86.12 86.12 86.12 86.12 0 0 0 -86.12-86.12z" />
<path d="m86.12 6c14.81 0 31.32 32.9 31.32 80.12s-16.51 80.12-31.32 80.12-31.32-32.91-31.32-80.12 16.51-80.12 31.32-80.12m0-6c-20.61 0-37.32 38.56-37.32 86.12s16.71 86.12 37.32 86.12 37.32-38.56 37.32-86.12-16.71-86.12-37.32-86.12z" />
<g fill="none">
<path
d="m169.13 76.32c-10.65 15.16-43.82 26.21-83.08 26.21-39.11 0-72.17-11-83-26"
strokeWidth="6"
/>
<path
d="m156.54 42.19c-9.11 9.85-36.94 17-69.86 17-34.16 0-62.84-7.72-70.8-18.15"
strokeWidth="6"
/>
<path
d="m132.47 15.25c-9.71 6.75-26.77 11.16-46.21 11.16-19.61 0-36.81-4.53-46.47-11.34"
strokeWidth="6"
/>
<path
d="m162.86 118c-12.44 12-39.5 22.27-75.31 22.27-39 0-72.25-12.41-80.71-29.07"
strokeWidth="6"
/>
</g>
</SvgIcon>
);
const PinterestIcon = props => (
<SvgIcon {...props} viewBox="-1 -1 27 27">
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" />
</SvgIcon>
);
const YoukuIcon = props => (
<SvgIcon {...props} viewBox="0 0 361.494 118.599">
<path d="M75.354 1.526C64.638-2.244 60.998 3.38 58.745 8.689L40.612 51.664 23.331 8.528c-2.847-5.823-7.593-9.903-16.465-6.927C-2.762 4.827.375 14.691.919 16.545l27.109 62.087-10.645 23.265c-1.414 3.115-3.967 11.787 5.535 15.5 9.516 3.699 13.867-1.742 16.973-8.088L81.289 16.47s5.127-11.025-5.935-14.944zM112.799 8.022c-20.906 0-37.856 16.607-37.856 37.113 0 20.513 14.521 37.141 37.856 37.141 25.097 0 37.844-16.628 37.844-37.141-.001-20.505-16.955-37.113-37.844-37.113zm0 57.514c-9.339 0-16.882-8.867-16.882-19.797 0-10.939 7.543-19.786 16.882-19.786 9.308 0 16.867 8.847 16.867 19.786.001 10.929-7.56 19.797-16.867 19.797zM210.282 10.105c-6.474.419-9.773 4.205-10.209 11.224l-.018 34.455c-.363 7.344-5.277 12.367-13.474 12.584-12.148.286-13.795-8.382-13.775-11.483l.013-34.556c-.272-6.909-3.445-10.39-9.696-10.665-6.714.488-10.264 4.354-10.703 11.349l-.036 34.348c.128 4.312-.524 26.493 34.146 25.999 19.492-.25 33.165-10.663 34.09-28.215l.072-34.578c-.31-6.923-3.737-10.318-10.41-10.462zM350.631 10.649c-6.474.218-9.99 3.955-10.265 10.879v34.396c-.381 7.276-6.093 12.004-13.562 12.004-7.87 0-13.219-4.747-13.601-12.004l-.055-34.396c-.381-6.924-3.572-10.68-9.919-10.918-7.035 0-10.264 4.03-10.626 10.937v34.414c.744 17.303 12.077 26.401 34.127 26.75 22.194-.349 33.328-9.415 34.289-26.787V21.529c-.379-6.925-3.897-10.644-10.388-10.88z" />
<path d="M267.962 45.68l18.296-15.935s9.066-8.615 1.125-16.159c-5.82-5.564-13.236-2.377-15.921.093l-26.729 25.237-.127-18.274c-.182-6.151-3.646-10.082-10.825-10.082-7.38 0-10.427 3.699-10.789 10.064v52.44c.381 6.129 4.062 9.102 10.826 9.102 7.054.014 10.589-3.213 10.879-9.07l.019-19.494s28.179 23.832 29.721 25.133c4.551 3.74 11.984 3.341 15.703-.236 3.917-3.749 2.99-11.474-1.74-15.481L267.962 45.68z" />
</SvgIcon>
);
const WechatIcon = props => (
<SvgIcon {...props} viewBox="-1 -1 27 27">
<path d="M23.541 12.748c-.609-1.38-1.758-2.476-3.092-3.151-2.354-1.192-5.281-1.185-7.629.03-1.631.837-2.993 2.337-3.379 4.162-.318 1.344-.033 2.791.68 3.961 1.061 1.762 2.979 2.887 4.971 3.248 1.443.293 2.936.119 4.338-.285.842.326 1.592.854 2.408 1.246a52.471 52.471 0 0 0-.676-2.102c.916-.65 1.746-1.461 2.244-2.479.744-1.415.789-3.171.135-4.63zm-9.924-9.466c-2.495-1.404-5.602-1.615-8.286-.645-1.764.635-3.36 1.815-4.346 3.42-.895 1.45-1.23 3.258-.799 4.917.433 1.84 1.711 3.383 3.262 4.413-.3.85-.585 1.699-.855 2.555.975-.51 1.95-1.043 2.926-1.561 1.17.375 2.415.559 3.66.518a6.159 6.159 0 0 1-.255-2.951c.225-1.371.975-2.625 1.994-3.554 1.726-1.615 4.171-2.296 6.496-2.131-.436-2.135-1.936-3.939-3.824-4.98h.027zm1.733 9.989c-.209.652-1.156.848-1.615.352-.506-.459-.309-1.418.355-1.623.734-.31 1.582.537 1.26 1.271zm4.795.092c-.256.586-1.141.723-1.576.27-.209-.191-.27-.479-.344-.73.104-.458.42-.933.93-.955.705-.098 1.336.773.975 1.416h.015zM12.99 6.909c.008.961-1.275 1.561-1.995.909-.747-.535-.535-1.837.342-2.106.785-.315 1.713.344 1.651 1.185l.002.012zm-6.059.244c-.172.835-1.291 1.238-1.946.678-.759-.535-.546-1.861.345-2.131.873-.336 1.865.55 1.601 1.453z" />
</SvgIcon>
);
const VkontakteIcon = props => (
<SvgIcon {...props} viewBox="0 0 251.2 143.3">
<path d="M239.8 142.7l-33.6.4s-7.2 1.5-16.7-5.1c-12.5-8.5-24.4-30.9-33.6-28-9.3 2.9-9 23.1-9 23.1 0 .2 0 2.9-2.1 5.2-2.3 2.5-6.8 1.5-6.8 1.5h-15s-33.1 3.4-62.3-27C28.8 79.8.7 14.7.7 14.7s-1.6-3.9.2-6c2-2.3 7.4-2.3 7.4-2.3l35.9-.1s3.3.6 5.8 2.4c2 1.5 3.1 4.2 3.1 4.2s5.8 14.7 13.5 28c15 25.9 22 31.6 27 28.8C101 65.5 98.7 33 98.7 33s.2-11.8-3.7-17.1c-3-4.1-8.7-5.3-11.2-5.6-2-.2 1.3-5 5.6-7.1C95.8.1 107.3-.1 120.7 0c10.5.1 13.5.8 17.6 1.7 12.4 3 8.1 14.5 8.1 42.2 0 8.9-1.6 21.3 4.8 25.5 2.7 1.8 9.5.3 26.3-28.3 8-13.6 13.9-29.5 13.9-29.5s1.3-2.9 3.3-4.1c2.1-1.2 4.9-.8 4.9-.8l37.8-.2s11.4-1.4 13.2 3.8c2 5.4-4.2 17.9-19.7 38.5C205.8 82.6 203 79.5 224 99c20.1 18.7 24.3 27.7 25 28.8 8.3 13.8-9.2 14.9-9.2 14.9z" />
</SvgIcon>
);
const WeiboIcon = props => (
<SvgIcon {...props} viewBox="-1 -1 27 27">
<path d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.737 5.439l-.002.004zM9.05 17.219c-.384.616-1.208.884-1.829.602-.612-.279-.793-.991-.406-1.593.379-.595 1.176-.861 1.793-.601.622.263.82.972.442 1.592zm1.27-1.627c-.141.237-.449.353-.689.253-.236-.09-.313-.361-.177-.586.138-.227.436-.346.672-.24.239.09.315.36.18.601l.014-.028zm.176-2.719c-1.893-.493-4.033.45-4.857 2.118-.836 1.704-.026 3.591 1.886 4.21 1.983.64 4.318-.341 5.132-2.179.8-1.793-.201-3.642-2.161-4.149zm7.563-1.224c-.346-.105-.57-.18-.405-.615.375-.977.42-1.804 0-2.404-.781-1.112-2.915-1.053-5.364-.03 0 0-.766.331-.571-.271.376-1.217.315-2.224-.27-2.809-1.338-1.337-4.869.045-7.888 3.08C1.309 10.87 0 13.273 0 15.348c0 3.981 5.099 6.395 10.086 6.395 6.536 0 10.888-3.801 10.888-6.82 0-1.822-1.547-2.854-2.915-3.284v.01zm1.908-5.092c-.766-.856-1.908-1.187-2.96-.962-.436.09-.706.511-.616.932.09.42.511.691.932.602.511-.105 1.067.044 1.442.465.376.421.466.977.316 1.473-.136.406.089.856.51.992.405.119.857-.105.992-.512.33-1.021.12-2.178-.646-3.035l.03.045zm2.418-2.195c-1.576-1.757-3.905-2.419-6.054-1.968-.496.104-.812.587-.706 1.081.104.496.586.813 1.082.707 1.532-.331 3.185.15 4.296 1.383 1.112 1.246 1.429 2.943.947 4.416-.165.48.106 1.007.586 1.157.479.165.991-.104 1.157-.586.675-2.088.241-4.478-1.338-6.235l.03.045z" />
</SvgIcon>
);
const icons = {
account: AccountIcon,
email: EmailIcon,
search: SearchIcon,
facebook: FacebookIcon,
twitter: TwitterIcon,
youtube: YoutubeIcon,
instagram: InstagramIcon,
linkedin: LinkedinIcon,
globe: GlobeIcon,
pinterest: PinterestIcon,
youku: YoukuIcon,
wechat: WechatIcon,
vkontakte: VkontakteIcon,
weibo: WeiboIcon
};
export function Icon(props) {
const IconComponent = icons[props.type];
return IconComponent ? <IconComponent {...props} /> : null;
}
const sizes = {
s: "12px",
m: "18px",
l: "32px"
};
const propTypes = {
type: PropTypes.oneOf(Object.keys(icons)),
title: PropTypes.string,
size: PropTypes.oneOf(Object.keys(sizes))
};
Icon.propTypes = propTypes;