Merge pull request #124 from buildo/4602108-area_loader_configuration_update

gabro · web-flow · commit 3cb436661d6e · 2022-04-05T16:19:04.000+02:00
#4602108: Area Loader configuration update
diff --git a/packages/bento-design-system/src/AreaLoader/Config.ts b/packages/bento-design-system/src/AreaLoader/Config.ts
@@ -1,8 +1,13 @@
+import { BentoSprinkles } from "../internal";
+
 type DotConfig = {
   color: "brandPrimary" | "brandSecondary" | "brandTertiary";
 };
 export type AreaLoaderConfig = {
   dots: DotConfig[];
-  overlay: "light" | "dark";
-  visibilityAreaColor: "primary" | "secondary" | "primary-inverse" | "secondary-inverse";
+  scrimColor: "light" | "dark";
+  messageSize: "small" | "medium" | "large";
+  messageColor: "primary" | "primary-inverse";
+  readabilityAreaColor: "primary" | "secondary" | "primary-inverse" | "secondary-inverse";
+  readabilityAreaBorderRadius: BentoSprinkles["borderRadius"];
 };
diff --git a/packages/bento-design-system/src/AreaLoader/createAreaLoader.tsx b/packages/bento-design-system/src/AreaLoader/createAreaLoader.tsx
@@ -3,9 +3,10 @@ import { BentoSprinkles, bentoSprinkles, Box, Inline, Stack } from "../internal"
 import { container, dot, text } from "./AreaLoader.css";
 import { Body, LocalizedString } from "..";
 import { AreaLoaderConfig } from "./Config";
+import { BodyProps } from "../Typography/Body/Body";
 
-function visibilityAreaColorToBackground(
-  color: AreaLoaderConfig["visibilityAreaColor"]
+function readabilityAreaColorToBackground(
+  color: AreaLoaderConfig["readabilityAreaColor"]
 ): BentoSprinkles["background"] {
   switch (color) {
     case "primary":
@@ -19,6 +20,15 @@ function visibilityAreaColorToBackground(
   }
 }
 
+function messageColorToBodyColor(color: AreaLoaderConfig["messageColor"]): BodyProps["color"] {
+  switch (color) {
+    case "primary":
+      return "default";
+    case "primary-inverse":
+      return "primaryInverse";
+  }
+}
+
 type Props = {
   message?: LocalizedString;
 };
@@ -46,14 +56,16 @@ export function createAreaLoader(config: AreaLoaderConfig) {
         className={clsx(
           container,
           bentoSprinkles({
-            background: config.overlay === "dark" ? "backgroundDarkScrim" : "backgroundLightScrim",
+            background:
+              config.scrimColor === "dark" ? "backgroundDarkScrim" : "backgroundLightScrim",
           })
         )}
       >
         <Box
           padding={80}
           className={bentoSprinkles({
-            background: visibilityAreaColorToBackground(config.visibilityAreaColor),
+            background: readabilityAreaColorToBackground(config.readabilityAreaColor),
+            borderRadius: config.readabilityAreaBorderRadius,
           })}
         >
           <Stack space={32}>
@@ -70,7 +82,12 @@ export function createAreaLoader(config: AreaLoaderConfig) {
             </Inline>
             {message && (
               <Box className={text}>
-                <Body size="medium">{message}</Body>
+                <Body
+                  size={config.messageSize}
+                  color={messageColorToBodyColor(config.messageColor)}
+                >
+                  {message}
+                </Body>
               </Box>
             )}
           </Stack>
diff --git a/packages/bento-design-system/src/util/defaultConfigs.tsx b/packages/bento-design-system/src/util/defaultConfigs.tsx
@@ -53,8 +53,11 @@ export const actions: ActionsConfig = {
 
 export const areaLoader: AreaLoaderConfig = {
   dots: [{ color: "brandPrimary" }, { color: "brandSecondary" }, { color: "brandTertiary" }],
-  overlay: "light",
-  visibilityAreaColor: "primary",
+  scrimColor: "light",
+  messageColor: "primary",
+  messageSize: "medium",
+  readabilityAreaColor: "primary",
+  readabilityAreaBorderRadius: undefined,
 };
 
 export const avatar: AvatarConfig = {
