Merge pull request #1838 from dubinc/pricing-feature-updates

Pricing feature updates + icon additions

Author: steven-tey

apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/plan/plan-selector.tsx

@@ -79,8 +79,7 @@ function PlanCard({
           format={{
             style: "currency",
             currency: "USD",
-            // @ts-ignore – this is a valid option but TS is outdated
-            trailingZeroDisplay: "stripIfInteger",
+            maximumFractionDigits: 0,
           }}
           continuous
         />

packages/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dub/ui",
   "description": "UI components for Dub.co",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

packages/ui/src/icons/default-domains/figma.tsx

@@ -9,7 +9,7 @@ export function Figma({ className }: { className?: string }) {
       xmlns="http://www.w3.org/2000/svg"
     >
       <circle cx="111" cy="111" r="111" fill="url(#paint0_radial_8328_50)" />
-      <g clip-path="url(#clip0_8328_50)">
+      <g clipPath="url(#clip0_8328_50)">
         <path
           d="M85.0053 196C99.3544 196 111 184.352 111 170V144H85.0053C70.6562 144 59.0105 155.648 59.0105 170C59.0105 184.352 70.6562 196 85.0053 196Z"
           fill="#0ACF83"

packages/ui/src/icons/nucleo/calendar6.tsx

@@ -10,7 +10,7 @@ export function Calendar6(props: SVGProps<SVGSVGElement>) {
       fill="none"
       {...props}
     >
-      <g clip-path="url(#clip0_5_25259)">
+      <g clipPath="url(#clip0_5_25259)">
         <path
           d="M5.75 3.25V1.25"
           stroke="currentColor"

packages/ui/src/icons/nucleo/circle-question.tsx

@@ -0,0 +1,39 @@
+import { SVGProps } from "react";
+
+export function CircleQuestion(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        <circle
+          cx="9"
+          cy="9"
+          fill="none"
+          r="7.25"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M6.925,6.619c.388-1.057,1.294-1.492,2.18-1.492,.895,0,1.818,.638,1.818,1.808,0,1.784-1.816,1.468-2.096,3.065"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M8.791,13.567c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z"
+          fill="currentColor"
+          stroke="none"
+        />
+      </g>
+    </svg>
+  );
+}

packages/ui/src/icons/nucleo/index.ts

@@ -36,6 +36,7 @@ export * from "./circle-half-dotted-check";
 export * from "./circle-half-dotted-clock";
 export * from "./circle-info";
 export * from "./circle-play-fill";
+export * from "./circle-question";
 export * from "./circle-warning";
 export * from "./circle-xmark";
 export * from "./circles";
@@ -146,6 +147,7 @@ export * from "./table-icon";
 export * from "./table-rows2";
 export * from "./tablet";
 export * from "./tag";
+export * from "./tags";
 export * from "./toggle2-fill";
 export * from "./trash";
 export * from "./tv";

packages/ui/src/icons/nucleo/tags.tsx

@@ -0,0 +1,39 @@
+import { SVGProps } from "react";
+
+export function Tags(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        <path
+          d="M1.75,4.25H7.336c.265,0,.52,.105,.707,.293l5.793,5.793c.781,.781,.781,2.047,0,2.828l-3.172,3.172c-.781,.781-2.047,.781-2.828,0L2.043,10.543c-.188-.188-.293-.442-.293-.707V4.25Z"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M3.25,1.75v-.5h5.586c.265,0,.52,.105,.707,.293l5.793,5.793c.432,.432,.625,1.012,.579,1.577"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <circle
+          cx="5.25"
+          cy="7.75"
+          fill="currentColor"
+          r="1.25"
+          stroke="none"
+        />
+      </g>
+    </svg>
+  );
+}

packages/utils/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dub/utils",
   "description": "Utility functions and constants for Dub.co",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "sideEffects": false,
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",