UNPKG

@navikt/ds-react

Version:

React components from the Norwegian Labour and Welfare Administration.

46 lines 1.98 kB
var __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; import React, { forwardRef, useContext } from "react"; import { BodyLong } from "../typography/index.js"; import { cl } from "../utils/helpers/index.js"; import { ListItem } from "./List.Item.js"; import { ListContext } from "./List.context.js"; /** * A list component * * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/list) * @see 🏷️ {@link ListProps | Props} * * @example * ```jsx * <List> * <List.Item>Coffee</List.Item> * <List.Item>Tea</List.Item> * <List.Item>Milk</List.Item> * </List> * ``` */ export const List = forwardRef((_a, ref) => { var { children, className, as: ListTag = "ul", size, "aria-label": _ariaLabel, "aria-labelledby": _ariaLabelledBy } = _a, rest = __rest(_a, ["children", "className", "as", "size", "aria-label", "aria-labelledby"]); const { size: contextSize } = useContext(ListContext); const listSize = size !== null && size !== void 0 ? size : contextSize; return (React.createElement(ListContext.Provider, { value: { listType: ListTag, size: listSize, } }, React.createElement(BodyLong, Object.assign({ as: "div" }, rest, { size: listSize, ref: ref, className: cl("aksel-list", `aksel-list--${listSize}`, className) }), React.createElement(ListTag, { role: "list", "aria-label": _ariaLabel, "aria-labelledby": _ariaLabelledBy }, children)))); }); List.Item = ListItem; export default List; export { ListItem }; //# sourceMappingURL=List.js.map