box-ui-elements-mlh
Version:
113 lines (108 loc) • 17.2 kB
Flow
// @flow
import * as React from 'react';
import AccessibleSVG from '../accessible-svg';
import { bdlBoxBlue } from '../../styles/variables';
import type { Icon } from '../flowTypes';
const SearchEmptyState = ({ className = '', color = bdlBoxBlue, height = 180, title, width = 180 }: Icon) => (
<AccessibleSVG
className={`search-empty-state ${className}`}
height={height}
title={title}
viewBox="0 0 150 150"
width={width}
>
<g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
<path
className="fill-color"
d="M65.5,6.1337822 L65.5,5.49178758 C65.5,5.2201808 65.7319336,5 66,5 C66.2761424,5 66.5,5.21505737 66.5,5.49047852 L66.5,6.1337822 C66.651814,6.22160185 66.7783981,6.348186 66.8662178,6.5 L67.5095215,6.5 C67.7804053,6.5 68,6.73193359 68,7 C68,7.27614237 67.7849426,7.5 67.5095215,7.5 L66.8662178,7.5 C66.7783981,7.651814 66.651814,7.77839815 66.5,7.8662178 L66.5,8.50952148 C66.5,8.78040529 66.2680664,9 66,9 C65.7238576,9 65.5,8.76897915 65.5,8.49525623 L65.5,7.8662178 C65.348186,7.77839815 65.2216019,7.651814 65.1337822,7.5 L64.4904785,7.5 C64.2195947,7.5 64,7.26806641 64,7 C64,6.72385763 64.2150574,6.5 64.4904785,6.5 L65.1337822,6.5 C65.2216019,6.348186 65.348186,6.22160185 65.5,6.1337822 Z M11,78.6337822 L11,77.9917876 C11,77.7201808 11.2319336,77.5 11.5,77.5 C11.7761424,77.5 12,77.7150574 12,77.9904785 L12,78.6337822 C12.151814,78.7216019 12.2783981,78.848186 12.3662178,79 L13.0095215,79 C13.2804053,79 13.5,79.2319336 13.5,79.5 C13.5,79.7761424 13.2849426,80 13.0095215,80 L12.3662178,80 C12.2783981,80.151814 12.151814,80.2783981 12,80.3662178 L12,81.0095215 C12,81.2804053 11.7680664,81.5 11.5,81.5 C11.2238576,81.5 11,81.2689791 11,80.9952562 L11,80.3662178 C10.848186,80.2783981 10.7216019,80.151814 10.6337822,80 L9.99047852,80 C9.71959471,80 9.5,79.7680664 9.5,79.5 C9.5,79.2238576 9.71505737,79 9.99047852,79 L10.6337822,79 C10.7216019,78.848186 10.848186,78.7216019 11,78.6337822 Z M142.5,81.6337822 L142.5,80.9917876 C142.5,80.7201808 142.731934,80.5 143,80.5 C143.276142,80.5 143.5,80.7150574 143.5,80.9904785 L143.5,81.6337822 C143.651814,81.7216019 143.778398,81.848186 143.866218,82 L144.509521,82 C144.780405,82 145,82.2319336 145,82.5 C145,82.7761424 144.784943,83 144.509521,83 L143.866218,83 C143.778398,83.151814 143.651814,83.2783981 143.5,83.3662178 L143.5,84.0095215 C143.5,84.2804053 143.268066,84.5 143,84.5 C142.723858,84.5 142.5,84.2689791 142.5,83.9952562 L142.5,83.3662178 C142.348186,83.2783981 142.221602,83.151814 142.133782,83 L141.490479,83 C141.219595,83 141,82.7680664 141,82.5 C141,82.2238576 141.215057,82 141.490479,82 L142.133782,82 C142.221602,81.848186 142.348186,81.7216019 142.5,81.6337822 Z M47,23.1337822 L47,22.4917876 C47,22.2201808 47.2319336,22 47.5,22 C47.7761424,22 48,22.2150574 48,22.4904785 L48,23.1337822 C48.151814,23.2216019 48.2783981,23.348186 48.3662178,23.5 L49.0095215,23.5 C49.2804053,23.5 49.5,23.7319336 49.5,24 C49.5,24.2761424 49.2849426,24.5 49.0095215,24.5 L48.3662178,24.5 C48.2783981,24.651814 48.151814,24.7783981 48,24.8662178 L48,25.5095215 C48,25.7804053 47.7680664,26 47.5,26 C47.2238576,26 47,25.7689791 47,25.4952562 L47,24.8662178 C46.848186,24.7783981 46.7216019,24.651814 46.6337822,24.5 L45.9904785,24.5 C45.7195947,24.5 45.5,24.2680664 45.5,24 C45.5,23.7238576 45.7150574,23.5 45.9904785,23.5 L46.6337822,23.5 C46.7216019,23.348186 46.848186,23.2216019 47,23.1337822 Z M92,24.6337822 L92,23.9917876 C92,23.7201808 92.2319336,23.5 92.5,23.5 C92.7761424,23.5 93,23.7150574 93,23.9904785 L93,24.6337822 C93.151814,24.7216019 93.2783981,24.848186 93.3662178,25 L94.0095215,25 C94.2804053,25 94.5,25.2319336 94.5,25.5 C94.5,25.7761424 94.2849426,26 94.0095215,26 L93.3662178,26 C93.2783981,26.151814 93.151814,26.2783981 93,26.3662178 L93,27.0095215 C93,27.2804053 92.7680664,27.5 92.5,27.5 C92.2238576,27.5 92,27.2689791 92,26.9952562 L92,26.3662178 C91.848186,26.2783981 91.7216019,26.151814 91.6337822,26 L90.9904785,26 C90.7195947,26 90.5,25.7680664 90.5,25.5 C90.5,25.2238576 90.7150574,25 90.9904785,25 L91.6337822,25 C91.7216019,24.848186 91.848186,24.7216019 92,24.6337822 Z M137,44.6337822 L137,43.9917876 C137,43.7201808 137.231934,43.5 137.5,43.5 C137.776142,43.5 138,43.7150574 138,43.9904785 L138,44.6337822 C138.151814,44.7216019 138.278398,44.848186 138.366218,45 L139.009521,45 C139.280405,45 139.5,45.2319336 139.5,45.5 C139.5,45.7761424 139.284943,46 139.009521,46 L138.366218,46 C138.278398,46.151814 138.151814,46.2783981 138,46.3662178 L138,47.0095215 C138,47.2804053 137.768066,47.5 137.5,47.5 C137.223858,47.5 137,47.2689791 137,46.9952562 L137,46.3662178 C136.848186,46.2783981 136.721602,46.151814 136.633782,46 L135.990479,46 C135.719595,46 135.5,45.7680664 135.5,45.5 C135.5,45.2238576 135.715057,45 135.990479,45 L136.633782,45 C136.721602,44.848186 136.848186,44.7216019 137,44.6337822 Z M26.4375,26.7086139 L26.4375,26.3073672 C26.4375,26.137613 26.5824585,26 26.75,26 C26.922589,26 27.0625,26.1344109 27.0625,26.3065491 L27.0625,26.7086139 C27.1573838,26.7635012 27.2364988,26.8426162 27.2913861,26.9375 L27.6934509,26.9375 C27.8627533,26.9375 28,27.0824585 28,27.25 C28,27.422589 27.8655891,27.5625 27.6934509,27.5625 L27.2913861,27.5625 C27.2364988,27.6573838 27.1573838,27.7364988 27.0625,27.7913861 L27.0625,28.1934509 C27.0625,28.3627533 26.9175415,28.5 26.75,28.5 C26.577411,28.5 26.4375,28.355612 26.4375,28.1974433 L26.4375,27.7913861 C26.3426162,27.7364988 26.2635012,27.6573838 26.2086139,27.5625 L25.8065491,27.5625 C25.6372467,27.5625 25.5,27.4175415 25.5,27.25 C25.5,27.077411 25.6344109,26.9375 25.8065491,26.9375 L26.2086139,26.9375 C26.2635012,26.8426162 26.3426162,26.7635012 26.4375,26.7086139 Z M5.9375,66.7086139 L5.9375,66.3073672 C5.9375,66.137613 6.0824585,66 6.25,66 C6.42258898,66 6.5625,66.1344109 6.5625,66.3065491 L6.5625,66.7086139 C6.65738375,66.7635012 6.73649884,66.8426162 6.79138613,66.9375 L7.19345093,66.9375 C7.36275331,66.9375 7.5,67.0824585 7.5,67.25 C7.5,67.422589 7.36558914,67.5625 7.19345093,67.5625 L6.79138613,67.5625 C6.73649884,67.6573838 6.65738375,67.7364988 6.5625,67.7913861 L6.5625,68.1934509 C6.5625,68.3627533 6.4175415,68.5 6.25,68.5 C6.07741102,68.5 5.9375,68.355612 5.9375,68.1974433 L5.9375,67.7913861 C5.84261625,67.7364988 5.76350116,67.6573838 5.70861387,67.5625 L5.30654907,67.5625 C5.13724669,67.5625 5,67.4175415 5,67.25 C5,67.077411 5.13441086,66.9375 5.30654907,66.9375 L5.70861387,66.9375 C5.76350116,66.8426162 5.84261625,66.7635012 5.9375,66.7086139 Z M128.4375,35.2086139 L128.4375,34.8073672 C128.4375,34.637613 128.582458,34.5 128.75,34.5 C128.922589,34.5 129.0625,34.6344109 129.0625,34.8065491 L129.0625,35.2086139 C129.157384,35.2635012 129.236499,35.3426162 129.291386,35.4375 L129.693451,35.4375 C129.862753,35.4375 130,35.5824585 130,35.75 C130,35.922589 129.865589,36.0625 129.693451,36.0625 L129.291386,36.0625 C129.236499,36.1573838 129.157384,36.2364988 129.0625,36.2913861 L129.0625,36.6934509 C129.0625,36.8627533 128.917542,37 128.75,37 C128.577411,37 128.4375,36.855612 128.4375,36.6974433 L128.4375,36.2913861 C128.342616,36.2364988 128.263501,36.1573838 128.208614,36.0625 L127.806549,36.0625 C127.637247,36.0625 127.5,35.9175415 127.5,35.75 C127.5,35.577411 127.634411,35.4375 127.806549,35.4375 L128.208614,35.4375 C128.263501,35.3426162 128.342616,35.2635012 128.4375,35.2086139 Z"
fill={color}
/>
<path
className="stroke-color fill-white"
d="M28.6960227,56.1349895 C28.6960227,55.1429691 29.4786923,54.1926774 30.4600887,54.0260004 C30.4600887,54.0260004 36.4804935,52.7556391 46.2317709,52.7556391 C57.3677087,52.7556391 66.0324375,54.0948818 66.0324375,54.0948818 C67.0148852,54.2295817 67.8113164,55.1487922 67.8113164,56.1438829 L67.8113164,104.101951 C67.8113164,105.098883 67.0004601,105.966124 66.0231367,106.037317 C66.0231367,106.037317 57.0783775,106.688942 48.2536696,107.331436 C39.4289616,107.97393 30.4312685,110.298757 30.4312685,110.298757 C29.4729187,110.530897 28.6960227,109.922074 28.6960227,108.922872 L28.6960227,56.1349895 Z M107.774385,56.1349895 C107.774385,55.1429691 106.991715,54.1926774 106.010319,54.0260004 C106.010319,54.0260004 99.9899138,52.7556391 90.2386364,52.7556391 C79.1026986,52.7556391 70.4379698,54.0948818 70.4379698,54.0948818 C69.4555221,54.2295817 68.6590909,55.1487922 68.6590909,56.1438829 L68.6590909,104.101951 C68.6590909,105.098883 69.4699472,105.966124 70.4472706,106.037317 C70.4472706,106.037317 79.3920298,106.688942 88.2167377,107.331436 C97.0414457,107.97393 106.039139,110.298757 106.039139,110.298757 C106.997489,110.530897 107.774385,109.922074 107.774385,108.922872 L107.774385,56.1349895 Z"
fill="#FFFFFF"
stroke={color}
strokeWidth="2"
/>
<path
className="stroke-color fill-white"
d="M24.5,55.5385148 C24.5,54.5437169 25.2937254,53.6358332 26.2842442,53.5154783 C26.2842442,53.5154783 36.328268,52.1541353 46.0795455,52.1541353 C57.2154833,52.1541353 65.880212,53.493378 65.880212,53.493378 C66.8626597,53.628078 67.6590909,54.5450678 67.6590909,55.5385148 L67.6590909,104.707319 C67.6590909,105.702117 66.854409,106.397236 65.873167,106.269834 C65.873167,106.269834 56.8693182,104.925421 46.0795455,104.925421 C35.2897727,104.925421 26.2723499,106.271548 26.2723499,106.271548 C25.2935081,106.402446 24.5,105.700766 24.5,104.707319 L24.5,55.5385148 Z M67.6590909,55.5385148 C67.6590909,54.5437169 68.4528163,53.6358332 69.4433351,53.5154783 C69.4433351,53.5154783 79.4873589,52.1541353 89.2386364,52.1541353 C100.374574,52.1541353 109.039303,53.493378 109.039303,53.493378 C110.021751,53.628078 110.818182,54.5450678 110.818182,55.5385148 L110.818182,104.707319 C110.818182,105.702117 110.0135,106.397236 109.032258,106.269834 C109.032258,106.269834 100.028409,104.925421 89.2386364,104.925421 C78.4488636,104.925421 69.4314408,106.271548 69.4314408,106.271548 C68.452599,106.402446 67.6590909,105.700766 67.6590909,104.707319 L67.6590909,55.5385148 Z"
fill="#FFFFFF"
stroke={color}
strokeWidth="2"
/>
<path
className="fill-color fill-opacity"
d="M75,145 C92.9492544,145 107.5,143.656854 107.5,142 C107.5,140.343146 92.9492544,139 75,139 C57.0507456,139 42.5,140.343146 42.5,142 C42.5,143.656854 57.0507456,145 75,145 Z M73.6534091,56.1363656 C73.6534091,55.1435852 74.4449488,54.4789956 75.4238059,54.652396 L80.3251831,55.5206542 L78.9752933,58.7180233 C78.5889267,59.633177 78.8348134,60.9519608 79.5331474,61.6725356 L85.4008667,67.7271331 L80.3251831,79.4305004 L85.4008667,90.8693423 L79.566026,96.600942 C78.8534067,97.3009522 78.8094216,98.4791911 79.4650655,99.2295031 L82.628255,102.849424 L75.4265498,104.11876 C74.4472712,104.291362 73.6534091,103.624162 73.6534091,102.633696 L73.6534091,56.1363656 Z"
fill={color}
fillOpacity="0.1"
/>
<path
className="stroke-color fill-white"
d="M67.6590909,55.5385148 C67.6590909,54.5437169 68.4398495,53.9274678 69.410837,54.1640018 L76.6339368,55.9235594 L74.2082646,59.7351425 C73.6771908,60.569646 73.8423899,61.7847372 74.579969,62.4515857 L81.0026388,68.2583499 L75.4517045,79.7540898 L81.0026388,89.9057851 L74.5014209,96.5802373 C73.8084414,97.2916823 73.8804366,98.3579493 74.6693627,98.9673234 L77.9459525,101.498192 L69.2777292,105.720178 C68.38378,106.155589 67.6590909,105.700766 67.6590909,104.707319 L67.6590909,55.5385148 Z"
fill="#FFFFFF"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
<path
className="fill-color"
d="M31.09375,74.8061271 C31.09375,74.2550262 31.5411152,73.8082707 32.0919037,73.8082707 L60.0955963,73.8082707 C60.6468614,73.8082707 61.09375,74.251184 61.09375,74.8061271 C61.09375,75.3572279 60.6463848,75.8039834 60.0955963,75.8039834 L32.0919037,75.8039834 C31.5406386,75.8039834 31.09375,75.3610701 31.09375,74.8061271 Z M31.09375,80.8082707 C31.09375,80.2571698 31.5411152,79.8104143 32.0919037,79.8104143 L60.0955963,79.8104143 C60.6468614,79.8104143 61.09375,80.2533276 61.09375,80.8082707 C61.09375,81.3593715 60.6463848,81.8061271 60.0955963,81.8061271 L32.0919037,81.8061271 C31.5406386,81.8061271 31.09375,81.3632137 31.09375,80.8082707 Z M31.09375,86.8104143 C31.09375,86.2593134 31.5386963,85.8125579 32.0871477,85.8125579 L48.1003523,85.8125579 C48.6489907,85.8125579 49.09375,86.2554713 49.09375,86.8104143 C49.09375,87.3615152 48.6488037,87.8082707 48.1003523,87.8082707 L32.0871477,87.8082707 C31.5385093,87.8082707 31.09375,87.3653573 31.09375,86.8104143 Z M51.49375,86.8104143 C51.49375,86.2593134 51.9447252,85.8125579 52.484528,85.8125579 L56.502972,85.8125579 C57.0501636,85.8125579 57.49375,86.2554713 57.49375,86.8104143 C57.49375,87.3615152 57.0427748,87.8082707 56.502972,87.8082707 L52.484528,87.8082707 C51.9373364,87.8082707 51.49375,87.3653573 51.49375,86.8104143 Z"
fill={color}
/>
<path
className="stroke-color"
d="M48.5273522,34.7647694 C48.5467621,34.7647694 49.5559827,34.7648311 53.5032935,34.7649543 M53.7433867,52.8098822 C48.8081991,52.8098822 47.3290151,52.8098822 47.3290151,52.8098822 C42.3630139,52.8098822 38.168735,50.5995078 38.168735,45.6153919"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
transform="translate(45.956061, 43.787326) rotate(90.000000) translate(-45.956061, -43.787326) "
/>
<path
className="stroke-color"
d="M29.9425084,54.2248865 C29.9425084,51.3495045 31.9455767,48.3164009 35.6069523,48.0574916 L58.2824081,48.0574916 C60.5998701,48.0574916 62.4785442,49.9473402 62.4785442,52.2680179 C62.4785442,54.5934274 60.5954995,56.4785442 58.2824081,56.4785442 L39.5648134,56.4785442"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
transform="translate(46.210526, 52.268018) rotate(90.000000) translate(-46.210526, -52.268018) "
/>
<rect
className="stroke-color fill-white"
fill="#FFFFFF"
height="8.42105263"
rx="1"
stroke={color}
strokeWidth="2"
transform="translate(116.761439, 60.552519) scale(-1, 1) rotate(45.000000) translate(-116.761439, -60.552519) "
width="4.79545455"
x="114.363712"
y="56.3419929"
/>
<path
className="stroke-color fill-white"
d="M123.539164,61.3515768 C123.147424,60.9598368 122.510815,60.9613104 122.125838,61.3462876 L117.599803,65.8723224 C117.210984,66.2611412 117.214326,66.8948826 117.605092,67.285649 L128.095643,77.7762001 C128.487383,78.16794 129.123992,78.1664665 129.50897,77.7814893 L134.035004,73.2554545 C134.423823,72.8666357 134.420482,72.2328943 134.029715,71.8421279 L123.539164,61.3515768 Z M103.329545,63.481203 C112.268086,63.481203 119.514205,56.210038 119.514205,47.2406015 C119.514205,38.271165 112.268086,31 103.329545,31 C94.3910051,31 87.1448864,38.271165 87.1448864,47.2406015 C87.1448864,56.210038 94.3910051,63.481203 103.329545,63.481203 Z"
fill="#FFFFFF"
stroke={color}
strokeWidth="2"
/>
<path
className="fill-color fill-opacity"
d="M121.963311,65.663821 C121.727831,65.4283409 121.342447,65.4319361 121.109104,65.66528 L120.269321,66.5050623 C120.033035,66.7413482 120.036926,67.1283342 120.267862,67.3592702 L128.772316,75.8637239 C129.007796,76.099204 129.39318,76.0956087 129.626524,75.8622649 L130.466306,75.0224825 C130.702592,74.7861966 130.698701,74.3992106 130.467765,74.1682747 L121.963311,65.663821 Z M96.3596054,58.705387 C98.3267224,59.8307464 91.7811151,47.2744178 98.1580266,40.8099242 C104.534938,34.3454307 115.990851,42.6502669 115.057515,40.8099242 C114.701837,40.1086033 114.287033,39.4425406 113.819691,38.8183475 C111.359011,35.5318067 107.441818,33.406015 103.02983,33.406015 C95.5810459,33.406015 89.5426136,39.4653192 89.5426136,46.9398496 C89.5426136,51.9796152 92.2878329,56.3759843 96.3596054,58.705387 Z"
fill={color}
fillOpacity="0.1"
/>
<path
className="stroke-color"
d="M103.329545,36.4135338 C97.3705185,36.4135338 92.5397727,41.2609771 92.5397727,47.2406015 C92.5397727,48.6694994 92.81562,50.033747 93.3167936,51.2826485"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
/>
</g>
</AccessibleSVG>
);
export default SearchEmptyState;