fix(Button): Fix enhancers

src/button/button.stories.tsx

@@ -18,6 +18,7 @@ export default {
         ButtonAppearance.outline,
         ButtonAppearance.primary,
         ButtonAppearance.secondary,
+        ButtonAppearance.tertiary,
       ],
       control: { type: "radio" },
     },
@@ -34,7 +35,7 @@ export const Default = Template.bind({});
 Default.args = {
   children: "Button",
   disabled: false,
-  isLoading: true,
+  isLoading: false,
 };
 
 export const Icon = Template.bind({});
@@ -44,3 +45,37 @@ Icon.args = {
   disabled: false,
   isLoading: false,
 };
+
+export const StartEnhancer = Template.bind({});
+StartEnhancer.args = {
+  children: "Button",
+  startEnhancer: <PlusCircle />,
+  disabled: false,
+  isLoading: false,
+};
+
+export const EndEnhancer = Template.bind({});
+EndEnhancer.args = {
+  children: "Button",
+  endEnhancer: <PlusCircle />,
+  disabled: false,
+  isLoading: false,
+};
+
+export const CustomWidth = Template.bind({});
+CustomWidth.args = {
+  children: "Button",
+  icon: <PlusCircle />,
+  disabled: false,
+  isLoading: false,
+  style: { width: "250px" },
+};
+
+export const CustomWidthStartEnhancer = Template.bind({});
+CustomWidthStartEnhancer.args = {
+  children: "Button",
+  startEnhancer: <PlusCircle />,
+  disabled: false,
+  isLoading: false,
+  style: { width: "250px" },
+};

src/button/button.tsx

@@ -9,6 +9,7 @@ export enum ButtonAppearance {
   minimal = "minimal",
   primary = "primary",
   secondary = "secondary",
+  tertiary = "tertiary",
   outline = "outline",
 }
 
@@ -29,9 +30,11 @@ export type ButtonProps = PropsWithChildren<{
   type?: "submit" | "button";
   icon?: ReactNode;
   overrides?: ButtonOverrides;
+  startEnhancer?: ReactNode;
+  endEnhancer?: ReactNode;
 }>;
 
-const Button = (props: ButtonProps) => {
+export default function Button(props: ButtonProps) {
   const [css, theme] = useStyletron();
 
   const { appearance, size, overrides = {}, style = {}, radius } = props;
@@ -47,6 +50,9 @@ const Button = (props: ButtonProps) => {
         {
           BaseButton: {
             style: () => ({
+              ...(props.startEnhancer || props.endEnhancer
+                ? { justifyContent: "space-between" }
+                : {}),
               ...(appearance === ButtonAppearance.outline
                 ? border({
                     style: "solid",
@@ -70,12 +76,14 @@ const Button = (props: ButtonProps) => {
       kind={kind}
       isLoading={props.isLoading}
       disabled={props.disabled}
+      startEnhancer={props.startEnhancer}
+      endEnhancer={props.endEnhancer}
     >
       {props.icon && (
         <span
           className={css(
             props.children
-              ? { marginRight: "0.5rem", lineHeight: 0 }
+              ? { marginRight: "12px", lineHeight: 0 }
               : { lineHeight: 0 }
           )}
         >
@@ -85,6 +93,4 @@ const Button = (props: ButtonProps) => {
       {props.children}
     </BaseButton>
   );
-};
-
-export default Button;
+}

src/themes/campervan.ts

@@ -1,14 +1,26 @@
-import { LightThemeMove, lightThemePrimitives } from "baseui";
+import { lightThemePrimitives } from "baseui";
 
 export const primitives = {
   ...lightThemePrimitives,
+  accent: "rgb(48, 123, 247)",
+  primary: "rgb(34, 29, 39)",
+  primaryA: "rgb(55, 51, 58)",
+  primaryB: "rgb(237, 236, 240)",
+  negative: "#f18c8e",
+  warning: "#f5ab35",
+  positive: "#1dbc60",
+  primaryFontFamily: '"Montserrat", sans-serif',
 };
 
 export const overrides = {
-  colors: {},
+  colors: {
+    buttonSecondaryFill: primitives.primaryB,
+    buttonTertiaryFill: primitives.accent,
+    buttonTertiaryText: primitives.primaryB,
+    buttonTertiaryHover: "rgb(33, 88, 158)",
+  },
   borders: {
     useRoundedCorners: true,
-    buttonBorderRadius: LightThemeMove.borders.radius300,
-    radius500: "5rem",
+    buttonBorderRadius: "5rem",
   },
 };