feat(styles): with variants

src/Button/Button.re

@@ -1,14 +1,18 @@
+open Customize;
+
 module Css = ButtonStyles;
 
 [@react.component]
-let make = (~primary=false, ~children) => {
+let make =
+    (
+      ~variant=Variants.Default,
+      ~onClick=_ => ignore(),
+      ~className="",
+      ~children,
+    ) => {
   let theme = ThemeContext.useTheme();
 
-  <button
-    className={Cx.merge([|
-      Css.default(~theme),
-      primary ? Css.primary(~theme) : "",
-    |])}>
-    children
-  </button>;
+  let classes = Css.getClasses(variant, theme, className);
+
+  <button className=classes> children </button>;
 };

src/Button/ButtonStyles.re

@@ -2,21 +2,64 @@ 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))]),
+  ]
+];
+
+let getClasses = (variant, theme, className) => {
+  let defaultClass = default(theme);
+
+  let classByVariant =
+    Variants.(
+      switch (variant) {
+      | Primary => primary(theme)
+      | Secondary => secondary(theme)
+      | Disabled => disabled(theme)
+      | _ => ""
+      }
+    );
+  Customize.mergeStyles([|defaultClass, classByVariant, className|]);
+};

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 @@
+let mergeStyles = Cx.merge;

src/Utils/Variants.re

@@ -0,0 +1,7 @@
+type classes = list(string);
+
+type variants =
+  | Primary
+  | Secondary
+  | Disabled
+  | Default;

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>;