Merge pull request #99 from inkonchain/feat/segmented-tag

feat: v8
inkonchain · Feb 13, 2025 · 954a83a · 954a83a
2 parents 0e1e134 + fc52ea8
commit 954a83a
Show file tree

Hide file tree

Showing 11 changed files with 123 additions and 85 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@inkonchain/ink-kit",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
@@ -231,43 +231,35 @@ export const LargeCardInfo: Story = {
     children: (
       <>
         <TitleAndDescription title="Fun Activities Around Town" />
-        <CardContent.CardInfo>
-          <Card variant="secondary">
-            <CardContent.Tiny
-              icon={<InkIcon.Apps className="ink:size-3" />}
-              title="Pizza Making Class"
-              description="Learn to toss dough and create your perfect pizza with our expert chefs."
-            />
-          </Card>
-          <Card variant="secondary">
-            <CardContent.Tiny
-              icon={<InkIcon.Bridge className="ink:size-3" />}
-              title="Paint & Sip Night"
-              description="Enjoy wine while creating your masterpiece in this relaxing art class."
-            />
-          </Card>
-          <Card variant="secondary">
-            <CardContent.Tiny
-              icon={<InkIcon.Social.Telegram className="ink:size-3" />}
-              title="Live Jazz Night"
-              description="Swing by for smooth tunes and great vibes at our local jazz club."
-            />
-          </Card>
-          <Card variant="secondary">
-            <CardContent.Tiny
-              icon={<InkIcon.Deposit className="ink:size-3" />}
-              title="Community Garden"
-              description="Get your hands dirty and learn about urban farming with neighbors."
-            />
-          </Card>
-          <Card className="ink:lg:col-span-2" variant="secondary">
-            <CardContent.Tiny
-              icon={<InkIcon.Sun className="ink:size-3" />}
-              title="Weekend Food Festival"
-              description="Sample delicious treats from local vendors and enjoy live entertainment all weekend long."
-            />
-          </Card>
-        </CardContent.CardInfo>
+        <CardContent.CardInfos>
+          <CardContent.CardInfo
+            icon={<InkIcon.Apps className="ink:size-3" />}
+            title="Pizza Making Class"
+            description="Learn to toss dough and create your perfect pizza with our expert chefs."
+          />
+          <CardContent.CardInfo
+            icon={<InkIcon.Bridge className="ink:size-3" />}
+            title="Paint & Sip Night"
+            description="Enjoy wine while creating your masterpiece in this relaxing art class."
+          />
+          <CardContent.CardInfo
+            icon={<InkIcon.Social.Telegram className="ink:size-3" />}
+            title="Live Jazz Night"
+            description="Swing by for smooth tunes and great vibes at our local jazz club."
+          />
+          <CardContent.CardInfo
+            icon={<InkIcon.Deposit className="ink:size-3" />}
+            title="Community Garden"
+            description="Get your hands dirty and learn about urban farming with neighbors."
+          />
+
+          <CardContent.CardInfo
+            className="ink:lg:col-span-2"
+            icon={<InkIcon.Sun className="ink:size-3" />}
+            title="Weekend Food Festival"
+            description="Sample delicious treats from local vendors and enjoy live entertainment all weekend long."
+          />
+        </CardContent.CardInfos>
       </>
     ),
   },

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { classNames } from "../../util/classes";
+import { classNames, variantClassNames } from "../../util/classes";
 import { Slot, Slottable } from "../Slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -13,7 +13,6 @@ export interface CardProps extends VariantProps<typeof cardVariants> {
 
 const cardVariants = cva(
   `
-ink:rounded-xl
 ink:grid ink:grid-cols-1
 ink:p-2 ink:pb-3 ink:sm:p-3 ink:gap-3
 ink:relative 
@@ -37,6 +36,11 @@ ink:box-border
         true: "ink:cursor-pointer",
         false: "",
       },
+      rounded: {
+        lg: "ink:rounded-lg",
+        xl: "ink:rounded-xl",
+        xxl: "ink:rounded-xxl",
+      },
     },
     compoundVariants: [
       {
@@ -45,6 +49,9 @@ ink:box-border
         className: "ink:hover:bg-button-secondary-hover",
       },
     ],
+    defaultVariants: {
+      rounded: "xl",
+    },
   }
 );
 
@@ -56,15 +63,18 @@ export const Card: React.FC<CardProps> = ({
   asChild,
   variant,
   clickable,
+  rounded,
 }) => {
   const Component = asChild ? Slot : "div";
+  const roundedValue = rounded || (image ? "xxl" : "lg");
   return (
     <Component
       className={classNames(
         cardVariants({
           variant,
           imageLocation: image ? imageLocation : undefined,
           clickable,
+          rounded: roundedValue,
           className,
         }),
         className
@@ -79,6 +89,11 @@ export const Card: React.FC<CardProps> = ({
             variant === "light-purple"
               ? "var(--ink-background-light)"
               : "var(--ink-text-muted)",
+          "--ink-card-rounded": variantClassNames(roundedValue, {
+            lg: "var(--ink-base-radius-sm)",
+            xl: "var(--ink-base-radius-lg)",
+            xxl: "var(--ink-base-radius-xl)",
+          }),
         } as React.CSSProperties
       }
     >

diff --git a/src/components/Card/Content/CardInfo.tsx b/src/components/Card/Content/CardInfo.tsx
@@ -1,20 +1,37 @@
 import { PropsWithChildren } from "react";
 import { classNames } from "../../../util/classes";
+import { TitleAndDescription } from "./TitleAndDescription";
+import { Card } from "../Card";
 
 export interface CardInfoProps extends PropsWithChildren {
   className?: string;
-  children: React.ReactNode;
+  icon?: React.ReactNode;
+  title: string;
+  description: string;
 }
-
-export const CardInfo = ({ children, className }: CardInfoProps) => {
+export const CardInfo = ({
+  className,
+  icon,
+  title,
+  description,
+  children,
+}: CardInfoProps) => {
   return (
-    <div
-      className={classNames(
-        "ink:grid ink:grid-cols-[repeat(auto-fit,minmax(max(200px,calc(100%/3)),1fr))] ink:xl:grid-cols-2 ink:gap-1 ink:box-border",
-        className
-      )}
-    >
-      {children}
-    </div>
+    <Card variant="secondary" className={className}>
+      <div
+        className={classNames(
+          "ink:flex ink:flex-col ink:justify-start ink:gap-3 ink:box-border",
+          className
+        )}
+      >
+        {icon}
+        <TitleAndDescription
+          title={title}
+          description={description}
+          size="cardInfo"
+        />
+        {children}
+      </div>
+    </Card>
   );
 };
diff --git a/src/components/Card/Content/CardInfos.tsx b/src/components/Card/Content/CardInfos.tsx
@@ -0,0 +1,20 @@
+import { PropsWithChildren } from "react";
+import { classNames } from "../../../util/classes";
+
+export interface CardInfosProps extends PropsWithChildren {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const CardInfos = ({ children, className }: CardInfosProps) => {
+  return (
+    <div
+      className={classNames(
+        "ink:grid ink:grid-cols-[repeat(auto-fit,minmax(max(200px,calc(100%/3)),1fr))] ink:xl:grid-cols-2 ink:gap-1 ink:box-border",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/src/components/Card/Content/Image.tsx b/src/components/Card/Content/Image.tsx
@@ -17,7 +17,7 @@ export const Image: React.FC<ImageProps> = ({
   return (
     <div
       className={classNames(
-        "ink:rounded-lg ink:overflow-hidden ink:box-border ink:relative",
+        "ink:rounded-(--ink-card-rounded) ink:overflow-hidden ink:box-border ink:relative",
         className
       )}
     >

diff --git a/src/components/Card/Content/TitleAndDescription.tsx b/src/components/Card/Content/TitleAndDescription.tsx
@@ -3,7 +3,7 @@ import { classNames, variantClassNames } from "../../../util/classes";
 export interface TitleAndDescriptionProps {
   title: React.ReactNode;
   description?: React.ReactNode;
-  size?: "default" | "small";
+  size?: "default" | "small" | "cardInfo";
 }
 
 export const TitleAndDescription = ({
@@ -19,6 +19,7 @@ export const TitleAndDescription = ({
           variantClassNames(size, {
             default: "ink:text-h3",
             small: "ink:text-body-1-regular",
+            cardInfo: "ink:text-h5",
           })
         )}
       >
@@ -31,6 +32,7 @@ export const TitleAndDescription = ({
             variantClassNames(size, {
               default: "ink:text-body-1-regular",
               small: "ink:text-body-3-regular",
+              cardInfo: "ink:text-body-2-regular",
             })
           )}
         >

diff --git a/src/components/Card/Content/index.ts b/src/components/Card/Content/index.ts
@@ -1,4 +1,5 @@
 export * from "./CallToAction";
+export * from "./CardInfos";
 export * from "./CardInfo";
 export * from "./Image";
 export * from "./LargeLink";

diff --git a/src/components/SegmentedControl/SegmentedControl.stories.tsx b/src/components/SegmentedControl/SegmentedControl.stories.tsx
@@ -44,10 +44,6 @@ export const VariableTabWidth: Story = {
   },
 };
 
-export const DisplayOnDarkBackground: Story = {
-  args: { displayOn: "dark" },
-};
-
 export const AsLinks: Story = {
   args: {
     options: [
@@ -85,7 +81,6 @@ export const AsLinks: Story = {
 
 export const PrimaryVariant: Story = {
   args: {
-    displayOn: "light",
     variant: "primary",
     variableTabWidth: true,
     options: [
@@ -102,10 +97,9 @@ export const PrimaryVariant: Story = {
   },
 };
 
-export const PrimaryVariantOnDark: Story = {
+export const TagVariant: Story = {
   args: {
-    displayOn: "dark",
-    variant: "primary",
+    variant: "tag",
     variableTabWidth: true,
     options: [
       {

diff --git a/src/components/SegmentedControl/SegmentedControl.tsx b/src/components/SegmentedControl/SegmentedControl.tsx
@@ -1,19 +1,17 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { classNames, variantClassNames } from "../../util/classes";
-import { DisplayOnProps } from "../../util/theme";
 import { Slot } from "../Slot";
 import { useWindowSize } from "../../hooks/useWindowSize";
 
-export type SegmentedControlProps<TOptionValue extends string> =
-  DisplayOnProps & {
-    options: SegmentedControlOption<TOptionValue>[];
-    onOptionChange: (
-      option: SegmentedControlOption<TOptionValue>,
-      index: number
-    ) => void;
-    variableTabWidth?: boolean;
-    variant?: "default" | "primary";
-  };
+export type SegmentedControlProps<TOptionValue extends string> = {
+  options: SegmentedControlOption<TOptionValue>[];
+  onOptionChange: (
+    option: SegmentedControlOption<TOptionValue>,
+    index: number
+  ) => void;
+  variableTabWidth?: boolean;
+  variant?: "default" | "primary" | "tag";
+};
 
 export interface SegmentedControlOption<TOptionValue extends string> {
   children: React.ReactNode;
@@ -26,7 +24,6 @@ export const SegmentedControl = <TOptionValue extends string>({
   options,
   onOptionChange,
   variableTabWidth,
-  displayOn = "light",
   variant = "default",
 }: SegmentedControlProps<TOptionValue>) => {
   const itemsRef = useRef<Array<HTMLButtonElement | null>>([]);
@@ -64,9 +61,10 @@ export const SegmentedControl = <TOptionValue extends string>({
       <div
         className={classNames(
           "ink:grid ink:h-5 ink:grid-flow-col ink:text-body-3-bold ink:rounded-md ink:p-0.5 ink:box-border ink:backdrop-blur-lg",
-          variantClassNames(displayOn, {
-            light: "ink:bg-background-container",
-            dark: "ink:bg-background-light",
+          variantClassNames(variant, {
+            default: "ink:bg-background-container",
+            primary: "ink:bg-background-container",
+            tag: "",
           }),
           variableTabWidth
             ? "ink:[grid-auto-columns:auto]"
@@ -84,9 +82,14 @@ export const SegmentedControl = <TOptionValue extends string>({
                   ? variantClassNames(variant, {
                       default: "ink:text-text-default",
                       primary: "ink:text-text-on-primary",
+                      tag: "ink:text-text-default",
                     })
                   : "ink:text-text-muted ink:hover:text-text-default",
-                variableTabWidth ? "ink:px-3" : "ink:px-4"
+                variantClassNames(variant, {
+                  default: variableTabWidth ? "ink:px-3" : "ink:px-4",
+                  primary: variableTabWidth ? "ink:px-3" : "ink:px-4",
+                  tag: "ink:px-2",
+                })
               )}
               ref={(el) => {
                 itemsRef.current[index] = el;
@@ -115,13 +118,10 @@ export const SegmentedControl = <TOptionValue extends string>({
             <div
               className={classNames(
                 "ink:w-full ink:h-full ink:rounded-sm",
-                variantClassNames(displayOn, {
-                  light: "ink:bg-background-light",
-                  dark: "ink:bg-background-dark",
-                }),
                 variantClassNames(variant, {
-                  default: "",
+                  default: "ink:bg-background-light",
                   primary: "ink:bg-button-primary",
+                  tag: "ink:bg-button-secondary",
                 })
               )}
             />

diff --git a/src/util/theme.ts b/src/util/theme.ts