Upgrade next (#1124)

* upgrade to Next 10 * add function names
carbon-app · Oct 28, 2020 · eb5334b · eb5334b
1 parent 9cf9815
commit eb5334b
Show file tree

Hide file tree

Showing 8 changed files with 496 additions and 265 deletions.
diff --git a/components/PhotoCredit.js b/components/PhotoCredit.js
@@ -1,27 +1,29 @@
 import React from 'react'
 
-export default ({ photographer }) => (
-  <div className="photo-credit">
-    Photo by{' '}
-    <a href={`${photographer.profile_url}?utm_source=carbon&utm_medium=referral`}>
-      {photographer.name}
-    </a>
-    <style jsx>
-      {`
-        .photo-credit {
-          cursor: unset;
-          user-select: none;
-          text-align: left;
-          font-size: 10px;
-          color: #aaa;
-          margin-bottom: -2px;
-        }
+export default function PhotoCredit({ photographer }) {
+  return (
+    <div className="photo-credit">
+      Photo by{' '}
+      <a href={`${photographer.profile_url}?utm_source=carbon&utm_medium=referral`}>
+        {photographer.name}
+      </a>
+      <style jsx>
+        {`
+          .photo-credit {
+            cursor: unset;
+            user-select: none;
+            text-align: left;
+            font-size: 10px;
+            color: #aaa;
+            margin-bottom: -2px;
+          }
 
-        .photo-credit a {
-          cursor: pointer;
-          text-decoration: underline;
-        }
-      `}
-    </style>
-  </div>
-)
+          .photo-credit a {
+            cursor: pointer;
+            text-decoration: underline;
+          }
+        `}
+      </style>
+    </div>
+  )
+}
diff --git a/components/WindowControls.js b/components/WindowControls.js
@@ -37,60 +37,63 @@ const CopyButton = React.memo(function CopyButton({ text }) {
 })
 
 const WINDOW_THEMES_MAP = { bw: <ControlsBW />, boxy: <ControlsBoxy /> }
-export default ({ theme, copyable, code, light }) => (
-  <div className="window-controls">
-    {WINDOW_THEMES_MAP[theme] || <Controls />}
-    <div className="window-title-container">
-      <input aria-label="Image Title" type="text" spellCheck="false" />
-    </div>
-    {copyable && (
-      <div className="copy-button">
-        <CopyButton text={code} />
+
+export default function WindowControls({ theme, copyable, code, light }) {
+  return (
+    <div className="window-controls">
+      {WINDOW_THEMES_MAP[theme] || <Controls />}
+      <div className="window-title-container">
+        <input aria-label="Image Title" type="text" spellCheck="false" />
       </div>
-    )}
-    <style jsx>
-      {`
-        .window-controls {
-          margin-top: -24px;
-          position: relative;
-          top: ${theme === 'bw' ? 36 : 34}px;
-          margin-left: ${theme === 'bw' ? 16 : 14}px;
-          margin-right: ${theme === 'boxy' ? 16 : 0}px;
-          z-index: 2;
-          text-align: ${theme === 'boxy' ? 'right' : 'initial'};
-        }
+      {copyable && (
+        <div className="copy-button">
+          <CopyButton text={code} />
+        </div>
+      )}
+      <style jsx>
+        {`
+          .window-controls {
+            margin-top: -24px;
+            position: relative;
+            top: ${theme === 'bw' ? 36 : 34}px;
+            margin-left: ${theme === 'bw' ? 16 : 14}px;
+            margin-right: ${theme === 'boxy' ? 16 : 0}px;
+            z-index: 2;
+            text-align: ${theme === 'boxy' ? 'right' : 'initial'};
+          }
 
-        .window-title-container {
-          position: absolute;
-          margin: 0px;
-          top: -3px;
-          left: -9px;
-          width: 100%;
-          text-align: center;
-        }
+          .window-title-container {
+            position: absolute;
+            margin: 0px;
+            top: -3px;
+            left: -9px;
+            width: 100%;
+            text-align: center;
+          }
 
-        input {
-          width: 250px;
-          background: none;
-          outline: none;
-          border: none;
-          text-align: center;
-          /**
-           * 140px is an arbitrary value, but it's roughly equal to:
-           * 2 * (window theme width + window theme outside margin)
-           */
-          max-width: calc(100% - 140px);
-          font-size: 14px;
-          color: ${light ? COLORS.BLACK : COLORS.SECONDARY};
-        }
+          input {
+            width: 250px;
+            background: none;
+            outline: none;
+            border: none;
+            text-align: center;
+            /**
+         * 140px is an arbitrary value, but it's roughly equal to:
+         * 2 * (window theme width + window theme outside margin)
+         */
+            max-width: calc(100% - 140px);
+            font-size: 14px;
+            color: ${light ? COLORS.BLACK : COLORS.SECONDARY};
+          }
 
-        .copy-button {
-          cursor: pointer;
-          position: absolute;
-          top: 0px;
-          right: 16px;
-        }
-      `}
-    </style>
-  </div>
-)
+          .copy-button {
+            cursor: pointer;
+            position: absolute;
+            top: 0px;
+            right: 16px;
+          }
+        `}
+      </style>
+    </div>
+  )
+}
diff --git a/components/WindowPointer.js b/components/WindowPointer.js
@@ -1,22 +1,24 @@
 import React from 'react'
 
-export default ({ fromLeft, fromRight, color = '#fff' }) => (
-  <div>
-    <div className="window-pointer" />
-    <style jsx>
-      {`
-        .window-pointer {
-          width: 0px;
-          height: 0px;
-          border-style: solid;
-          border-width: 0 5px 6px 5px;
-          border-color: transparent transparent ${color} transparent;
-          position: absolute;
-          top: -8px;
-          left: ${fromLeft || 'initial'};
-          right: ${fromRight || 'initial'};
-        }
-      `}
-    </style>
-  </div>
-)
+export default function WindowPointer({ fromLeft, fromRight, color = '#fff' }) {
+  return (
+    <div>
+      <div className="window-pointer" />
+      <style jsx>
+        {`
+          .window-pointer {
+            width: 0px;
+            height: 0px;
+            border-style: solid;
+            border-width: 0 5px 6px 5px;
+            border-color: transparent transparent ${color} transparent;
+            position: absolute;
+            top: -8px;
+            left: ${fromLeft || 'initial'};
+            right: ${fromRight || 'initial'};
+          }
+        `}
+      </style>
+    </div>
+  )
+}
diff --git a/components/svg/Checkmark.js b/components/svg/Checkmark.js
@@ -1,16 +1,18 @@
 import React from 'react'
 
-export default ({ width = 18, height = 18, color = '#FFFFFF' }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 18 18"
-    fill="none"
-  >
-    <path
-      d="M9 0C4.02837 0 0 4.02837 0 9C0 13.9716 4.02837 18 9 18C13.9716 18 18 13.9716 18 9C18 4.02837 13.9716 0 9 0ZM13.6082 6.51202L7.82308 12.3231H7.81875C7.74519 12.3966 7.54615 12.5611 7.31683 12.5611C7.1524 12.5611 6.96635 12.4702 6.81058 12.3144L4.3875 9.89135C4.31827 9.82212 4.31827 9.71394 4.3875 9.64471L5.15769 8.87452C5.19231 8.8399 5.23558 8.8226 5.27885 8.8226C5.32212 8.8226 5.36539 8.8399 5.4 8.87452L7.32115 10.7957L12.6 5.47788C12.6346 5.44327 12.6779 5.42596 12.7212 5.42596C12.7688 5.42596 12.812 5.44327 12.8423 5.47788L13.5995 6.26106C13.6774 6.33462 13.6774 6.44279 13.6082 6.51202Z"
-      fill={color}
-    />
-  </svg>
-)
+export default function Checkmark({ width = 18, height = 18, color = '#FFFFFF' }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <path
+        d="M9 0C4.02837 0 0 4.02837 0 9C0 13.9716 4.02837 18 9 18C13.9716 18 18 13.9716 18 9C18 4.02837 13.9716 0 9 0ZM13.6082 6.51202L7.82308 12.3231H7.81875C7.74519 12.3966 7.54615 12.5611 7.31683 12.5611C7.1524 12.5611 6.96635 12.4702 6.81058 12.3144L4.3875 9.89135C4.31827 9.82212 4.31827 9.71394 4.3875 9.64471L5.15769 8.87452C5.19231 8.8399 5.23558 8.8226 5.27885 8.8226C5.32212 8.8226 5.36539 8.8399 5.4 8.87452L7.32115 10.7957L12.6 5.47788C12.6346 5.44327 12.6779 5.42596 12.7212 5.42596C12.7688 5.42596 12.812 5.44327 12.8423 5.47788L13.5995 6.26106C13.6774 6.33462 13.6774 6.44279 13.6082 6.51202Z"
+        fill={color}
+      />
+    </svg>
+  )
+}
diff --git a/components/svg/Remove.js b/components/svg/Remove.js
@@ -1,17 +1,19 @@
 import React from 'react'
 
-export default ({ color = 'black', style }) => (
-  <svg
-    width="5"
-    height="5"
-    viewBox="0 0 5 5"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style={style}
-  >
-    <path
-      d="M2.5 3.08725L4.41704 5L5 4.41834L3.08857 2.5L5 0.581656L4.41704 0L2.5 1.91275L0.58296 0L0 0.581656L1.91144 2.5L0 4.41834L0.58296 5L2.5 3.08725Z"
-      fill={color}
-    />
-  </svg>
-)
+export default function Remove({ color = 'black', style }) {
+  return (
+    <svg
+      width="5"
+      height="5"
+      viewBox="0 0 5 5"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={style}
+    >
+      <path
+        d="M2.5 3.08725L4.41704 5L5 4.41834L3.08857 2.5L5 0.581656L4.41704 0L2.5 1.91275L0.58296 0L0 0.581656L1.91144 2.5L0 4.41834L0.58296 5L2.5 3.08725Z"
+        fill={color}
+      />
+    </svg>
+  )
+}