@norges-domstoler/dds-components 12.0.0 → 12.1.0

package/dist/cjs/components/Stack/Stack.d.ts

@@ -22,7 +22,12 @@ export interface StackStyleProps {
      * Hvilken spacing token som skal brukes som CSS `gap`.
      * @default 0
      */
-    gap?: keyof typeof stackTokens.gap | 0;
+    gap?: keyof typeof stackTokens.spacing | 0;
+    /**
+     * Hvilken spacing token som skal brukes som CSS `padding`.
+     * @default 0
+     */
+    padding?: keyof typeof stackTokens.spacing | 0;
 }
 export type StackProps = BaseComponentPropsWithChildren<HTMLDivElement, Omit<StackStyleProps, 'direction'>>;
 export declare const HStack: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & Omit<StackStyleProps, "direction"> & {

package/dist/cjs/components/Stack/Stack.tokens.d.ts

@@ -1,5 +1,5 @@
 export declare const stackTokens: {
-    gap: {
+    spacing: {
         'local-x0.125': string;
         'local-x0.25': string;
         'local-x0.5': string;

package/dist/cjs/index.js

@@ -7499,8 +7499,8 @@ var HeaderContainer$2 = styled__default.default.div.withConfig({
 }, function (props) {
   return props.bold && styled.css(["font-weight:600;"]);
 });
-var HeaderWrapper = styled__default.default.button.withConfig({
-  displayName: "CardAccordionHeader__HeaderWrapper",
+var HeaderWrapperButton = styled__default.default.button.withConfig({
+  displayName: "CardAccordionHeader__HeaderWrapperButton",
   componentId: "sc-1qs6bkj-2"
 })(["", " user-select:text;position:relative;cursor:pointer;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}", " display:block;width:100%;&:hover{box-shadow:", ";}&:focus-visible,&.focus-visible{outline:none;box-shadow:", ";}"], normalizeButton, removeButtonStyling, header.hover.boxShadow, header.focus.boxShadow);
 var ChevronWrapper = styled__default.default.span.withConfig({
@@ -7536,7 +7536,9 @@ var CardAccordionHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     width: cardAccordionTokens.chevron.width,
     height: cardAccordionTokens.chevron.height
   };
-  return jsxRuntime.jsx(HeaderWrapper, Object.assign({}, headerWrapperProps, {
+  return jsxRuntime.jsx(HeaderWrapperButton, Object.assign({}, headerWrapperProps, {
+    type: "button"
+  }, {
     children: jsxRuntime.jsxs(HeaderContainer$2, Object.assign({
       typographyType: typographyType,
       padding: padding,
@@ -10650,7 +10652,7 @@ var SplitButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 
 var spacing$3 = ddsDesignTokens.ddsBaseTokens.spacing;
-var gapTokens = {
+var spacingTokens = {
   'local-x0.125': spacing$3.SizesDdsSpacingLocalX0125,
   'local-x0.25': spacing$3.SizesDdsSpacingLocalX025,
   'local-x0.5': spacing$3.SizesDdsSpacingLocalX05,
@@ -10669,13 +10671,13 @@ var gapTokens = {
   'layout-x10': spacing$3.SizesDdsSpacingLayoutX10
 };
 var stackTokens = {
-  gap: gapTokens
+  spacing: spacingTokens
 };
 
 var Stack = styled__default.default.div.withConfig({
   displayName: "Stack",
   componentId: "sc-1a1z9ks-0"
-})(["display:flex;flex-direction:", ";align-items:", ";justify-content:", ";gap:", ";"], function (_ref) {
+})(["display:flex;flex-direction:", ";align-items:", ";justify-content:", ";gap:", ";padding:", ";"], function (_ref) {
   var direction = _ref.direction;
   return direction === 'horizontal' ? 'row' : 'column';
 }, function (props) {
@@ -10683,7 +10685,9 @@ var Stack = styled__default.default.div.withConfig({
 }, function (props) {
   return props.justify;
 }, function (props) {
-  return props.gap === undefined || props.gap === 0 ? '0' : stackTokens.gap[props.gap];
+  return props.gap === undefined || props.gap === 0 ? '0' : stackTokens.spacing[props.gap];
+}, function (props) {
+  return props.padding === undefined || props.padding === 0 ? '0' : stackTokens.spacing[props.padding];
 });
 Stack.defaultProps = {
   align: 'center',

package/dist/components/Card/CardAccordion/CardAccordionHeader.js

@@ -46,8 +46,8 @@ var HeaderContainer = styled.div.withConfig({
 }, function (props) {
   return props.bold && css(["font-weight:600;"]);
 });
-var HeaderWrapper = styled.button.withConfig({
-  displayName: "CardAccordionHeader__HeaderWrapper",
+var HeaderWrapperButton = styled.button.withConfig({
+  displayName: "CardAccordionHeader__HeaderWrapperButton",
   componentId: "sc-1qs6bkj-2"
 })(["", " user-select:text;position:relative;cursor:pointer;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}", " display:block;width:100%;&:hover{box-shadow:", ";}&:focus-visible,&.focus-visible{outline:none;box-shadow:", ";}"], normalizeButton, removeButtonStyling, header.hover.boxShadow, header.focus.boxShadow);
 var ChevronWrapper = styled.span.withConfig({
@@ -83,7 +83,9 @@ var CardAccordionHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     width: cardAccordionTokens.chevron.width,
     height: cardAccordionTokens.chevron.height
   };
-  return jsx(HeaderWrapper, Object.assign({}, headerWrapperProps, {
+  return jsx(HeaderWrapperButton, Object.assign({}, headerWrapperProps, {
+    type: "button"
+  }, {
     children: jsxs(HeaderContainer, Object.assign({
       typographyType: typographyType,
       padding: padding,

package/dist/components/Stack/Stack.d.ts

@@ -22,7 +22,12 @@ export interface StackStyleProps {
      * Hvilken spacing token som skal brukes som CSS `gap`.
      * @default 0
      */
-    gap?: keyof typeof stackTokens.gap | 0;
+    gap?: keyof typeof stackTokens.spacing | 0;
+    /**
+     * Hvilken spacing token som skal brukes som CSS `padding`.
+     * @default 0
+     */
+    padding?: keyof typeof stackTokens.spacing | 0;
 }
 export type StackProps = BaseComponentPropsWithChildren<HTMLDivElement, Omit<StackStyleProps, 'direction'>>;
 export declare const HStack: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & Omit<StackStyleProps, "direction"> & {

package/dist/components/Stack/Stack.js

@@ -8,7 +8,7 @@ import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 var Stack = styled.div.withConfig({
   displayName: "Stack",
   componentId: "sc-1a1z9ks-0"
-})(["display:flex;flex-direction:", ";align-items:", ";justify-content:", ";gap:", ";"], function (_ref) {
+})(["display:flex;flex-direction:", ";align-items:", ";justify-content:", ";gap:", ";padding:", ";"], function (_ref) {
   var direction = _ref.direction;
   return direction === 'horizontal' ? 'row' : 'column';
 }, function (props) {
@@ -16,7 +16,9 @@ var Stack = styled.div.withConfig({
 }, function (props) {
   return props.justify;
 }, function (props) {
-  return props.gap === undefined || props.gap === 0 ? '0' : stackTokens.gap[props.gap];
+  return props.gap === undefined || props.gap === 0 ? '0' : stackTokens.spacing[props.gap];
+}, function (props) {
+  return props.padding === undefined || props.padding === 0 ? '0' : stackTokens.spacing[props.padding];
 });
 Stack.defaultProps = {
   align: 'center',

package/dist/components/Stack/Stack.tokens.d.ts

@@ -1,5 +1,5 @@
 export declare const stackTokens: {
-    gap: {
+    spacing: {
         'local-x0.125': string;
         'local-x0.25': string;
         'local-x0.5': string;

package/dist/components/Stack/Stack.tokens.js

@@ -1,7 +1,7 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var spacing = ddsBaseTokens.spacing;
-var gapTokens = {
+var spacingTokens = {
   'local-x0.125': spacing.SizesDdsSpacingLocalX0125,
   'local-x0.25': spacing.SizesDdsSpacingLocalX025,
   'local-x0.5': spacing.SizesDdsSpacingLocalX05,
@@ -20,7 +20,7 @@ var gapTokens = {
   'layout-x10': spacing.SizesDdsSpacingLayoutX10
 };
 var stackTokens = {
-  gap: gapTokens
+  spacing: spacingTokens
 };
 
 export { stackTokens };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",