Include loader styles on wireframe theme

Author: Hector Arce De Las Heras

src/designSystem/kubitWireframe/commons/components/loader/index.ts

@@ -0,0 +1,2 @@
+export * from './styles';
+export * from './variants';

src/designSystem/kubitWireframe/commons/components/loader/styles.ts

@@ -0,0 +1,31 @@
+import { LoaderStylesType } from '@/components/loader/types';
+
+import { buildPrimaryLoader } from '../../assets/animations';
+import { SIZES } from '../../foundations';
+import { LoaderVariantType } from './variants';
+
+const container = {
+  display: 'inline-block',
+  width: SIZES.size_200,
+  height: SIZES.size_200,
+};
+const transparent = 'transparent';
+
+export const getLoaderStyles = (COLORS: {
+  [key: string]: { [key: string]: string };
+}): LoaderStylesType<LoaderVariantType> => {
+  return {
+    [LoaderVariantType.PRIMARY_WHITE]: {
+      container,
+      animation: buildPrimaryLoader(COLORS.NEUTRAL.color_neutral_icon_250, transparent),
+    },
+    [LoaderVariantType.PRIMARY_RED]: {
+      container,
+      animation: buildPrimaryLoader(COLORS.SECONDARY.color_secondary_icon_100, transparent),
+    },
+    [LoaderVariantType.PRIMARY_BLACK]: {
+      container,
+      animation: buildPrimaryLoader(COLORS.NEUTRAL.color_neutral_icon_50, transparent),
+    },
+  };
+};

src/designSystem/kubitWireframe/commons/components/loader/variants.ts

@@ -0,0 +1,5 @@
+export enum LoaderVariantType {
+  PRIMARY_WHITE = 'PRIMARY_WHITE',
+  PRIMARY_RED = 'PRIMARY_RED',
+  PRIMARY_BLACK = 'PRIMARY_BLACK',
+}

src/designSystem/kubitWireframe/commons/components/styles.ts

@@ -31,6 +31,7 @@ import { LAYOUT_STYLES } from './layout';
 import { getLineSeparatorStyles } from './lineSeparator';
 import { getLinkStyles } from './link';
 import { getListOptionsStyles } from './listOptions';
+import { getLoaderStyles } from './loader';
 import { getMessageStyles } from './message';
 import { getModalStyles } from './modal';
 import { getNavigationCardStyles } from './navigationCard';
@@ -114,4 +115,5 @@ export const getComponentsStyles = (COLORS: {
   TOGGLE_STYLES: getToggleStyles(COLORS),
   TOOLTIP_STYLES: getTooltipStyles(COLORS),
   VALIDATION_STATUS_STYLES: getValidationStatusStyles(COLORS),
+  LOADER_STYLES: getLoaderStyles(COLORS),
 });

src/designSystem/kubitWireframe/commons/components/variants.ts

@@ -54,3 +54,4 @@ export * from './thirdPartyAnimation/variants';
 export * from './toggle/variants';
 export * from './tooltip/variants';
 export * from './validationStatus/variants';
+export * from './loader/variants';