Merge pull request #1195 from osmosis-labs/stage

Publish Stage

packages/web/components/assets/icon.tsx

@@ -0,0 +1,27 @@
+import { FunctionComponent, SVGAttributes } from "react";
+
+type IconId =
+  | "chevron-up"
+  | "chevron-down"
+  | "chevron-left"
+  | "chevron-right"
+  | "setting"
+  | "search"
+  | "up-down-arrow";
+
+/**
+ * It takes an icon id and returns an svg element with the corresponding icon defined in /public/icons/sprite.svg.
+ */
+export const Icon: FunctionComponent<
+  SVGAttributes<HTMLOrSVGElement> & {
+    id: IconId;
+    className?: string;
+  }
+> = (props) => {
+  const { id, ...rest } = props;
+  return (
+    <svg width="24" height="24" {...rest}>
+      <use href={`/icons/sprite.svg#${id}`} />
+    </svg>
+  );
+};

packages/web/components/assets/index.tsx

@@ -5,6 +5,7 @@ export * from "./rate-ring";
 export * from "./token";
 export * from "./types";
 export * from "./denom-image";
+export * from "./icon";
 
 export const ringFillColors = [
   "#89EAFB",

packages/web/components/buttons/button.tsx

@@ -1,59 +1,182 @@
-import classNames from "classnames";
 import { ButtonHTMLAttributes, FunctionComponent } from "react";
 import { CustomClasses } from "../types";
 import { IS_FRONTIER } from "../../config";
+import { cva, VariantProps } from "class-variance-authority";
 
-export const Button: FunctionComponent<
+const button = cva(
+  "flex w-full place-content-center items-center py-2 text-center transition-colors disabled:cursor-default",
   {
-    mode?: "primary" | "primary-warning" | "secondary" | "tertiary";
-    size?: "sm" | "normal";
-  } & CustomClasses &
+    variants: {
+      /**
+       * Modes modify the following properties:
+       * - border
+       * - border color
+       * - border radius
+       * - background color
+       * - text color
+       */
+      mode: {
+        primary: [
+          "border-2",
+          "border-wosmongton-700",
+          "bg-wosmongton-700",
+          "hover:border-wosmongton-400",
+          "hover:bg-wosmongton-400",
+          "rounded-xl",
+          "disabled:border-2",
+          "disabled:border-osmoverse-500",
+          "disabled:bg-osmoverse-500",
+          "disabled:text-osmoverse-100",
+        ],
+        "primary-warning": [
+          "border-0",
+          "bg-rust-700",
+          "rounded-xl",
+          "disabled:border-2",
+          "disabled:border-osmoverse-500",
+          "disabled:bg-osmoverse-500",
+          "disabled:text-osmoverse-100",
+          "disabled:hover:border-unset",
+          "disabled:hover:bg-unset",
+        ],
+        secondary: [
+          "border-2",
+          "bg-transparent",
+          "border-wosmongton-400",
+          "hover:border-wosmongton-200",
+          "rounded-xl",
+          "disabled:border-osmoverse-600",
+          "disabled:text-osmoverse-400",
+        ],
+        tertiary: [
+          "border-2",
+          "bg-transparent",
+          "border-wosmongton-400",
+          "rounded-md",
+          "text-wosmongton-200",
+        ],
+        text: [
+          "text-wosmongton-200",
+          "hover:text-rust-200",
+          "disabled:text-osmoverse-500",
+        ],
+        "framed-primary": [
+          "bg-wosmongton-700",
+          "hover:bg-wosmongton-400",
+          "rounded-md",
+          "disabled:border-osmoverse-500",
+          "disabled:bg-osmoverse-500",
+          "disabled:text-osmoverse-100",
+        ],
+        "framed-secondary": [
+          "border-2",
+          "bg-transparent",
+          "border-wosmongton-300",
+          "hover:border-wosmongton-200",
+          "text-wosmongton-300",
+          "hover:text-wosmongton-200",
+          "rounded-md",
+          "disabled:border-osmoverse-600",
+          "disabled:text-osmoverse-400",
+        ],
+        amount: [
+          "border",
+          "bg-transparent",
+          "border-wosmongton-300",
+          "hover:border-wosmongton-200",
+          "text-wosmongton-300",
+          "hover:text-wosmongton-200",
+          "rounded-md",
+          "disabled:border-osmoverse-600",
+          "disabled:text-osmoverse-400",
+        ],
+        "special-1": [
+          "bg-gradient-positive",
+          "rounded-xl",
+          "text-osmoverse-1000",
+        ],
+        "icon-primary": [
+          "text-osmoverse-400",
+          "hover:text-white-full",
+          "bg-osmoverse-700",
+          "hover:bg-osmoverse-600",
+          "rounded-xl",
+          "disabled:border-osmoverse-500",
+          "disabled:bg-osmoverse-500",
+        ],
+        unstyled: null,
+      },
+      /**
+       * Sizes modify the following properties:
+       * - height
+       * - width
+       * - padding
+       * - font size
+       * - font weight
+       * - line height
+       * - letter spacing
+       */
+      size: {
+        "sm-no-padding": "h-10 button tracking-wide",
+        sm: "h-10 px-5 button tracking-wide",
+        normal: "h-[56px] px-6 subtitle1 tracking-wide",
+        text: "w-auto h-auto block py-0 text-start tracking-wide",
+        framed:
+          "h-auto px-2 py-1 w-auto text-caption font-semibold tracking-wider",
+        amount:
+          "h-[24px] px-2 py-1 w-auto text-caption font-semibold tracking-wider",
+        unstyled: null,
+      },
+      frontier: {
+        true: null,
+        false: null,
+      },
+    },
+    compoundVariants: [
+      {
+        mode: ["primary", "primary-warning"],
+        frontier: true,
+        className: "text-osmoverse-1000",
+      },
+    ],
+    defaultVariants: {
+      mode: "primary",
+      size: "normal",
+    },
+  }
+);
+
+const modeToDefaultSize: Partial<
+  Record<
+    NonNullable<VariantProps<typeof button>["mode"]>,
+    VariantProps<typeof button>["size"]
+  >
+> = {
+  "framed-primary": "framed",
+  "framed-secondary": "framed",
+  amount: "amount",
+  text: "text",
+  unstyled: "unstyled",
+};
+
+export const Button: FunctionComponent<
+  VariantProps<typeof button> &
+    CustomClasses &
     ButtonHTMLAttributes<HTMLButtonElement>
 > = (props) => {
-  const { mode = "primary", size = "normal", className, children } = props;
+  const { mode, size, className, children } = props;
 
   return (
     <button
       {...props}
-      className={classNames(
-        "flex w-full place-content-center items-center py-2 text-center transition-colors disabled:cursor-default",
-        size === "sm" ? "h-10 px-5" : "h-[56px] px-6",
-        mode === "tertiary" ? "rounded-md" : "rounded-xl",
-        {
-          "border-2 border-wosmongton-700 bg-wosmongton-700 hover:border-wosmongton-400 hover:bg-wosmongton-400":
-            mode === "primary" && !props.disabled,
-          "border-2 border-osmoverse-500 bg-osmoverse-500 text-osmoverse-100":
-            (mode === "primary" || mode === "primary-warning") &&
-            props.disabled,
-          "border-0 bg-gradient-negative": mode === "primary-warning",
-          "border-2 bg-transparent":
-            mode === "secondary" || mode === "tertiary",
-          "border-wosmongton-400 hover:border-wosmongton-200":
-            mode === "secondary" && !props.disabled,
-          "border-osmoverse-600 text-osmoverse-400":
-            mode === "secondary" && props.disabled,
-          "border-osmoverse-400": mode === "tertiary" && !props.disabled,
-          "text-osmoverse-1000":
-            IS_FRONTIER &&
-            !props.disabled &&
-            (mode === "primary" || mode === "primary-warning"),
-        },
-        className
-      )}
+      className={button({
+        className,
+        mode,
+        size: size ?? modeToDefaultSize[mode as keyof typeof modeToDefaultSize],
+        frontier: IS_FRONTIER,
+      })}
     >
-      {typeof children === "string" ? (
-        size === "sm" ? (
-          <span className="button mx-auto md:text-subtitle1 md:font-subtitle1">
-            {children}
-          </span>
-        ) : (
-          <span className="mx-auto text-subtitle1 font-subtitle1">
-            {children}
-          </span>
-        )
-      ) : (
-        children
-      )}
+      {children}
     </button>
   );
 };

packages/web/components/buttons/icon-button.tsx

@@ -0,0 +1,41 @@
+import React, {
+  cloneElement,
+  ComponentProps,
+  FunctionComponent,
+  isValidElement,
+  ReactNode,
+} from "react";
+import { Button } from "./button";
+
+/**
+ * Renders an icon within a button.
+ */
+const IconButton: FunctionComponent<
+  {
+    icon?: ReactNode;
+    "aria-label": string;
+  } & ComponentProps<typeof Button>
+> = (props) => {
+  const { icon, children, "aria-label": ariaLabel, ...rest } = props;
+
+  const element = icon || children;
+  const _children = isValidElement(element)
+    ? cloneElement(element as any, {
+        "aria-hidden": true,
+        focusable: false,
+      })
+    : null;
+
+  return (
+    <Button
+      mode="icon-primary"
+      size="sm-no-padding"
+      aria-label={ariaLabel}
+      {...rest}
+    >
+      {_children}
+    </Button>
+  );
+};
+
+export default IconButton;

packages/web/components/buttons/index.ts

@@ -1,4 +1,3 @@
 export * from "./arrow-button";
-export * from "./border-button";
 export * from "./button";
 export * from "./close-button";

packages/web/components/buttons/show-more.tsx

@@ -1,9 +1,9 @@
-import Image from "next/image";
 import { FunctionComponent } from "react";
 import classNames from "classnames";
 import { ToggleProps } from "../control";
 import { CustomClasses } from "../types";
 import { useTranslation } from "react-multi-lang";
+import { Icon } from "../assets";
 
 export const ShowMoreButton: FunctionComponent<ToggleProps & CustomClasses> = ({
   isOn,
@@ -20,11 +20,11 @@ export const ShowMoreButton: FunctionComponent<ToggleProps & CustomClasses> = ({
         {isOn ? t("components.show.less") : t("components.show.more")}
       </span>
       <div className="m-auto">
-        <Image
-          alt={isOn ? t("components.show.less") : t("components.show.more")}
-          src={isOn ? "/icons/chevron-up.svg" : "/icons/chevron-down.svg"}
+        <Icon
+          id={isOn ? "chevron-up" : "chevron-down"}
           height={14}
           width={14}
+          className="text-osmoverse-400"
         />
       </div>
     </button>

packages/web/components/cards/bond-card.tsx

@@ -10,7 +10,7 @@ import moment from "dayjs";
 import { Duration } from "dayjs/plugin/duration";
 import { CoinPretty, Dec, PricePretty, RatePretty } from "@keplr-wallet/unit";
 import { BondDuration } from "@osmosis-labs/stores";
-import { FallbackImg } from "../assets";
+import { FallbackImg, Icon } from "../assets";
 import { useTranslation } from "react-multi-lang";
 import { coinFormatter, priceFormatter } from "../../utils/formatter";
 import { UnlockIcon } from "../assets/unlock-icon";
@@ -255,11 +255,11 @@ const Drawer: FunctionComponent<{
               "rotate-180": drawerUp,
             })}
           >
-            <Image
-              alt="details"
-              src="/icons/chevron-up-osmoverse-400.svg"
-              height={30}
-              width={30}
+            <Icon
+              id="chevron-up"
+              className="mx-[7.5px] my-[7.5px] text-osmoverse-400"
+              height={14}
+              width={14}
             />
           </div>
         </button>