Merge pull request #266 from w3bdesign/framer-motion

Framer motion

.eslintrc.json

@@ -7,5 +7,8 @@
   "plugins": ["react", "cypress", "sonarjs"],
   "globals": {
     "cy": true
+  },
+  "rules": {
+    "react/jsx-max-depth": 10
   }
 }

src/animations/functions.tsx

@@ -88,13 +88,11 @@ export const ScaleIn = ({ children, cssClass, delay }: IAnimateWithDelayProps) =
 
 export const ScaleInItem = ({ children, cssClass }: IAnimateProps) => {
   const scaleInItemVariants: Variants = {
-   /* visible: { opacity: 1, scale: 1 },
+    /* visible: { opacity: 1, scale: 1 },
     hidden: { opacity: 0, scale: 1.7 }*/
 
     visible: { opacity: 1, x: 0 },
     hidden: { opacity: 0, x: -50 }
-
-
   };
   return (
     <motion.span variants={scaleInItemVariants} className={cssClass}>

src/components/Index/Hero.component.tsx

@@ -15,7 +15,8 @@ const Hero = (): JSX.Element => (
     aria-label="Kontainer for animasjoner av introtekst"
     id="main-hero"
     data-testid="main-hero"
-    className="flex flex-col justify-center text-lg ">
+    className="flex flex-col justify-center text-lg "
+  >
     <div className="mt-10 mb-4 bg-white p-2 opacity-75 md:mt-4 lg:mt-4 xl:mt-4">
       <div className="rounded text-black">
         <section role="heading" aria-label="Introduksjonstekst" aria-level={2}>
@@ -24,12 +25,14 @@ const Hero = (): JSX.Element => (
           </FadeDown>
           <FadeUp
             delay={1.7}
-            cssClass="mt-4 px-6 text-lg md:mx-auto md:p-0 md:text-center md:text-xl lg:w-2/3 lg:p-0 lg:text-left lg:text-xl xl:p-0 xl:text-center xl:text-2xl">
+            cssClass="mt-4 px-6 text-lg md:mx-auto md:p-0 md:text-center md:text-xl lg:w-2/3 lg:p-0 lg:text-left lg:text-xl xl:p-0 xl:text-center xl:text-2xl"
+          >
             <h2>Jeg heter Daniel Fjeldstad og er en webutvikler.</h2>
           </FadeUp>
           <FadeDown
             delay={2.2}
-            cssClass="mt-4 px-6 text-lg md:mx-auto md:p-0 md:text-center md:text-xl lg:w-2/3 lg:p-0 lg:text-left lg:text-xl xl:p-0 xl:text-center xl:text-2xl">
+            cssClass="mt-4 px-6 text-lg md:mx-auto md:p-0 md:text-center md:text-xl lg:w-2/3 lg:p-0 lg:text-left lg:text-xl xl:p-0 xl:text-center xl:text-2xl"
+          >
             <h2>
               Jeg kan PHP, Wordpress, Javascript, Typescript, React, Vue, Docker, Photoshop og mye
               mer.

src/components/Layout/Footer.component.tsx

@@ -12,7 +12,8 @@ const Footer = (): JSX.Element => (
     <div className="mt-10 bg-gray-800 shadow">
       <div
         aria-label="Copyright tekst"
-        className="container p-6 mx-auto text-center text-white font-semibold inline-block">
+        className="container p-6 mx-auto text-center text-white font-semibold inline-block"
+      >
         Copyright Daniel Fjeldstad
         <IconContext.Provider value={{ className: "inline-block m-2" }}>
           <BiCopyright size="1.2em" />

src/components/Prosjekter/ProsjekterListings.component.tsx

@@ -53,28 +53,26 @@ const ProsjekterListings = ({ projects, categories }: IProjectCategory): JSX.Ele
       <div className="container mx-auto rounded">
         <div className="px-4 mx-auto mt-4 lg:px-0 xl:px-0 md:px-0">
           <span className="flex justify-end mb-4">
-            <form>
-              <label
-                className="p-2 mr-4 text-lg"
-                aria-label="kategorifilter"
-                htmlFor="kategorifilter">
-                Filtrer kategori:
-              </label>
-              <select
-                id="kategorifilter"
-                name="kategorifilter"
-                onChange={handleFilterChange}
-                className="w-40 p-2 leading-tight text-black border rounded shadow appearance-none focus:outline-none focus:shadow-outline">
-                <option label="" value="">
-                  Ingen filtrering
+            <label
+              className="p-2 mr-4 text-lg"
+              aria-label="kategorifilter"
+              htmlFor="kategorifilter">
+              Filtrer kategori:
+            </label>
+            <select
+              id="kategorifilter"
+              name="kategorifilter"
+              onChange={handleFilterChange}
+              className="w-40 p-2 leading-tight text-black border rounded shadow appearance-none focus:outline-none focus:shadow-outline">
+              <option label="" value="">
+                Ingen filtrering
+              </option>
+              {categories?.map((category: string) => (
+                <option key={category} value={category}>
+                  {category}
                 </option>
-                {categories?.map((category: string) => (
-                  <option key={category} value={category}>
-                    {category}
-                  </option>
-                ))}
-              </select>
-            </form>
+              ))}
+            </select>
           </span>
           {prosjekt && <ProsjekterSingleProject projects={prosjekt} />}
         </div>