Adding Adzuna and Zeplin to the sponsorslider (#388)

Vets-Who-Code · Apr 30, 2022 · c1935e6 · c1935e6 · vercel · Apr 30, 2022
1 parent 9a3aadc
commit c1935e6
Show file tree

Hide file tree

Showing 7 changed files with 202 additions and 9 deletions.
diff --git a/public/images/supporters/adzuna.png b/public/images/supporters/adzuna.png
diff --git a/public/images/supporters/zeplin.png b/public/images/supporters/zeplin.png
diff --git a/src/components/SponsorSlider/SponsorSlider.js b/src/components/SponsorSlider/SponsorSlider.js
@@ -4,7 +4,7 @@ import Carousel from 'nuka-carousel'
 import { ThemeContext } from '../../store/ThemeProvider'
 import { FaSlack, FaGoogle, FaGithub } from 'react-icons/fa'
 import { SiReplit } from 'react-icons/si'
-import { Contentful, Fem, Vercel } from '../../icons'
+import { AdzunaLogo, Contentful, Fem, Vercel, Zeplin } from '../../icons'
 
 const baseSettlings = {
   autoplay: true,
@@ -122,6 +122,34 @@ const elements = [
       },
     },
   },
+  {
+    href: 'https://www.adzuna.com/',
+    label: 'Link to Adzuna',
+    title: 'Adzuna',
+    // /image is in the public folder
+    lightElement: '/images/supporters/adzuna.png',
+    darkElement: {
+      component: AdzunaLogo,
+      props: {
+        size: 60,
+        color: '#ffffff',
+      },
+    },
+  },
+  {
+    href: 'https://zeplin.io/',
+    label: 'Link to Zeplin',
+    title: 'Zeplin',
+    // /image is in the public folder
+    lightElement: '/images/supporters/zeplin.png',
+    darkElement: {
+      component: Zeplin,
+      props: {
+        size: 60,
+        color: '#ffffff',
+      },
+    },
+  },
 ]
 
 function SponsorSlider() {
@@ -186,7 +214,7 @@ function SponsorSlider() {
   return (
     <Carousel
       {...baseSettlings}
-      slidesToShow={isMobile ? 4 : 7}
+      slidesToShow={isMobile ? 4 : 9}
       transitionMode={isMobile ? 'scroll' : 'fade'}
     >
       {colorMode === 'light' ? lightElements() : darkElements()}

diff --git a/src/icons/AdzunaLogo.js b/src/icons/AdzunaLogo.js
@@ -0,0 +1,13 @@
+function SvgAdzunaLogo() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150" style={{ width: '70px' }}>
+      <path d="M0 .2h150v150H0V.2z" fill="none" />
+      <path
+        d="M133.9 75.3c0-20-7.3-36.8-21.2-48.5-12.5-10.5-30.3-16.4-49.9-16.4v16.2c15.6 0 29.5 4.4 39 12.5 10.1 8.5 15.6 21 15.6 36.2 0 24.5-20.2 44.3-45.3 44.3-20.4 0-37.2-16.4-37.2-36.4 0-7.9 3.2-15.4 8.9-20.8s13.3-8.5 21.6-8.5c7.1 0 13.1 2 17.4 5.7 4.2 3.6 6.5 8.7 6.5 15 0 10.5-7.7 18-18.8 18v16.2c20.2 0 35.4-14.8 35.4-34.1 0-10.7-4.2-20.4-11.9-27.1-7.3-6.3-17.2-9.7-28.3-9.7-12.5 0-24.2 4.6-33.1 13.1S18.9 71 18.9 83.3c0 29.1 24 52.5 53.8 52.5 33.5.1 61.2-26.9 61.2-60.5z"
+        fill="#ffffff"
+      />
+    </svg>
+  )
+}
+
+export default SvgAdzunaLogo
diff --git a/src/icons/Zeplin.js b/src/icons/Zeplin.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types'
+
+function SvgZeplin() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 60 48" height="48">
+      <g fillRule="evenodd" fill="none">
+        <path
+          fill="#ffffff"
+          d="m9.248 33.084-3.139 1.147-.168 9.337 10.865-3.968c-3.727-1.252-6.448-3.454-7.558-6.515"
+        ></path>
+        <path
+          fill="#ffffff"
+          d="m10.89 23.208-10.89 3.978 6.11 7.045 3.138-1.147c-1.107-3.052-.424-6.501 1.643-9.876"
+        ></path>
+        <path
+          fill="#ffffff"
+          d="m29.218 9.734c-13.869 5.066-22.81 15.52-19.97 23.35l50.221-18.346c-2.84-7.83-16.383-10.07-30.251-5.004"
+        ></path>
+        <path
+          fill="#ffffff"
+          d="m39.5 38.088c13.868-5.067 22.825-15.474 19.97-23.35l-50.223 18.346c2.856 7.876 16.383 10.07 30.252 5.004"
+        ></path>
+        <path
+          fill="#ffffff"
+          d="m59.47 14.738-50.223 18.346c.983 2.712 4.734 4.048 9.995 4.048 5.13 0 11.697-1.269 18.543-3.77 13.868-5.066 23.625-13.269 21.683-18.624"
+        ></path>
+        <path
+          fill="#ffffff"
+          d="m49.474 10.69c-5.13 0-11.697 1.269-18.543 3.77-13.868 5.066-23.625 13.268-21.683 18.624l50.221-18.346c-.983-2.712-4.733-4.048-9.995-4.048"
+        ></path>
+        <g fill="#ffffff">
+          <path d="m46.7 44.063c-1.478 0-3.657-1.335-6.48-3.967-3.337-3.114-7.161-7.675-10.767-12.844-3.605-5.167-6.568-10.334-8.342-14.548-1.932-4.592-2.208-7.415-.819-8.392.305-.214.672-.322 1.092-.322 1.13 0 3.332.841 7.403 4.85l.09.087-.013.125c-.028.288-.053.579-.076.864l-.045.566-.4-.402c-4.387-4.42-6.318-4.897-6.945-4.897-.179 0-.321.036-.423.108-.603.423-.642 2.497 1.232 6.948 1.743 4.139 4.662 9.227 8.22 14.328 3.56 5.102 7.325 9.596 10.604 12.654 3.535 3.298 5.128 3.654 5.65 3.654.18 0 .325-.038.434-.115.635-.446.636-2.668-1.454-7.46l-.096-.219.21-.115c.21-.115.414-.228.604-.336l.252-.143.116.265c1.481 3.395 2.866 7.71 1.05 8.987-.306.215-.675.324-1.097.324z"></path>
+          <path d="m39.836 37.945-.02.26c-.351 4.339-1.275 9.554-3.682 9.766-.048.004-.098.006-.148.006-1.636 0-3.183-2.343-4.598-6.963-1.34-4.372-2.38-10.24-2.927-16.527-.548-6.284-.54-12.246.023-16.785.613-4.947 1.781-7.53 3.471-7.679.05-.004.102-.007.153-.007 1.186 0 2.974 1.344 4.804 7.6l-1.195.23c-.611-2.09-1.277-3.79-1.938-4.96-.612-1.08-1.206-1.675-1.674-1.675-.016 0-.031 0-.047.002-.732.064-1.799 1.841-2.393 6.636-.553 4.458-.56 10.33-.02 16.534.542 6.205 1.564 11.987 2.88 16.28.589 1.922 1.235 3.507 1.869 4.582.584.992 1.149 1.538 1.591 1.538.015 0 .03 0 .046-.002.7-.061 2.021-1.91 2.577-8.415z"></path>
+        </g>
+      </g>
+    </svg>
+  )
+}
+
+SvgZeplin.propTypes = {
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  color: PropTypes.string,
+  style: PropTypes.string,
+}
+
+export default SvgZeplin
diff --git a/src/icons/index.js b/src/icons/index.js
@@ -2,3 +2,5 @@ export { default as Contentful } from './Contentful'
 export { default as Fem } from './Fem'
 export { default as Adzuna } from './Adzuna'
 export { default as Vercel } from './Vercel'
+export { default as AdzunaLogo } from './AdzunaLogo'
+export { default as Zeplin } from './Zeplin'
diff --git a/tests/components/__snapshots__/SponsorSlider.test.js.snap b/tests/components/__snapshots__/SponsorSlider.test.js.snap
@@ -17,7 +17,7 @@ exports[`<SponsorSlider /> should render correctly 1`] = `
       style="box-sizing: border-box; cursor: pointer; display: block; height: 0px; margin: 0px 0px; padding: 0px; width: 0px;"
     >
       <div
-        aria-label="slide 1 of 7"
+        aria-label="slide 1 of 9"
         class="slider-slide slide-visible slide-current"
         role="group"
         style="box-sizing: border-box; display: block; height: auto; left: 0px; list-style-type: none; margin: auto 0px auto 0px; opacity: 1; position: absolute; top: 0px; vertical-align: top; visibility: inherit; width: 0px;"
@@ -54,7 +54,7 @@ exports[`<SponsorSlider /> should render correctly 1`] = `
         </div>
       </div>
       <div
-        aria-label="slide 2 of 7"
+        aria-label="slide 2 of 9"
         class="slider-slide slide-visible"
         role="group"
         style="box-sizing: border-box; display: block; height: auto; left: 0px; list-style-type: none; margin: auto 0px auto 0px; opacity: 1; position: absolute; top: 0px; vertical-align: top; visibility: inherit; width: 0px;"
@@ -91,7 +91,7 @@ exports[`<SponsorSlider /> should render correctly 1`] = `
         </div>
       </div>
       <div
-        aria-label="slide 3 of 7"
+        aria-label="slide 3 of 9"
         class="slider-slide slide-visible"
         role="group"
         style="box-sizing: border-box; display: block; height: auto; left: 0px; list-style-type: none; margin: auto 0px auto 0px; opacity: 1; position: absolute; top: 0px; vertical-align: top; visibility: inherit; width: 0px;"
@@ -130,7 +130,7 @@ exports[`<SponsorSlider /> should render correctly 1`] = `
         </div>
       </div>
       <div
-        aria-label="slide 4 of 7"
+        aria-label="slide 4 of 9"
         class="slider-slide slide-visible"
         role="group"
         style="box-sizing: border-box; display: block; height: auto; left: 0px; list-style-type: none; margin: auto 0px auto 0px; opacity: 1; position: absolute; top: 0px; vertical-align: top; visibility: inherit; width: 0px;"
@@ -167,7 +167,7 @@ exports[`<SponsorSlider /> should render correctly 1`] = `
         </div>
       </div>
       <div
-        aria-label="slide 5 of 7"
+        aria-label="slide 5 of 9"
         class="slider-slide slide-visible"
         role="group"
         style="box-sizing: border-box; display: block; height: auto; left: 0px; list-style-type: none; margin: auto 0px auto 0px; opacity: 1; position: absolute; top: 0px; vertical-align: top; visibility: inherit; width: 0px;"
@@ -199,7 +199,7 @@ exports[`<SponsorSlider /> should render correctly 1`] = `
         </div>
       </div>
       <div
-        aria-label="slide 6 of 7"
+        aria-label="slide 6 of 9"
         class="slider-slide slide-visible"
         role="group"
         style="box-sizing: border-box; display: block; height: auto; left: 0px; list-style-type: none; margin: auto 0px auto 0px; opacity: 1; position: absolute; top: 0px; vertical-align: top; visibility: inherit; width: 0px;"
@@ -256,7 +256,7 @@ exports[`<SponsorSlider /> should render correctly 1`] = `
         </div>
       </div>
       <div
-        aria-label="slide 7 of 7"
+        aria-label="slide 7 of 9"
         class="slider-slide slide-visible"
         role="group"
         style="box-sizing: border-box; display: block; height: auto; left: 0px; list-style-type: none; margin: auto 0px auto 0px; opacity: 1; position: absolute; top: 0px; vertical-align: top; visibility: inherit; width: 0px;"
@@ -287,6 +287,110 @@ exports[`<SponsorSlider /> should render correctly 1`] = `
           </a>
         </div>
       </div>
+      <div
+        aria-label="slide 8 of 9"
+        class="slider-slide slide-visible"
+        role="group"
+        style="box-sizing: border-box; display: block; height: auto; left: 0px; list-style-type: none; margin: auto 0px auto 0px; opacity: 1; position: absolute; top: 0px; vertical-align: top; visibility: inherit; width: 0px;"
+        tabindex="-1"
+      >
+        <div
+          aria-hidden="false"
+          style="text-align: center;"
+          tabindex="0"
+        >
+          <a
+            aria-label="Link to Adzuna"
+            href="https://www.adzuna.com/"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Adzuna"
+          >
+            <svg
+              style="width: 70px;"
+              viewBox="0 0 150 150"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 .2h150v150H0V.2z"
+                fill="none"
+              />
+              <path
+                d="M133.9 75.3c0-20-7.3-36.8-21.2-48.5-12.5-10.5-30.3-16.4-49.9-16.4v16.2c15.6 0 29.5 4.4 39 12.5 10.1 8.5 15.6 21 15.6 36.2 0 24.5-20.2 44.3-45.3 44.3-20.4 0-37.2-16.4-37.2-36.4 0-7.9 3.2-15.4 8.9-20.8s13.3-8.5 21.6-8.5c7.1 0 13.1 2 17.4 5.7 4.2 3.6 6.5 8.7 6.5 15 0 10.5-7.7 18-18.8 18v16.2c20.2 0 35.4-14.8 35.4-34.1 0-10.7-4.2-20.4-11.9-27.1-7.3-6.3-17.2-9.7-28.3-9.7-12.5 0-24.2 4.6-33.1 13.1S18.9 71 18.9 83.3c0 29.1 24 52.5 53.8 52.5 33.5.1 61.2-26.9 61.2-60.5z"
+                fill="#ffffff"
+              />
+            </svg>
+          </a>
+        </div>
+      </div>
+      <div
+        aria-label="slide 9 of 9"
+        class="slider-slide slide-visible"
+        role="group"
+        style="box-sizing: border-box; display: block; height: auto; left: 0px; list-style-type: none; margin: auto 0px auto 0px; opacity: 1; position: absolute; top: 0px; vertical-align: top; visibility: inherit; width: 0px;"
+        tabindex="-1"
+      >
+        <div
+          aria-hidden="false"
+          style="text-align: center;"
+          tabindex="0"
+        >
+          <a
+            aria-label="Link to Zeplin"
+            href="https://zeplin.io/"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Zeplin"
+          >
+            <svg
+              height="48"
+              viewBox="0 0 60 48"
+              width="60"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g
+                fill="none"
+                fill-rule="evenodd"
+              >
+                <path
+                  d="m9.248 33.084-3.139 1.147-.168 9.337 10.865-3.968c-3.727-1.252-6.448-3.454-7.558-6.515"
+                  fill="#ffffff"
+                />
+                <path
+                  d="m10.89 23.208-10.89 3.978 6.11 7.045 3.138-1.147c-1.107-3.052-.424-6.501 1.643-9.876"
+                  fill="#ffffff"
+                />
+                <path
+                  d="m29.218 9.734c-13.869 5.066-22.81 15.52-19.97 23.35l50.221-18.346c-2.84-7.83-16.383-10.07-30.251-5.004"
+                  fill="#ffffff"
+                />
+                <path
+                  d="m39.5 38.088c13.868-5.067 22.825-15.474 19.97-23.35l-50.223 18.346c2.856 7.876 16.383 10.07 30.252 5.004"
+                  fill="#ffffff"
+                />
+                <path
+                  d="m59.47 14.738-50.223 18.346c.983 2.712 4.734 4.048 9.995 4.048 5.13 0 11.697-1.269 18.543-3.77 13.868-5.066 23.625-13.269 21.683-18.624"
+                  fill="#ffffff"
+                />
+                <path
+                  d="m49.474 10.69c-5.13 0-11.697 1.269-18.543 3.77-13.868 5.066-23.625 13.268-21.683 18.624l50.221-18.346c-.983-2.712-4.733-4.048-9.995-4.048"
+                  fill="#ffffff"
+                />
+                <g
+                  fill="#ffffff"
+                >
+                  <path
+                    d="m46.7 44.063c-1.478 0-3.657-1.335-6.48-3.967-3.337-3.114-7.161-7.675-10.767-12.844-3.605-5.167-6.568-10.334-8.342-14.548-1.932-4.592-2.208-7.415-.819-8.392.305-.214.672-.322 1.092-.322 1.13 0 3.332.841 7.403 4.85l.09.087-.013.125c-.028.288-.053.579-.076.864l-.045.566-.4-.402c-4.387-4.42-6.318-4.897-6.945-4.897-.179 0-.321.036-.423.108-.603.423-.642 2.497 1.232 6.948 1.743 4.139 4.662 9.227 8.22 14.328 3.56 5.102 7.325 9.596 10.604 12.654 3.535 3.298 5.128 3.654 5.65 3.654.18 0 .325-.038.434-.115.635-.446.636-2.668-1.454-7.46l-.096-.219.21-.115c.21-.115.414-.228.604-.336l.252-.143.116.265c1.481 3.395 2.866 7.71 1.05 8.987-.306.215-.675.324-1.097.324z"
+                  />
+                  <path
+                    d="m39.836 37.945-.02.26c-.351 4.339-1.275 9.554-3.682 9.766-.048.004-.098.006-.148.006-1.636 0-3.183-2.343-4.598-6.963-1.34-4.372-2.38-10.24-2.927-16.527-.548-6.284-.54-12.246.023-16.785.613-4.947 1.781-7.53 3.471-7.679.05-.004.102-.007.153-.007 1.186 0 2.974 1.344 4.804 7.6l-1.195.23c-.611-2.09-1.277-3.79-1.938-4.96-.612-1.08-1.206-1.675-1.674-1.675-.016 0-.031 0-.047.002-.732.064-1.799 1.841-2.393 6.636-.553 4.458-.56 10.33-.02 16.534.542 6.205 1.564 11.987 2.88 16.28.589 1.922 1.235 3.507 1.869 4.582.584.992 1.149 1.538 1.591 1.538.015 0 .03 0 .046-.002.7-.061 2.021-1.91 2.577-8.415z"
+                  />
+                </g>
+              </g>
+            </svg>
+          </a>
+        </div>
+      </div>
     </div>
   </div>
   <style