Anonymous functions (#1111)

* Theme.js file anonymous functoins warning disabled.

* Settings.js file anonymous functoins warning disabled.

* About.js file anonymous functoins warning disabled.

* Snippets.js file anonymous functoins warning disabled.

* Logo.js file anonymous functoins warning disabled.

* Reset.js file anonymous functoins warning disabled.

* Language.js file anonymous functoins warning disabled.

* Typography.js file anonymous functoins warning disabled.

* Font.js file anonymous functoins warning disabled.

* Billing.js file anonymous functoins warning disabled.

* all anonymous functoins warning disabled with the prefered style.

* Update components/Billing.js

Co-authored-by: Michael Fix <mrfix84@gmail.com>

Co-authored-by: Michael Fix <mrfix84@gmail.com>

components/Billing.js

@@ -144,7 +144,8 @@ function Billing(props) {
           </form>
         </div>
       )}
-      <style jsx>{`
+      <style jsx>
+        {`
           .checkout {
             position: relative;
 
@@ -255,14 +256,15 @@ function Billing(props) {
             line-height: 1.5;
             margin: 0 0 2rem;
           }
-      `}</style>
+        `}
+      </style>
     </div>
   )
 }
 
 const BillingWithStripe = injectStripe(Billing)
 
-export default () => {
+export default function BillingPage() {
   const [stripe, setStripe] = React.useState(null)
   React.useEffect(() => {
     setStripe(window.Stripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY))

components/style/Font.js

@@ -5,7 +5,8 @@
  */
 import React from 'react'
 
-export default () => (
+export default function Font() {
+  return (
     <style jsx global>
       {`
         @font-face {
@@ -126,3 +127,4 @@ export default () => (
       `}
     </style>
   )
+}

components/style/Reset.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import { COLORS } from '../../lib/constants'
 
-export default () => (
+export default function Reset() {
+  return (
     <style jsx global>
       {`
       /* http://meyerweb.com/eric/tools/css/reset/
@@ -228,3 +229,4 @@ export default () => (
     `}
     </style>
   )
+}

components/style/Typography.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
-export default () => (
+export default function Typography() {
+  return (
     <style jsx global>
       {`
         /* https://github.com/jxnblk/type-system
@@ -113,3 +114,4 @@ export default () => (
       `}
     </style>
   )
+}

components/svg/Language.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
-export default () => (
+export default function Language() {
+  return (
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
       <path
         d="M8 0.6875H7.97539C6.02773 0.694531 4.19961 1.45742 2.82148 2.83555C1.44687 4.21719 0.6875 6.04883 0.6875 8C0.6875 9.95117 1.44688 11.7828 2.825 13.1645C4.19961 14.5426 6.03125 15.3055 7.97891 15.3125H8.00352C12.0359 15.3125 15.316 12.0324 15.316 8C15.316 3.96758 12.0324 0.6875 8 0.6875ZM14.3352 7.50781H11.607C11.5754 6.56914 11.4594 5.67266 11.2625 4.82891C11.8637 4.63555 12.4473 4.38945 13.0098 4.09063C13.7832 5.08203 14.2402 6.25625 14.3352 7.50781ZM7.50781 7.50781H5.33516C5.36328 6.64648 5.46875 5.83086 5.64453 5.07852C6.25625 5.21562 6.87852 5.3 7.50781 5.32812V7.50781ZM7.50781 8.49219V10.6684C6.88203 10.6965 6.25625 10.7809 5.64453 10.918C5.46875 10.1656 5.36328 9.35 5.33516 8.49219H7.50781ZM8.49219 8.49219H10.6473C10.6191 9.35 10.5137 10.1656 10.3379 10.9145C9.7332 10.7773 9.11445 10.6965 8.49219 10.6684V8.49219ZM8.49219 7.50781V5.32812C9.11797 5.3 9.73672 5.21562 10.3379 5.08203C10.5137 5.83437 10.6191 6.64648 10.6473 7.50781H8.49219ZM12.3383 3.36289C11.9059 3.57734 11.4594 3.76016 11.0023 3.90781C10.7527 3.15547 10.4363 2.50508 10.0707 1.9918C10.9145 2.28359 11.6844 2.75117 12.3383 3.36289ZM10.0742 4.16094C9.55742 4.27344 9.02656 4.34375 8.49219 4.37188V1.79141C9.08984 2.11484 9.67344 2.9832 10.0742 4.16094ZM7.50781 1.77734V4.36836C6.96641 4.34023 6.43203 4.26992 5.9082 4.15391C6.31602 2.96563 6.90664 2.09727 7.50781 1.77734ZM5.90469 2.00234C5.54258 2.51211 5.22969 3.15898 4.98008 3.9043C4.53008 3.75664 4.08711 3.57383 3.66172 3.36289C4.30859 2.75469 5.07148 2.29063 5.90469 2.00234ZM2.99023 4.09414C3.5457 4.38945 4.12578 4.63555 4.71992 4.82539C4.51953 5.66563 4.40352 6.56562 4.37539 7.5043H1.66836C1.75977 6.25977 2.2168 5.08555 2.99023 4.09414ZM1.66484 8.49219H4.37188C4.40352 9.43086 4.51953 10.3309 4.71641 11.1711C4.12227 11.3645 3.54219 11.6105 2.98672 11.9023C2.2168 10.9145 1.75977 9.74023 1.66484 8.49219ZM3.6582 12.6371C4.08359 12.4262 4.52656 12.2434 4.98008 12.0957C5.22969 12.8445 5.54258 13.4879 5.90469 14.0012C5.07148 13.7059 4.30859 13.2453 3.6582 12.6371ZM5.9082 11.8426C6.43203 11.7266 6.96992 11.6562 7.50781 11.6281V14.2227C6.90312 13.9027 6.31602 13.0309 5.9082 11.8426ZM8.49219 14.2086V11.6246C9.02656 11.6527 9.55742 11.723 10.0742 11.8355C9.67344 13.0168 9.08984 13.8852 8.49219 14.2086ZM10.0742 14.0082C10.4398 13.4949 10.7563 12.8445 11.0059 12.0922C11.4629 12.2398 11.9129 12.4262 12.3418 12.6406C11.6879 13.2488 10.9145 13.7164 10.0742 14.0082ZM13.0098 11.9059C12.4473 11.607 11.8637 11.3609 11.2625 11.1676C11.4594 10.3273 11.5754 9.43086 11.607 8.49219H14.3352C14.2402 9.74023 13.7867 10.9145 13.0098 11.9059Z"
@@ -8,3 +9,4 @@ export default () => (
       />
     </svg>
   )
+}

components/svg/Logo.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
-export default () => (
+export default function Logo() {
+  return (
     <svg
       role="img"
       aria-label="Carbon Logo"
@@ -14,3 +15,4 @@ export default () => (
       </g>
     </svg>
   )
+}

components/svg/Settings.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
-export default () => (
+export default function Settings() {
+  return (
     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 18 18">
       <path
         fill="#fff"
@@ -10,3 +11,4 @@ export default () => (
       />
     </svg>
   )
+}

components/svg/Theme.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
-export default () => (
+export default function Theme() {
+  return (
     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
       <path
         d="M13.1206 10.2309C12.8886 10.0164 12.5476 9.96367 12.2558 9.91445C11.8515 9.84766 11.6968 9.77383 11.4612 9.56289C10.9585 9.11641 10.9585 8.46953 11.4612 8.02305L12.5265 7.07734C14.1577 5.63594 14.1577 3.27344 12.5265 1.83203C11.3241 0.773828 9.71045 0.25 8.0335 0.25C6.07529 0.25 4.0292 0.963672 2.45068 2.36289C-0.484863 4.95742 -0.484863 9.20781 2.45068 11.8023C3.90967 13.0926 5.87842 13.7359 7.82607 13.75H7.88584C9.8335 13.75 11.753 13.1207 13.1171 11.9078C13.6233 11.4613 13.539 10.6211 13.1206 10.2309ZM2.21865 5.59375C2.21865 4.97148 2.72139 4.46875 3.34365 4.46875C3.96592 4.46875 4.46865 4.97148 4.46865 5.59375C4.46865 6.21602 3.96592 6.71875 3.34365 6.71875C2.72139 6.71875 2.21865 6.21602 2.21865 5.59375ZM3.6249 10.0234C3.00264 10.0234 2.4999 9.5207 2.4999 8.89844C2.4999 8.27617 3.00264 7.77344 3.6249 7.77344C4.24717 7.77344 4.7499 8.27617 4.7499 8.89844C4.7499 9.5207 4.24717 10.0234 3.6249 10.0234ZM5.8749 4.36328C5.25264 4.36328 4.7499 3.86055 4.7499 3.23828C4.7499 2.61602 5.25264 2.11328 5.8749 2.11328C6.49717 2.11328 6.9999 2.61602 6.9999 3.23828C6.9999 3.86055 6.49717 4.36328 5.8749 4.36328ZM8.40615 12.0625C7.47451 12.0625 6.71865 11.3066 6.71865 10.375C6.71865 9.44336 7.47451 8.6875 8.40615 8.6875C9.33779 8.6875 10.0937 9.44336 10.0937 10.375C10.0937 11.3066 9.33779 12.0625 8.40615 12.0625ZM9.2499 4.75C8.62764 4.75 8.1249 4.24727 8.1249 3.625C8.1249 3.00273 8.62764 2.5 9.2499 2.5C9.87217 2.5 10.3749 3.00273 10.3749 3.625C10.3749 4.24727 9.87217 4.75 9.2499 4.75Z"
@@ -8,3 +9,4 @@ export default () => (
       />
     </svg>
   )
+}

pages/about.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import Page from '../components/Page'
 
-export default () => (
+export default function About() {
+  return (
     <Page>
       <div className="about">
         <div className="mb4">
@@ -9,9 +10,9 @@ export default () => (
           <p>Carbon lets you create and share beautiful images of your source code</p>
           <p>
             You know all of those code screenshots you see on Twitter? Although the code&apos;s
-          usually impressive, we thought there was room for improvement in the aesthetic department.
+            usually impressive, we thought there was room for improvement in the aesthetic
-          So what are you waiting for? Go try it out and impress all your developer and designer
+            department. So what are you waiting for? Go try it out and impress all your developer
-          friends.{' '}
+            and designer friends.{' '}
             <span role="img" aria-label="Palette">
               🎨
             </span>
@@ -50,8 +51,8 @@ export default () => (
             changing the syntax theme, background color/image, window theme, or padding.
           </p>
           <p className="mt2 mb3">
-          You can even drop an image file onto the editor to set the background to that image. Give
+            You can even drop an image file onto the editor to set the background to that image.
-          it a try!
+            Give it a try!
           </p>
           <h4 className="mb0 mt4">Export/Sharing</h4>
           <p className="mt2 mb3">
@@ -61,7 +62,10 @@ export default () => (
           <p className="mt2 mb3">
             If you use the &apos;Tweet&apos; button, Carbon will automatically make your image
             accessible. However, if you want to manually tweet your Carbon image, please check out (
-          <a className="link" href="https://help.twitter.com/en/using-twitter/picture-descriptions">
+            <a
+              className="link"
+              href="https://help.twitter.com/en/using-twitter/picture-descriptions"
+            >
               how to make your Twitter images accessible
             </a>
             ).
@@ -165,3 +169,4 @@ export default () => (
       </style>
     </Page>
   )
+}

pages/snippets.js

@@ -25,7 +25,12 @@ function correctTimestamp(n) {
 }
 
 function Snippet(props) {
-  const config = { ...DEFAULT_SETTINGS, ...props, fontSize: '2px', windowControls: false }
+  const config = {
+    ...DEFAULT_SETTINGS,
+    ...props,
+    fontSize: '2px',
+    windowControls: false,
+  }
 
   return (
     <div className="snippet">
@@ -237,9 +242,11 @@ function SnippetsPage() {
   )
 }
 
-export default () => (
+export default function Snippets() {
+  return (
     <Page enableHeroText={true} flex={true}>
       <MetaLinks />
       <SnippetsPage />
     </Page>
   )
+}