From c43c8c0783f16de6bf4dddc15d347508c2e11412 Mon Sep 17 00:00:00 2001
From: Damien Erambert <damien@erambert.me>
Date: Mon, 21 Aug 2023 14:56:49 -0700
Subject: [PATCH 1/4] feat: add `Loader` component

---
 src/assets/images/loader.png                  | Bin 0 -> 5020 bytes
 src/assets/images/loaderGrey.png              | Bin 0 -> 4931 bytes
 src/assets/images/loaderGreySmall.png         | Bin 0 -> 2148 bytes
 src/assets/images/loaderSmall.png             | Bin 0 -> 2153 bytes
 src/components/loader/__docs__/docs.mdx       |  28 ++++++
 .../loader/__docs__/index.stories.tsx         |  28 ++++++
 .../loader/__docs__/stories/basic.stories.tsx |  19 ++++
 src/components/loader/loader.tsx              |  89 ++++++++++++++++++
 src/custom.d.ts                               |  11 ++-
 9 files changed, 173 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/images/loader.png
 create mode 100644 src/assets/images/loaderGrey.png
 create mode 100644 src/assets/images/loaderGreySmall.png
 create mode 100644 src/assets/images/loaderSmall.png
 create mode 100644 src/components/loader/__docs__/docs.mdx
 create mode 100644 src/components/loader/__docs__/index.stories.tsx
 create mode 100644 src/components/loader/__docs__/stories/basic.stories.tsx
 create mode 100644 src/components/loader/loader.tsx

diff --git a/src/assets/images/loader.png b/src/assets/images/loader.png
new file mode 100644
index 0000000000000000000000000000000000000000..c897b94f504205a5b4ef67643c9c83e8f9244e3d
GIT binary patch
literal 5020
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/loaderGrey.png b/src/assets/images/loaderGrey.png
new file mode 100644
index 0000000000000000000000000000000000000000..9bdbd92de7583a5feef53c5367cadeb8daf48ca6
GIT binary patch
literal 4931
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
BZK41G

literal 0
HcmV?d00001

diff --git a/src/assets/images/loaderGreySmall.png b/src/assets/images/loaderGreySmall.png
new file mode 100644
index 0000000000000000000000000000000000000000..bed8549973a11ebe8be16b238f69e076e9f9fa18
GIT binary patch
literal 2148
zcmV-q2%GnbP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700001b5ch_0Itp)
z=>Px-9!W$&R9FecSX*pdM;ZR-a`vp9*sg2GjnhOpp*9dz2_P%&11Jh05GpBDLU{-z
z$aXeP5i*ZF^d&EdH!h)xaN-M?he#Hxs)|r55Fu)KqeVeh5Tr^=iELBbv1@zR-aTjL
z=ljQA%Z=mO4z)9@bDJ|e|98IsI-}?TTX*-b8<q7>lS^8ZQgy6p2YISjiY&99P}<)m
z(i7zQUqtTpTrPL#K}4yI{Hc3zu!g4d&nWg!Yo(i*0f$mcq!g3VMCeco0MVgHo;7=A
zLcdn;;O(C^yTMbZP67P-+PVPt_xER=qoWXd)Oo+1fy@}K1rB>}F^OWOwL(9{MrD8)
zue>K4-jXu%L14DzNe^&C{Xpl@qlL9#t_iTG=U0auyADnK2&Px5X8>9R2!TwC00{um
z9{>UvUMw&OV1YpfvqCkP4ZulFDNjGl<=X!6VIWrpC@fv->-z?%`6k3de{xpJ0U+U>
zHP)kR$T|0hQs!MEbGN1@Ga<reXJ_lZH}%YZFKIrEu2$G*7FWn)00w?0gR^||g^rH4
z^SA>4%64CXgM)*a_h$+@B7cY&Dni5mgGwQ21`hEXPLkI<J3H4@k^J}k`SaW3xbmx*
z<FxmxK^VmmY*jB<#%tE{58B$==4JfywgR9q*VEH~h7})@do-vD)5$IK%Tc7S+;5`g
zldg7;53iV-n)wdCwo_@9l}UwBnH%@7<#O%cyO+ro0DF6TpY=q~x@18GIuaA2X{YJu
zXWH6sttNaU{g81G8h#N3>|k<MSYQXpihq{Nb^LVsTps`khxiP$I|F-%c3rR$c-*ii
z|C5b`hUEfQyGLZ$nL6%e&-=w`5Cvo?%$c6gwYB}O{J+pE4-!hePmaSTJX8rA_W05J
zn*mPb!AwTIOHP5jae0Q07ovdkKN=Vq*d~3_mH?(HeF1|j;FTnYHkmoAD_;DlnOhLM
zaE6nOctf2KmY@f=Bxa==N~QGq^0)vHHc^$b`w|!f$8cA$h!pkv_V#bxE)U$SYiE1=
zo6s2SQ7JEa4sN5q+t=5(Lu3Yk0Q7lli~{_WiBkl)$wFcJkDCSR-gz?_(_;*e8w4_T
zJ|gF<lY|lG76CfPPm)g;td6y}I(oIMtE+hLM4R<|^5n@pLgSBNgp$)?jz|oez7_y>
zcX!u&GCRO7G;AD*PPKM_-7GMx&703hFToFhOo2x-+UQTgS@vpUVz@c9AAVv9eCt62
z@oK`?)8Ezg?P&zuzewDZ17Sp$Qho+DnC@bS467)WL#gQR>zQyf#-Kua)qBnWT;#ov
z*t=HkSXT>e;=LkNW$k}AL-=~;g#P|1HYkS#Z)A&I)@rWAixg<lN0cZ9svk~+Cy#I{
z^`jIhA>y=XfRh4LN;PCP<%{FvGY<zIT-2E1V1U64#VM#!N+|CoFv~$Wo_OM6;iKEP
zZ_h!!A@v0iOcNT^&A?N{{=!i+Hn#m?Av}BbtT#$`K>i&$5OF$Sf^G_{uxd$j(vl<*
zfT1!D9b0$;K%J)ZlEL<kjEwO9{rlN!9ZjP&7xqG9Z|iaM@5RS0y#SE9dGn_DDh&@0
z2iX>@t`V^JNp=W<A=LPf<INl4?G~T%NGFF6AEw>Ack}h@*L71<Q>sfPd&{Rz3LTGP
z6+UD3oI7_e-ePRX9IOh3f{o)?jg5`LEt=@swQJs7x$@HdbI*OfS(_+E{)4WS*O_Sc
zx39dir2)IHt}ecl&tzuD{-cM6hD@3odf|odmqNM4Y;FmAU=7;#6lr}3MMSh!EDC$^
z&YjtP`)cX#U8l3zMpa*rsu?XTDV;0+jhy~8Y!J`NBQ<BOwFmKjORAa+7cOjbt|B9V
znwuNa%F0T*apOiwo`c884Jz2DfcYt}2!4b83-SrR>}72FY^thd4W6cH?b~m^N105_
zwY5=NU0pqQ?AWn6!4*_2HwO+JcoS9Fj8&XMw@ArY5NrLF<qH@Y_ffX1SFhU1$;rCW
z(NWvnyh}a)cnusy8-$vrVtEN*Yiny_$X^SJm)hDR1$vc5>HX!+04d;*+8V%~t*WY0
z#bPlWRaJXuB%_pxSW<Dh;}^ZXtsw8S#w*mfa2bKA)SNN&r}p;tvGTb8=PEl4$XE@|
zMLM6K;3$e1Ax5~F#!}-0)zk`r;!&6S`@d*O?}3uB1(QgO!X&zc`=OSWmVX>MawLG?
zC`e4BFJ8R(C_ea6tt;S+4!d`AP5|OQfBN+43A|g%YBK){fYK@SzxCETpTpRX34<ti
zIIgs*0QHF~z{_tE72n0WR@Sp?HZW#jYqd(nkEyKoK*mU60*bTQtjv*zy2qERwmj*5
z0m@5YQI{_L@*q~CPYN)tvkqI9GAW91Y@8-Zin}pg84XuzJ%cZwhmc_0jg5^GGNMc-
zQ-QCm!GW67V(-&)s$Cjqv57G^7Xa4O)Vz26`0=TGnOhTJdBEk%m-m!PrPe|riNPov
zV-t8cqv{ac992}5peH;dU!t}|(dne0QcCc^TuK74=#g!Sk#U6rwhj$y__PSsj&^i(
zd}x8ZDuZQ!a+R!tSwCT|X_03rI@GxVh%t+RR{{iBE-eC#x5ue4DD@oFI(Fj3iE*&D
z<gGIA{o1+!mj5UlOaQgdIlB{kt=k|E+E!RcgQ${&FfbS|FbGRSzc?B82{16O%Fbf*
z8aoz+@%7rS$lVaYGElinY(zqTjCsBapkp|a?DJ)8*20H;(aq1#fvMvByq?Kq(#Z#1
aYyS^&=2SN*3S7_t0000<MNUMnLSTYO$QV}u

literal 0
HcmV?d00001

diff --git a/src/assets/images/loaderSmall.png b/src/assets/images/loaderSmall.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d47b2bd74a0dcf9728f7599736a11b65fb4f472
GIT binary patch
literal 2153
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

literal 0
HcmV?d00001

diff --git a/src/components/loader/__docs__/docs.mdx b/src/components/loader/__docs__/docs.mdx
new file mode 100644
index 0000000..074233c
--- /dev/null
+++ b/src/components/loader/__docs__/docs.mdx
@@ -0,0 +1,28 @@
+import {ArgsTable, Canvas, Meta, Story} from '@storybook/addon-docs';
+import {Loader} from '../loader';
+
+<Meta title="Components/Loader" of={Loader} />
+
+# Loader
+
+<Canvas>
+  <Story id="components-loader--basic" />
+</Canvas>
+<Canvas>
+  <Story id="components-loader--big" />
+</Canvas>
+
+```typescript
+import {Loader} from '@frontapp/ui-kit';
+```
+
+Indicates that content is loading or that an action is taking place.
+
+<br />
+
+## Props
+
+<ArgsTable of={Loader} />
+
+<hr />
+<hr />
diff --git a/src/components/loader/__docs__/index.stories.tsx b/src/components/loader/__docs__/index.stories.tsx
new file mode 100644
index 0000000..7f763dc
--- /dev/null
+++ b/src/components/loader/__docs__/index.stories.tsx
@@ -0,0 +1,28 @@
+/* eslint-disable storybook/story-exports */
+import {ComponentMeta} from '@storybook/react';
+
+import {Loader} from '../loader';
+import DocumentationMDX from './docs.mdx';
+
+/*
+ * Storybook.
+ */
+
+export default {
+  title: 'Components/Loader',
+  component: Loader,
+  parameters: {
+    docs: {
+      page: DocumentationMDX
+    },
+    previewTabs: {
+      canvas: {
+        hidden: true
+      }
+    },
+    viewMode: 'docs'
+  },
+  id: 'Components/Loader'
+} as ComponentMeta<typeof Loader>;
+
+export {Basic, Big} from './stories/basic.stories';
diff --git a/src/components/loader/__docs__/stories/basic.stories.tsx b/src/components/loader/__docs__/stories/basic.stories.tsx
new file mode 100644
index 0000000..b3d6b9e
--- /dev/null
+++ b/src/components/loader/__docs__/stories/basic.stories.tsx
@@ -0,0 +1,19 @@
+import {ComponentStory} from '@storybook/react';
+import React from 'react';
+
+import {VisualSizesEnum} from '../../../../helpers/fontHelpers';
+import {Loader, LoaderColorVariantsEnum} from '../../loader';
+
+export const Basic: ComponentStory<typeof Loader> = (args) => (
+  <div style={{display: 'flex', gap: 10}}>
+    <Loader {...args} size={VisualSizesEnum.SMALL} color={LoaderColorVariantsEnum.BLUE} />
+    <Loader {...args} size={VisualSizesEnum.SMALL} color={LoaderColorVariantsEnum.GREY} />
+  </div>
+);
+
+export const Big: ComponentStory<typeof Loader> = (args) => (
+  <div style={{display: 'flex', gap: 20}}>
+    <Loader {...args} size={VisualSizesEnum.LARGE} color={LoaderColorVariantsEnum.BLUE} />
+    <Loader {...args} size={VisualSizesEnum.LARGE} color={LoaderColorVariantsEnum.GREY} />
+  </div>
+);
diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx
new file mode 100644
index 0000000..69a8912
--- /dev/null
+++ b/src/components/loader/loader.tsx
@@ -0,0 +1,89 @@
+import React, {FC} from 'react';
+import styled, {css, keyframes} from 'styled-components';
+
+import loader from '../../assets/images/loader.png';
+import loaderGrey from '../../assets/images/loaderGrey.png';
+import loaderGreySmall from '../../assets/images/loaderGreySmall.png';
+import loaderSmall from '../../assets/images/loaderSmall.png';
+import {VisualSizesEnum} from '../../helpers/fontHelpers';
+import {makeSizeConstants} from '../../helpers/styleHelpers';
+
+/*
+ * Props.
+ */
+
+export enum LoaderColorVariantsEnum {
+  BLUE = 'BASE',
+  GREY = 'GREY'
+}
+
+interface LoaderProps {
+  className?: string;
+  /** Size of the loader. */
+  size?: VisualSizesEnum;
+  /** Color scheme of the loader. */
+  color?: LoaderColorVariantsEnum;
+  /** Whether or not the loader rotates. */
+  isEnabled?: boolean;
+}
+
+const defaultProps = {
+  size: VisualSizesEnum.LARGE,
+  variant: LoaderColorVariantsEnum.BLUE,
+  isEnabled: true
+};
+
+/*
+ * Style.
+ */
+
+const sizes = makeSizeConstants(16, 20, 40);
+const images = {
+  [LoaderColorVariantsEnum.BLUE]: makeSizeConstants(loaderSmall, loaderSmall, loader),
+  [LoaderColorVariantsEnum.GREY]: makeSizeConstants(loaderGreySmall, loaderGreySmall, loaderGrey)
+};
+
+interface LoaderStyleProps {
+  $size: VisualSizesEnum;
+  $variant: LoaderColorVariantsEnum;
+  $isEnabled: boolean;
+}
+const StyledLoaderDiv = styled.div<LoaderStyleProps>`
+  width: ${(p) => sizes[p.$size]}px;
+  height: ${(p) => sizes[p.$size]}px;
+  background-image: url(${(p) => images[p.$variant][p.$size]});
+  background-size: ${(p) => sizes[p.$size]}px;
+
+  ${(p) => maybeAnimate(p.$isEnabled)};
+`;
+
+const rotate360 = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+function maybeAnimate(isEnabled: boolean) {
+  if (!isEnabled) return '';
+
+  return css`
+    animation: ${rotate360} 0.6s linear infinite;
+  `;
+}
+
+/*
+ * Component.
+ */
+
+export const Loader: FC<LoaderProps> = (props) => (
+  <StyledLoaderDiv
+    $size={props.size ?? defaultProps.size}
+    $variant={props.color ?? defaultProps.variant}
+    $isEnabled={props.isEnabled ?? defaultProps.isEnabled}
+    className={props.className}
+    data-testid="loader"
+  />
+);
diff --git a/src/custom.d.ts b/src/custom.d.ts
index b1719a4..4445e1b 100644
--- a/src/custom.d.ts
+++ b/src/custom.d.ts
@@ -1,7 +1,14 @@
 /* eslint-disable import/no-default-export */
-declare module "*.svg" {
-  const ReactComponent: (props: React.SVGAttributes<SVGElement>) => React.ReactElement<React.SVGAttributes<SVGElement>>;
+declare module '*.svg' {
+  const ReactComponent: (
+    props: React.SVGAttributes<SVGElement>
+  ) => React.ReactElement<React.SVGAttributes<SVGElement>>;
 
   export {ReactComponent};
   export default ReactComponent;
 }
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}

From 932b820e4559291bfbf6862587ae87cba29c9941 Mon Sep 17 00:00:00 2001
From: Damien Erambert <damien@erambert.me>
Date: Mon, 21 Aug 2023 15:11:40 -0700
Subject: [PATCH 2/4] :shirt:

---
 .../loader/__docs__/stories/basic.stories.tsx     |  4 ++--
 src/components/loader/loader.tsx                  | 15 ++++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/loader/__docs__/stories/basic.stories.tsx b/src/components/loader/__docs__/stories/basic.stories.tsx
index b3d6b9e..cd63bf8 100644
--- a/src/components/loader/__docs__/stories/basic.stories.tsx
+++ b/src/components/loader/__docs__/stories/basic.stories.tsx
@@ -4,14 +4,14 @@ import React from 'react';
 import {VisualSizesEnum} from '../../../../helpers/fontHelpers';
 import {Loader, LoaderColorVariantsEnum} from '../../loader';
 
-export const Basic: ComponentStory<typeof Loader> = (args) => (
+export const Basic: ComponentStory<typeof Loader> = args => (
   <div style={{display: 'flex', gap: 10}}>
     <Loader {...args} size={VisualSizesEnum.SMALL} color={LoaderColorVariantsEnum.BLUE} />
     <Loader {...args} size={VisualSizesEnum.SMALL} color={LoaderColorVariantsEnum.GREY} />
   </div>
 );
 
-export const Big: ComponentStory<typeof Loader> = (args) => (
+export const Big: ComponentStory<typeof Loader> = args => (
   <div style={{display: 'flex', gap: 20}}>
     <Loader {...args} size={VisualSizesEnum.LARGE} color={LoaderColorVariantsEnum.BLUE} />
     <Loader {...args} size={VisualSizesEnum.LARGE} color={LoaderColorVariantsEnum.GREY} />
diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx
index 69a8912..e1c83d0 100644
--- a/src/components/loader/loader.tsx
+++ b/src/components/loader/loader.tsx
@@ -49,12 +49,12 @@ interface LoaderStyleProps {
   $isEnabled: boolean;
 }
 const StyledLoaderDiv = styled.div<LoaderStyleProps>`
-  width: ${(p) => sizes[p.$size]}px;
-  height: ${(p) => sizes[p.$size]}px;
-  background-image: url(${(p) => images[p.$variant][p.$size]});
-  background-size: ${(p) => sizes[p.$size]}px;
+  width: ${p => sizes[p.$size]}px;
+  height: ${p => sizes[p.$size]}px;
+  background-image: url(${p => images[p.$variant][p.$size]});
+  background-size: ${p => sizes[p.$size]}px;
 
-  ${(p) => maybeAnimate(p.$isEnabled)};
+  ${p => maybeAnimate(p.$isEnabled)};
 `;
 
 const rotate360 = keyframes`
@@ -67,7 +67,8 @@ const rotate360 = keyframes`
 `;
 
 function maybeAnimate(isEnabled: boolean) {
-  if (!isEnabled) return '';
+  if (!isEnabled)
+    return '';
 
   return css`
     animation: ${rotate360} 0.6s linear infinite;
@@ -78,7 +79,7 @@ function maybeAnimate(isEnabled: boolean) {
  * Component.
  */
 
-export const Loader: FC<LoaderProps> = (props) => (
+export const Loader: FC<LoaderProps> = props => (
   <StyledLoaderDiv
     $size={props.size ?? defaultProps.size}
     $variant={props.color ?? defaultProps.variant}

From 786ad68a23215aa15d41640683270515d8b2f902 Mon Sep 17 00:00:00 2001
From: Damien Erambert <damien@erambert.me>
Date: Mon, 21 Aug 2023 15:16:40 -0700
Subject: [PATCH 3/4] run prettier

---
 .../loader/__docs__/stories/basic.stories.tsx     |  4 ++--
 src/components/loader/loader.tsx                  | 15 +++++++--------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/loader/__docs__/stories/basic.stories.tsx b/src/components/loader/__docs__/stories/basic.stories.tsx
index cd63bf8..b3d6b9e 100644
--- a/src/components/loader/__docs__/stories/basic.stories.tsx
+++ b/src/components/loader/__docs__/stories/basic.stories.tsx
@@ -4,14 +4,14 @@ import React from 'react';
 import {VisualSizesEnum} from '../../../../helpers/fontHelpers';
 import {Loader, LoaderColorVariantsEnum} from '../../loader';
 
-export const Basic: ComponentStory<typeof Loader> = args => (
+export const Basic: ComponentStory<typeof Loader> = (args) => (
   <div style={{display: 'flex', gap: 10}}>
     <Loader {...args} size={VisualSizesEnum.SMALL} color={LoaderColorVariantsEnum.BLUE} />
     <Loader {...args} size={VisualSizesEnum.SMALL} color={LoaderColorVariantsEnum.GREY} />
   </div>
 );
 
-export const Big: ComponentStory<typeof Loader> = args => (
+export const Big: ComponentStory<typeof Loader> = (args) => (
   <div style={{display: 'flex', gap: 20}}>
     <Loader {...args} size={VisualSizesEnum.LARGE} color={LoaderColorVariantsEnum.BLUE} />
     <Loader {...args} size={VisualSizesEnum.LARGE} color={LoaderColorVariantsEnum.GREY} />
diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx
index e1c83d0..69a8912 100644
--- a/src/components/loader/loader.tsx
+++ b/src/components/loader/loader.tsx
@@ -49,12 +49,12 @@ interface LoaderStyleProps {
   $isEnabled: boolean;
 }
 const StyledLoaderDiv = styled.div<LoaderStyleProps>`
-  width: ${p => sizes[p.$size]}px;
-  height: ${p => sizes[p.$size]}px;
-  background-image: url(${p => images[p.$variant][p.$size]});
-  background-size: ${p => sizes[p.$size]}px;
+  width: ${(p) => sizes[p.$size]}px;
+  height: ${(p) => sizes[p.$size]}px;
+  background-image: url(${(p) => images[p.$variant][p.$size]});
+  background-size: ${(p) => sizes[p.$size]}px;
 
-  ${p => maybeAnimate(p.$isEnabled)};
+  ${(p) => maybeAnimate(p.$isEnabled)};
 `;
 
 const rotate360 = keyframes`
@@ -67,8 +67,7 @@ const rotate360 = keyframes`
 `;
 
 function maybeAnimate(isEnabled: boolean) {
-  if (!isEnabled)
-    return '';
+  if (!isEnabled) return '';
 
   return css`
     animation: ${rotate360} 0.6s linear infinite;
@@ -79,7 +78,7 @@ function maybeAnimate(isEnabled: boolean) {
  * Component.
  */
 
-export const Loader: FC<LoaderProps> = props => (
+export const Loader: FC<LoaderProps> = (props) => (
   <StyledLoaderDiv
     $size={props.size ?? defaultProps.size}
     $variant={props.color ?? defaultProps.variant}

From 9616490a471ff95824345d723a5ba56986ec2988 Mon Sep 17 00:00:00 2001
From: Damien Erambert <damien@erambert.me>
Date: Tue, 22 Aug 2023 09:52:14 -0700
Subject: [PATCH 4/4] feedback

---
 .../loader/__docs__/stories/basic.stories.tsx | 11 ++++----
 src/components/loader/loader.tsx              | 26 ++++++++-----------
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/loader/__docs__/stories/basic.stories.tsx b/src/components/loader/__docs__/stories/basic.stories.tsx
index b3d6b9e..5de2f9f 100644
--- a/src/components/loader/__docs__/stories/basic.stories.tsx
+++ b/src/components/loader/__docs__/stories/basic.stories.tsx
@@ -1,19 +1,20 @@
 import {ComponentStory} from '@storybook/react';
 import React from 'react';
 
+import {PaletteColorsEnum} from '../../../../helpers/colorHelpers';
 import {VisualSizesEnum} from '../../../../helpers/fontHelpers';
-import {Loader, LoaderColorVariantsEnum} from '../../loader';
+import {Loader} from '../../loader';
 
 export const Basic: ComponentStory<typeof Loader> = (args) => (
   <div style={{display: 'flex', gap: 10}}>
-    <Loader {...args} size={VisualSizesEnum.SMALL} color={LoaderColorVariantsEnum.BLUE} />
-    <Loader {...args} size={VisualSizesEnum.SMALL} color={LoaderColorVariantsEnum.GREY} />
+    <Loader {...args} size={VisualSizesEnum.SMALL} color={PaletteColorsEnum.BLUE} />
+    <Loader {...args} size={VisualSizesEnum.SMALL} color={PaletteColorsEnum.GREY} />
   </div>
 );
 
 export const Big: ComponentStory<typeof Loader> = (args) => (
   <div style={{display: 'flex', gap: 20}}>
-    <Loader {...args} size={VisualSizesEnum.LARGE} color={LoaderColorVariantsEnum.BLUE} />
-    <Loader {...args} size={VisualSizesEnum.LARGE} color={LoaderColorVariantsEnum.GREY} />
+    <Loader {...args} size={VisualSizesEnum.LARGE} color={PaletteColorsEnum.BLUE} />
+    <Loader {...args} size={VisualSizesEnum.LARGE} color={PaletteColorsEnum.GREY} />
   </div>
 );
diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx
index 69a8912..fe74cc6 100644
--- a/src/components/loader/loader.tsx
+++ b/src/components/loader/loader.tsx
@@ -5,6 +5,7 @@ import loader from '../../assets/images/loader.png';
 import loaderGrey from '../../assets/images/loaderGrey.png';
 import loaderGreySmall from '../../assets/images/loaderGreySmall.png';
 import loaderSmall from '../../assets/images/loaderSmall.png';
+import {PaletteColorsEnum} from '../../helpers/colorHelpers';
 import {VisualSizesEnum} from '../../helpers/fontHelpers';
 import {makeSizeConstants} from '../../helpers/styleHelpers';
 
@@ -12,26 +13,21 @@ import {makeSizeConstants} from '../../helpers/styleHelpers';
  * Props.
  */
 
-export enum LoaderColorVariantsEnum {
-  BLUE = 'BASE',
-  GREY = 'GREY'
-}
-
 interface LoaderProps {
   className?: string;
   /** Size of the loader. */
   size?: VisualSizesEnum;
   /** Color scheme of the loader. */
-  color?: LoaderColorVariantsEnum;
+  color?: PaletteColorsEnum.GREY | PaletteColorsEnum.BLUE;
   /** Whether or not the loader rotates. */
-  isEnabled?: boolean;
+  isAnimated?: boolean;
 }
 
 const defaultProps = {
   size: VisualSizesEnum.LARGE,
-  variant: LoaderColorVariantsEnum.BLUE,
-  isEnabled: true
-};
+  color: PaletteColorsEnum.BLUE,
+  isAnimated: true
+} as const;
 
 /*
  * Style.
@@ -39,13 +35,13 @@ const defaultProps = {
 
 const sizes = makeSizeConstants(16, 20, 40);
 const images = {
-  [LoaderColorVariantsEnum.BLUE]: makeSizeConstants(loaderSmall, loaderSmall, loader),
-  [LoaderColorVariantsEnum.GREY]: makeSizeConstants(loaderGreySmall, loaderGreySmall, loaderGrey)
+  [PaletteColorsEnum.BLUE]: makeSizeConstants(loaderSmall, loaderSmall, loader),
+  [PaletteColorsEnum.GREY]: makeSizeConstants(loaderGreySmall, loaderGreySmall, loaderGrey)
 };
 
 interface LoaderStyleProps {
   $size: VisualSizesEnum;
-  $variant: LoaderColorVariantsEnum;
+  $variant: PaletteColorsEnum.GREY | PaletteColorsEnum.BLUE;
   $isEnabled: boolean;
 }
 const StyledLoaderDiv = styled.div<LoaderStyleProps>`
@@ -81,8 +77,8 @@ function maybeAnimate(isEnabled: boolean) {
 export const Loader: FC<LoaderProps> = (props) => (
   <StyledLoaderDiv
     $size={props.size ?? defaultProps.size}
-    $variant={props.color ?? defaultProps.variant}
-    $isEnabled={props.isEnabled ?? defaultProps.isEnabled}
+    $variant={props.color ?? defaultProps.color}
+    $isEnabled={props.isAnimated ?? defaultProps.isAnimated}
     className={props.className}
     data-testid="loader"
   />