Remove css import from ts file

mhnpd · Jan 16, 2022 · 5369826 · 5369826
1 parent 9e8b8cb
commit 5369826
Show file tree

Hide file tree

Showing 9 changed files with 182 additions and 414 deletions.
diff --git a/src/loader/CradleLoader.tsx b/src/loader/CradleLoader.tsx
@@ -1,13 +1,11 @@
 import React, { FunctionComponent, ReactElement } from 'react'
 import { Style } from '../type'
 
-import './css/CradleLoader.css'
-
 interface CradleLoaderProps {
-  arialLabel?: string,
-  wrapperStyle?: Style,
-  wrapperClass?: string,
-  visible?: boolean
+  arialLabel?: string;
+  wrapperStyle?: Style;
+  wrapperClass?: string;
+  visible?: boolean;
 }
 
 const getDefaultStyle = (visible: boolean): Style => ({
@@ -20,29 +18,30 @@ const CradleLoader: FunctionComponent<CradleLoaderProps> = ({
   wrapperClass,
   visible = true
 }): ReactElement => (
-  <div aria-label={arialLabel}
-     role="presentation"
-     style={{ ...getDefaultStyle(visible), ...wrapperStyle }}
-     className={`container ${wrapperClass}`}
-     data-testid="cradle-loading"
+  <div
+    aria-label={arialLabel}
+    role="presentation"
+    style={{ ...getDefaultStyle(visible), ...wrapperStyle }}
+    className={`container ${wrapperClass}`}
+    data-testid="cradle-loading"
   >
     <div className="react-spinner-loader-swing">
-      <div className="react-spinner-loader-swing-l"/>
-      <div/>
-      <div/>
-      <div/>
-      <div/>
-      <div/>
-      <div className="react-spinner-loader-swing-r"/>
+      <div className="react-spinner-loader-swing-l" />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div className="react-spinner-loader-swing-r" />
     </div>
     <div className="react-spinner-loader-shadow">
-      <div className="react-spinner-loader-shadow-l"/>
-      <div/>
-      <div/>
-      <div/>
-      <div/>
-      <div/>
-      <div className="react-spinner-loader-shadow-r"/>
+      <div className="react-spinner-loader-shadow-l" />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div className="react-spinner-loader-shadow-r" />
     </div>
   </div>
 )

diff --git a/src/loader/Hearts.tsx b/src/loader/Hearts.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent } from 'react'
 import { BaseProps, Style } from '../type'
-
-interface HeartsProps extends BaseProps {}
+interface HeartsProps extends BaseProps { }
 
 const getDefaultStyle = (visible: boolean): Style => ({
   display: visible ? 'flex' : 'none'
@@ -57,7 +56,7 @@ const Hearts: FunctionComponent<HeartsProps> = ({
         />
       </path>
       <path
-        d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"/>
+        d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z" />
     </svg>
   </div>
 )

diff --git a/src/loader/Plane.tsx b/src/loader/Plane.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent, ReactElement } from 'react'
 
 import { BaseProps, Style } from '../type'
-import './css/Plane.css'
 
 interface PlaneProps extends Omit<BaseProps, 'width' | 'height'> {
   secondaryColor?: string,

diff --git a/src/loader/RevolvingDot.tsx b/src/loader/RevolvingDot.tsx
@@ -9,7 +9,7 @@ interface RevolvingDotProps extends BaseProps {
 const getDefaultStyle = (visible: boolean): Style => ({
   display: visible ? 'flex' : 'none'
 })
-const RevolvingDot:FunctionComponent<RevolvingDotProps> = ({
+const RevolvingDot: FunctionComponent<RevolvingDotProps> = ({
   height = 80,
   width = 80,
   radius = 6,
@@ -18,39 +18,39 @@ const RevolvingDot:FunctionComponent<RevolvingDotProps> = ({
   wrapperStyle,
   wrapperClass,
   visible = true
-}):ReactElement => (
+}): ReactElement => (
   <div style={{ ...getDefaultStyle(visible), ...wrapperStyle }} className={wrapperClass} data-testid="revolving-dot-loading">
 
-  <svg
-    version="1.1"
-    width={width}
-    height={height}
-    xmlns="http://www.w3.org/2000/svg"
-    x="0px"
-    y="0px"
-    aria-label={arialLabel}
-    data-testid="revolving-dot-svg"
-  >
-    <circle
-      fill="none"
-      stroke={color}
-      strokeWidth="4"
-      cx="50"
-      cy="50"
-      r={Number(`${radius}`) + 38}
-      style={{ opacity: 0.5 }}
-    />
-    <circle fill={color} stroke={color} strokeWidth="3" cx="8" cy="54" r={radius}>
-      <animateTransform
-        attributeName="transform"
-        dur="2s"
-        type="rotate"
-        from="0 50 48"
-        to="360 50 52"
-        repeatCount="indefinite"
+    <svg
+      version="1.1"
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      aria-label={arialLabel}
+      data-testid="revolving-dot-svg"
+    >
+      <circle
+        fill="none"
+        stroke={color}
+        strokeWidth="4"
+        cx="50"
+        cy="50"
+        r={Number(`${radius}`) + 38}
+        style={{ opacity: 0.5 }}
       />
-    </circle>
-  </svg>
+      <circle fill={color} stroke={color} strokeWidth="3" cx="8" cy="54" r={radius}>
+        <animateTransform
+          attributeName="transform"
+          dur="2s"
+          type="rotate"
+          from="0 50 48"
+          to="360 50 52"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </svg>
   </div>
 )
 

diff --git a/src/loader/Rings.tsx b/src/loader/Rings.tsx
@@ -8,7 +8,7 @@ interface RingsProps extends BaseProps {
 const getDefaultStyle = (visible: boolean): Style => ({
   display: visible ? 'flex' : 'none'
 })
-export const Rings:FunctionComponent<RingsProps> = ({
+export const Rings: FunctionComponent<RingsProps> = ({
   height = 80,
   width = 80,
   radius = 6,

diff --git a/src/loader/TailSpin.tsx b/src/loader/TailSpin.tsx
@@ -30,9 +30,9 @@ export const TailSpin: FunctionComponent<TailSpinProps> = ({
     >
       <defs>
         <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
-          <stop stopColor={color} stopOpacity="0" offset="0%"/>
-          <stop stopColor={color} stopOpacity=".631" offset="63.146%"/>
-          <stop stopColor={color} offset="100%"/>
+          <stop stopColor={color} stopOpacity="0" offset="0%" />
+          <stop stopColor={color} stopOpacity=".631" offset="63.146%" />
+          <stop stopColor={color} offset="100%" />
         </linearGradient>
       </defs>
       <g fill="none" fillRule="evenodd">

diff --git a/src/loader/ThreeDots.tsx b/src/loader/ThreeDots.tsx
@@ -2,14 +2,14 @@ import React, { FunctionComponent } from 'react'
 import { BaseProps, Style } from '../type'
 
 interface ThreeDotsProps extends BaseProps {
-  radius?: string | number,
+  radius?: string | number
 }
 
 const getDefaultStyle = (visible: boolean): Style => ({
   display: visible ? 'flex' : 'none'
 })
 
-const ThreeDots:FunctionComponent<ThreeDotsProps> = ({
+const ThreeDots: FunctionComponent<ThreeDotsProps> = ({
   height = 80,
   width = 80,
   radius = 9,
@@ -19,90 +19,94 @@ const ThreeDots:FunctionComponent<ThreeDotsProps> = ({
   wrapperClass,
   visible = true
 }) => (
-  <div style={{ ...getDefaultStyle(visible), ...wrapperStyle }} className={wrapperClass} data-testid="three-dots-loading">
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 120 30"
-    xmlns="http://www.w3.org/2000/svg"
-    fill={color}
-    aria-label={arialLabel}
-    data-testid="three-dots-svg"
+  <div
+    style={{ ...getDefaultStyle(visible), ...wrapperStyle }}
+    className={wrapperClass}
+    data-testid="three-dots-loading"
   >
-    <circle cx="15" cy="15" r={Number(radius) + 6}>
-      <animate
-        attributeName="r"
-        from="15"
-        to="15"
-        begin="0s"
-        dur="0.8s"
-        values="15;9;15"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="fill-opacity"
-        from="1"
-        to="1"
-        begin="0s"
-        dur="0.8s"
-        values="1;.5;1"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-    </circle>
-    <circle
-      cx="60"
-      cy="15"
-      r={radius}
-      attributeName="fill-opacity"
-      from="1"
-      to="0.3"
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 120 30"
+      xmlns="http://www.w3.org/2000/svg"
+      fill={color}
+      aria-label={arialLabel}
+      data-testid="three-dots-svg"
     >
-      <animate
-        attributeName="r"
-        from="9"
-        to="9"
-        begin="0s"
-        dur="0.8s"
-        values="9;15;9"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="fill-opacity"
-        from="0.5"
-        to="0.5"
-        begin="0s"
-        dur="0.8s"
-        values=".5;1;.5"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-    </circle>
-    <circle cx="105" cy="15" r={Number(radius) + 6}>
-      <animate
-        attributeName="r"
-        from="15"
-        to="15"
-        begin="0s"
-        dur="0.8s"
-        values="15;9;15"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-      <animate
+      <circle cx="15" cy="15" r={Number(radius) + 6}>
+        <animate
+          attributeName="r"
+          from="15"
+          to="15"
+          begin="0s"
+          dur="0.8s"
+          values="15;9;15"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="fill-opacity"
+          from="1"
+          to="1"
+          begin="0s"
+          dur="0.8s"
+          values="1;.5;1"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle
+        cx="60"
+        cy="15"
+        r={radius}
         attributeName="fill-opacity"
         from="1"
-        to="1"
-        begin="0s"
-        dur="0.8s"
-        values="1;.5;1"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-    </circle>
-  </svg>
+        to="0.3"
+      >
+        <animate
+          attributeName="r"
+          from="9"
+          to="9"
+          begin="0s"
+          dur="0.8s"
+          values="9;15;9"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="fill-opacity"
+          from="0.5"
+          to="0.5"
+          begin="0s"
+          dur="0.8s"
+          values=".5;1;.5"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+      <circle cx="105" cy="15" r={Number(radius) + 6}>
+        <animate
+          attributeName="r"
+          from="15"
+          to="15"
+          begin="0s"
+          dur="0.8s"
+          values="15;9;15"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="fill-opacity"
+          from="1"
+          to="1"
+          begin="0s"
+          dur="0.8s"
+          values="1;.5;1"
+          calcMode="linear"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </svg>
   </div>
 )