@platformatic/ui-components 0.1.92 → 0.1.94
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/index.194e494c.css +1 -0
- package/dist/assets/index.a0469c60.js +206 -0
- package/dist/index.html +2 -2
- package/index.js +2 -0
- package/package.json +1 -1
- package/src/components/Common.module.css +3 -0
- package/src/components/Logo.jsx +9 -5
- package/src/components/Logo.module.css +4 -1
- package/src/components/LogoDropDown.jsx +82 -0
- package/src/components/LogoDropDown.module.css +30 -0
- package/src/components/backgrounds/AppBackgroundIcon.jsx +12 -12
- package/src/components/backgrounds/LensBackgroundIcon.jsx +2 -2
- package/src/components/backgrounds/TimerBackgroundIcon.jsx +5 -5
- package/src/components/constants.js +1 -1
- package/src/components/forms/Input.jsx +15 -7
- package/src/components/forms/Input.module.css +5 -6
- package/src/components/forms/InputWithSeparator.jsx +134 -0
- package/src/components/forms/InputWithSeparator.module.css +24 -0
- package/src/components/forms/index.js +3 -2
- package/src/components/icons/CheckListIcon.jsx +98 -0
- package/src/components/icons/Icons.module.css +28 -16
- package/src/components/icons/SlotIcon.jsx +88 -0
- package/src/components/icons/SwitchIcon.jsx +81 -0
- package/src/components/icons/TeamsIcon.jsx +91 -0
- package/src/components/icons/WorkspaceEmptyIcon.jsx +1 -1
- package/src/components/icons/index.js +9 -0
- package/src/components/logos/AdvancedLogo.jsx +59 -0
- package/src/components/logos/BasicLogo.jsx +22 -20
- package/src/components/logos/FreeLogo.jsx +22 -20
- package/src/components/logos/ProLogo.jsx +60 -0
- package/src/components/logos/index.js +5 -1
- package/src/stories/LogoDropDown.stories.jsx +43 -0
- package/src/stories/forms/Input.stories.jsx +10 -1
- package/src/stories/forms/InputWithSeparator.stories.jsx +55 -0
- package/dist/assets/index.1ec7065b.css +0 -1
- package/dist/assets/index.e3fdc2c7.js +0 -206
|
@@ -4,30 +4,32 @@ import { MAIN_DARK_BLUE, WHITE } from '../constants'
|
|
|
4
4
|
|
|
5
5
|
function BasicLogo ({ backgroundColor, width, height }) {
|
|
6
6
|
let icon = (
|
|
7
|
-
<svg width={width} height={height} viewBox='0 0
|
|
8
|
-
<path d='
|
|
9
|
-
<path d='
|
|
10
|
-
<path d='
|
|
11
|
-
<path d='
|
|
12
|
-
<path opacity={0.2} d='
|
|
13
|
-
<path opacity={0.4} d='
|
|
14
|
-
<path opacity={0.7} d='
|
|
15
|
-
<path d='
|
|
7
|
+
<svg width={width} height={height} viewBox='0 0 423 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
8
|
+
<path d='M187.436 64.9733H385.39C405.484 64.9733 421.773 81.2622 421.773 101.356V101.356C421.773 121.449 405.484 137.738 385.39 137.738H187.436L214.697 123.185L223.609 97.1977L208.406 75.3682L187.436 64.9733Z' fill='#00283D' />
|
|
9
|
+
<path d='M65.0386 133.582H192.308V133.542C197.131 133.317 201.842 132.015 206.094 129.73C210.347 127.446 214.032 124.238 216.878 120.342C219.725 116.446 221.66 111.962 222.542 107.221C223.424 102.479 223.229 97.5995 221.973 92.9426C220.717 88.2856 218.432 83.9694 215.284 80.3119C212.137 76.6543 208.209 73.7487 203.788 71.8088C199.368 69.8689 194.568 68.9443 189.743 69.1031C184.917 69.2618 180.189 70.4999 175.906 72.7261C173.263 66.6304 169.262 61.2174 164.209 56.8992C159.155 52.5811 153.182 49.4715 146.744 47.8071M37.7368 47.8071C28.3653 50.221 20.0632 55.6791 14.1368 63.3224C8.21048 70.9657 4.99629 80.3604 5.00001 90.0283C5.00374 99.6961 8.22518 109.088 14.1574 116.727C20.0897 124.366 28.396 129.818 37.7694 132.224' stroke='#00283D' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
10
|
+
<path d='M88.0831 74.5393L71.1029 80.4997L78.5755 96.3317' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
11
|
+
<path d='M71.4855 80.7803C79.2282 85.3285 88.2585 87.1932 97.1718 86.0843C106.085 84.9753 114.382 80.955 120.771 74.6486C127.161 68.3422 131.285 60.1033 132.502 51.2134C133.719 42.3234 131.961 33.2808 127.502 25.4921C123.042 17.7034 116.131 11.6052 107.843 8.146C99.5554 4.68684 90.3555 4.06065 81.6746 6.36483C72.9936 8.66901 65.3183 13.7744 59.8424 20.8869C54.3665 27.9993 51.397 36.7202 51.3958 45.6929V106.39' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
12
|
+
<path opacity={0.2} d='M51.3958 170.56V177.651' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
13
|
+
<path opacity={0.4} d='M51.461 148.247V159.448' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
14
|
+
<path opacity={0.7} d='M51.3958 117.925V136.652' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
15
|
+
<path d='M240.018 119.958V83.2607H257.947C262.56 83.2607 266.02 84.1344 268.327 85.8819C270.669 87.6294 271.839 89.936 271.839 92.8019C271.839 94.7241 271.368 96.4017 270.424 97.8346C269.48 99.2326 268.187 100.316 266.544 101.085C264.902 101.854 263.015 102.238 260.883 102.238L261.879 100.089C264.185 100.089 266.23 100.473 268.012 101.242C269.795 101.976 271.175 103.077 272.154 104.545C273.167 106.013 273.674 107.813 273.674 109.945C273.674 113.09 272.433 115.554 269.952 117.336C267.471 119.084 263.818 119.958 258.995 119.958H240.018ZM248.458 113.562H258.366C260.568 113.562 262.228 113.212 263.347 112.513C264.5 111.779 265.077 110.626 265.077 109.053C265.077 107.516 264.5 106.38 263.347 105.646C262.228 104.877 260.568 104.492 258.366 104.492H247.829V98.3064H256.898C258.96 98.3064 260.533 97.9569 261.617 97.2579C262.735 96.524 263.294 95.4231 263.294 93.9552C263.294 92.5223 262.735 91.4563 261.617 90.7573C260.533 90.0234 258.96 89.6564 256.898 89.6564H248.458V113.562ZM296.827 119.958V114.453L296.303 113.247V103.392C296.303 101.644 295.761 100.281 294.678 99.3025C293.629 98.3239 292.004 97.8346 289.802 97.8346C288.3 97.8346 286.814 98.0793 285.346 98.5686C283.913 99.0229 282.69 99.652 281.677 100.456L278.741 94.7416C280.279 93.6582 282.131 92.8194 284.298 92.2252C286.465 91.6311 288.667 91.334 290.903 91.334C295.202 91.334 298.54 92.3475 300.916 94.3746C303.293 96.4017 304.481 99.5646 304.481 103.863V119.958H296.827ZM288.23 120.377C286.028 120.377 284.141 120.01 282.568 119.276C280.995 118.507 279.789 117.476 278.951 116.183C278.112 114.89 277.692 113.44 277.692 111.832C277.692 110.154 278.094 108.686 278.898 107.428C279.737 106.17 281.048 105.191 282.83 104.492C284.612 103.759 286.937 103.392 289.802 103.392H297.299V108.162H290.694C288.771 108.162 287.443 108.477 286.709 109.106C286.01 109.735 285.661 110.521 285.661 111.465C285.661 112.513 286.063 113.352 286.867 113.981C287.705 114.575 288.841 114.872 290.274 114.872C291.637 114.872 292.861 114.558 293.944 113.929C295.027 113.265 295.814 112.304 296.303 111.046L297.561 114.82C296.967 116.637 295.884 118.018 294.311 118.962C292.738 119.905 290.711 120.377 288.23 120.377ZM321.372 120.377C318.96 120.377 316.636 120.097 314.399 119.538C312.197 118.944 310.45 118.21 309.157 117.336L311.883 111.465C313.176 112.269 314.696 112.933 316.444 113.457C318.226 113.946 319.974 114.191 321.686 114.191C323.573 114.191 324.902 113.964 325.67 113.509C326.474 113.055 326.876 112.426 326.876 111.622C326.876 110.958 326.562 110.469 325.933 110.154C325.338 109.805 324.535 109.543 323.521 109.368C322.507 109.193 321.389 109.018 320.166 108.844C318.978 108.669 317.772 108.442 316.549 108.162C315.325 107.848 314.207 107.393 313.193 106.799C312.18 106.205 311.359 105.401 310.73 104.388C310.135 103.374 309.838 102.064 309.838 100.456C309.838 98.6734 310.345 97.1007 311.359 95.7376C312.407 94.3746 313.91 93.3087 315.867 92.5398C317.824 91.7359 320.166 91.334 322.892 91.334C324.814 91.334 326.771 91.5437 328.763 91.9631C330.756 92.3825 332.416 92.9941 333.744 93.798L331.018 99.617C329.655 98.8132 328.274 98.2715 326.876 97.9919C325.513 97.6773 324.185 97.5201 322.892 97.5201C321.075 97.5201 319.746 97.7647 318.908 98.254C318.069 98.7433 317.65 99.3724 317.65 100.141C317.65 100.84 317.947 101.365 318.541 101.714C319.17 102.064 319.991 102.343 321.005 102.553C322.018 102.762 323.119 102.955 324.307 103.129C325.531 103.269 326.754 103.496 327.977 103.811C329.2 104.126 330.301 104.58 331.28 105.174C332.293 105.733 333.115 106.52 333.744 107.533C334.373 108.512 334.687 109.805 334.687 111.412C334.687 113.16 334.163 114.715 333.115 116.078C332.066 117.406 330.546 118.455 328.554 119.224C326.597 119.993 324.203 120.377 321.372 120.377ZM339.733 119.958V91.7534H347.911V119.958H339.733ZM343.822 87.8216C342.319 87.8216 341.096 87.3847 340.153 86.511C339.209 85.6372 338.737 84.5538 338.737 83.2607C338.737 81.9675 339.209 80.8841 340.153 80.0104C341.096 79.1366 342.319 78.6998 343.822 78.6998C345.325 78.6998 346.548 79.1192 347.492 79.958C348.436 80.7618 348.907 81.8103 348.907 83.1034C348.907 84.4664 348.436 85.6023 347.492 86.511C346.583 87.3847 345.36 87.8216 343.822 87.8216ZM369.132 120.377C366.091 120.377 363.383 119.765 361.006 118.542C358.629 117.284 356.76 115.554 355.397 113.352C354.069 111.15 353.404 108.651 353.404 105.856C353.404 103.025 354.069 100.526 355.397 98.3589C356.76 96.157 358.629 94.4445 361.006 93.2213C363.383 91.9631 366.091 91.334 369.132 91.334C372.102 91.334 374.689 91.9631 376.891 93.2213C379.092 94.4445 380.718 96.2095 381.766 98.5161L375.423 101.924C374.689 100.596 373.763 99.617 372.644 98.9879C371.561 98.3589 370.372 98.0443 369.079 98.0443C367.681 98.0443 366.423 98.3589 365.305 98.9879C364.186 99.617 363.295 100.508 362.631 101.662C362.002 102.815 361.688 104.213 361.688 105.856C361.688 107.498 362.002 108.896 362.631 110.049C363.295 111.203 364.186 112.094 365.305 112.723C366.423 113.352 367.681 113.667 369.079 113.667C370.372 113.667 371.561 113.37 372.644 112.776C373.763 112.146 374.689 111.15 375.423 109.787L381.766 113.247C380.718 115.519 379.092 117.284 376.891 118.542C374.689 119.765 372.102 120.377 369.132 120.377Z' fill='white' />
|
|
16
|
+
|
|
16
17
|
</svg>
|
|
17
18
|
|
|
18
19
|
)
|
|
19
20
|
|
|
20
21
|
if (backgroundColor === MAIN_DARK_BLUE) {
|
|
21
22
|
icon = (
|
|
22
|
-
<svg width={width} height={height} viewBox='0 0
|
|
23
|
-
<path d='
|
|
24
|
-
<path d='
|
|
25
|
-
<path d='
|
|
26
|
-
<path d='
|
|
27
|
-
<path opacity={0.2} d='
|
|
28
|
-
<path opacity={0.4} d='
|
|
29
|
-
<path opacity={0.7} d='
|
|
30
|
-
<path d='
|
|
23
|
+
<svg width={width} height={height} viewBox='0 0 423 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
24
|
+
<path d='M187.436 64.9733H385.39C405.484 64.9733 421.773 81.2622 421.773 101.356V101.356C421.773 121.449 405.484 137.738 385.39 137.738H187.436L214.697 123.185L223.609 97.1977L208.406 75.3682L187.436 64.9733Z' fill='white' />
|
|
25
|
+
<path d='M65.0386 133.582H192.308V133.542C197.131 133.317 201.842 132.015 206.094 129.73C210.347 127.446 214.032 124.238 216.878 120.342C219.725 116.446 221.66 111.962 222.542 107.221C223.424 102.479 223.229 97.5995 221.973 92.9426C220.717 88.2856 218.432 83.9694 215.284 80.3119C212.137 76.6543 208.209 73.7487 203.788 71.8088C199.368 69.8689 194.568 68.9443 189.743 69.1031C184.917 69.2618 180.189 70.4999 175.906 72.7261C173.263 66.6304 169.262 61.2174 164.209 56.8992C159.155 52.5811 153.182 49.4715 146.744 47.8071M37.7368 47.8071C28.3653 50.221 20.0632 55.6791 14.1368 63.3224C8.21048 70.9657 4.99629 80.3604 5.00001 90.0283C5.00374 99.6961 8.22518 109.088 14.1574 116.727C20.0897 124.366 28.396 129.818 37.7694 132.224' stroke='white' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
26
|
+
<path d='M88.0831 74.5393L71.1029 80.4997L78.5755 96.3317' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
27
|
+
<path d='M71.4855 80.7803C79.2282 85.3285 88.2585 87.1932 97.1718 86.0843C106.085 84.9753 114.382 80.955 120.771 74.6486C127.161 68.3422 131.285 60.1033 132.502 51.2134C133.719 42.3234 131.961 33.2808 127.502 25.4921C123.042 17.7034 116.131 11.6052 107.843 8.146C99.5554 4.68684 90.3555 4.06065 81.6746 6.36483C72.9936 8.66901 65.3183 13.7744 59.8424 20.8869C54.3665 27.9993 51.397 36.7202 51.3958 45.6929V106.39' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
28
|
+
<path opacity={0.2} d='M51.3958 170.56V177.651' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
+
<path opacity={0.4} d='M51.461 148.247V159.448' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
30
|
+
<path opacity={0.7} d='M51.3958 117.925V136.652' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
31
|
+
<path d='M240.018 119.958V83.2607H257.947C262.56 83.2607 266.02 84.1344 268.327 85.8819C270.669 87.6294 271.839 89.936 271.839 92.8019C271.839 94.7241 271.368 96.4017 270.424 97.8346C269.48 99.2326 268.187 100.316 266.544 101.085C264.902 101.854 263.015 102.238 260.883 102.238L261.879 100.089C264.185 100.089 266.23 100.473 268.012 101.242C269.795 101.976 271.175 103.077 272.154 104.545C273.167 106.013 273.674 107.813 273.674 109.945C273.674 113.09 272.433 115.554 269.952 117.336C267.471 119.084 263.818 119.958 258.995 119.958H240.018ZM248.458 113.562H258.366C260.568 113.562 262.228 113.212 263.347 112.513C264.5 111.779 265.077 110.626 265.077 109.053C265.077 107.516 264.5 106.38 263.347 105.646C262.228 104.877 260.568 104.492 258.366 104.492H247.829V98.3064H256.898C258.96 98.3064 260.533 97.9569 261.617 97.2579C262.735 96.524 263.294 95.4231 263.294 93.9552C263.294 92.5223 262.735 91.4563 261.617 90.7573C260.533 90.0234 258.96 89.6564 256.898 89.6564H248.458V113.562ZM296.827 119.958V114.453L296.303 113.247V103.392C296.303 101.644 295.761 100.281 294.678 99.3025C293.629 98.3239 292.004 97.8346 289.802 97.8346C288.3 97.8346 286.814 98.0793 285.346 98.5686C283.913 99.0229 282.69 99.652 281.677 100.456L278.741 94.7416C280.279 93.6582 282.131 92.8194 284.298 92.2252C286.465 91.6311 288.667 91.334 290.903 91.334C295.202 91.334 298.54 92.3475 300.916 94.3746C303.293 96.4017 304.481 99.5646 304.481 103.863V119.958H296.827ZM288.23 120.377C286.028 120.377 284.141 120.01 282.568 119.276C280.995 118.507 279.789 117.476 278.951 116.183C278.112 114.89 277.692 113.44 277.692 111.832C277.692 110.154 278.094 108.686 278.898 107.428C279.737 106.17 281.048 105.191 282.83 104.492C284.612 103.759 286.937 103.392 289.802 103.392H297.299V108.162H290.694C288.771 108.162 287.443 108.477 286.709 109.106C286.01 109.735 285.661 110.521 285.661 111.465C285.661 112.513 286.063 113.352 286.867 113.981C287.705 114.575 288.841 114.872 290.274 114.872C291.637 114.872 292.861 114.558 293.944 113.929C295.027 113.265 295.814 112.304 296.303 111.046L297.561 114.82C296.967 116.637 295.884 118.018 294.311 118.962C292.738 119.905 290.711 120.377 288.23 120.377ZM321.372 120.377C318.96 120.377 316.636 120.097 314.399 119.538C312.197 118.944 310.45 118.21 309.157 117.336L311.883 111.465C313.176 112.269 314.696 112.933 316.444 113.457C318.226 113.946 319.974 114.191 321.686 114.191C323.573 114.191 324.902 113.964 325.67 113.509C326.474 113.055 326.876 112.426 326.876 111.622C326.876 110.958 326.562 110.469 325.933 110.154C325.338 109.805 324.535 109.543 323.521 109.368C322.507 109.193 321.389 109.018 320.166 108.844C318.978 108.669 317.772 108.442 316.549 108.162C315.325 107.848 314.207 107.393 313.193 106.799C312.18 106.205 311.359 105.401 310.73 104.388C310.135 103.374 309.838 102.064 309.838 100.456C309.838 98.6734 310.345 97.1007 311.359 95.7376C312.407 94.3746 313.91 93.3087 315.867 92.5398C317.824 91.7359 320.166 91.334 322.892 91.334C324.814 91.334 326.771 91.5437 328.763 91.9631C330.756 92.3825 332.416 92.9941 333.744 93.798L331.018 99.617C329.655 98.8132 328.274 98.2715 326.876 97.9919C325.513 97.6773 324.185 97.5201 322.892 97.5201C321.075 97.5201 319.746 97.7647 318.908 98.254C318.069 98.7433 317.65 99.3724 317.65 100.141C317.65 100.84 317.947 101.365 318.541 101.714C319.17 102.064 319.991 102.343 321.005 102.553C322.018 102.762 323.119 102.955 324.307 103.129C325.531 103.269 326.754 103.496 327.977 103.811C329.2 104.126 330.301 104.58 331.28 105.174C332.293 105.733 333.115 106.52 333.744 107.533C334.373 108.512 334.687 109.805 334.687 111.412C334.687 113.16 334.163 114.715 333.115 116.078C332.066 117.406 330.546 118.455 328.554 119.224C326.597 119.993 324.203 120.377 321.372 120.377ZM339.733 119.958V91.7534H347.911V119.958H339.733ZM343.822 87.8216C342.319 87.8216 341.096 87.3847 340.153 86.511C339.209 85.6372 338.737 84.5538 338.737 83.2607C338.737 81.9675 339.209 80.8841 340.153 80.0104C341.096 79.1366 342.319 78.6998 343.822 78.6998C345.325 78.6998 346.548 79.1192 347.492 79.958C348.436 80.7618 348.907 81.8103 348.907 83.1034C348.907 84.4664 348.436 85.6023 347.492 86.511C346.583 87.3847 345.36 87.8216 343.822 87.8216ZM369.132 120.377C366.091 120.377 363.383 119.765 361.006 118.542C358.629 117.284 356.76 115.554 355.397 113.352C354.069 111.15 353.404 108.651 353.404 105.856C353.404 103.025 354.069 100.526 355.397 98.3589C356.76 96.157 358.629 94.4445 361.006 93.2213C363.383 91.9631 366.091 91.334 369.132 91.334C372.102 91.334 374.689 91.9631 376.891 93.2213C379.092 94.4445 380.718 96.2095 381.766 98.5161L375.423 101.924C374.689 100.596 373.763 99.617 372.644 98.9879C371.561 98.3589 370.372 98.0443 369.079 98.0443C367.681 98.0443 366.423 98.3589 365.305 98.9879C364.186 99.617 363.295 100.508 362.631 101.662C362.002 102.815 361.688 104.213 361.688 105.856C361.688 107.498 362.002 108.896 362.631 110.049C363.295 111.203 364.186 112.094 365.305 112.723C366.423 113.352 367.681 113.667 369.079 113.667C370.372 113.667 371.561 113.37 372.644 112.776C373.763 112.146 374.689 111.15 375.423 109.787L381.766 113.247C380.718 115.519 379.092 117.284 376.891 118.542C374.689 119.765 372.102 120.377 369.132 120.377Z' fill='#00283D' />
|
|
32
|
+
|
|
31
33
|
</svg>
|
|
32
34
|
|
|
33
35
|
)
|
|
@@ -53,8 +55,8 @@ BasicLogo.propTypes = {
|
|
|
53
55
|
|
|
54
56
|
BasicLogo.defaultProps = {
|
|
55
57
|
backgroundColor: WHITE,
|
|
56
|
-
width:
|
|
57
|
-
height:
|
|
58
|
+
width: 423,
|
|
59
|
+
height: 182
|
|
58
60
|
}
|
|
59
61
|
|
|
60
62
|
export default BasicLogo
|
|
@@ -4,29 +4,31 @@ import { MAIN_DARK_BLUE, WHITE } from '../constants'
|
|
|
4
4
|
|
|
5
5
|
function FreeLogo ({ backgroundColor, width, height }) {
|
|
6
6
|
let icon = (
|
|
7
|
-
<svg width={width} height={height} viewBox='0 0
|
|
8
|
-
<path d='
|
|
9
|
-
<path d='
|
|
10
|
-
<path d='
|
|
11
|
-
<path d='
|
|
12
|
-
<path opacity={0.2} d='
|
|
13
|
-
<path opacity={0.4} d='
|
|
14
|
-
<path opacity={0.7} d='
|
|
15
|
-
<path d='
|
|
7
|
+
<svg width={width} height={height} viewBox='0 0 399 183' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
8
|
+
<path d='M187.725 65.0947H354.562C374.696 65.0947 391.018 81.4167 391.018 101.551V101.551C391.018 121.685 374.696 138.007 354.562 138.007H187.725L215.041 123.424L223.971 97.3844L208.737 75.5107L187.725 65.0947Z' fill='#00283D' />
|
|
9
|
+
<path d='M65.0797 133.842H192.607V133.802C197.44 133.577 202.16 132.272 206.421 129.983C210.682 127.694 214.374 124.479 217.227 120.575C220.079 116.672 222.018 112.179 222.902 107.427C223.785 102.676 223.591 97.787 222.332 93.1206C221.074 88.4542 218.783 84.1293 215.63 80.4644C212.476 76.7994 208.54 73.8878 204.111 71.9441C199.681 70.0003 194.872 69.0738 190.037 69.2329C185.201 69.3919 180.463 70.6325 176.172 72.8632C173.523 66.7552 169.514 61.3312 164.451 57.0043C159.387 52.6774 153.402 49.5615 146.951 47.8938M37.7227 47.8938C28.3321 50.3126 20.0132 55.7817 14.0749 63.4404C8.13652 71.0992 4.91582 80.513 4.91956 90.2004C4.9233 99.8879 8.15125 109.299 14.0955 116.953C20.0398 124.608 28.3629 130.07 37.7553 132.482' stroke='#00283D' strokeWidth={8.40486} strokeLinecap='round' strokeLinejoin='round' />
|
|
10
|
+
<path d='M88.1708 74.6802L71.1563 80.6526L78.644 96.5167' stroke='#21FA90' strokeWidth={8.40486} strokeLinecap='round' strokeLinejoin='round' />
|
|
11
|
+
<path d='M71.5396 80.9337C79.298 85.4911 88.3466 87.3595 97.278 86.2484C106.209 85.1372 114.523 81.1088 120.925 74.7896C127.328 68.4705 131.46 60.2149 132.68 51.3069C133.899 42.399 132.138 33.3381 127.669 25.5336C123.201 17.7291 116.276 11.6185 107.971 8.15237C99.6664 4.6862 90.4479 4.05875 81.7493 6.36759C73.0508 8.67644 65.3599 13.7922 59.8729 20.919C54.3859 28.0459 51.4105 36.7844 51.4093 45.7753V106.596' stroke='#21FA90' strokeWidth={8.40486} strokeLinecap='round' strokeLinejoin='round' />
|
|
12
|
+
<path opacity={0.2} d='M51.4093 170.895V178' stroke='#21FA90' strokeWidth={8.40486} strokeLinecap='round' strokeLinejoin='round' />
|
|
13
|
+
<path opacity={0.4} d='M51.4746 148.537V159.761' stroke='#21FA90' strokeWidth={8.40486} strokeLinecap='round' strokeLinejoin='round' />
|
|
14
|
+
<path opacity={0.7} d='M51.4093 118.154V136.918' stroke='#21FA90' strokeWidth={8.40486} strokeLinecap='round' strokeLinejoin='round' />
|
|
15
|
+
<path d='M248.293 99.863H265.943V106.692H248.293V99.863ZM248.923 120.087H240.413V83.3159H268.202V90.1448H248.923V120.087ZM272.872 120.087V91.8258H280.699V99.8104L279.596 97.4991C280.436 95.5029 281.785 93.9971 283.641 92.9815C285.497 91.9309 287.756 91.4056 290.417 91.4056V98.9699C290.067 98.9349 289.752 98.9174 289.472 98.9174C289.192 98.8824 288.894 98.8649 288.579 98.8649C286.337 98.8649 284.516 99.5128 283.116 100.809C281.75 102.069 281.067 104.048 281.067 106.744V120.087H272.872ZM309.059 120.507C305.837 120.507 303 119.877 300.549 118.616C298.133 117.356 296.259 115.64 294.928 113.468C293.598 111.262 292.932 108.758 292.932 105.956C292.932 103.12 293.58 100.616 294.876 98.4446C296.207 96.2384 298.01 94.5224 300.286 93.2967C302.563 92.0359 305.137 91.4056 308.008 91.4056C310.775 91.4056 313.261 92.0009 315.468 93.1916C317.709 94.3473 319.477 96.0282 320.773 98.2345C322.069 100.406 322.717 103.015 322.717 106.062C322.717 106.377 322.699 106.744 322.664 107.165C322.629 107.55 322.594 107.918 322.559 108.268H299.603V103.488H318.252L315.1 104.906C315.1 103.435 314.802 102.157 314.207 101.071C313.612 99.9855 312.789 99.145 311.738 98.5497C310.687 97.9193 309.462 97.6042 308.061 97.6042C306.66 97.6042 305.417 97.9193 304.331 98.5497C303.281 99.145 302.458 100.003 301.862 101.124C301.267 102.209 300.969 103.505 300.969 105.011V106.272C300.969 107.813 301.302 109.178 301.967 110.369C302.668 111.525 303.631 112.418 304.857 113.048C306.117 113.643 307.588 113.941 309.269 113.941C310.775 113.941 312.088 113.713 313.209 113.258C314.365 112.803 315.415 112.12 316.361 111.21L320.721 115.937C319.425 117.408 317.797 118.546 315.835 119.352C313.874 120.122 311.615 120.507 309.059 120.507ZM342.198 120.507C338.976 120.507 336.14 119.877 333.688 118.616C331.272 117.356 329.398 115.64 328.068 113.468C326.737 111.262 326.071 108.758 326.071 105.956C326.071 103.12 326.719 100.616 328.015 98.4446C329.346 96.2384 331.149 94.5224 333.426 93.2967C335.702 92.0359 338.276 91.4056 341.148 91.4056C343.914 91.4056 346.401 92.0009 348.607 93.1916C350.848 94.3473 352.617 96.0282 353.913 98.2345C355.208 100.406 355.856 103.015 355.856 106.062C355.856 106.377 355.839 106.744 355.804 107.165C355.769 107.55 355.734 107.918 355.699 108.268H332.743V103.488H351.391L348.239 104.906C348.239 103.435 347.942 102.157 347.346 101.071C346.751 99.9855 345.928 99.145 344.877 98.5497C343.827 97.9193 342.601 97.6042 341.2 97.6042C339.799 97.6042 338.556 97.9193 337.471 98.5497C336.42 99.145 335.597 100.003 335.002 101.124C334.406 102.209 334.109 103.505 334.109 105.011V106.272C334.109 107.813 334.441 109.178 335.107 110.369C335.807 111.525 336.77 112.418 337.996 113.048C339.257 113.643 340.727 113.941 342.408 113.941C343.914 113.941 345.227 113.713 346.348 113.258C347.504 112.803 348.554 112.12 349.5 111.21L353.86 115.937C352.564 117.408 350.936 118.546 348.975 119.352C347.014 120.122 344.755 120.507 342.198 120.507Z' fill='white' />
|
|
16
|
+
|
|
16
17
|
</svg>
|
|
17
18
|
)
|
|
18
19
|
|
|
19
20
|
if (backgroundColor === MAIN_DARK_BLUE) {
|
|
20
21
|
icon = (
|
|
21
|
-
<svg width={width} height={height} viewBox='0 0
|
|
22
|
-
<path d='
|
|
23
|
-
<path d='
|
|
24
|
-
<path d='
|
|
25
|
-
<path d='
|
|
26
|
-
<path opacity={0.2} d='
|
|
27
|
-
<path opacity={0.4} d='
|
|
28
|
-
<path opacity={0.7} d='
|
|
29
|
-
<path d='
|
|
22
|
+
<svg width={width} height={height} viewBox='0 0 399 183' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
23
|
+
<path d='M187.725 65.0947H354.562C374.696 65.0947 391.018 81.4167 391.018 101.551V101.551C391.018 121.685 374.696 138.007 354.562 138.007H187.725L215.041 123.424L223.971 97.3844L208.737 75.5107L187.725 65.0947Z' fill='white' />
|
|
24
|
+
<path d='M65.0797 133.842H192.607V133.802C197.44 133.577 202.16 132.272 206.421 129.983C210.682 127.694 214.374 124.479 217.227 120.575C220.079 116.672 222.018 112.179 222.902 107.427C223.785 102.676 223.591 97.787 222.332 93.1206C221.074 88.4542 218.783 84.1293 215.63 80.4644C212.476 76.7994 208.54 73.8878 204.111 71.9441C199.681 70.0003 194.872 69.0738 190.037 69.2329C185.201 69.3919 180.463 70.6325 176.172 72.8632C173.523 66.7552 169.514 61.3312 164.451 57.0043C159.387 52.6774 153.402 49.5615 146.951 47.8938M37.7227 47.8938C28.3321 50.3126 20.0132 55.7817 14.0749 63.4404C8.13652 71.0992 4.91582 80.513 4.91956 90.2004C4.9233 99.8879 8.15125 109.299 14.0955 116.953C20.0398 124.608 28.3629 130.07 37.7553 132.482' stroke='white' strokeWidth={8.40486} strokeLinecap='round' strokeLinejoin='round' />
|
|
25
|
+
<path d='M88.1708 74.6802L71.1563 80.6526L78.644 96.5167' stroke='#21FA90' strokeWidth={8.40486} strokeLinecap='round' strokeLinejoin='round' />
|
|
26
|
+
<path d='M71.5396 80.9337C79.298 85.4911 88.3466 87.3595 97.278 86.2484C106.209 85.1372 114.523 81.1088 120.925 74.7896C127.328 68.4705 131.46 60.2149 132.68 51.3069C133.899 42.399 132.138 33.3381 127.669 25.5336C123.201 17.7291 116.276 11.6185 107.971 8.15237C99.6664 4.6862 90.4479 4.05875 81.7493 6.36759C73.0508 8.67644 65.3599 13.7922 59.8729 20.919C54.3859 28.0459 51.4105 36.7844 51.4093 45.7753V106.596' stroke='#21FA90' strokeWidth={8.40486} strokeLinecap='round' strokeLinejoin='round' />
|
|
27
|
+
<path opacity={0.2} d='M51.4093 170.895V178' stroke='#21FA90' strokeWidth={8.40486} strokeLinecap='round' strokeLinejoin='round' />
|
|
28
|
+
<path opacity={0.4} d='M51.4746 148.537V159.761' stroke='#21FA90' strokeWidth={8.40486} strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
+
<path opacity={0.7} d='M51.4093 118.154V136.918' stroke='#21FA90' strokeWidth={8.40486} strokeLinecap='round' strokeLinejoin='round' />
|
|
30
|
+
<path d='M248.293 99.863H265.943V106.692H248.293V99.863ZM248.923 120.087H240.413V83.3159H268.202V90.1448H248.923V120.087ZM272.872 120.087V91.8258H280.699V99.8104L279.596 97.4991C280.436 95.5029 281.785 93.9971 283.641 92.9815C285.497 91.9309 287.756 91.4056 290.417 91.4056V98.9699C290.067 98.9349 289.752 98.9174 289.472 98.9174C289.192 98.8824 288.894 98.8649 288.579 98.8649C286.337 98.8649 284.516 99.5128 283.116 100.809C281.75 102.069 281.067 104.048 281.067 106.744V120.087H272.872ZM309.059 120.507C305.837 120.507 303 119.877 300.549 118.616C298.133 117.356 296.259 115.64 294.928 113.468C293.598 111.262 292.932 108.758 292.932 105.956C292.932 103.12 293.58 100.616 294.876 98.4446C296.207 96.2384 298.01 94.5224 300.286 93.2967C302.563 92.0359 305.137 91.4056 308.008 91.4056C310.775 91.4056 313.261 92.0009 315.468 93.1916C317.709 94.3473 319.477 96.0282 320.773 98.2345C322.069 100.406 322.717 103.015 322.717 106.062C322.717 106.377 322.699 106.744 322.664 107.165C322.629 107.55 322.594 107.918 322.559 108.268H299.603V103.488H318.252L315.1 104.906C315.1 103.435 314.802 102.157 314.207 101.071C313.612 99.9855 312.789 99.145 311.738 98.5497C310.687 97.9193 309.462 97.6042 308.061 97.6042C306.66 97.6042 305.417 97.9193 304.331 98.5497C303.281 99.145 302.458 100.003 301.862 101.124C301.267 102.209 300.969 103.505 300.969 105.011V106.272C300.969 107.813 301.302 109.178 301.967 110.369C302.668 111.525 303.631 112.418 304.857 113.048C306.117 113.643 307.588 113.941 309.269 113.941C310.775 113.941 312.088 113.713 313.209 113.258C314.365 112.803 315.415 112.12 316.361 111.21L320.721 115.937C319.425 117.408 317.797 118.546 315.835 119.352C313.874 120.122 311.615 120.507 309.059 120.507ZM342.198 120.507C338.976 120.507 336.14 119.877 333.688 118.616C331.272 117.356 329.398 115.64 328.068 113.468C326.737 111.262 326.071 108.758 326.071 105.956C326.071 103.12 326.719 100.616 328.015 98.4446C329.346 96.2384 331.149 94.5224 333.426 93.2967C335.702 92.0359 338.276 91.4056 341.148 91.4056C343.914 91.4056 346.401 92.0009 348.607 93.1916C350.848 94.3473 352.617 96.0282 353.913 98.2345C355.208 100.406 355.856 103.015 355.856 106.062C355.856 106.377 355.839 106.744 355.804 107.165C355.769 107.55 355.734 107.918 355.699 108.268H332.743V103.488H351.391L348.239 104.906C348.239 103.435 347.942 102.157 347.346 101.071C346.751 99.9855 345.928 99.145 344.877 98.5497C343.827 97.9193 342.601 97.6042 341.2 97.6042C339.799 97.6042 338.556 97.9193 337.471 98.5497C336.42 99.145 335.597 100.003 335.002 101.124C334.406 102.209 334.109 103.505 334.109 105.011V106.272C334.109 107.813 334.441 109.178 335.107 110.369C335.807 111.525 336.77 112.418 337.996 113.048C339.257 113.643 340.727 113.941 342.408 113.941C343.914 113.941 345.227 113.713 346.348 113.258C347.504 112.803 348.554 112.12 349.5 111.21L353.86 115.937C352.564 117.408 350.936 118.546 348.975 119.352C347.014 120.122 344.755 120.507 342.198 120.507Z' fill='#00283D' />
|
|
31
|
+
|
|
30
32
|
</svg>
|
|
31
33
|
)
|
|
32
34
|
}
|
|
@@ -51,8 +53,8 @@ FreeLogo.propTypes = {
|
|
|
51
53
|
|
|
52
54
|
FreeLogo.defaultProps = {
|
|
53
55
|
backgroundColor: WHITE,
|
|
54
|
-
width:
|
|
55
|
-
height:
|
|
56
|
+
width: 399,
|
|
57
|
+
height: 183
|
|
56
58
|
}
|
|
57
59
|
|
|
58
60
|
export default FreeLogo
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import { MAIN_DARK_BLUE, WHITE } from '../constants'
|
|
4
|
+
|
|
5
|
+
function ProLogo ({ backgroundColor, width, height }) {
|
|
6
|
+
let icon = (
|
|
7
|
+
<svg width={width} height={height} viewBox='0 0 370 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
8
|
+
<path d='M187.437 64.9734H332.966C353.06 64.9734 369.349 81.2623 369.349 101.356V101.356C369.349 121.449 353.06 137.738 332.966 137.738H187.437L214.697 123.185L223.609 97.1978L208.406 75.3684L187.437 64.9734Z' fill='#00283D' />
|
|
9
|
+
<path d='M65.0386 133.582H192.308V133.542C197.131 133.317 201.842 132.015 206.094 129.73C210.347 127.446 214.032 124.238 216.878 120.342C219.725 116.446 221.66 111.962 222.542 107.221C223.424 102.479 223.23 97.5995 221.974 92.9426C220.718 88.2856 218.432 83.9694 215.285 80.3119C212.137 76.6544 208.209 73.7487 203.789 71.8088C199.368 69.8689 194.569 68.9443 189.743 69.1031C184.918 69.2618 180.189 70.4999 175.906 72.7261C173.263 66.6304 169.262 61.2174 164.209 56.8992C159.155 52.5811 153.182 49.4715 146.744 47.8071M37.7368 47.8071C28.3653 50.221 20.0632 55.6791 14.1368 63.3224C8.21047 70.9657 4.99627 80.3604 5 90.0283C5.00373 99.6962 8.22517 109.088 14.1574 116.727C20.0897 124.366 28.396 129.818 37.7694 132.224' stroke='#00283D' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
10
|
+
<path d='M88.0831 74.5394L71.1029 80.4998L78.5755 96.3318' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
11
|
+
<path d='M71.4855 80.7804C79.2282 85.3286 88.2586 87.1933 97.1719 86.0844C106.085 84.9755 114.382 80.9551 120.771 74.6488C127.161 68.3424 131.285 60.1034 132.502 51.2135C133.719 42.3235 131.961 33.281 127.502 25.4922C123.042 17.7035 116.131 11.6053 107.843 8.14612C99.5555 4.68696 90.3556 4.06077 81.6746 6.36495C72.9937 8.66913 65.3183 13.7745 59.8424 20.887C54.3665 27.9995 51.397 36.7203 51.3959 45.693V106.391' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
12
|
+
<path opacity={0.2} d='M51.3959 170.56V177.651' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
13
|
+
<path opacity={0.4} d='M51.4611 148.247V159.448' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
14
|
+
<path opacity={0.7} d='M51.3959 117.925V136.652' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
15
|
+
<path d='M240.018 119.958V83.2607H255.903C259.188 83.2607 262.019 83.8024 264.395 84.8858C266.772 85.9343 268.607 87.4546 269.9 89.4467C271.193 91.4388 271.839 93.8154 271.839 96.5764C271.839 99.3025 271.193 101.662 269.9 103.654C268.607 105.646 266.772 107.184 264.395 108.267C262.019 109.316 259.188 109.84 255.903 109.84H244.736L248.511 106.013V119.958H240.018ZM248.511 106.956L244.736 102.92H255.431C258.052 102.92 260.009 102.361 261.302 101.242C262.595 100.124 263.242 98.5685 263.242 96.5764C263.242 94.5494 262.595 92.9766 261.302 91.8582C260.009 90.7399 258.052 90.1807 255.431 90.1807H244.736L248.511 86.144V106.956ZM277.326 119.958V91.7534H285.137V99.7219L284.036 97.4152C284.875 95.4231 286.221 93.9203 288.073 92.9067C289.925 91.8582 292.18 91.334 294.836 91.334V98.8831C294.486 98.8481 294.172 98.8307 293.892 98.8307C293.612 98.7957 293.315 98.7782 293.001 98.7782C290.764 98.7782 288.947 99.4248 287.549 100.718C286.186 101.976 285.504 103.951 285.504 106.642V119.958H277.326ZM312.863 120.377C309.857 120.377 307.184 119.748 304.842 118.49C302.536 117.232 300.701 115.519 299.338 113.352C298.01 111.15 297.346 108.651 297.346 105.856C297.346 103.025 298.01 100.526 299.338 98.3588C300.701 96.157 302.536 94.4445 304.842 93.2213C307.184 91.9631 309.857 91.334 312.863 91.334C315.834 91.334 318.49 91.9631 320.832 93.2213C323.173 94.4445 325.008 96.1396 326.336 98.3064C327.664 100.473 328.328 102.99 328.328 105.856C328.328 108.651 327.664 111.15 326.336 113.352C325.008 115.519 323.173 117.232 320.832 118.49C318.49 119.748 315.834 120.377 312.863 120.377ZM312.863 113.667C314.226 113.667 315.449 113.352 316.533 112.723C317.616 112.094 318.472 111.203 319.102 110.049C319.731 108.861 320.045 107.463 320.045 105.856C320.045 104.213 319.731 102.815 319.102 101.662C318.472 100.508 317.616 99.617 316.533 98.9879C315.449 98.3589 314.226 98.0443 312.863 98.0443C311.5 98.0443 310.277 98.3589 309.193 98.9879C308.11 99.617 307.236 100.508 306.572 101.662C305.943 102.815 305.629 104.213 305.629 105.856C305.629 107.463 305.943 108.861 306.572 110.049C307.236 111.203 308.11 112.094 309.193 112.723C310.277 113.352 311.5 113.667 312.863 113.667Z' fill='white' />
|
|
16
|
+
|
|
17
|
+
</svg>
|
|
18
|
+
)
|
|
19
|
+
|
|
20
|
+
if (backgroundColor === MAIN_DARK_BLUE) {
|
|
21
|
+
icon = (
|
|
22
|
+
<svg width={width} height={height} viewBox='0 0 370 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
23
|
+
<path d='M187.437 64.9734H332.966C353.06 64.9734 369.349 81.2623 369.349 101.356V101.356C369.349 121.449 353.06 137.738 332.966 137.738H187.437L214.697 123.185L223.609 97.1978L208.406 75.3684L187.437 64.9734Z' fill='white' />
|
|
24
|
+
<path d='M65.0386 133.582H192.308V133.542C197.131 133.317 201.842 132.015 206.094 129.73C210.347 127.446 214.032 124.238 216.878 120.342C219.725 116.446 221.66 111.962 222.542 107.221C223.424 102.479 223.23 97.5995 221.974 92.9426C220.718 88.2856 218.432 83.9694 215.285 80.3119C212.137 76.6544 208.209 73.7487 203.789 71.8088C199.368 69.8689 194.569 68.9443 189.743 69.1031C184.918 69.2618 180.189 70.4999 175.906 72.7261C173.263 66.6304 169.262 61.2174 164.209 56.8992C159.155 52.5811 153.182 49.4715 146.744 47.8071M37.7368 47.8071C28.3653 50.221 20.0632 55.6791 14.1368 63.3224C8.21047 70.9657 4.99627 80.3604 5 90.0283C5.00373 99.6962 8.22517 109.088 14.1574 116.727C20.0897 124.366 28.396 129.818 37.7694 132.224' stroke='white' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
25
|
+
<path d='M88.0831 74.5394L71.1029 80.4998L78.5755 96.3318' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
26
|
+
<path d='M71.4855 80.7804C79.2282 85.3286 88.2586 87.1933 97.1719 86.0844C106.085 84.9755 114.382 80.9551 120.771 74.6488C127.161 68.3424 131.285 60.1034 132.502 51.2135C133.719 42.3235 131.961 33.281 127.502 25.4922C123.042 17.7035 116.131 11.6053 107.843 8.14612C99.5555 4.68696 90.3556 4.06077 81.6746 6.36495C72.9937 8.66913 65.3183 13.7745 59.8424 20.887C54.3665 27.9995 51.397 36.7203 51.3959 45.693V106.391' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
27
|
+
<path opacity={0.2} d='M51.3959 170.56V177.651' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
28
|
+
<path opacity={0.4} d='M51.4611 148.247V159.448' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
29
|
+
<path opacity={0.7} d='M51.3959 117.925V136.652' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
|
|
30
|
+
<path d='M240.018 119.958V83.2607H255.903C259.188 83.2607 262.019 83.8024 264.395 84.8858C266.772 85.9343 268.607 87.4546 269.9 89.4467C271.193 91.4388 271.839 93.8154 271.839 96.5764C271.839 99.3025 271.193 101.662 269.9 103.654C268.607 105.646 266.772 107.184 264.395 108.267C262.019 109.316 259.188 109.84 255.903 109.84H244.736L248.511 106.013V119.958H240.018ZM248.511 106.956L244.736 102.92H255.431C258.052 102.92 260.009 102.361 261.302 101.242C262.595 100.124 263.242 98.5685 263.242 96.5764C263.242 94.5494 262.595 92.9766 261.302 91.8582C260.009 90.7399 258.052 90.1807 255.431 90.1807H244.736L248.511 86.144V106.956ZM277.326 119.958V91.7534H285.137V99.7219L284.036 97.4152C284.875 95.4231 286.221 93.9203 288.073 92.9067C289.925 91.8582 292.18 91.334 294.836 91.334V98.8831C294.486 98.8481 294.172 98.8307 293.892 98.8307C293.612 98.7957 293.315 98.7782 293.001 98.7782C290.764 98.7782 288.947 99.4248 287.549 100.718C286.186 101.976 285.504 103.951 285.504 106.642V119.958H277.326ZM312.863 120.377C309.857 120.377 307.184 119.748 304.842 118.49C302.536 117.232 300.701 115.519 299.338 113.352C298.01 111.15 297.346 108.651 297.346 105.856C297.346 103.025 298.01 100.526 299.338 98.3588C300.701 96.157 302.536 94.4445 304.842 93.2213C307.184 91.9631 309.857 91.334 312.863 91.334C315.834 91.334 318.49 91.9631 320.832 93.2213C323.173 94.4445 325.008 96.1396 326.336 98.3064C327.664 100.473 328.328 102.99 328.328 105.856C328.328 108.651 327.664 111.15 326.336 113.352C325.008 115.519 323.173 117.232 320.832 118.49C318.49 119.748 315.834 120.377 312.863 120.377ZM312.863 113.667C314.226 113.667 315.449 113.352 316.533 112.723C317.616 112.094 318.472 111.203 319.102 110.049C319.731 108.861 320.045 107.463 320.045 105.856C320.045 104.213 319.731 102.815 319.102 101.662C318.472 100.508 317.616 99.617 316.533 98.9879C315.449 98.3589 314.226 98.0443 312.863 98.0443C311.5 98.0443 310.277 98.3589 309.193 98.9879C308.11 99.617 307.236 100.508 306.572 101.662C305.943 102.815 305.629 104.213 305.629 105.856C305.629 107.463 305.943 108.861 306.572 110.049C307.236 111.203 308.11 112.094 309.193 112.723C310.277 113.352 311.5 113.667 312.863 113.667Z' fill='#00283D' />
|
|
31
|
+
|
|
32
|
+
</svg>
|
|
33
|
+
)
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
return icon
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
ProLogo.propTypes = {
|
|
40
|
+
/**
|
|
41
|
+
* background color of the button
|
|
42
|
+
*/
|
|
43
|
+
backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
|
|
44
|
+
/**
|
|
45
|
+
* width
|
|
46
|
+
*/
|
|
47
|
+
width: PropTypes.number,
|
|
48
|
+
/**
|
|
49
|
+
* height
|
|
50
|
+
*/
|
|
51
|
+
height: PropTypes.number
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
ProLogo.defaultProps = {
|
|
55
|
+
backgroundColor: WHITE,
|
|
56
|
+
width: 370,
|
|
57
|
+
height: 182
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export default ProLogo
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
import React, { useState } from 'react'
|
|
3
|
+
import LogoDropDown from '../components/LogoDropDown'
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Platformatic/LogoDropDown',
|
|
6
|
+
component: LogoDropDown,
|
|
7
|
+
decorators: [dd => <div className='text-white'>{dd()}</div>]
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const Template = ({ items }) => {
|
|
11
|
+
const [selected, setSelected] = useState('1')
|
|
12
|
+
|
|
13
|
+
function getItems () {
|
|
14
|
+
return items.map(item => ({ handleClick: () => setSelected(item.id), ...item }))
|
|
15
|
+
}
|
|
16
|
+
return (
|
|
17
|
+
<div>
|
|
18
|
+
<LogoDropDown items={getItems()} itemSelected={selected} />
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const Default = Template.bind({})
|
|
25
|
+
|
|
26
|
+
Default.args = {
|
|
27
|
+
items: [{
|
|
28
|
+
id: '1',
|
|
29
|
+
name: 'Organization-name-1'
|
|
30
|
+
}, {
|
|
31
|
+
id: '2',
|
|
32
|
+
name: 'Organization-name-name-name-name-name-name-2'
|
|
33
|
+
}, {
|
|
34
|
+
id: '3',
|
|
35
|
+
name: 'Organization-name-3'
|
|
36
|
+
}, {
|
|
37
|
+
id: '4',
|
|
38
|
+
name: 'Short-name'
|
|
39
|
+
}, {
|
|
40
|
+
id: '5',
|
|
41
|
+
name: 'abc'
|
|
42
|
+
}]
|
|
43
|
+
}
|