@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1 lines • 2.27 kB
Source Map (JSON)
{"version":3,"sources":["../src/show-more/show-more.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype Variant =\n | {\n variant?: \"show-more\";\n expanded?: never;\n }\n | {\n variant: \"show-more-show-less\";\n expanded: boolean;\n };\n\nexport type ShowMoreProps = React.HTMLAttributes<HTMLButtonElement> & {\n text: React.ReactNode;\n} & Variant;\n\n/**\n * Simple button for triggering more content.\n *\n * You have to add the logic for what happens when the button is clicked yourself.\n *\n * @example\n * ```tsx\n * function Content() {\n * const [items, fetchMoreItems, moreItemsAvailable] = useYourData();\n * function onShowMoreItems() {\n * fetchMoreItems();\n * }\n * return (\n * <>\n * <ul>\n * {items.map((item) => (\n * <li key={item.id}>{item.text}</li>\n * ))}\n * </ul>\n * {moreItemsAvailable ?\n * <ShowMoreButton className=\"mt-8\" onClick={onShowMoreItems} lang=\"en\" /> :\n * null\n * }\n * </>\n * )\n * }\n * ```\n */\nexport const ShowMoreButton = forwardRef<HTMLButtonElement, ShowMoreProps>(\n ({ text, variant, expanded, className, ...rest }, ref) => {\n return (\n <button\n ref={ref}\n className={clsx(\n \"hds-show-more\",\n variant === \"show-more-show-less\" && \"hds-show-more--show-less\",\n className as undefined,\n )}\n data-state={expanded ? \"expanded\" : undefined}\n type=\"button\"\n {...rest}\n >\n {text}\n <span className={clsx(\"hds-show-more__icon\")} />\n </button>\n );\n },\n);\nShowMoreButton.displayName = \"ShowMoreButton\";\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkB;AA+CrB,SAYE,KAZF;AAHC,IAAM,iBAAiB;AAAA,EAC5B,CAAC,IAAiD,QAAQ;AAAzD,iBAAE,QAAM,SAAS,UAAU,UA9C9B,IA8CG,IAAyC,iBAAzC,IAAyC,CAAvC,QAAM,WAAS,YAAU;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,YAAY,yBAAyB;AAAA,UACrC;AAAA,QACF;AAAA,QACA,cAAY,WAAW,aAAa;AAAA,QACpC,MAAK;AAAA,SACD,OATL;AAAA,QAWE;AAAA;AAAA,UACD,oBAAC,UAAK,WAAW,KAAK,qBAAqB,GAAG;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":[]}