feat: refine editor styles

measuredco · Aug 14, 2023 · 9e57649 · 9e57649
1 parent 249231c
commit 9e57649
Show file tree

Hide file tree

Showing 18 changed files with 348 additions and 161 deletions.
diff --git a/apps/demo/app/[framework]/[...puckPath]/client.tsx b/apps/demo/app/[framework]/[...puckPath]/client.tsx
@@ -52,72 +52,11 @@ export function Client({
             localStorage.setItem(key, JSON.stringify(data));
           }}
           plugins={[headingAnalyzer]}
-          renderHeader={({ children }) => (
+          renderHeaderActions={() => (
             <>
-              <div
-                style={{
-                  color: "var(--puck-color-yellow-3)",
-                  padding: "8px 12px",
-                  background: "var(--puck-color-yellow-8)",
-                  textAlign: "center",
-                }}
-              >
-                <b>Demo</b>: Using local storage.
-              </div>
-
-              <div style={{ display: "flex", padding: 16 }}>
-                <div>
-                  <label>
-                    <select
-                      onChange={(e) => {
-                        document.location = `/${e.currentTarget.value}/${path}/edit`;
-                      }}
-                      style={{
-                        background:
-                          "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>\") no-repeat",
-                        backgroundSize: "12px",
-                        backgroundPosition: "calc(100% - 8px) calc(50% + 4px)",
-                        backgroundRepeat: "no-repeat",
-                        backgroundColor: "transparent",
-                        appearance: "none",
-                        padding: 0,
-                        paddingRight: 32,
-                        fontSize: 24,
-                        fontWeight: 600,
-                        border: "none",
-                        color: "white",
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        height: "100%",
-                        fontFamily: "var(--puck-font-stack)",
-                      }}
-                      defaultValue={framework}
-                    >
-                      <option value="antd">Ant Design</option>
-                      <option value="material-ui">Material UI</option>
-                      <option value="custom">Custom Example</option>
-                    </select>
-                  </label>
-                </div>
-                <div
-                  style={{
-                    display: "flex",
-                    gap: 16,
-                    flexGrow: 1,
-                    justifyContent: "flex-end",
-                  }}
-                >
-                  <Button
-                    href={`/${framework}/${path}`}
-                    newTab
-                    variant="secondary"
-                  >
-                    View page
-                  </Button>
-                  {children}
-                </div>
-              </div>
+              <Button href={`/${framework}/${path}`} newTab variant="secondary">
+                View page
+              </Button>
             </>
           )}
         />

diff --git a/apps/demo/app/configs/custom/blocks/ButtonGroup/index.tsx b/apps/demo/app/configs/custom/blocks/ButtonGroup/index.tsx
@@ -46,7 +46,12 @@ export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
       <Section className={getClassName({ center: align === "center" })}>
         <div className={getClassName("actions")}>
           {buttons.map((button, i) => (
-            <Button key={i} href={button.href} variant={button.variant}>
+            <Button
+              key={i}
+              href={button.href}
+              variant={button.variant}
+              size="large"
+            >
               {button.label}
             </Button>
           ))}

diff --git a/apps/demo/app/configs/custom/blocks/Hero/index.tsx b/apps/demo/app/configs/custom/blocks/Hero/index.tsx
@@ -122,7 +122,12 @@ export const Hero: ComponentConfig<HeroProps> = {
             <p className={getClassName("subtitle")}>{description}</p>
             <div className={getClassName("actions")}>
               {buttons.map((button, i) => (
-                <Button key={i} href={button.href} variant={button.variant}>
+                <Button
+                  key={i}
+                  href={button.href}
+                  variant={button.variant}
+                  size="large"
+                >
                   {button.label}
                 </Button>
               ))}

diff --git a/apps/demo/app/configs/custom/components/Footer/index.tsx b/apps/demo/app/configs/custom/components/Footer/index.tsx
@@ -54,7 +54,7 @@ const FooterList = ({
 
 const Footer = ({ children }: { children: ReactNode }) => {
   return (
-    <footer style={{ background: "var(--puck-color-grey-10)" }}>
+    <footer style={{ background: "var(--puck-color-grey-11)" }}>
       <h2 style={{ visibility: "hidden", height: 0 }}>Footer</h2>
       <Section padding="32px">
         <div
@@ -74,7 +74,7 @@ const Footer = ({ children }: { children: ReactNode }) => {
           padding: 64,
           textAlign: "center",
           color: "var(--puck-color-grey-2)",
-          background: "var(--puck-color-grey-9)",
+          background: "var(--puck-color-grey-10)",
         }}
       >
         Made by{" "}

diff --git a/apps/demo/app/configs/custom/index.tsx b/apps/demo/app/configs/custom/index.tsx
@@ -302,7 +302,7 @@ export const initialData: Record<string, Data> = {
         props: { size: "96px", id: "VerticalSpace-1687284290127" },
       },
     ],
-    root: { title: "Custom Example" },
+    root: { title: "Puck Example" },
   },
   "/pricing": {
     content: [],

diff --git a/packages/core/components/Button/Button.module.css b/packages/core/components/Button/Button.module.css
@@ -4,18 +4,35 @@
   border: none;
   border-radius: 4px;
   color: white;
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   letter-spacing: 0.05ch;
   font-size: 14px;
-  font-weight: 600;
-  padding-bottom: 12px;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 12px;
+  font-weight: 500;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   white-space: nowrap;
+  margin: 0;
+}
+
+.Button--medium {
+  padding-bottom: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 8px;
+}
+
+.Button--large {
+  padding-bottom: 12px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 12px;
+}
+
+.Button-icon {
+  margin-top: 2px;
 }
 
 .Button:hover {

diff --git a/packages/core/components/Button/Button.tsx b/packages/core/components/Button/Button.tsx
@@ -15,6 +15,8 @@ export const Button = ({
   tabIndex,
   newTab,
   fullWidth,
+  icon,
+  size = "medium",
 }: {
   children: ReactNode;
   href?: string;
@@ -25,6 +27,8 @@ export const Button = ({
   tabIndex?: number;
   newTab?: boolean;
   fullWidth?: boolean;
+  icon?: ReactNode;
+  size?: "medium" | "large";
 }) => {
   const [loading, setLoading] = useState(false);
 
@@ -37,6 +41,7 @@ export const Button = ({
         secondary: variant === "secondary",
         disabled,
         fullWidth,
+        [size]: true,
       })}
       onClick={(e) => {
         if (!onClick) return;
@@ -53,6 +58,7 @@ export const Button = ({
       rel={newTab ? "noreferrer" : undefined}
       href={href}
     >
+      {icon && <div className={getClassName("icon")}>{icon}</div>}
       {children}
       {loading && (
         <>

diff --git a/packages/core/components/ExternalInput/index.tsx b/packages/core/components/ExternalInput/index.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Field } from "../../types/Config";
+import { Link } from "react-feather";
 
 const getClassName = getClassNameFactory("ExternalInput", styles);
 
@@ -47,11 +48,18 @@ export const ExternalInput = ({
           className={getClassName("button")}
         >
           {/* NB this is hardcoded to strapi for now */}
-          {selectedData
-            ? field.getItemSummary
-              ? field.getItemSummary(selectedData)
-              : `${field.adaptor.name} item`
-            : `Select from ${field.adaptor.name}`}
+          {selectedData ? (
+            field.getItemSummary ? (
+              field.getItemSummary(selectedData)
+            ) : (
+              `${field.adaptor.name} item`
+            )
+          ) : (
+            <>
+              <Link size="16" />
+              <span>Select from {field.adaptor.name}</span>
+            </>
+          )}
         </button>
         {selectedData && (
           <button

diff --git a/packages/core/components/ExternalInput/styles.module.css b/packages/core/components/ExternalInput/styles.module.css
@@ -7,6 +7,10 @@
 }
 
 .ExternalInput-button {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
   background-color: white;
   border: 1px solid var(--puck-color-grey-8);
   border-radius: 4px;
@@ -29,6 +33,7 @@
 }
 
 .ExternalInput--hasData .ExternalInput-button {
+  display: block;
   color: var(--puck-color-neutral-4);
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
@@ -39,6 +44,10 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   background-color: var(--puck-color-neutral-1);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
   padding: 8px 12px;
   margin-left: -1px;
 }
@@ -95,8 +104,8 @@
 }
 
 .ExternalInput th {
-  background-color: var(--puck-color-grey-1);
-  color: white;
+  border-bottom: 1px solid var(--puck-color-grey-8);
+  border-top: 1px solid var(--puck-color-grey-8);
   font-weight: 700;
   padding: 16px 24px;
   opacity: 0.9;
@@ -111,22 +120,22 @@
 }
 
 .ExternalInput tr:nth-of-type(2n) {
-  background-color: var(--puck-color-grey-9);
+  background-color: var(--puck-color-grey-10);
 }
 
 .ExternalInput tr td:first-of-type {
   font-weight: 500;
 }
 
-.ExternalInput tr:hover {
-  background: var(--puck-color-grey-10);
+.ExternalInput tbody tr:hover {
+  background: var(--puck-color-grey-11);
   color: var(--puck-color-azure-4);
   cursor: pointer;
   position: relative;
   margin-left: -5px;
 }
 
-.ExternalInput tr:hover td:first-of-type {
+.ExternalInput tbody tr:hover td:first-of-type {
   border-left: 4px solid var(--puck-color-azure-4);
   padding-left: 20px;
 }
diff --git a/packages/core/components/IconButton/IconButton.module.css b/packages/core/components/IconButton/IconButton.module.css
@@ -0,0 +1,16 @@
+.IconButton {
+  background: transparent;
+  border: none;
+  color: var(--puck-color-grey-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 4px;
+}
+
+.IconButton:hover {
+  background: var(--puck-color-grey-9);
+  color: var(--puck-color-blue);
+  cursor: pointer;
+}
diff --git a/packages/core/components/IconButton/IconButton.tsx b/packages/core/components/IconButton/IconButton.tsx
@@ -0,0 +1,70 @@
+import { ReactNode, useState } from "react";
+import styles from "./IconButton.module.css";
+import getClassNameFactory from "../../lib/get-class-name-factory";
+import { ClipLoader } from "react-spinners";
+
+const getClassName = getClassNameFactory("IconButton", styles);
+
+export const IconButton = ({
+  children,
+  href,
+  onClick,
+  variant = "primary",
+  type,
+  disabled,
+  tabIndex,
+  newTab,
+  fullWidth,
+  title,
+}: {
+  children: ReactNode;
+  href?: string;
+  onClick?: (e: any) => void | Promise<void>;
+  variant?: "primary" | "secondary";
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+  tabIndex?: number;
+  newTab?: boolean;
+  fullWidth?: boolean;
+  title: string;
+}) => {
+  const [loading, setLoading] = useState(false);
+
+  const ElementType = href ? "a" : "button";
+
+  const el = (
+    <ElementType
+      className={getClassName({
+        primary: variant === "primary",
+        secondary: variant === "secondary",
+        disabled,
+        fullWidth,
+      })}
+      onClick={(e) => {
+        if (!onClick) return;
+
+        setLoading(true);
+        Promise.resolve(onClick(e)).then(() => {
+          setLoading(false);
+        });
+      }}
+      type={type}
+      disabled={disabled || loading}
+      tabIndex={tabIndex}
+      target={newTab ? "_blank" : undefined}
+      rel={newTab ? "noreferrer" : undefined}
+      href={href}
+      title={title}
+    >
+      {children}
+      {loading && (
+        <>
+          &nbsp;&nbsp;
+          <ClipLoader color="inherit" size="14px" />
+        </>
+      )}
+    </ElementType>
+  );
+
+  return el;
+};
diff --git a/packages/core/components/IconButton/index.ts b/packages/core/components/IconButton/index.ts
@@ -0,0 +1 @@
+export * from "./IconButton";