first commit

examples/cms-payload/components/Button/index.module.scss

@@ -0,0 +1,51 @@
+@import "../../css/type.scss";
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  svg {
+    margin-right: calc(var(--base) / 2);
+    width: var(--base);
+    height: var(--base);
+  }
+}
+
+.label {
+  @extend %label;
+  display: flex;
+  align-items: center;
+}
+
+.button {
+  text-decoration: none;
+  display: inline-flex;
+  padding: 12px 18px;
+  margin-bottom: var(--base);
+}
+
+.primary--white {
+  background-color: black;
+  color: white;
+}
+
+.primary--black {
+  background-color: white;
+  color: black;
+}
+
+.secondary--white {
+  background-color: white;
+  box-shadow: inset 0 0 0 1px black;
+}
+
+.secondary--black {
+  background-color: black;
+  box-shadow: inset 0 0 0 1px white;
+}
+
+.appearance--default {
+  padding: 0;
+  margin-left: -8px;
+}

examples/cms-payload/components/Button/index.tsx

@@ -0,0 +1,60 @@
+import Link from "next/link";
+import React, { ElementType } from "react";
+import { useBackgroundColor } from "../BackgroundColor";
+import { Chevron } from "../icons/Chevron";
+import classes from "./index.module.scss";
+
+export type Props = {
+  label?: string;
+  appearance?: "default" | "primary" | "secondary";
+  el?: "button" | "link" | "a";
+  onClick?: () => void;
+  href?: string;
+  newTab?: boolean;
+  className?: string;
+};
+
+export const Button: React.FC<Props> = ({
+  el = "button",
+  label,
+  newTab,
+  href,
+  appearance,
+  className: classNameFromProps,
+}) => {
+  const backgroundColor = useBackgroundColor();
+  const newTabProps = newTab
+    ? { target: "_blank", rel: "noopener noreferrer" }
+    : {};
+  const className = [
+    classNameFromProps,
+    classes[`appearance--${appearance}`],
+    classes[`${appearance}--${backgroundColor}`],
+    classes.button,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const content = (
+    <div className={classes.content}>
+      <Chevron />
+      <span className={classes.label}>{label}</span>
+    </div>
+  );
+
+  if (el === "link") {
+    return (
+      <Link {...newTabProps} href={href || ""} className={className}>
+        {content}
+      </Link>
+    );
+  }
+
+  const Element: ElementType = el;
+
+  return (
+    <Element href={href} className={className} {...newTabProps}>
+      {content}
+    </Element>
+  );
+};