@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
105 lines • 4.95 kB
JavaScript
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 } from "react";
import { useRenameCSS } from "../theme/Theme.js";
import { BodyLong, Heading } from "../typography/index.js";
import { createContext } from "../util/create-context.js";
import { LinkAnchor, LinkAnchorArrow, LinkAnchorOverlay, } from "../util/link-anchor/index.js";
const [LinkCardContextProvider, useLinkCardContext] = createContext({
name: "LinkCardContextProvider",
});
/**
* Accessible clickable card as a link.
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/linkcard)
* @see 🏷️ {@link LinkCardProps}
*
*
* @example
* ```tsx
* <LinkCard>
* <LinkCard.Icon>
* <IconOrPictogram />
* </LinkCard.Icon>
* <LinkCard.Title>
* <LinkCard.Anchor href="/href">
* LinkCard title
* </LinkCard.Anchor>
* </LinkCard.Title>
* <LinkCard.Description>
* This is a description of the link card.
* </LinkCard.Description>
* <LinkCard.Footer>Footer content</LinkCard.Footer>
* </LinkCard>
* ```
*/
export const LinkCard = forwardRef((_a, forwardedRef) => {
var { children, className, arrow = true, arrowPosition = "baseline", size = "medium" } = _a, restProps = __rest(_a, ["children", "className", "arrow", "arrowPosition", "size"]);
const { cn } = useRenameCSS();
return (React.createElement(LinkCardContextProvider, { size: size },
React.createElement(LinkAnchorOverlay, { asChild: true },
React.createElement(BodyLong, Object.assign({ as: "div", size: size, ref: forwardedRef, "data-color": "neutral", className: cn("navds-link-card", className, `navds-link-card--${size}`), "data-align-arrow": arrowPosition }, restProps),
children,
arrow && (React.createElement(LinkAnchorArrow, { fontSize: size === "medium" ? "1.75rem" : "1.5rem", className: cn("navds-link-card__arrow") }))))));
});
/**
* @see 🏷️ {@link LinkCardTitleProps}
*/
export const LinkCardTitle = forwardRef((_a, forwardedRef) => {
var { children, as = "span", className } = _a, restProps = __rest(_a, ["children", "as", "className"]);
const { cn } = useRenameCSS();
const context = useLinkCardContext();
return (React.createElement(Heading, Object.assign({ ref: forwardedRef, as: as, size: context.size === "medium" ? "small" : "xsmall", className: cn("navds-link-card__title", className) }, restProps), children));
});
/**
* @see 🏷️ {@link LinkCardAnchorProps}
*/
export const LinkCardAnchor = LinkAnchor;
/**
* @see 🏷️ {@link LinkCardDescriptionProps}
*/
export const LinkCardDescription = forwardRef((_a, forwardedRef) => {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const { cn } = useRenameCSS();
return (React.createElement("div", Object.assign({ ref: forwardedRef, className: cn("navds-link-card__description", className) }, restProps), children));
});
/**
* @see 🏷️ {@link LinkCardFooterProps}
*/
export const LinkCardFooter = forwardRef((_a, forwardedRef) => {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const { cn } = useRenameCSS();
return (React.createElement("div", Object.assign({ ref: forwardedRef, className: cn("navds-link-card__footer", className) }, restProps), children));
});
/**
* @see 🏷️ {@link LinkCardIconProps}
*/
export const LinkCardIcon = forwardRef((_a, forwardedRef) => {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const { cn } = useRenameCSS();
return (React.createElement("div", Object.assign({ ref: forwardedRef, "aria-hidden": true, className: cn("navds-link-card__icon", className) }, restProps), children));
});
/**
* @see 🏷️ {@link LinkCardImageProps}
*/
export const LinkCardImage = forwardRef((_a, forwardedRef) => {
var { children, className, aspectRatio, style } = _a, restProps = __rest(_a, ["children", "className", "aspectRatio", "style"]);
const { cn } = useRenameCSS();
return (React.createElement("div", Object.assign({ ref: forwardedRef, className: cn("navds-link-card__image-container", className), style: Object.assign(Object.assign({}, style), { aspectRatio }) }, restProps), children));
});
LinkCard.Title = LinkCardTitle;
LinkCard.Anchor = LinkCardAnchor;
LinkCard.Description = LinkCardDescription;
LinkCard.Footer = LinkCardFooter;
LinkCard.Icon = LinkCardIcon;
LinkCard.Image = LinkCardImage;
//# sourceMappingURL=LinkCard.js.map