@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1 lines • 4.46 kB
Source Map (JSON)
{"version":3,"sources":["../src/warning-banner/warning-banner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { forwardRef, useId, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface WarningBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n title: ReactNode;\n description?: ReactNode;\n}\n\nexport const WarningBanner = forwardRef<HTMLDivElement, WarningBannerProps>(\n ({ title, description, className, ...rest }, ref) => {\n const descriptionId = useId();\n const expandable = !!description;\n return (\n <div {...rest} className={clsx(\"hds-warning-banner\", className as undefined)} ref={ref}>\n <WarningBannerTitle\n variant={expandable ? \"expandable\" : \"default\"}\n descriptionId={descriptionId}\n >\n {title}\n </WarningBannerTitle>\n {expandable ? (\n <WarningBannerDescription id={descriptionId}>{description}</WarningBannerDescription>\n ) : null}\n </div>\n );\n },\n);\nWarningBanner.displayName = \"WarningBanner\";\n\ntype WarningBannerTitleProps =\n | ({\n variant: \"expandable\";\n descriptionId: string;\n } & React.ButtonHTMLAttributes<HTMLButtonElement>)\n | ({ variant: \"default\"; descriptionId?: string } & React.HTMLAttributes<HTMLParagraphElement>);\n\nconst WarningBannerTitle = forwardRef<\n HTMLButtonElement | HTMLParagraphElement,\n WarningBannerTitleProps\n>(({ variant, descriptionId, children, className, ...rest }, ref) => {\n const [open, setOpen] = useState<boolean>(false);\n if (variant === \"expandable\") {\n return (\n <button\n {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n aria-expanded={open}\n aria-controls={descriptionId}\n data-state={open ? \"open\" : \"closed\"}\n className={clsx(\n \"hds-warning-banner__title\",\n \"hds-warning-banner__title-trigger\",\n className as undefined,\n )}\n onClick={() => {\n setOpen((prev) => !prev);\n }}\n ref={ref as React.Ref<HTMLButtonElement>}\n type=\"button\"\n >\n <div>{children}</div>\n </button>\n );\n }\n return (\n <p\n {...(rest as React.HTMLAttributes<HTMLParagraphElement>)}\n className={clsx(\"hds-warning-banner__title\", className as undefined)}\n ref={ref as React.Ref<HTMLParagraphElement>}\n >\n {children}\n </p>\n );\n});\nWarningBannerTitle.displayName = \"WarningBannerTitle\";\n\ntype WarningBannerDescriptionProps = { id: string } & React.HTMLAttributes<HTMLParagraphElement>;\nconst WarningBannerDescription = forwardRef<HTMLParagraphElement, WarningBannerDescriptionProps>(\n ({ className, id, ...rest }, ref) => {\n return (\n <p\n id={id}\n className={clsx(\"hds-warning-banner__description\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nWarningBannerDescription.displayName = \"WarningBannerDescription\";\n"],"mappings":";;;;;;;AACA,SAAgB,YAAY,OAAO,gBAAgB;AACnD,SAAS,YAAY;AAYf,SACE,KADF;AALC,IAAM,gBAAgB;AAAA,EAC3B,CAAC,IAA4C,QAAQ;AAApD,iBAAE,SAAO,aAAa,UAVzB,IAUG,IAAoC,iBAApC,IAAoC,CAAlC,SAAO,eAAa;AACrB,UAAM,gBAAgB,MAAM;AAC5B,UAAM,aAAa,CAAC,CAAC;AACrB,WACE,qBAAC,wCAAQ,OAAR,EAAc,WAAW,KAAK,sBAAsB,SAAsB,GAAG,KAC5E;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,aAAa,eAAe;AAAA,UACrC;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACC,aACC,oBAAC,4BAAyB,IAAI,eAAgB,uBAAY,IACxD;AAAA,QACN;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAS5B,IAAM,qBAAqB,WAGzB,CAAC,IAA0D,QAAQ;AAAlE,eAAE,WAAS,eAAe,UAAU,UAxCvC,IAwCG,IAAkD,iBAAlD,IAAkD,CAAhD,WAAS,iBAAe,YAAU;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,MAAI,YAAY,cAAc;AAC5B,WACE;AAAA,MAAC;AAAA,uCACM,OADN;AAAA,QAEC,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,cAAY,OAAO,SAAS;AAAA,QAC5B,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS,MAAM;AACb,kBAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,QACzB;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QAEL,8BAAC,SAAK,UAAS;AAAA;AAAA,IACjB;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA,qCACM,OADN;AAAA,MAEC,WAAW,KAAK,6BAA6B,SAAsB;AAAA,MACnE;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,mBAAmB,cAAc;AAGjC,IAAM,2BAA2B;AAAA,EAC/B,CAAC,IAA4B,QAAQ;AAApC,iBAAE,aAAW,GA9EhB,IA8EG,IAAoB,iBAApB,IAAoB,CAAlB,aAAW;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,mCAAmC,SAAsB;AAAA,QACzE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,yBAAyB,cAAc;","names":[]}