UNPKG

@postenbring/hedwig-react

Version:

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

1 lines 1.92 kB
{"version":3,"sources":["../src/description-list/description-list.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {\n /**\n * Either `dt`, `dl`, or `div` elements\n */\n children?: ReactNode;\n /**\n * Direction of the description list\n */\n variant?: \"vertical\" | \"horizontal\";\n}\n\n/**\n * Uses the HTML5 `<dl>` element\n *\n * Pass in corresponding `<dt>` and `<dd>` elements as children\n *\n * ```tsx\n * <DescriptionList>\n * <dt>Vekt</dt>\n * <dd>12 kg</dd>\n * <dt>Antall kolli</dt>\n * <dd>2</dd>\n * </DescriptionList>\n * ```\n *\n * Optionally wrap them in `<div>` elements as allowed by the HTML5 spec\n *\n * ```tsx\n * <DescriptionList>\n * <div>\n * <dt>Vekt</dt>\n * <dd>12 kg</dd>\n * </div>\n * <div>\n * <dt>Antall kolli</dt>\n * <dd>2</dd>\n * </div>\n * </DescriptionList>\n * ```\n */\nexport const DescriptionList = forwardRef<HTMLDListElement, DescriptionListProps>(\n ({ variant = \"vertical\", className, ...rest }, ref) => {\n return (\n <dl\n ref={ref}\n className={clsx(\n \"hds-description-list\",\n {\n \"hds-description-list--horizontal\": variant === \"horizontal\",\n },\n className as undefined,\n )}\n {...rest}\n />\n );\n },\n);\nDescriptionList.displayName = \"DescriptionList\";\n"],"mappings":";;;;;;AAAA,SAAS,kBAAuD;AAChE,SAAS,YAAY;AA6Cf;AAHC,IAAM,kBAAkB;AAAA,EAC7B,CAAC,IAA8C,QAAQ;AAAtD,iBAAE,YAAU,YAAY,UA5C3B,IA4CG,IAAsC,iBAAtC,IAAsC,CAApC,WAAsB;AACvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,oCAAoC,YAAY;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;","names":[]}