From fc52ea8856902e03309ca1044060e93634f6f660 Mon Sep 17 00:00:00 2001 From: fran-ink <171171801+fran-ink@users.noreply.github.com> Date: Thu, 13 Feb 2025 14:28:19 -0500 Subject: [PATCH] feat: v8 * segmented control tag variant * Fix card roundness * Create CardInfo for ease of use --- package.json | 2 +- src/components/Card/Card.stories.tsx | 66 ++++++++----------- src/components/Card/Card.tsx | 19 +++++- src/components/Card/Content/CardInfo.tsx | 39 +++++++---- src/components/Card/Content/CardInfos.tsx | 20 ++++++ src/components/Card/Content/Image.tsx | 2 +- .../Card/Content/TitleAndDescription.tsx | 4 +- src/components/Card/Content/index.ts | 1 + .../SegmentedControl.stories.tsx | 10 +-- .../SegmentedControl/SegmentedControl.tsx | 42 ++++++------ src/util/theme.ts | 3 - 11 files changed, 123 insertions(+), 85 deletions(-) create mode 100644 src/components/Card/Content/CardInfos.tsx delete mode 100644 src/util/theme.ts diff --git a/package.json b/package.json index ce87c5a..02ce11f 100644 --- 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 index 5bace93..b0d273b 100644 --- a/src/components/Card/Card.stories.tsx +++ b/src/components/Card/Card.stories.tsx @@ -231,43 +231,35 @@ export const LargeCardInfo: Story = { children: ( <> - - - } - title="Pizza Making Class" - description="Learn to toss dough and create your perfect pizza with our expert chefs." - /> - - - } - title="Paint & Sip Night" - description="Enjoy wine while creating your masterpiece in this relaxing art class." - /> - - - } - title="Live Jazz Night" - description="Swing by for smooth tunes and great vibes at our local jazz club." - /> - - - } - title="Community Garden" - description="Get your hands dirty and learn about urban farming with neighbors." - /> - - - } - title="Weekend Food Festival" - description="Sample delicious treats from local vendors and enjoy live entertainment all weekend long." - /> - - + + } + title="Pizza Making Class" + description="Learn to toss dough and create your perfect pizza with our expert chefs." + /> + } + title="Paint & Sip Night" + description="Enjoy wine while creating your masterpiece in this relaxing art class." + /> + } + title="Live Jazz Night" + description="Swing by for smooth tunes and great vibes at our local jazz club." + /> + } + title="Community Garden" + description="Get your hands dirty and learn about urban farming with neighbors." + /> + + } + title="Weekend Food Festival" + description="Sample delicious treats from local vendors and enjoy live entertainment all weekend long." + /> + ), }, diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 5fa9630..098a88e 100644 --- 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 { 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,8 +63,10 @@ export const Card: React.FC = ({ asChild, variant, clickable, + rounded, }) => { const Component = asChild ? Slot : "div"; + const roundedValue = rounded || (image ? "xxl" : "lg"); return ( = ({ variant, imageLocation: image ? imageLocation : undefined, clickable, + rounded: roundedValue, className, }), className @@ -79,6 +89,11 @@ export const Card: React.FC = ({ 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 index 73c4f5c..dd02a27 100644 --- 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 ( -
- {children} -
+ +
+ {icon} + + {children} +
+ ); }; diff --git a/src/components/Card/Content/CardInfos.tsx b/src/components/Card/Content/CardInfos.tsx new file mode 100644 index 0000000..140b4eb --- /dev/null +++ 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 ( +
+ {children} +
+ ); +}; diff --git a/src/components/Card/Content/Image.tsx b/src/components/Card/Content/Image.tsx index 9adb6bf..d38e107 100644 --- a/src/components/Card/Content/Image.tsx +++ b/src/components/Card/Content/Image.tsx @@ -17,7 +17,7 @@ export const Image: React.FC = ({ return (
diff --git a/src/components/Card/Content/TitleAndDescription.tsx b/src/components/Card/Content/TitleAndDescription.tsx index 6a2bf51..3251138 100644 --- 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 index 9fb6dfd..728727c 100644 --- 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 index cabe5c9..931d150 100644 --- 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 index 50901e3..7eabce0 100644 --- 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 = - DisplayOnProps & { - options: SegmentedControlOption[]; - onOptionChange: ( - option: SegmentedControlOption, - index: number - ) => void; - variableTabWidth?: boolean; - variant?: "default" | "primary"; - }; +export type SegmentedControlProps = { + options: SegmentedControlOption[]; + onOptionChange: ( + option: SegmentedControlOption, + index: number + ) => void; + variableTabWidth?: boolean; + variant?: "default" | "primary" | "tag"; +}; export interface SegmentedControlOption { children: React.ReactNode; @@ -26,7 +24,6 @@ export const SegmentedControl = ({ options, onOptionChange, variableTabWidth, - displayOn = "light", variant = "default", }: SegmentedControlProps) => { const itemsRef = useRef>([]); @@ -64,9 +61,10 @@ export const SegmentedControl = ({
({ ? 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 = ({
diff --git a/src/util/theme.ts b/src/util/theme.ts deleted file mode 100644 index 63b93bb..0000000 --- a/src/util/theme.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface DisplayOnProps { - displayOn?: "light" | "dark"; -}