feat: Add transparent button

AppQuality · Dec 20, 2023 · b87e664 · b87e664
1 parent 6f003fe
commit b87e664
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 15 deletions.
diff --git a/src/stories/DateInput/index.tsx b/src/stories/DateInput/index.tsx
@@ -1,14 +1,14 @@
 import {
   Datepicker as MobiScrollDatePicker,
-  localeIt,
   localeEn,
   localeEs,
+  localeIt,
 } from "@appquality/mobiscroll";
 import { ChangeEventHandler, useState } from "react";
 import { Calendar } from "react-bootstrap-icons";
+import styled from "styled-components";
 import { Button } from "../button/Button";
 import { StyledInput as FormInput } from "../form/input/Input";
-import styled from "styled-components";
 
 const StyledInput = styled(FormInput)`
   .mbsc-appquality.mbsc-textfield {
@@ -121,7 +121,7 @@ const DateInput = ({
           title={buttonTitle}
           size="sm"
           htmlType="button"
-          type="light"
+          type="transparent"
           onClick={show}
         >
           <Calendar />

diff --git a/src/stories/button/_types.ts b/src/stories/button/_types.ts
@@ -11,7 +11,8 @@ export type ButtonProps = BaseProps & {
     | keyof typeof aqBootstrapTheme["palette"]
     | "link"
     | "light"
-    | "link-hover";
+    | "link-hover"
+    | "transparent";
   /**
    * How large should the button be?
    */

diff --git a/src/stories/button/getButtonStyle.ts b/src/stories/button/getButtonStyle.ts
@@ -1,7 +1,7 @@
 import { DefaultTheme } from "styled-components";
 import { ButtonProps } from "./_types";
 
-export default (
+const getButtonStyle = (
   type: ButtonProps["type"],
   flat: ButtonProps["flat"],
   disabled: ButtonProps["disabled"],
@@ -42,16 +42,23 @@ export default (
             : ``
         }
       `;
-  } else if (type === "light") {
+  }
+  if (type === "light") {
     return `
       border-color: transparent;
       background-color: ${theme.colors.white};
       `;
-  } else {
-    const color = type || "primary";
-    const colorStyle = variant ? theme.variants[color] : theme.palette[color];
+  }
+  if (type === "transparent") {
+    return `
+      border-color: transparent;
+      background-color: transparent;
+      `;
+  }
+  const color = type || "primary";
+  const colorStyle = variant ? theme.variants[color] : theme.palette[color];
 
-    let style = `
+  let style = `
     border: 1px solid ${colorStyle};
           background-color: ${colorStyle};
           color: ${theme.colors.white};
@@ -65,8 +72,8 @@ export default (
       }
     }`;
 
-    if (flat) {
-      style += `background-color: ${theme.colors.white};
+  if (flat) {
+    style += `background-color: ${theme.colors.white};
         color: ${colorStyle};
         
         &:active {
@@ -83,7 +90,6 @@ export default (
             color: ${theme.colors.white};
           }
         }`;
-    }
 
     if (disabled) {
       style += `
@@ -106,3 +112,5 @@ export default (
     return style;
   }
 };
+
+export default getButtonStyle;
diff --git a/src/stories/form/input/inputIcons/PasswordIcon.tsx b/src/stories/form/input/inputIcons/PasswordIcon.tsx
@@ -22,7 +22,7 @@ const PasswordIcon = ({
           }
           size="sm"
           htmlType="button"
-          type="light"
+          type="transparent"
           onClick={() => setType("password")}
         >
           <EyeSlash />
@@ -34,7 +34,7 @@ const PasswordIcon = ({
           }
           size="sm"
           htmlType="button"
-          type="light"
+          type="transparent"
           onClick={() => setType("text")}
         >
           <EyeFill />