@platformatic/ui-components 0.1.53 → 0.1.55

package/src/components/icons/SocialDiscordIcon.jsx

@@ -0,0 +1,79 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const SocialDiscordIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M1.33389 10.7066V10.3464C1.41406 10.0202 1.41302 9.69447 1.33389 9.36827V9.00805C1.39389 8.98022 1.38199 8.92354 1.38665 8.87509C1.55318 6.98125 2.21106 5.2621 3.24442 3.67539C3.33286 3.53934 3.43992 3.44968 3.5899 3.38681C4.2095 3.12759 4.84307 2.91425 5.49888 2.76686C6.12365 2.62669 6.12675 2.62154 6.40811 3.19459C6.46759 3.31621 6.53482 3.35228 6.66671 3.3327C7.44561 3.21675 8.22657 3.21623 9.01012 3.28786C9.51853 3.33424 9.52939 3.32909 9.74816 2.86735C9.83505 2.68338 9.9416 2.64112 10.1299 2.67977C10.932 2.84571 11.7114 3.08276 12.4634 3.40639C12.5679 3.45174 12.6512 3.51255 12.7169 3.61201C13.577 4.90497 14.1924 6.29843 14.4707 7.83052C14.5415 8.22165 14.6015 8.61485 14.6667 9.00702V9.36724C14.6093 9.43578 14.616 9.50431 14.6667 9.57337V10.1913C14.6057 10.3113 14.5762 10.4314 14.6667 10.5515V10.8086C14.586 10.8993 14.5984 11.0312 14.4748 11.1173C13.5294 11.7738 12.5147 12.2887 11.4187 12.6447C11.2832 12.6886 11.1922 12.6721 11.1161 12.5458C10.9439 12.2593 10.7681 11.9743 10.5865 11.6934C10.509 11.5734 10.539 11.5218 10.6667 11.4724C10.9941 11.3451 11.3153 11.2034 11.6121 11.005C11.4782 10.8138 11.3396 10.7978 11.128 10.887C9.04891 11.7594 6.96203 11.7491 4.8829 10.887C4.66774 10.7978 4.5312 10.8184 4.39208 11.0008C4.67705 11.1982 4.99202 11.3353 5.3101 11.4605C5.45854 11.5187 5.49836 11.5723 5.4063 11.7135C5.23252 11.9789 5.06598 12.2495 4.9041 12.5221C4.81928 12.6654 4.72308 12.6886 4.56327 12.636C3.60956 12.3237 2.71481 11.8934 1.87643 11.3435C1.6318 11.1833 1.36285 11.0462 1.33337 10.705L1.33389 10.7066ZM6.9853 8.14744C6.98065 7.5713 6.65067 7.0771 6.15468 6.90292C5.52215 6.68132 4.8348 7.08071 4.64809 7.77795C4.44431 8.5391 4.88755 9.34198 5.58215 9.46979C6.33674 9.60841 6.99202 8.99053 6.9853 8.14744ZM11.4094 8.16445C11.4115 7.59346 11.0841 7.08225 10.5933 6.90962C10.1645 6.75914 9.77144 6.84468 9.44767 7.15543C9.03909 7.5476 8.93255 8.03716 9.0846 8.57259C9.21804 9.04309 9.51749 9.37342 10.0145 9.46876C10.7557 9.61099 11.4068 8.99465 11.4094 8.16394V8.16445Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M2.00078 16.0599V15.5196C2.12102 15.0303 2.11947 14.5417 2.00078 14.0524V13.5121C2.09077 13.4703 2.07292 13.3853 2.07991 13.3127C2.32971 10.4719 3.31652 7.89317 4.86656 5.5131C4.99922 5.30903 5.15981 5.17453 5.38479 5.08022C6.3142 4.69141 7.26455 4.37138 8.24825 4.15031C9.18541 3.94005 9.19007 3.93232 9.6121 4.7919C9.70132 4.97432 9.80217 5.02843 10 4.99906C11.1683 4.82513 12.3398 4.82436 13.5151 4.93181C14.2777 5.00138 14.294 4.99365 14.6222 4.30104C14.7525 4.02508 14.9123 3.9617 15.1947 4.01967C16.398 4.26858 17.5671 4.62416 18.6951 5.1096C18.8518 5.17762 18.9767 5.26884 19.0753 5.41802C20.3654 7.35748 21.2886 9.44766 21.706 11.7458C21.8123 12.3325 21.9023 12.9223 22 13.5105V14.0509C21.9139 14.1537 21.924 14.2565 22 14.3601V15.2869C21.9085 15.467 21.8642 15.6471 22 15.8272V16.2129C21.879 16.349 21.8976 16.5469 21.7122 16.676C20.294 17.6608 18.7719 18.433 17.128 18.9671C16.9247 19.0328 16.7882 19.0081 16.6742 18.8187C16.4158 18.3889 16.1521 17.9615 15.8798 17.5402C15.7634 17.3601 15.8084 17.2828 16 17.2086C16.4911 17.0176 16.9728 16.8051 17.4182 16.5075C17.2172 16.2207 17.0093 16.1967 16.692 16.3304C13.5733 17.6391 10.443 17.6237 7.32428 16.3304C7.00155 16.1967 6.79674 16.2276 6.58805 16.5013C7.01552 16.7973 7.48797 17.0029 7.96509 17.1908C8.18774 17.2781 8.24748 17.3585 8.10939 17.5703C7.84872 17.9684 7.59891 18.3742 7.35609 18.7832C7.22886 18.9981 7.08456 19.0328 6.84484 18.954C5.41427 18.4856 4.07215 17.8401 2.81458 17.0153C2.44763 16.7749 2.04422 16.5693 2 16.0576L2.00078 16.0599ZM10.4779 12.2212C10.4709 11.357 9.97595 10.6157 9.23196 10.3544C8.28316 10.022 7.25213 10.6211 6.97207 11.6669C6.66641 12.8087 7.33126 14.013 8.37316 14.2047C9.50504 14.4126 10.488 13.4858 10.4779 12.2212ZM17.114 12.2467C17.1171 11.3902 16.6261 10.6234 15.8898 10.3644C15.2467 10.1387 14.6571 10.267 14.1714 10.7332C13.5586 11.3214 13.3988 12.0558 13.6268 12.8589C13.827 13.5647 14.2762 14.0601 15.0217 14.2031C16.1334 14.4165 17.1102 13.492 17.114 12.2459V12.2467Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M3.33467 26.7665V25.8659C3.53508 25.0504 3.53249 24.2362 3.33467 23.4207V22.5201C3.48465 22.4506 3.45492 22.3089 3.46655 22.1877C3.8829 17.4531 5.52758 13.1553 8.11098 9.1885C8.33208 8.84838 8.59973 8.62421 8.9747 8.46703C10.5237 7.819 12.1076 7.28563 13.7471 6.91717C15.3091 6.56674 15.3168 6.55386 16.0202 7.98648C16.1689 8.29053 16.337 8.38071 16.6667 8.33176C18.614 8.04188 20.5664 8.04059 22.5253 8.21967C23.7963 8.33562 23.8234 8.32274 24.3704 7.16839C24.5876 6.70846 24.8539 6.60282 25.3246 6.69944C27.33 7.11428 29.2785 7.70692 31.1586 8.51599C31.4197 8.62936 31.6279 8.78138 31.7921 9.03003C33.9424 12.2625 35.481 15.7461 36.1767 19.5763C36.3538 20.5541 36.5038 21.5371 36.6667 22.5176V23.4181C36.5232 23.5895 36.54 23.7608 36.6667 23.9334V25.4781C36.5141 25.7783 36.4404 26.0785 36.6667 26.3787V27.0216C36.465 27.2483 36.496 27.5781 36.187 27.7933C33.8234 29.4346 31.2866 30.7216 28.5467 31.6119C28.208 31.7214 27.9804 31.6802 27.7903 31.3645C27.3597 30.6482 26.9201 29.9358 26.4663 29.2336C26.2723 28.9334 26.3473 28.8046 26.6667 28.6809C27.4852 28.3627 28.2881 28.0084 29.0303 27.5124C28.6954 27.0344 28.3489 26.9945 27.8201 27.2174C22.6222 29.3985 17.405 29.3728 12.2072 27.2174C11.6693 26.9945 11.3279 27.046 10.9801 27.5021C11.6926 27.9955 12.48 28.3382 13.2752 28.6513C13.6463 28.7969 13.7458 28.9309 13.5157 29.2839C13.0812 29.9474 12.6649 30.6237 12.2602 31.3053C12.0481 31.6634 11.8076 31.7214 11.4081 31.59C9.02383 30.8093 6.78695 29.7335 4.69102 28.3589C4.07943 27.9582 3.40707 27.6155 3.33337 26.7626L3.33467 26.7665ZM17.4632 20.3686C17.4516 18.9283 16.6266 17.6928 15.3866 17.2573C13.8053 16.7033 12.0869 17.7018 11.6202 19.4449C11.1107 21.3478 12.2188 23.355 13.9553 23.6745C15.8418 24.021 17.48 22.4763 17.4632 20.3686ZM28.5234 20.4111C28.5286 18.9837 27.7101 17.7056 26.4831 17.2741C25.4112 16.8979 24.4285 17.1117 23.6191 17.8886C22.5977 18.869 22.3313 20.0929 22.7114 21.4315C23.045 22.6077 23.7937 23.4336 25.0362 23.6719C26.8891 24.0275 28.517 22.4866 28.5234 20.4099V20.4111Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+SocialDiscordIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+SocialDiscordIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default SocialDiscordIcon

package/src/components/icons/SocialGitHubIcon.jsx

@@ -0,0 +1,98 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const SocialGitHubIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M9.20977 11.1833C9.58066 11.1352 9.91607 11.0753 10.2442 10.9731C11.3996 10.6138 12.0277 9.79838 12.1937 8.57913C12.277 7.96738 12.2884 7.36152 12.0559 6.77597C11.953 6.51725 11.8152 6.27884 11.634 6.07088C11.5767 6.00506 11.5713 5.95069 11.596 5.86882C11.7597 5.32715 11.7078 4.79432 11.5298 4.26576C11.4981 4.17209 11.444 4.15605 11.3632 4.15768C11.0455 4.16391 10.7541 4.27132 10.4694 4.4033C10.2192 4.51923 9.981 4.65907 9.75359 4.81758C9.69151 4.86081 9.63862 4.86834 9.56482 4.84902C8.52215 4.57884 7.47758 4.57654 6.43522 4.84902C6.34527 4.87259 6.28731 4.84738 6.2189 4.80251C5.78625 4.51792 5.34093 4.26248 4.82529 4.17471C4.81484 4.17308 4.80471 4.17013 4.79425 4.16816C4.52503 4.12559 4.49368 4.14393 4.41608 4.41444C4.27514 4.906 4.24853 5.39985 4.40341 5.89437C4.42051 5.94906 4.42716 5.98999 4.38377 6.04043C3.78737 6.73438 3.67303 7.55998 3.77819 8.44322C3.81746 8.77366 3.88588 9.09755 4.00782 9.40768C4.36097 10.308 5.04542 10.7897 5.92244 11.0294C6.19229 11.1031 6.46785 11.1463 6.76969 11.1889C6.53753 11.4443 6.41527 11.7319 6.36744 12.0538C6.35794 12.1177 6.30885 12.1239 6.26736 12.1419C5.51671 12.4664 4.85823 12.2519 4.42115 11.5423C4.20672 11.1938 3.92515 10.9371 3.52227 10.849C3.41205 10.8247 3.30278 10.8244 3.19446 10.8624C3.08043 10.9023 3.07157 10.9751 3.14346 11.0595C3.19541 11.1201 3.25464 11.1788 3.32147 11.22C3.67715 11.4404 3.90203 11.7722 4.05343 12.1573C4.29572 12.7736 4.76385 13.0507 5.37133 13.1208C5.65005 13.1529 5.93099 13.1375 6.20528 13.0733C6.31043 13.0487 6.34052 13.0671 6.33926 13.1823C6.33482 13.5422 6.34179 13.9025 6.34369 14.2624C6.34527 14.5869 6.1451 14.7373 5.84168 14.6331C5.07899 14.3708 4.38409 13.9772 3.76584 13.4473C2.38807 12.268 1.56837 10.7589 1.37358 8.91972C1.03152 5.69034 2.90053 2.71869 5.88918 1.68972C9.55025 0.429205 13.4793 2.62667 14.4576 6.48188C15.3242 9.89564 13.4197 13.5161 10.1717 14.6298C9.84893 14.7405 9.6516 14.5981 9.65192 14.2516C9.65255 13.6461 9.65952 13.0405 9.65604 12.435C9.65319 11.9765 9.55564 11.5485 9.21008 11.1833H9.20977Z' fill='none' className={filledClassName} />
+          <path opacity='0.1' d='M6.17644 12.3233C6.23883 12.3325 6.30693 12.3459 6.29711 12.4232C6.28698 12.5044 6.2154 12.531 6.1435 12.5333C6.08332 12.5352 6.01712 12.5179 6.01934 12.4422C6.02219 12.343 6.10549 12.3348 6.17644 12.3233V12.3233Z' fill='none' className={filledClassName} />
+          <path opacity='0.1' d='M4.66993 12.2503C4.5936 12.2369 4.53596 12.191 4.52487 12.0983C4.5179 12.0397 4.54514 12.0047 4.60405 12.0076C4.70161 12.0125 4.75672 12.0738 4.76875 12.1678C4.77604 12.2244 4.73518 12.2529 4.66993 12.2506V12.2503Z' fill='none' className={filledClassName} />
+          <path opacity='0.1' d='M5.65143 12.3918C5.71668 12.4 5.79206 12.4105 5.78857 12.493C5.78509 12.5798 5.70781 12.6001 5.63718 12.5965C5.5732 12.5932 5.50383 12.5712 5.51017 12.4864C5.5165 12.4023 5.5903 12.4003 5.65143 12.3918V12.3918Z' fill='none' className={filledClassName} />
+          <path d='M5.0918 12.303C5.16654 12.308 5.23876 12.3387 5.24541 12.4258C5.25143 12.5025 5.18238 12.5146 5.1222 12.51C5.04492 12.5038 4.97302 12.4769 4.97302 12.3816C4.97302 12.3112 5.03225 12.304 5.0918 12.303Z' fill='none' className={filledClassName} />
+          <path d='M4.41933 11.764C4.41965 11.8134 4.40603 11.8557 4.3525 11.855C4.26382 11.8537 4.22327 11.7934 4.21251 11.7103C4.20649 11.6628 4.22232 11.6192 4.2768 11.6199C4.36644 11.6209 4.40096 11.686 4.41933 11.7643V11.764Z' fill='none' className={filledClassName} />
+          <path d='M4.14625 11.387C4.15037 11.4398 4.12661 11.4689 4.08449 11.4686C4.01291 11.4683 3.96698 11.4263 3.95558 11.353C3.94766 11.3035 3.96667 11.2609 4.02051 11.2668C4.08924 11.2747 4.12978 11.3242 4.14625 11.387V11.387Z' fill='none' className={filledClassName} />
+          <path d='M3.86275 11.1169C3.8599 11.168 3.82506 11.1847 3.78737 11.1811C3.73954 11.1761 3.6914 11.1562 3.67936 11.1012C3.66923 11.054 3.70154 11.0314 3.74398 11.0311C3.80226 11.0307 3.84216 11.0612 3.86275 11.1169V11.1169Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M13.8146 16.775C14.3709 16.7028 14.874 16.6129 15.3662 16.4596C17.0994 15.9207 18.0415 14.6976 18.2904 12.8687C18.4154 11.9511 18.4325 11.0423 18.0838 10.1639C17.9294 9.77586 17.7227 9.41824 17.451 9.10631C17.365 9.00757 17.3569 8.92603 17.3939 8.80322C17.6396 7.99071 17.5616 7.19147 17.2946 6.39862C17.2471 6.25812 17.1659 6.23405 17.0447 6.23651C16.5682 6.24584 16.1311 6.40697 15.704 6.60494C15.3287 6.77883 14.9714 6.98859 14.6303 7.22635C14.5372 7.29119 14.4579 7.30249 14.3472 7.27351C12.7832 6.86824 11.2163 6.8648 9.65278 7.27351C9.51785 7.30888 9.43091 7.27105 9.32829 7.20375C8.67931 6.77687 8.01133 6.39371 7.23788 6.26205C7.2222 6.2596 7.207 6.25518 7.19132 6.25223C6.78749 6.18837 6.74046 6.21588 6.62406 6.62164C6.41264 7.35898 6.37273 8.09977 6.60505 8.84153C6.63071 8.92357 6.64069 8.98497 6.5756 9.06062C5.681 10.1016 5.50949 11.34 5.66722 12.6648C5.72613 13.1605 5.82875 13.6463 6.01166 14.1115C6.54139 15.4619 7.56807 16.1845 8.8836 16.5441C9.28838 16.6546 9.70171 16.7195 10.1545 16.7833C9.80623 17.1665 9.62285 17.5978 9.55111 18.0807C9.53685 18.1765 9.46321 18.1858 9.40098 18.2128C8.27501 18.6997 7.28729 18.3779 6.63166 17.3134C6.31002 16.7907 5.88766 16.4056 5.28335 16.2734C5.11801 16.2371 4.95411 16.2366 4.79162 16.2936C4.62059 16.3535 4.60729 16.4626 4.71513 16.5893C4.79305 16.6802 4.88189 16.7681 4.98214 16.83C5.51567 17.1606 5.85298 17.6582 6.08008 18.2359C6.44352 19.1604 7.14571 19.576 8.05694 19.6811C8.47502 19.7293 8.89643 19.7062 9.30786 19.6099C9.46559 19.5731 9.51072 19.6006 9.50882 19.7735C9.50217 20.3134 9.51262 20.8537 9.51547 21.3936C9.51785 21.8804 9.21759 22.1059 8.76245 21.9497C7.61843 21.5562 6.57607 20.9657 5.64869 20.1709C3.58204 18.402 2.3525 16.1383 2.06031 13.3796C1.54721 8.53549 4.35074 4.07802 8.83372 2.53456C14.3253 0.643792 20.2188 3.93998 21.6864 9.72281C22.9863 14.8435 20.1295 20.2741 15.2574 21.9448C14.7733 22.1108 14.4773 21.8971 14.4778 21.3774C14.4788 20.4691 14.4892 19.5608 14.484 18.6525C14.4797 17.9648 14.3334 17.3227 13.8151 16.775H13.8146Z' fill='none' className={filledClassName} />
+          <path opacity='0.1' d='M9.26454 18.485C9.35813 18.4987 9.46027 18.5189 9.44555 18.6348C9.43034 18.7566 9.32297 18.7964 9.21513 18.7999C9.12486 18.8028 9.02556 18.7768 9.02889 18.6633C9.03317 18.5145 9.15812 18.5022 9.26454 18.485Z' fill='none' className={filledClassName} />
+          <path opacity='0.1' d='M7.00484 18.3754C6.89034 18.3553 6.80387 18.2865 6.78725 18.1475C6.77679 18.0596 6.81765 18.007 6.90602 18.0114C7.05235 18.0188 7.13501 18.1107 7.15307 18.2516C7.16399 18.3366 7.10271 18.3794 7.00484 18.3759V18.3754Z' fill='none' className={filledClassName} />
+          <path opacity='0.1' d='M8.47715 18.5876C8.57501 18.5999 8.68809 18.6156 8.68286 18.7394C8.67764 18.8696 8.56171 18.9001 8.45577 18.8947C8.3598 18.8898 8.25575 18.8568 8.26525 18.7296C8.27476 18.6034 8.38545 18.6004 8.47715 18.5876Z' fill='none' className={filledClassName} />
+          <path d='M7.63763 18.4545C7.74975 18.4619 7.85808 18.5081 7.86805 18.6387C7.87708 18.7537 7.77351 18.7719 7.68324 18.765C7.56732 18.7557 7.45947 18.7154 7.45947 18.5724C7.45947 18.4668 7.54832 18.456 7.63763 18.4545Z' fill='none' className={filledClassName} />
+          <path d='M6.62893 17.646C6.62941 17.7201 6.60898 17.7835 6.52869 17.7825C6.39566 17.7806 6.33485 17.6902 6.3187 17.5654C6.30967 17.4942 6.33343 17.4288 6.41514 17.4298C6.54959 17.4313 6.60138 17.5291 6.62893 17.6465V17.646Z' fill='none' className={filledClassName} />
+          <path d='M6.21925 17.0805C6.22543 17.1596 6.1898 17.2034 6.12661 17.2029C6.01924 17.2024 5.95035 17.1395 5.93325 17.0295C5.92137 16.9553 5.94988 16.8914 6.03064 16.9003C6.13374 16.9121 6.19455 16.9862 6.21925 17.0805Z' fill='none' className={filledClassName} />
+          <path d='M5.794 16.6753C5.78973 16.7519 5.73747 16.777 5.68093 16.7716C5.60919 16.7642 5.53698 16.7342 5.51892 16.6517C5.50372 16.581 5.55218 16.5471 5.61584 16.5466C5.70326 16.5461 5.76312 16.5918 5.794 16.6753Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M23.0244 27.9583C23.9516 27.838 24.7901 27.6881 25.6104 27.4327C28.499 26.5346 30.0692 24.4959 30.4841 21.4478C30.6924 19.9184 30.7209 18.4038 30.1397 16.9399C29.8823 16.2931 29.5379 15.6971 29.085 15.1772C28.9416 15.0126 28.9282 14.8767 28.9899 14.672C29.3993 13.3179 29.2695 11.9858 28.8245 10.6644C28.7453 10.4302 28.6099 10.3901 28.408 10.3942C27.6138 10.4097 26.8853 10.6783 26.1734 11.0082C25.5479 11.2981 24.9524 11.6477 24.3839 12.0439C24.2287 12.152 24.0965 12.1708 23.912 12.1225C21.3053 11.4471 18.6939 11.4413 16.088 12.1225C15.8631 12.1815 15.7182 12.1184 15.5472 12.0063C14.4656 11.2948 13.3523 10.6562 12.0632 10.4368C12.037 10.4327 12.0117 10.4253 11.9856 10.4204C11.3125 10.314 11.2341 10.3598 11.0401 11.0361C10.6878 12.265 10.6213 13.4996 11.0085 14.7359C11.0512 14.8726 11.0679 14.975 10.9594 15.101C9.46837 16.8359 9.18252 18.8999 9.44541 21.108C9.5436 21.9341 9.71463 22.7439 10.0195 23.5192C10.9024 25.7699 12.6135 26.9742 14.806 27.5735C15.4807 27.7577 16.1696 27.8658 16.9242 27.9722C16.3438 28.6108 16.0381 29.3297 15.9186 30.1345C15.8948 30.2942 15.7721 30.3097 15.6683 30.3547C13.7917 31.1661 12.1455 30.6298 11.0528 28.8556C10.5167 27.9845 9.81281 27.3426 8.80562 27.1224C8.53006 27.0618 8.25688 27.061 7.98608 27.156C7.70103 27.2559 7.67885 27.4376 7.8586 27.6488C7.98846 27.8003 8.13653 27.9469 8.3036 28.05C9.19282 28.601 9.75501 29.4304 10.1335 30.3932C10.7392 31.9341 11.9096 32.6267 13.4283 32.8019C14.1251 32.8821 14.8274 32.8437 15.5131 32.6832C15.776 32.6218 15.8512 32.6676 15.8481 32.9558C15.837 33.8556 15.8544 34.7562 15.8592 35.656C15.8631 36.4673 15.3627 36.8431 14.6041 36.5828C12.6974 35.927 10.9602 34.9429 9.41453 33.6182C5.9701 30.6699 3.92087 26.8973 3.4339 22.2993C2.57873 14.2258 7.25127 6.79671 14.7229 4.22427C23.8756 1.073 33.6981 6.56665 36.1441 16.2047C38.3105 24.7391 33.5493 33.7901 25.4291 36.5746C24.6223 36.8513 24.129 36.4952 24.1297 35.629C24.1313 34.1151 24.1487 32.6013 24.14 31.0875C24.1329 29.9413 23.889 28.8712 23.0252 27.9583H23.0244Z' fill='none' className={filledClassName} />
+          <path opacity='0.1' d='M15.441 30.8083C15.597 30.8312 15.7672 30.8648 15.7427 31.058C15.7173 31.2611 15.5384 31.3274 15.3586 31.3331C15.2082 31.338 15.0427 31.2946 15.0482 31.1055C15.0554 30.8574 15.2636 30.837 15.441 30.8083V30.8083Z' fill='none' className={filledClassName} />
+          <path opacity='0.1' d='M11.6748 30.6257C11.4839 30.5922 11.3398 30.4775 11.3121 30.2458C11.2947 30.0993 11.3628 30.0117 11.5101 30.019C11.754 30.0313 11.8917 30.1844 11.9218 30.4194C11.94 30.561 11.8379 30.6323 11.6748 30.6265V30.6257Z' fill='none' className={filledClassName} />
+          <path opacity='0.1' d='M14.1286 30.9794C14.2917 30.9999 14.4801 31.0261 14.4714 31.2324C14.4627 31.4494 14.2695 31.5001 14.0929 31.4911C13.933 31.4829 13.7596 31.4281 13.7754 31.216C13.7913 31.0056 13.9758 31.0007 14.1286 30.9794V30.9794Z' fill='none' className={filledClassName} />
+          <path d='M12.7294 30.7575C12.9163 30.7698 13.0968 30.8468 13.1135 31.0646C13.1285 31.2561 12.9559 31.2864 12.8054 31.275C12.6122 31.2594 12.4325 31.1923 12.4325 30.954C12.4325 30.778 12.5806 30.76 12.7294 30.7575Z' fill='none' className={filledClassName} />
+          <path d='M11.0483 29.4099C11.0491 29.5336 11.015 29.6392 10.8812 29.6375C10.6595 29.6343 10.5581 29.4836 10.5312 29.2757C10.5162 29.157 10.5557 29.0481 10.6919 29.0497C10.916 29.0522 11.0023 29.2151 11.0483 29.4108V29.4099Z' fill='none' className={filledClassName} />
+          <path d='M10.3655 28.4676C10.3758 28.5994 10.3164 28.6723 10.2111 28.6714C10.0321 28.6706 9.91733 28.5658 9.88883 28.3824C9.86903 28.2588 9.91654 28.1524 10.0512 28.1671C10.223 28.1868 10.3243 28.3104 10.3655 28.4676V28.4676Z' fill='none' className={filledClassName} />
+          <path d='M9.65675 27.7921C9.64963 27.9198 9.56253 27.9616 9.4683 27.9526C9.34874 27.9403 9.22838 27.8904 9.19829 27.7528C9.17295 27.6349 9.25372 27.5784 9.35982 27.5776C9.50552 27.5768 9.60529 27.6529 9.65675 27.7921V27.7921Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+SocialGitHubIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+SocialGitHubIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default SocialGitHubIcon

package/src/components/icons/SocialGitLabIcon.jsx

@@ -0,0 +1,122 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const SocialGitLabIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <g clip-path='url(#clip0_852_2118)'>
+            <path d='M8.21846 13.8988L8.21422 13.9059C8.25805 13.9031 8.30046 13.8932 8.34146 13.8763C10.4339 12.5321 12.3863 10.9935 14.4122 9.55918C14.6483 9.39151 14.7233 9.16467 14.62 8.88005C14.3755 8.19951 14.1394 7.51616 13.899 6.83421C13.9047 6.78631 13.8905 6.74404 13.858 6.7074C13.4183 5.30265 12.9843 3.89648 12.5319 2.49596C12.4725 2.31138 12.4753 2.01831 12.211 1.99999C11.8929 1.97745 11.8872 2.28602 11.8179 2.49736C11.3542 3.89648 10.8962 5.29701 10.4353 6.69613L10.4409 6.68909C8.81084 6.68909 7.17934 6.68909 5.54925 6.68768L5.55349 6.69472C5.08412 5.27306 4.61192 3.8514 4.14537 2.42973C4.08741 2.25079 4.06479 2.03381 3.84282 2.0014C3.58976 1.96618 3.5629 2.19021 3.50634 2.36774C3.04687 3.81476 2.58598 5.26179 2.12508 6.7074C2.09115 6.74263 2.07702 6.78349 2.08267 6.83139C1.85223 7.49221 1.63168 8.15724 1.38709 8.81242C1.25985 9.1534 1.34609 9.39856 1.63168 9.60427C3.635 11.0372 5.63691 12.4715 7.64023 13.9045C7.73071 13.9651 7.82119 14.0242 7.91167 14.0848C7.9654 14.1849 8.01912 14.1849 8.07567 14.0876C8.12233 14.0242 8.16898 13.9594 8.21564 13.896L8.21846 13.8988Z' fill='none' className={filledClassName} />
+            <path d='M5.55212 6.69049C7.18221 6.69049 8.81371 6.69049 10.4438 6.6919C9.90514 8.31082 9.33963 9.9227 8.83916 11.5529C8.60164 12.3264 8.20861 13.0661 8.21427 13.9059L8.21851 13.8988C8.17185 13.9622 8.1252 14.0271 8.07854 14.0905C8.02199 14.1877 7.96686 14.1877 7.91455 14.0876C7.84951 13.8411 7.7972 13.5903 7.71803 13.3479C6.99842 11.1274 6.27456 8.90964 5.55354 6.69049H5.55212Z' fill='none' className={filledClassName} />
+            <path d='M5.55205 6.6905C6.27449 8.90965 6.99834 11.1288 7.71654 13.3479C7.79571 13.5903 7.84802 13.8411 7.91306 14.0877C7.82258 14.0271 7.73209 13.9679 7.64303 13.9073C7.64303 13.7594 7.57658 13.6438 7.48468 13.5283C6.45545 12.2278 5.45309 10.9062 4.39841 9.62682C3.62931 8.69407 2.9917 7.65284 2.08405 6.83281C2.0784 6.7849 2.09112 6.74263 2.12647 6.70882C3.27021 6.70459 4.41255 6.69895 5.55629 6.69473L5.55205 6.68768V6.6905Z' fill='none' className={filledClassName} />
+            <path d='M8.21417 13.9059C8.20852 13.0662 8.60155 12.3279 8.83906 11.5529C9.33954 9.92131 9.90505 8.31085 10.4437 6.69193C10.4437 6.69193 10.438 6.69756 10.438 6.69897C11.579 6.7032 12.7199 6.70602 13.8594 6.71024C13.8919 6.74688 13.906 6.78774 13.9004 6.83705C13.7887 6.92018 13.653 6.98358 13.571 7.08926C12.5262 8.42779 11.4871 9.77196 10.4494 11.1161C9.74105 12.0334 8.95216 12.8886 8.34141 13.8777C8.30041 13.8932 8.258 13.9031 8.21417 13.9073V13.9059Z' fill='none' className={filledClassName} />
+            <path d='M2.08556 6.83563C2.9932 7.65425 3.6294 8.6969 4.39991 9.62964C5.45459 10.909 6.45695 12.2306 7.48618 13.5311C7.57808 13.6467 7.64453 13.7608 7.64453 13.9101C5.64262 12.4758 3.6393 11.0414 1.63597 9.60992C1.34898 9.40562 1.26415 9.15904 1.39139 8.81807C1.63597 8.16289 1.85652 7.49785 2.08697 6.83704L2.08556 6.83563Z' fill='none' className={filledClassName} />
+            <path d='M8.34143 13.8777C8.95218 12.8872 9.74248 12.032 10.4494 11.1161C11.4871 9.77194 12.5248 8.42778 13.571 7.08924C13.653 6.98357 13.7901 6.92017 13.9004 6.83704C14.1393 7.51898 14.3768 8.20234 14.6214 8.88288C14.7232 9.16749 14.6497 9.39434 14.4136 9.56201C12.3862 10.9964 10.4338 12.535 8.34284 13.8791L8.34143 13.8777Z' fill='none' className={filledClassName} />
+            <path d='M5.55775 6.69755C4.41401 6.70177 3.27168 6.70741 2.12793 6.71164C2.58882 5.26461 3.04971 3.81759 3.50919 2.37056C3.56574 2.19303 3.5926 1.96759 3.84567 2.00423C4.06763 2.03523 4.09025 2.25362 4.14822 2.43256C4.61476 3.85563 5.08697 5.27588 5.55634 6.69755H5.55775Z' fill='none' className={filledClassName} />
+            <path d='M13.8608 6.71023C12.7199 6.706 11.579 6.70318 10.4395 6.69895C10.8989 5.29843 11.3584 3.8979 11.8221 2.50019C11.8928 2.28884 11.8985 1.98027 12.2152 2.00282C12.4795 2.02113 12.4767 2.31561 12.5361 2.49878C12.9885 3.89931 13.4225 5.30547 13.8622 6.71023H13.8608Z' fill='none' className={filledClassName} />
+            <path d='M8.07849 14.0919C8.12515 14.0285 8.1718 13.9637 8.21846 13.9003C8.1718 13.9637 8.12515 14.0285 8.07849 14.0919Z' fill='none' className={filledClassName} />
+          </g>
+          <defs>
+            <clipPath id='clip0_852_2118'>
+              <rect width={13.3333} height={12.1637} fill='none' className={filledClassName} transform='translate(1.33337 2)' />
+            </clipPath>
+          </defs>
+
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <g clip-path='url(#clip0_315_245)'>
+            <path d='M12.3277 20.8483L12.3213 20.8589C12.3871 20.8546 12.4507 20.8398 12.5122 20.8145C15.6508 18.7982 18.5794 16.4903 21.6183 14.3388C21.9725 14.0873 22.0849 13.747 21.9301 13.3201C21.5632 12.2993 21.209 11.2743 20.8485 10.2513C20.857 10.1795 20.8358 10.1161 20.787 10.0611C20.1275 7.95399 19.4765 5.84474 18.7978 3.74395C18.7088 3.46708 18.713 3.02748 18.3165 3.00001C17.8393 2.96619 17.8308 3.42904 17.7269 3.74606C17.0313 5.84474 16.3442 7.94553 15.6529 10.0442L15.6614 10.0336C13.2163 10.0336 10.769 10.0336 8.32388 10.0315L8.33024 10.0421C7.62618 7.9096 6.91788 5.77711 6.21806 3.64462C6.13111 3.3762 6.09718 3.05073 5.76424 3.00212C5.38464 2.94928 5.34434 3.28532 5.25952 3.55162C4.5703 5.72216 3.87896 7.8927 3.18763 10.0611C3.13673 10.114 3.11552 10.1752 3.12401 10.2471C2.77834 11.2383 2.44751 12.2359 2.08064 13.2186C1.88978 13.7301 2.01914 14.0979 2.44751 14.4064C5.4525 16.5558 8.45536 18.7073 11.4603 20.8567C11.5961 20.9476 11.7318 21.0364 11.8675 21.1273C11.9481 21.2773 12.0287 21.2773 12.1135 21.1315C12.1835 21.0364 12.2535 20.9392 12.3235 20.8441L12.3277 20.8483Z' fill='none' className={filledClassName} />
+            <path d='M8.32812 10.0358C10.7733 10.0358 13.2205 10.0358 15.6656 10.0379C14.8577 12.4663 14.0094 14.8841 13.2587 17.3294C12.9024 18.4897 12.3129 19.5992 12.3213 20.8589L12.3277 20.8483C12.2577 20.9434 12.1877 21.0406 12.1178 21.1357C12.0329 21.2816 11.9502 21.2816 11.8718 21.1315C11.7742 20.7616 11.6957 20.3854 11.577 20.0219C10.4976 16.6911 9.41179 13.3645 8.33025 10.0358H8.32812Z' fill='none' className={filledClassName} />
+            <path d='M8.32807 10.0358C9.41173 13.3645 10.4975 16.6932 11.5748 20.0219C11.6936 20.3854 11.772 20.7616 11.8696 21.1315C11.7339 21.0406 11.5981 20.9518 11.4645 20.861C11.4645 20.639 11.3649 20.4657 11.227 20.2924C9.68318 18.3417 8.17963 16.3593 6.59761 14.4402C5.44397 13.0411 4.48755 11.4793 3.12608 10.2492C3.1176 10.1774 3.13668 10.1139 3.1897 10.0632C4.90532 10.0569 6.61882 10.0484 8.33444 10.0421L8.32807 10.0315V10.0358Z' fill='none' className={filledClassName} />
+            <path d='M12.3213 20.8589C12.3128 19.5992 12.9023 18.4918 13.2586 17.3294C14.0093 14.882 14.8576 12.4663 15.6655 10.0379C15.6655 10.0379 15.6571 10.0463 15.6571 10.0484C17.3684 10.0548 19.0798 10.059 20.7891 10.0653C20.8379 10.1203 20.8591 10.1816 20.8506 10.2556C20.683 10.3803 20.4795 10.4754 20.3565 10.6339C18.7893 12.6417 17.2306 14.6579 15.674 16.6742C14.6116 18.05 13.4282 19.3329 12.5121 20.8166C12.4506 20.8398 12.387 20.8546 12.3213 20.861V20.8589Z' fill='none' className={filledClassName} />
+            <path d='M3.12815 10.2534C4.48962 11.4814 5.44392 13.0453 6.59968 14.4445C8.1817 16.3635 9.68525 18.3459 11.2291 20.2967C11.3669 20.47 11.4666 20.6412 11.4666 20.8652C8.46375 18.7137 5.45876 16.5622 2.45378 14.4149C2.02328 14.1084 1.89604 13.7386 2.0869 13.2271C2.45378 12.2443 2.7846 11.2468 3.13027 10.2556L3.12815 10.2534Z' fill='none' className={filledClassName} />
+            <path d='M12.5121 20.8166C13.4282 19.3308 14.6137 18.0479 15.674 16.6742C17.2306 14.6579 18.7871 12.6417 20.3564 10.6339C20.4794 10.4754 20.6851 10.3802 20.8505 10.2556C21.2089 11.2785 21.5652 12.3035 21.9321 13.3243C22.0848 13.7512 21.9745 14.0915 21.6203 14.343C18.5793 16.4945 15.6507 18.8024 12.5142 20.8187L12.5121 20.8166Z' fill='none' className={filledClassName} />
+            <path d='M8.33651 10.0463C6.62089 10.0526 4.90739 10.0611 3.19177 10.0674C3.88311 7.8969 4.57445 5.72637 5.26366 3.55583C5.34849 3.28953 5.38878 2.95138 5.76838 3.00633C6.10133 3.05282 6.13526 3.38041 6.2222 3.64882C6.92202 5.78343 7.63033 7.91381 8.33439 10.0463H8.33651Z' fill='none' className={filledClassName} />
+            <path d='M20.7912 10.0653C19.0798 10.059 17.3684 10.0548 15.6592 10.0484C16.3484 7.94764 17.0376 5.84685 17.7332 3.75028C17.8392 3.43326 17.8477 2.97041 18.3227 3.00422C18.7193 3.0317 18.7151 3.47342 18.8041 3.74817C19.4827 5.84896 20.1338 7.95821 20.7933 10.0653H20.7912Z' fill='none' className={filledClassName} />
+            <path d='M12.1177 21.1378C12.1877 21.0427 12.2576 20.9455 12.3276 20.8504C12.2576 20.9455 12.1877 21.0427 12.1177 21.1378Z' fill='none' className={filledClassName} />
+          </g>
+          <defs>
+            <clipPath id='clip0_315_245'>
+              <rect width={20} height={18.2456} fill='none' className={filledClassName} transform='translate(2 3)' />
+            </clipPath>
+          </defs>
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <g clip-path='url(#clip0_852_2190)'>
+            <path d='M20.5462 34.7471L20.5356 34.7647C20.6451 34.7577 20.7512 34.733 20.8537 34.6908C26.0846 31.3304 30.9657 27.4838 36.0306 23.898C36.6208 23.4788 36.8081 22.9117 36.5501 22.2001C35.9387 20.4988 35.3484 18.7904 34.7476 17.0855C34.7617 16.9658 34.7263 16.8601 34.6451 16.7685C33.5458 13.2566 32.4608 9.74122 31.3297 6.2399C31.1813 5.77846 31.1884 5.04579 30.5274 5C29.7322 4.94364 29.718 5.71506 29.5449 6.24343C28.3856 9.74122 27.2404 13.2425 26.0882 16.7403L26.1023 16.7227C22.0271 16.7227 17.9483 16.7227 13.8731 16.7192L13.8837 16.7368C12.7103 13.1827 11.5298 9.62851 10.3634 6.07435C10.2185 5.627 10.162 5.08454 9.60706 5.00352C8.97439 4.91546 8.90724 5.47553 8.76586 5.91936C7.61717 9.53692 6.46494 13.1545 5.31271 16.7685C5.22788 16.8566 5.19254 16.9587 5.20668 17.0785C4.63056 18.7305 4.07919 20.3931 3.46773 22.0311C3.14963 22.8835 3.36523 23.4964 4.07919 24.0107C9.0875 27.593 14.0923 31.1789 19.1006 34.7612C19.3268 34.9127 19.553 35.0606 19.7792 35.2121C19.9135 35.4622 20.0478 35.4622 20.1892 35.2191C20.3058 35.0606 20.4225 34.8986 20.5391 34.7401L20.5462 34.7471Z' fill='none' className={filledClassName} />
+            <path d='M13.8801 16.7263C17.9553 16.7263 22.0341 16.7263 26.1093 16.7298C24.7627 20.7771 23.3489 24.8068 22.0977 28.8823C21.5039 30.8161 20.5213 32.6654 20.5355 34.7647L20.5461 34.7471C20.4295 34.9056 20.3128 35.0677 20.1962 35.2262C20.0548 35.4692 19.917 35.4692 19.7862 35.2191C19.6236 34.6027 19.4928 33.9757 19.2949 33.3699C17.4959 27.8185 15.6862 22.2741 13.8837 16.7263H13.8801Z' fill='none' className={filledClassName} />
+            <path d='M13.8801 16.7263C15.6862 22.2741 17.4959 27.822 19.2914 33.3699C19.4893 33.9757 19.6201 34.6027 19.7826 35.2191C19.5564 35.0677 19.3302 34.9197 19.1076 34.7683C19.1076 34.3984 18.9414 34.1096 18.7117 33.8207C16.1386 30.5695 13.6327 27.2654 10.996 24.067C9.07328 21.7352 7.47925 19.1321 5.21013 17.082C5.196 16.9623 5.22781 16.8566 5.31617 16.772C8.17553 16.7615 11.0314 16.7474 13.8907 16.7368L13.8801 16.7192V16.7263Z' fill='none' className={filledClassName} />
+            <path d='M20.5356 34.7647C20.5214 32.6654 21.504 30.8196 22.0978 28.8822C23.349 24.8032 24.7627 20.7771 26.1094 16.7298C26.1094 16.7298 26.0952 16.7439 26.0952 16.7474C28.9475 16.7579 31.7998 16.765 34.6486 16.7756C34.7299 16.8671 34.7652 16.9693 34.7511 17.0926C34.4719 17.3004 34.1326 17.4589 33.9276 17.7231C31.3156 21.0694 28.7178 24.4299 26.1235 27.7903C24.3528 30.0834 22.3805 32.2215 20.8537 34.6943C20.7512 34.733 20.6451 34.7577 20.5356 34.7683V34.7647Z' fill='none' className={filledClassName} />
+            <path d='M5.2137 17.0891C7.48282 19.1356 9.07332 21.7422 10.9996 24.0741C13.6363 27.2725 16.1422 30.5766 18.7153 33.8278C18.945 34.1166 19.1111 34.4019 19.1111 34.7753C14.1064 31.1895 9.09806 27.6036 4.08975 24.0248C3.37226 23.514 3.16019 22.8976 3.47829 22.0452C4.08975 20.4072 4.64112 18.7446 5.21724 17.0926L5.2137 17.0891Z' fill='none' className={filledClassName} />
+            <path d='M20.8536 34.6943C22.3805 32.218 24.3563 30.0799 26.1235 27.7903C28.7178 24.4299 31.3121 21.0694 33.9275 17.7231C34.1325 17.4589 34.4754 17.3004 34.7511 17.0926C35.3484 18.7975 35.9422 20.5058 36.5536 22.2072C36.8081 22.9187 36.6243 23.4858 36.0341 23.905C30.9657 27.4909 26.0846 31.3374 20.8572 34.6978L20.8536 34.6943Z' fill='none' className={filledClassName} />
+            <path d='M13.8943 16.7439C11.0349 16.7544 8.17907 16.7685 5.3197 16.7791C6.47193 13.1615 7.62416 9.54395 8.77285 5.92639C8.91423 5.48256 8.98139 4.91897 9.61405 5.01056C10.169 5.08805 10.2255 5.63403 10.3704 6.08138C11.5368 9.63906 12.7173 13.1897 13.8907 16.7439H13.8943Z' fill='none' className={filledClassName} />
+            <path d='M34.6521 16.7756C31.7998 16.765 28.9475 16.758 26.0988 16.7474C27.2474 13.2461 28.3961 9.74474 29.5554 6.25047C29.7322 5.7221 29.7463 4.95068 30.538 5.00704C31.199 5.05283 31.1919 5.78903 31.3403 6.24695C32.4714 9.74827 33.5564 13.2637 34.6556 16.7756H34.6521Z' fill='none' className={filledClassName} />
+            <path d='M20.1962 35.2297C20.3128 35.0712 20.4294 34.9092 20.5461 34.7507C20.4294 34.9092 20.3128 35.0712 20.1962 35.2297Z' fill='none' className={filledClassName} />
+          </g>
+          <defs>
+            <clipPath id='clip0_852_2190'>
+              <rect width={33.3333} height={30.4094} fill='none' className={filledClassName} transform='translate(3.33337 5)' />
+            </clipPath>
+          </defs>
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+SocialGitLabIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+SocialGitLabIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default SocialGitLabIcon

package/src/components/icons/SocialLinkedInIcon.jsx

@@ -0,0 +1,85 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const SocialLinkedInIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M8.85245 6.37308C9.03468 6.21417 9.1975 6.07417 9.37488 5.94989C9.91581 5.57035 10.5143 5.35729 11.1872 5.32819C11.9873 5.29355 12.7111 5.47866 13.3491 5.95804C14.0401 6.47699 14.4315 7.15865 14.5825 7.97914C14.6571 8.38429 14.6659 8.79294 14.6653 9.20304C14.6626 10.7451 14.6629 12.2871 14.6668 13.8291C14.6671 13.9548 14.6441 14.0017 14.4973 14C13.7751 13.9918 13.0525 13.9933 12.3303 13.9991C12.2047 14.0003 12.1711 13.9694 12.1714 13.8477C12.1759 12.3252 12.179 10.8024 12.1708 9.27988C12.169 8.92508 12.1487 8.5662 12.0377 8.22276C11.8554 7.65839 11.4964 7.29865 10.8448 7.23927C9.9428 7.15719 9.09896 7.73523 8.90885 8.6218C8.87641 8.77256 8.85094 8.92362 8.85094 9.07905C8.85275 10.6598 8.84942 12.2408 8.85639 13.8215C8.857 13.9746 8.81031 14.0011 8.66385 13.9997C7.94161 13.9924 7.21906 13.9936 6.49681 13.9991C6.37644 14 6.33368 13.9781 6.33399 13.8515C6.33793 11.1019 6.33793 8.35257 6.33429 5.60294C6.33429 5.48274 6.36704 5.44694 6.49408 5.4481C7.23149 5.45363 7.9692 5.45363 8.70661 5.4481C8.83153 5.44723 8.85791 5.4871 8.85457 5.59712C8.84699 5.84714 8.85215 6.09745 8.85215 6.37367L8.85245 6.37308Z' fill='none' className={filledClassName} />
+          <path d='M4.02835 9.73363C4.02835 11.1054 4.02653 12.4768 4.03139 13.8486C4.03169 13.97 3.99955 14.0005 3.87372 13.9994C3.14662 13.9933 2.41952 13.9944 1.69242 13.9985C1.58145 13.9991 1.53809 13.9819 1.53809 13.86C1.54203 11.1022 1.54203 8.34441 1.53869 5.58635C1.53869 5.47865 1.56537 5.44693 1.68029 5.4478C2.4174 5.45304 3.1545 5.45333 3.89191 5.4478C4.01228 5.44693 4.03078 5.48709 4.03048 5.58984C4.02714 6.9712 4.02835 8.35256 4.02835 9.73392V9.73363Z' fill='none' className={filledClassName} />
+          <path d='M1.33576 3.39963C1.28846 2.69149 1.95097 1.97257 2.8324 2.00081C3.635 2.02671 4.25628 2.62425 4.26174 3.41797C4.26689 4.16948 3.5968 4.85259 2.71506 4.8101C1.99494 4.77546 1.29391 4.19043 1.33576 3.39963Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M13.2787 9.55961C13.552 9.32123 13.7963 9.11124 14.0623 8.92481C14.8737 8.3555 15.7715 8.03592 16.7808 7.99226C17.981 7.94031 19.0667 8.21798 20.0236 8.93704C21.0601 9.71547 21.6473 10.738 21.8738 11.9687C21.9857 12.5764 21.9989 13.1894 21.9979 13.8045C21.9939 16.1176 21.9943 18.4306 22.0002 20.7437C22.0007 20.9323 21.9661 21.0025 21.746 20.9999C20.6626 20.9877 19.5788 20.9899 18.4954 20.9986C18.3071 21.0004 18.2566 20.9541 18.2571 20.7716C18.2639 18.4878 18.2685 16.2036 18.2562 13.9198C18.2535 13.3876 18.223 12.8493 18.0565 12.3341C17.7832 11.4876 17.2447 10.948 16.2673 10.8589C14.9142 10.7358 13.6484 11.6028 13.3633 12.9327C13.3146 13.1588 13.2764 13.3854 13.2764 13.6186C13.2791 15.9897 13.2741 18.3612 13.2846 20.7323C13.2855 20.9619 13.2155 21.0017 12.9958 20.9995C11.9124 20.9886 10.8286 20.9903 9.74521 20.9986C9.56465 20.9999 9.50052 20.9672 9.50098 20.7773C9.50689 16.6528 9.50689 12.5288 9.50143 8.4044C9.50143 8.22409 9.55055 8.17039 9.74112 8.17214C10.8472 8.18043 11.9538 8.18043 13.0599 8.17214C13.2473 8.17083 13.2869 8.23064 13.2819 8.39567C13.2705 8.7707 13.2782 9.14616 13.2782 9.56048L13.2787 9.55961Z' fill='none' className={filledClassName} />
+          <path d='M6.04253 14.6004C6.04253 16.6581 6.0398 18.7153 6.04708 20.7729C6.04753 20.9549 5.99932 21.0008 5.81057 20.999C4.71993 20.9899 3.62928 20.9916 2.53863 20.9977C2.37217 20.9986 2.30713 20.9728 2.30713 20.7899C2.31304 16.6533 2.31304 12.5166 2.30804 8.3795C2.30804 8.21797 2.34806 8.17038 2.52044 8.17169C3.62609 8.17955 4.73175 8.17998 5.83786 8.17169C6.01842 8.17038 6.04617 8.23063 6.04571 8.38474C6.04071 10.4568 6.04253 12.5288 6.04253 14.6009V14.6004Z' fill='none' className={filledClassName} />
+          <path d='M2.00357 5.09944C1.93262 4.03723 2.92639 2.95886 4.24854 3.00121C5.45244 3.04006 6.38436 3.93638 6.39254 5.12695C6.40028 6.25422 5.39513 7.27888 4.07253 7.21514C2.99234 7.16319 1.94081 6.28565 2.00357 5.09944Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M22.1311 15.9327C22.5867 15.5354 22.9938 15.1854 23.4372 14.8747C24.7895 13.9259 26.2859 13.3932 27.9679 13.3204C29.9684 13.2339 31.7778 13.6966 33.3727 14.8951C35.1002 16.1925 36.0788 17.8966 36.4563 19.9478C36.6428 20.9607 36.6648 21.9823 36.6632 23.0076C36.6564 26.8626 36.6572 30.7177 36.667 34.5728C36.6678 34.8871 36.6102 35.0043 36.2433 34.9999C34.4377 34.9795 32.6313 34.9832 30.8257 34.9977C30.5119 35.0006 30.4277 34.9235 30.4285 34.6193C30.4399 30.813 30.4474 27.006 30.427 23.1997C30.4224 22.3127 30.3716 21.4155 30.0942 20.5569C29.6386 19.146 28.7411 18.2466 27.1121 18.0982C24.857 17.893 22.7474 19.3381 22.2721 21.5545C22.191 21.9314 22.1273 22.309 22.1273 22.6976C22.1319 26.6494 22.1235 30.602 22.141 34.5538C22.1425 34.9366 22.0258 35.0028 21.6596 34.9992C19.854 34.981 18.0476 34.9839 16.242 34.9977C15.9411 34.9999 15.8342 34.9453 15.835 34.6288C15.8448 27.7547 15.8448 20.8814 15.8357 14.0073C15.8357 13.7068 15.9176 13.6173 16.2352 13.6202C18.0787 13.6341 19.923 13.6341 21.7665 13.6202C22.0788 13.6181 22.1448 13.7177 22.1364 13.9928C22.1175 14.6178 22.1304 15.2436 22.1304 15.9341L22.1311 15.9327Z' fill='none' className={filledClassName} />
+          <path d='M10.0709 24.3341C10.0709 27.7634 10.0663 31.1921 10.0785 34.6215C10.0792 34.9249 9.99887 35.0013 9.68429 34.9984C7.86654 34.9831 6.0488 34.986 4.23105 34.9962C3.95361 34.9977 3.84521 34.9548 3.84521 34.6499C3.85507 27.7554 3.85507 20.861 3.84673 13.9658C3.84673 13.6966 3.91344 13.6173 4.20073 13.6195C6.04349 13.6326 7.88625 13.6333 9.72977 13.6195C10.0307 13.6173 10.0769 13.7177 10.0762 13.9746C10.0679 17.428 10.0709 20.8814 10.0709 24.3348V24.3341Z' fill='none' className={filledClassName} />
+          <path d='M3.33933 8.49907C3.22108 6.72871 4.87737 4.93143 7.08095 5.00201C9.08744 5.06677 10.6406 6.56063 10.6543 8.54491C10.6672 10.4237 8.99193 12.1315 6.78759 12.0252C4.98728 11.9386 3.23472 10.4761 3.33933 8.49907Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+SocialLinkedInIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+SocialLinkedInIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default SocialLinkedInIcon

package/src/components/icons/SocialNPMIcon.jsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const SocialNPMIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M1.33325 5.33334H14.6666V9.77779H7.99992V10.5185H5.03696V9.77779H1.33325V5.33334ZM2.07399 9.03705H3.55547V6.81483H4.29621V9.03705H5.03696V6.07408H2.07399V9.03705ZM5.7777 6.07408V9.77779H7.25918V9.03705H8.74066V6.07408H5.7777ZM7.25918 6.81483H7.99992V8.29631H7.25918V6.81483ZM9.4814 6.07408V9.03705H10.9629V6.81483H11.7036V9.03705H12.4444V6.81483H13.1851V9.03705H13.9258V6.07408H9.4814Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M2 8H22V14.6667H12V15.7778H7.55556V14.6667H2V8ZM3.11111 13.5556H5.33333V10.2222H6.44444V13.5556H7.55556V9.11111H3.11111V13.5556ZM8.66667 9.11111V14.6667H10.8889V13.5556H13.1111V9.11111H8.66667ZM10.8889 10.2222H12V12.4444H10.8889V10.2222ZM14.2222 9.11111V13.5556H16.4444V10.2222H17.5556V13.5556H18.6667V10.2222H19.7778V13.5556H20.8889V9.11111H14.2222Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M3.33325 13.3333H36.6666V24.4445H19.9999V26.2963H12.5925V24.4445H3.33325V13.3333ZM5.1851 22.5926H8.88881V17.037H10.7407V22.5926H12.5925V15.1852H5.1851V22.5926ZM14.4444 15.1852V24.4445H18.1481V22.5926H21.8518V15.1852H14.4444ZM18.1481 17.037H19.9999V20.7408H18.1481V17.037ZM23.7036 15.1852V22.5926H27.4073V17.037H29.2592V22.5926H31.111V17.037H32.9629V22.5926H34.8147V15.1852H23.7036Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+SocialNPMIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+SocialNPMIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default SocialNPMIcon

package/src/components/icons/SocialTwitterIcon.jsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const SocialTwitterIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M14.6666 3.92407C14.1674 4.14221 13.6376 4.28522 13.0952 4.34833C13.6657 4.01139 14.0923 3.48149 14.2953 2.85751C13.7588 3.17265 13.1713 3.39479 12.5585 3.51426C12.1458 3.08286 11.6004 2.79736 11.0065 2.70189C10.4126 2.60641 9.80328 2.70627 9.27276 2.98603C8.74223 3.2658 8.32001 3.70989 8.07134 4.24969C7.82267 4.78949 7.76139 5.39494 7.89697 5.97247C6.80927 5.91774 5.7454 5.63833 4.7744 5.15239C3.8034 4.66644 2.94697 3.98481 2.26069 3.15173C1.91173 3.74501 1.80505 4.44686 1.9623 5.1148C2.11956 5.78274 2.52897 6.36669 3.1074 6.74809C2.67233 6.7355 2.24666 6.62042 1.86601 6.41249C1.86601 6.42366 1.86601 6.43548 1.86601 6.44665C1.86649 7.0696 2.0859 7.67318 2.48697 8.15482C2.88804 8.63646 3.44603 8.96646 4.06612 9.08875C3.66325 9.19645 3.24078 9.2124 2.83072 9.13538C3.00541 9.67082 3.34567 10.1391 3.80389 10.4746C4.26211 10.8101 4.81535 10.996 5.38618 11.0065C4.41654 11.7564 3.2188 12.1629 1.98601 12.1604C1.76788 12.1603 1.54993 12.1476 1.33331 12.1223C2.58405 12.9144 4.03994 13.3348 5.52686 13.3333C10.5584 13.3333 13.3099 9.22732 13.3099 5.66577C13.3099 5.54887 13.3099 5.43262 13.3026 5.31704C13.8376 4.93621 14.2996 4.46452 14.6666 3.92407V3.92407Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M22 5.88612C21.2511 6.21333 20.4565 6.42785 19.6429 6.52251C20.4986 6.0171 21.1384 5.22225 21.443 4.28628C20.6382 4.759 19.757 5.0922 18.8378 5.2714C18.2188 4.6243 17.4006 4.19606 16.5098 4.05284C15.6189 3.90963 14.705 4.05942 13.9092 4.47907C13.1134 4.89871 12.48 5.56486 12.107 6.37455C11.734 7.18425 11.6421 8.09242 11.8455 8.95872C10.2139 8.87662 8.61813 8.45751 7.16163 7.72859C5.70513 6.99967 4.42049 5.97723 3.39107 4.72762C2.86763 5.61752 2.7076 6.67031 2.94349 7.67222C3.17937 8.67413 3.79348 9.55006 4.66113 10.1222C4.00853 10.1033 3.37001 9.93065 2.79904 9.61876C2.79904 9.6355 2.79904 9.65324 2.79904 9.66998C2.79976 10.6044 3.12888 11.5098 3.73049 12.2322C4.33209 12.9547 5.16907 13.4497 6.09921 13.6331C5.4949 13.7947 4.86119 13.8186 4.24611 13.7031C4.50814 14.5062 5.01854 15.2086 5.70586 15.7118C6.39319 16.2151 7.22305 16.4941 8.0793 16.5097C6.62485 17.6346 4.82824 18.2443 2.97905 18.2406C2.65184 18.2405 2.32493 18.2214 2 18.1834C3.8761 19.3716 6.05994 20.0023 8.29032 20C15.8377 20 19.9649 13.841 19.9649 8.49867C19.9649 8.32332 19.9649 8.14895 19.9539 7.97557C20.7565 7.40433 21.4494 6.69679 22 5.88612Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M36.6667 9.81019C35.4185 10.3555 34.0942 10.7131 32.7382 10.8708C34.1644 10.0285 35.2308 8.70374 35.7383 7.14379C34.397 7.93165 32.9284 8.487 31.3964 8.78566C30.3647 7.70716 29.001 6.99342 27.5163 6.75473C26.0315 6.51604 24.5083 6.76569 23.182 7.4651C21.8557 8.16451 20.8001 9.27475 20.1784 10.6242C19.5568 11.9737 19.4036 13.4874 19.7425 14.9312C17.0233 14.7944 14.3636 14.0958 11.9361 12.881C9.5086 11.6661 7.36753 9.96204 5.65182 7.87935C4.77942 9.36253 4.51271 11.1172 4.90585 12.787C5.29899 14.4569 6.32251 15.9167 7.7686 16.8702C6.68092 16.8388 5.61673 16.5511 4.66511 16.0313C4.66511 16.0592 4.66511 16.0887 4.66511 16.1166C4.66631 17.674 5.21485 19.183 6.21752 20.3871C7.2202 21.5912 8.61516 22.4162 10.1654 22.7219C9.15821 22.9911 8.10203 23.031 7.07689 22.8385C7.51361 24.1771 8.36427 25.3476 9.50981 26.1864C10.6554 27.0252 12.0385 27.4901 13.4655 27.5162C11.0415 29.391 8.0471 30.4072 4.96512 30.4009C4.41978 30.4008 3.87492 30.369 3.33337 30.3057C6.46021 32.286 10.0999 33.3371 13.8172 33.3333C26.3962 33.3333 33.2749 23.0683 33.2749 14.1644C33.2749 13.8722 33.2749 13.5816 33.2565 13.2926C34.5942 12.3405 35.749 11.1613 36.6667 9.81019V9.81019Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+SocialTwitterIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+SocialTwitterIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default SocialTwitterIcon