@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
77 lines (76 loc) • 3.27 kB
TypeScript
import React from "react";
import type { AkselColoredBorderToken, AkselColoredStatelessBackgroundToken, AkselDynamicStatelessBackgroundToken, AkselRootBackgroundToken, AkselRootBorderToken, AkselShadowToken } from "@navikt/ds-tokens/types";
import { type OverridableComponent } from "../../utils-external/index.js";
import { PrimitiveProps } from "../base/BasePrimitive.js";
import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps.js";
import { BorderRadiusScale, ResponsiveProp, SpaceDelimitedAttribute } from "../utilities/types.js";
export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
/**
* CSS `background-color` property.
* Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#backgroundColor).
* @see {@link AkselRootBackgroundToken}, {@link AkselColoredStatelessBackgroundToken} and {@link AkselDynamicStatelessBackgroundToken}
*/
background?: AkselRootBackgroundToken | AkselColoredStatelessBackgroundToken | AkselDynamicStatelessBackgroundToken;
/**
* CSS `border-color` property.
* Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#borderColor).
* @see {@link AkselColoredBorderToken}
*/
borderColor?: Exclude<AkselRootBorderToken, "focus"> | AkselColoredBorderToken;
/**
* CSS `border-radius` property.
* Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#radius)
* or an object of radius tokens for different breakpoints.
* @example
* borderRadius='full'
* borderRadius='0 full 12 2'
* borderRadius={{xs: '2 12', sm: '0', md: '12', lg: 'full'}}
* @see {@link BorderRadiusScale}
*/
borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiusScale | "0">>;
/**
* CSS `border-width` property. If this is not set there will be no border.
* @example
* borderWidth='2'
* borderWidth='1 2 3 4'
*/
borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
/** Shadow on box. Accepts a shadow token.
* @example
* shadow='small'
* @see {@link ShadowKeys}
*/
shadow?: AkselShadowToken;
} & PrimitiveProps & PrimitiveAsChildProps;
/**
* Foundational Layout-primitive for generic encapsulation & styling.
* @deprecated Deprecated in v8. Use `Box` from '@navikt/ds-react/Box' instead (with same props).
*
* **Run `npx @navikt/aksel@latest codemod v8-box-new` to migrate.**
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
* @see 🏷️ {@link BoxProps}
* @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
*
* @example
* <Box padding="space-16">
* <BodyShort>Hei</BodyShort>
* </Box>
*
* @example
* <Box padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}>
* <BodyShort>Hei</BodyShort>
* </Box>
*
* @example
* <VStack gap="space-32">
* <Box padding="space-16">
* <BodyShort>Hei</BodyShort>
* </Box>
* <Box padding="space-16">
* <BodyShort>Hei</BodyShort>
* </Box>
* </VStack>
*/
export declare const BoxNew: OverridableComponent<BoxNewProps, HTMLDivElement>;
export default BoxNew;