feat(customize): add Variants and Customize Utils

src/Button/Button.re

@@ -1,14 +1,31 @@
 module Css = ButtonStyles;
 
+let buttonVariants: Variants.cssBasicTypes = {
+  primary: Css.primary,
+  secondary: Css.secondary,
+  default: Css.default,
+  disabled: Css.disabled,
+};
+
 [@react.component]
-let make = (~primary=false, ~children) => {
-  let theme = ThemeContext.useTheme();
+let make =
+    (
+      ~variant=Variants.Default,
+      ~onClick=_ => ignore(),
+      ~className="",
+      ~children,
+    ) => {
+  let currentVariant =
+    Variants.useBasicVariant(~variant, ~cssVariants=buttonVariants);
 
   <button
-    className={Cx.merge([|
-      Css.default(~theme),
-      primary ? Css.primary(~theme) : "",
-    |])}>
+    onClick
+    className={
+      Customize.mergeStyles(
+        ~customClassName=className,
+        ~originalClassName=currentVariant,
+      )
+    }>
     children
   </button>;
 };

src/Button/ButtonStyles.re

@@ -2,21 +2,49 @@ open Emotion;
 
 let default = (~theme: ThemeTypes.theme) => [%css
   [
-    color(`hex(theme.text.default)),
+    color(`hex(theme.colors.common.black)),
     margin(`rem(0.5)),
+    padding2(`rem(0.5), `rem(1.5)),
     borderRadius(`rem(2.)),
     fontSize(`rem(1.)),
-    borderColor(`hex(theme.action.default)),
-    borderStyle(`solid),
+    borderStyle(`none),
     cursor(`pointer),
-    backgroundColor(`hex(theme.background.default)),
+    backgroundColor(`hex(theme.action.default)),
     fontWeight(600),
+    /* focus */
+    focus([outline(`rem(0.), `solid, `hex(theme.colors.primary.main))]),
+    /* hover */
+    hover([backgroundColor(`hex(Colors.grey.light))]),
   ]
 ];
 
 let primary = (~theme: ThemeTypes.theme) => [%css
   [
-    color(`hex(theme.text.primary)),
-    backgroundColor(`hex(theme.action.primary)),
+    color(`hex(theme.colors.primary.contrastText)),
+    borderStyle(`none),
+    backgroundColor(`hex(theme.colors.primary.main)),
+    /* hover */
+    hover([backgroundColor(`hex(theme.colors.primary.light))]),
+  ]
+];
+
+let secondary = (~theme: ThemeTypes.theme) => [%css
+  [
+    color(`hex(theme.colors.secondary.contrastText)),
+    borderStyle(`none),
+    backgroundColor(`hex(theme.colors.secondary.main)),
+    /* hover */
+    hover([backgroundColor(`hex(theme.colors.secondary.light))]),
+  ]
+];
+
+let disabled = (~theme: ThemeTypes.theme) => [%css
+  [
+    color(`hex(theme.colors.grey.main)),
+    borderStyle(`none),
+    backgroundColor(`hex(theme.colors.grey.light)),
+    cursor(`notAllowed),
+    /* hover */
+    hover([backgroundColor(`hex(theme.colors.grey.light))]),
   ]
 ];

src/Theme/Theme.re

@@ -20,7 +20,7 @@ let light: ThemeTypes.theme = {
   action: {
     primary: "000088",
     secondary: "ffff88",
-    default: Colors.common.white,
+    default: Colors.grey.main,
     disabled: "575757",
   },
   text: {

src/Utils/Customize.re

@@ -0,0 +1,2 @@
+let mergeStyles = (~customClassName="", ~originalClassName) =>
+  Cx.merge([|originalClassName, customClassName|]);

src/Utils/Variants.re

@@ -0,0 +1,38 @@
+type basicVariantTypes =
+  | Primary
+  | Secondary
+  | Default
+  | Disabled;
+
+type cssBasicTypes = {
+  primary: (~theme: ThemeTypes.theme) => string,
+  secondary: (~theme: ThemeTypes.theme) => string,
+  default: (~theme: ThemeTypes.theme) => string,
+  disabled: (~theme: ThemeTypes.theme) => string,
+};
+
+let getBasicVariant = (~variant, ~cssVariants, ~theme) =>
+  switch (variant) {
+  | Primary =>
+    Customize.mergeStyles(
+      ~customClassName=cssVariants.primary(~theme),
+      ~originalClassName=cssVariants.default(~theme),
+    )
+  | Secondary =>
+    Customize.mergeStyles(
+      ~customClassName=cssVariants.secondary(~theme),
+      ~originalClassName=cssVariants.default(~theme),
+    )
+  | Default => cssVariants.default(~theme)
+  | Disabled =>
+    Customize.mergeStyles(
+      ~customClassName=cssVariants.disabled(~theme),
+      ~originalClassName=cssVariants.default(~theme),
+    )
+  };
+
+let useBasicVariant = (~variant=Default, ~cssVariants) => {
+  let theme = ThemeContext.useTheme();
+
+  getBasicVariant(~variant, ~cssVariants, ~theme);
+};

stories/ButtonShowcase.re

@@ -1,4 +1,19 @@
 let default = {"title": "Button", "excludeStories": [|"$$default"|]};
 
+let normal = () =>
+  <ThemeProvider> <Button> {React.string("Hello")} </Button> </ThemeProvider>;
+
 let primary = () =>
-  <ThemeProvider> <Button> {React.string("Hello")} </Button> </ThemeProvider>;
+  <ThemeProvider>
+    <Button variant=Variants.Primary> {React.string("Hello")} </Button>
+  </ThemeProvider>;
+
+let secondary = () =>
+  <ThemeProvider>
+    <Button variant=Variants.Secondary> {React.string("Hello")} </Button>
+  </ThemeProvider>;
+
+let disabled = () =>
+  <ThemeProvider>
+    <Button variant=Variants.Disabled> {React.string("Hello")} </Button>
+  </ThemeProvider>;