@undp/design-system-react
Version:
React based design system for UNDP
1 lines • 6.14 kB
Source Map (JSON)
{"version":3,"file":"PageWideCard.cjs","names":[],"sources":["../src/components/ui/card-page-wide.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst cardVariants = cva('flex flex-col items-stretch w-full', {\n variants: {\n imageWidth: {\n zero: '[&_.card-img]:hidden [&_.card-content]:w-full',\n xs: '[&_.card-img]:w-1/4 [&_.card-content]:w-3/4',\n sm: '[&_.card-img]:w-1/3 [&_.card-content]:w-2/3',\n base: '[&_.card-img]:w-1/2 [&_.card-content]:w-1/2',\n lg: '[&_.card-img]:w-2/3 [&_.card-content]:w-1/3',\n xl: '[&_.card-img]:w-3/4 [&_.card-content]:w-1/4',\n },\n },\n defaultVariants: { imageWidth: 'base' },\n});\n\ninterface CardProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof cardVariants> {\n border?: boolean;\n}\n\nconst PageWideCard = React.forwardRef<HTMLDivElement, CardProps>(\n ({ className, border, imageWidth, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n cardVariants({ imageWidth }),\n border === false ? '' : 'border-foreground border-t-2',\n className,\n )}\n {...props}\n />\n ),\n);\nPageWideCard.displayName = 'PageWideCard';\n\nconst PageWideCardContent = React.forwardRef<HTMLDivElement, CardProps>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n {...props}\n className={cn('card-content flex flex-col justify-between pl-4 rtl:pr-4 rtl:pl-0', className)}\n />\n ),\n);\nPageWideCardContent.displayName = 'PageWideCardContent';\n\nconst PageWideCardHeader = React.forwardRef<HTMLDivElement, CardProps>(({ ...props }, ref) => (\n <div ref={ref} {...props} />\n));\nPageWideCardHeader.displayName = 'PageWideCardHeader';\n\nconst PageWideCardContainer = React.forwardRef<HTMLDivElement, CardProps>(\n ({ className, ...props }, ref) => (\n <div ref={ref} {...props} className={cn('flex flex-row items-stretch gap-6', className)} />\n ),\n);\nPageWideCardContainer.displayName = 'PageWideCardContainer';\n\nconst PageWideCardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-wrap gap-4 pt-4 pb-2 text-content-primary', className)}\n {...props}\n />\n ),\n);\nPageWideCardFooter.displayName = 'PageWideCardFooter';\n\nconst PageWideCardTag = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ children, className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'mt-0 mb-0 flex w-full gap-2 pt-4 pr-6 pb-4 pl-6 font-body font-bold text-content-primary text-xs uppercase leading-xs md:mb-0 rtl:pl-6 [dir-rtl]:pr-6',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n ),\n);\nPageWideCardTag.displayName = 'PageWideCardTag';\n\nconst PageWideCardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ children, className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'm-0 flex gap-2 pt-12 pr-0 pb-8 pl-0 font-body font-normal text-content-primary text-h4-xs md:text-h4-sm lg:text-h4',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n ),\n);\nPageWideCardTitle.displayName = 'PageWideCardTitle';\n\nconst PageWideCardDescription = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'mt-0 flex flex-col gap-2 pt-0 pr-0 pb-6 pl-0 font-body text-content-primary text-p-xs md:text-p-sm lg:text-p',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n));\nPageWideCardDescription.displayName = 'PageWideCardDescription';\n\nconst PageWideCardImage = React.forwardRef<\n HTMLImageElement,\n React.HTMLAttributes<HTMLImageElement> & {\n src: string;\n alt?: string;\n }\n>(({ className, ...props }, ref) => (\n <img ref={ref} alt='card' {...props} className={cn('card-img object-cover', className)} />\n));\nPageWideCardImage.displayName = 'PageWideCardImage';\n\nexport {\n PageWideCard,\n PageWideCardContainer,\n PageWideCardContent,\n PageWideCardDescription,\n PageWideCardFooter,\n PageWideCardHeader,\n PageWideCardImage,\n PageWideCardTag,\n PageWideCardTitle,\n};\n"],"mappings":"8PAKA,IAAM,EAAe,EAAA,EAAI,qCAAsC,CAC7D,SAAU,CACR,WAAY,CACV,KAAM,gDACN,GAAI,8CACJ,GAAI,8CACJ,KAAM,8CACN,GAAI,8CACJ,GAAI,6CACN,CACF,EACA,gBAAiB,CAAE,WAAY,MAAO,CACxC,CAAC,EAQK,EAAe,EAAM,YACxB,CAAE,YAAW,SAAQ,aAAY,GAAG,GAAS,KAC5C,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,EAAa,CAAE,YAAW,CAAC,EAC3B,IAAW,GAAQ,GAAK,+BACxB,CACF,EACA,GAAI,CACL,CAAA,CAEL,EACA,EAAa,YAAc,eAE3B,IAAM,EAAsB,EAAM,YAC/B,CAAE,YAAW,GAAG,GAAS,KACxB,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,GAAI,EACJ,UAAW,EAAA,EAAG,oEAAqE,CAAS,CAC7F,CAAA,CAEL,EACA,EAAoB,YAAc,sBAElC,IAAM,EAAqB,EAAM,YAAuC,CAAE,GAAG,GAAS,KACpF,EAAA,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,GAAI,CAAQ,CAAA,CAC5B,EACD,EAAmB,YAAc,qBAEjC,IAAM,EAAwB,EAAM,YACjC,CAAE,YAAW,GAAG,GAAS,KACxB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,GAAI,EAAO,UAAW,EAAA,EAAG,oCAAqC,CAAS,CAAI,CAAA,CAE9F,EACA,EAAsB,YAAc,wBAEpC,IAAM,EAAqB,EAAM,YAC9B,CAAE,YAAW,GAAG,GAAS,KACxB,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EAAG,sDAAuD,CAAS,EAC9E,GAAI,CACL,CAAA,CAEL,EACA,EAAmB,YAAc,qBAEjC,IAAM,EAAkB,EAAM,YAC3B,CAAE,WAAU,YAAW,GAAG,GAAS,KAClC,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,wJACA,CACF,EACA,GAAI,EAEH,UACE,CAAA,CAET,EACA,EAAgB,YAAc,kBAE9B,IAAM,EAAoB,EAAM,YAC7B,CAAE,WAAU,YAAW,GAAG,GAAS,KAClC,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,qHACA,CACF,EACA,GAAI,EAEH,UACE,CAAA,CAET,EACA,EAAkB,YAAc,oBAEhC,IAAM,EAA0B,EAAM,YAGnC,CAAE,WAAU,YAAW,GAAG,GAAS,KACpC,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,+GACA,CACF,EACA,GAAI,EAEH,UACE,CAAA,CACN,EACD,EAAwB,YAAc,0BAEtC,IAAM,EAAoB,EAAM,YAM7B,CAAE,YAAW,GAAG,GAAS,KAC1B,EAAA,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,IAAI,OAAO,GAAI,EAAO,UAAW,EAAA,EAAG,wBAAyB,CAAS,CAAI,CAAA,CAC1F,EACD,EAAkB,YAAc"}