Merge pull request #160 from bosonprotocol/add-alignment-props

feat: add alignment props

public/scripts/commit-button-example.html

@@ -24,6 +24,7 @@ <h3>Commit button example</h3>
   <script>
     let disabled = false;
     let context = "iframe";
+    let layout = "horizontal";
     const isProd =
       window.location.href.startsWith("https://widgets.bosonprotocol.io") ||
       window.location.href.startsWith("https://widgets-production.on.fleek.co");
@@ -38,19 +39,29 @@ <h3>Commit button example</h3>
       sellerId: "4",
       ...(isProd && prodData)
     };
+    const buttonStyle = {
+      minWidth: "100px",
+      minHeight: "200px",
+      shape: "rounded",
+      color: "white",
+      layout
+    };
+    let justifyContent = "flex-start";
+    const containerStyle = {
+      justifyContent,
+      alignItems: "initial"
+    };
     const instance = CommitButton({
       ...argsThatDependOnEnv,
       context: "iframe",
       modalMargin: "2%",
       lookAndFeel: "modal",
       disabled,
       buttonStyle: {
-        minWidth: "100px",
-        minHeight: "200px",
-        border: "1px solid red", // ignored on purpose, we dont allow that
-        shape: "rounded",
-        color: "white"
+        ...buttonStyle,
+        border: "1px solid red" // ignored on purpose, we dont allow that
       },
+      containerStyle,
       onGetDimensions: function (dimensions) {
         const { offsetHeight, offsetWidth } = dimensions;
         document.querySelector("#container").style.height = `${offsetHeight}px`;
@@ -82,11 +93,46 @@ <h3>Commit button example</h3>
       context = context === "iframe" ? "popup" : "iframe";
       instance.updateProps({ context });
     }
+    function toggleLayoutState() {
+      layout = layout === "vertical" ? "horizontal" : "vertical";
+      instance.updateProps({ buttonStyle: { ...buttonStyle, layout } });
+    }
+    function toggleJustifyContentState() {
+      justifyContent =
+        justifyContent === "flex-start" ? "flex-end" : "flex-start";
+      instance.updateProps({
+        containerStyle: { ...containerStyle, justifyContent }
+      });
+    }
+    function responsiveLayout(...args) {
+      const [resizeObserverEntry] = args;
+      const {
+        borderBoxSize,
+        contentBoxSize,
+        contentRect,
+        devicePixelContentBoxSize,
+        target
+      } = resizeObserverEntry[0];
+      if (contentRect?.width < 400) {
+        layout = "vertical";
+        instance.updateProps({ buttonStyle: { ...buttonStyle, layout } });
+      }
+    }
+
+    new ResizeObserver(responsiveLayout).observe(
+      document.querySelector("#container")
+    );
   </script>
   <button onclick="toggleDisableState()" style="margin: 20px">
     toggle disable state
   </button>
   <button onclick="toggleContextState()" style="margin: 20px">
     toggle context state
   </button>
+  <button onclick="toggleLayoutState()" style="margin: 20px">
+    toggle layout state
+  </button>
+  <button onclick="toggleJustifyContentState()" style="margin: 20px">
+    toggle justify content state
+  </button>
 </body>

src/components/widgets/commitButton/CommitButton.tsx

@@ -4,6 +4,7 @@
 import { CommitButtonView } from "@bosonprotocol/react-kit";
 import { ElementRef, useCallback, useEffect, useMemo, useRef } from "react";
 import { useState } from "react";
+import { createGlobalStyle, css, CSSProperties } from "styled-components";
 import * as yup from "yup";
 
 import { GlobalStyle } from "../styles";
@@ -22,11 +23,38 @@ const yupStringOrNumber = yup
         ? true
         : typeof value === "string" || typeof value === "number"
   );
+
+const CommitButtonGlobalStyle = createGlobalStyle<{
+  $alignItems?: CSSProperties["alignItems"];
+  $justifyContent?: CSSProperties["justifyContent"];
+}>`
+    html, body, #root{
+      height: 100%
+    }
+    #root {
+      display: flex;
+      ${({ $justifyContent }) =>
+        $justifyContent &&
+        css`
+          justify-content: ${$justifyContent};
+        `}
+        ${({ $alignItems }) =>
+          $alignItems &&
+          css`
+            align-items: ${$alignItems};
+          `}
+    }
+  `;
 export function CommitButton() {
   const ref = useRef<ElementRef<"div">>(null);
   const [props, setProps] = useState(window.xprops ?? {});
-  const { renderToSelector, buttonStyle, context, ...commitWidgetProps } =
-    props;
+  const {
+    renderToSelector,
+    buttonStyle,
+    containerStyle,
+    context,
+    ...commitWidgetProps
+  } = props;
   useEffect(() => {
     if ("xprops" in window && typeof window.xprops.onProps === "function") {
       window.xprops.onProps((newProps: typeof props) => {
@@ -70,14 +98,48 @@ export function CommitButton() {
         minWidth: yupStringOrNumber,
         minHeight: yupStringOrNumber,
         shape: yup.mixed().oneOf(["sharp", "rounded", "pill"]).optional(),
-        color: yup.mixed().oneOf(["green", "black", "white"]).optional()
+        color: yup.mixed().oneOf(["green", "black", "white"]).optional(),
+        layout: yup.mixed().oneOf(["vertical", "horizontal"]).optional()
       })
       .validateSync(buttonStyle);
     if (typeof buttonStyle === "object") {
       return buttonStyleValidated;
     }
     return {} as typeof buttonStyleValidated;
   }, [buttonStyle]);
+  const containerStyleObj = useMemo(() => {
+    const containerStyleValidated = yup
+      .object({
+        justifyContent: yup
+          .mixed()
+          .oneOf([
+            "initial",
+            "flex-start",
+            "flex-end",
+            "center",
+            "space-between",
+            "space-around",
+            "space-evenly"
+          ])
+          .optional(),
+        alignItems: yup
+          .mixed()
+          .oneOf([
+            "initial",
+            "flex-start",
+            "flex-end",
+            "center",
+            "baseline",
+            "stretch"
+          ])
+          .optional()
+      })
+      .validateSync(containerStyle);
+    if (typeof containerStyle === "object") {
+      return containerStyleValidated;
+    }
+    return {} as typeof containerStyleValidated;
+  }, [containerStyle]);
   const validatedContext = useMemo(() => {
     if (!context) {
       return "iframe";
@@ -97,11 +159,16 @@ export function CommitButton() {
   return (
     <>
       <GlobalStyle />
+      <CommitButtonGlobalStyle
+        $justifyContent={containerStyleObj.justifyContent}
+        $alignItems={containerStyleObj.alignItems}
+      />
       <CommitButtonView
         minWidth={buttonStyleObj.minWidth}
         minHeight={buttonStyleObj.minHeight}
         shape={buttonStyleObj.shape}
         color={buttonStyleObj.color}
+        layout={buttonStyleObj.layout}
         ref={ref}
         disabled={"disabled" in props && !!props.disabled}
         onClick={() => {