@norges-domstoler/dds-components 9.2.0-beta.0 → 9.2.0

package/dist/helpers/Input/Input.tokens.d.ts

@@ -1,4 +1,5 @@
-import { CSSObject } from 'styled-components';
+import { InputTypographyTypes } from './Input.types';
+export declare const inputTypographyTypes: InputTypographyTypes;
 export declare const inputTokens: {
     input: {
         base: {
@@ -19,83 +20,16 @@ export declare const inputTokens: {
         sizes: {
             medium: {
                 padding: string;
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
             };
             small: {
                 padding: string;
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
             };
             tiny: {
                 padding: string;
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
             };
         };
     };
     container: {
         gap: string;
     };
-    general: {
-        input: {
-            borderRadius: string;
-            borderWidth: string;
-            borderColor: string;
-            textColor: string;
-            hover: {
-                backgroundColor: string;
-                borderColor: string;
-                borderWidth: string;
-            };
-            focus: {
-                borderColor: string;
-                borderWidth: string;
-            };
-        };
-        label: {
-            hover: {
-                textColor: string;
-            };
-            focus: {
-                textColor: string;
-            };
-        };
-    };
-    hasLabel: {
-        base: CSSObject;
-    };
-    noLabel: {
-        base: CSSObject;
-    };
-    label: {
-        base: CSSObject;
-        hover: {
-            base: CSSObject;
-        };
-        focus: {
-            base: CSSObject;
-        };
-        disabled: {
-            base: CSSObject;
-        };
-    };
 };

package/dist/helpers/Input/Input.tokens.js

@@ -2,9 +2,13 @@ import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-
 
 var colors = ddsBaseTokens.colors,
     spacing = ddsBaseTokens.spacing,
-    fontPackages = ddsBaseTokens.fontPackages,
     border = ddsBaseTokens.border;
 var TextInput = ddsReferenceTokens.textInput;
+var inputTypographyTypes = {
+  medium: 'bodySans02',
+  small: 'bodySans01',
+  tiny: 'supportingStyleTiny01'
+};
 var input = {
   base: {
     color: TextInput.input.textColor,
@@ -23,62 +27,22 @@ var input = {
   },
   sizes: {
     medium: {
-      padding: spacing.SizesDdsSpacingLocalX075,
-      font: fontPackages.body_sans_02.base
+      padding: spacing.SizesDdsSpacingLocalX075
     },
     small: {
-      padding: "".concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX075),
-      font: fontPackages.body_sans_01.base
+      padding: "".concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX075)
     },
     tiny: {
-      padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05),
-      font: fontPackages.supportingStyle_tiny_01.base
+      padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05)
     }
   }
 };
-var inputHasLabelBase = {
-  padding: "".concat(spacing.SizesDdsSpacingLocalX075NumberPx + fontPackages.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1)
-};
-var inputNoLabelBase = {
-  padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1)
-};
-var inputLabelBase = {
-  padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1)
-};
-var inputLabelHoverBase = {
-  color: TextInput.label.hover.textColor
-};
-var inputLabelFocusBase = {
-  color: TextInput.label.focus.textColor
-};
-var inputLabelDisabledBase = {
-  color: colors.DdsColorNeutralsGray6
-};
 var container = {
   gap: spacing.SizesDdsSpacingLocalX0125
 };
 var inputTokens = {
   input: input,
-  container: container,
-  general: TextInput,
-  hasLabel: {
-    base: inputHasLabelBase
-  },
-  noLabel: {
-    base: inputNoLabelBase
-  },
-  label: {
-    base: inputLabelBase,
-    hover: {
-      base: inputLabelHoverBase
-    },
-    focus: {
-      base: inputLabelFocusBase
-    },
-    disabled: {
-      base: inputLabelDisabledBase
-    }
-  }
+  container: container
 };
 
-export { inputTokens };
+export { inputTokens, inputTypographyTypes };

package/dist/helpers/Input/Input.types.d.ts

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { Property } from 'csstype';
+import { StaticTypographyType } from '../../components/Typography';
 export declare type CommonInputProps = {
     /**Ledetekst for input. */
     label?: string;
@@ -19,3 +20,6 @@ export declare type StyledCommonInputProps = Pick<InputProps, 'readOnly' | 'disa
     hasErrorMessage: boolean;
 };
 export declare type StyledInputProps = StyledCommonInputProps & Pick<InputProps, 'componentSize'>;
+export declare type InputTypographyTypes = {
+    [k in InputSize]: StaticTypographyType;
+};

package/dist/helpers/SelectionControl/SelectionControl.styles.d.ts

@@ -1,3 +1,4 @@
+import { Direction } from '../../types';
 declare type SelectionControlType = 'radio' | 'checkbox';
 declare type CustomSelectionControlProps = {
     controlType?: SelectionControlType;
@@ -12,4 +13,8 @@ declare type ContainerProps = {
     controlType: SelectionControlType;
 };
 export declare const Container: import("styled-components").StyledComponent<"label", any, ContainerProps, never>;
+export declare const OuterGroupContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GroupContainer: import("styled-components").StyledComponent<"div", any, {
+    direction: Direction;
+}, never>;
 export {};

package/dist/helpers/SelectionControl/SelectionControl.styles.js

@@ -8,7 +8,9 @@ import { selectionControlTokens } from './SelectionControl.tokens.js';
 
 var selectionControl = selectionControlTokens.selectionControl,
     container = selectionControlTokens.container,
-    checkmark = selectionControlTokens.checkmark;
+    checkmark = selectionControlTokens.checkmark,
+    groupContainer = selectionControlTokens.groupContainer,
+    outerGroupContainer = selectionControlTokens.outerGroupContainer;
 var CustomSelectionControl = styled.span.withConfig({
   displayName: "SelectionControlstyles__CustomSelectionControl",
   componentId: "sc-1wv80b7-0"
@@ -32,5 +34,16 @@ var Container = styled.label.withConfig({
   var controlType = _ref5.controlType;
   return controlType === 'checkbox' ? css(["", ":after{border:solid ", ";border-width:0 1px 1px 0;left:35%;top:10%;width:30%;height:65%;transform:rotate(45deg);}input[data-indeterminate='true'] ~ ", ":after{border-width:1px 0 0 0;left:25%;top:50%;width:50%;height:1px;transform:none;}"], CustomSelectionControl, checkmark.checkbox.borderColor, CustomSelectionControl) : css(["", ":after{border-radius:50%;background-color:", ";width:", ";height:", ";left:", ";top:", ";}"], CustomSelectionControl, checkmark.radio.backgroundColor, checkmark.radio.width, checkmark.radio.height, checkmark.radio.left, checkmark.radio.top);
 });
+var OuterGroupContainer = styled.div.withConfig({
+  displayName: "SelectionControlstyles__OuterGroupContainer",
+  componentId: "sc-1wv80b7-2"
+})(["display:flex;flex-direction:column;gap:", ";"], outerGroupContainer.gap);
+var GroupContainer = styled.div.withConfig({
+  displayName: "SelectionControlstyles__GroupContainer",
+  componentId: "sc-1wv80b7-3"
+})(["display:flex;", ""], function (_ref6) {
+  var direction = _ref6.direction;
+  return css(["flex-direction:", ";gap:", ";"], direction, groupContainer[direction].gap);
+});
 
-export { Container, CustomSelectionControl };
+export { Container, CustomSelectionControl, GroupContainer, OuterGroupContainer };

package/dist/helpers/SelectionControl/SelectionControl.tokens.d.ts

@@ -80,4 +80,15 @@ export declare const selectionControlTokens: {
             padding: string;
         };
     };
+    groupContainer: {
+        row: {
+            gap: string;
+        };
+        column: {
+            gap: string;
+        };
+    };
+    outerGroupContainer: {
+        gap: string;
+    };
 };

package/dist/helpers/SelectionControl/SelectionControl.tokens.js

@@ -91,10 +91,23 @@ var container = {
     padding: "".concat(selectionControlSizeNumberPx / 2, "px")
   }
 };
+var groupContainer = {
+  row: {
+    gap: spacing.SizesDdsSpacingLocalX075
+  },
+  column: {
+    gap: spacing.SizesDdsSpacingLocalX05
+  }
+};
+var outerGroupContainer = {
+  gap: spacing.SizesDdsSpacingLocalX0125
+};
 var selectionControlTokens = {
   selectionControl: selectionControl,
   checkmark: checkmark,
-  container: container
+  container: container,
+  groupContainer: groupContainer,
+  outerGroupContainer: outerGroupContainer
 };
 
 export { selectionControlTokens };

package/dist/helpers/TextOverflowEllipsis/TextOverflowEllipsis.d.ts

@@ -0,0 +1,2 @@
+export declare const TextOverflowEllipsisWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TextOverflowEllipsisInner: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/helpers/TextOverflowEllipsis/TextOverflowEllipsis.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+var TextOverflowEllipsisWrapper = styled.span.withConfig({
+  displayName: "TextOverflowEllipsis__TextOverflowEllipsisWrapper",
+  componentId: "sc-1e0ljyj-0"
+})(["max-width:100%;"]);
+var TextOverflowEllipsisInner = styled.span.withConfig({
+  displayName: "TextOverflowEllipsis__TextOverflowEllipsisInner",
+  componentId: "sc-1e0ljyj-1"
+})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
+
+export { TextOverflowEllipsisInner, TextOverflowEllipsisWrapper };

package/dist/helpers/TextOverflowEllipsis/index.d.ts

@@ -0,0 +1 @@
+export * from './TextOverflowEllipsis';

package/dist/index.d.ts

@@ -40,3 +40,4 @@ export * from './components/Grid';
 export * from './components/ProgressTracker';
 export * from './hooks';
 export * from './components/TextArea';
+export * from './components/SplitButton';

package/dist/index.js

@@ -211,3 +211,4 @@ export { useMountTransition } from './hooks/useMountTransition.js';
 export { ScreenSize, useScreenSize } from './hooks/useScreenSize.js';
 export { useReturnFocusOnBlur } from './hooks/useReturnFocusOnBlur.js';
 export { StyledTextArea, TextArea } from './components/TextArea/TextArea.js';
+export { SplitButton } from './components/SplitButton/SplitButton.js';

package/dist/utils/color.d.ts

@@ -27,4 +27,4 @@ export declare type DDSTextColor = 'interactive' | 'primary' | 'danger' | 'warni
 export declare const textColorsArray: string[];
 export declare type TextColor = DDSTextColor | Property.Color;
 export declare function isTextColor(color: string): color is DDSTextColor;
-export declare const getTextColor: (color: TextColor) => string;
+export declare const getTextColor: (color: TextColor) => TextColor;

package/package.json

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

package/dist/cjs/components/Card/CardAccordion/CardAccordionBody.tokens.d.ts

@@ -1,4 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const cardAccordionBodyTokens: {
-    base: CSSObject;
-};

package/dist/cjs/components/Card/CardAccordion/CardAccordionHeader.tokens.d.ts

@@ -1,17 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const cardAccordionHeaderTokens: {
-    base: CSSObject;
-    focus: {
-        base: CSSObject;
-    };
-    hover: {
-        base: CSSObject;
-    };
-    chevronWrapper: {
-        base: CSSObject;
-    };
-    chevron: {
-        width: string;
-        height: string;
-    };
-};

package/dist/cjs/components/List/ListItem.tokens.d.ts

@@ -1,5 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const listItemTokens: {
-    base: CSSObject;
-    bulletSpacing: string;
-};

package/dist/cjs/components/RadioButton/RadioButtonGroup.tokens.d.ts

@@ -1,19 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const radioButtonGroupTokens: {
-    label: {
-        spaceLeft: string;
-    };
-    container: {
-        base: CSSObject;
-    };
-    groupContainer: {
-        direction: {
-            row: {
-                base: CSSObject;
-            };
-            column: {
-                base: CSSObject;
-            };
-        };
-    };
-};

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

@@ -1,6 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const spinnerTokens: {
-    circle: {
-        base: CSSObject;
-    };
-};

package/dist/components/Card/CardAccordion/CardAccordionBody.tokens.d.ts

@@ -1,4 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const cardAccordionBodyTokens: {
-    base: CSSObject;
-};

package/dist/components/Card/CardAccordion/CardAccordionBody.tokens.js

@@ -1,12 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var Spacing = ddsBaseTokens.spacing,
-    FontPackages = ddsBaseTokens.fontPackages;
-var base = Object.assign({
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX2NumberPx + Spacing.SizesDdsSpacingLocalX075NumberPx, "px ").concat(Spacing.SizesDdsSpacingLocalX2, " ").concat(Spacing.SizesDdsSpacingLocalX15)
-}, FontPackages.body_sans_03.base);
-var cardAccordionBodyTokens = {
-  base: base
-};
-
-export { cardAccordionBodyTokens };

package/dist/components/Card/CardAccordion/CardAccordionHeader.tokens.d.ts

@@ -1,17 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const cardAccordionHeaderTokens: {
-    base: CSSObject;
-    focus: {
-        base: CSSObject;
-    };
-    hover: {
-        base: CSSObject;
-    };
-    chevronWrapper: {
-        base: CSSObject;
-    };
-    chevron: {
-        width: string;
-        height: string;
-    };
-};

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

@@ -1,38 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var Spacing = ddsBaseTokens.spacing,
-    FontPackages = ddsBaseTokens.fontPackages,
-    Border = ddsBaseTokens.border,
-    IconSizes = ddsBaseTokens.iconSizes;
-var base = Object.assign({
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX075, " ").concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX15)
-}, FontPackages.heading_sans_03.base);
-var focusBase = {
-  boxShadow: "0 0 0 ".concat(Border.BordersDdsBorderFocusCardStrokeWeight, " ").concat(Border.BordersDdsBorderFocusCardStroke)
-};
-var hoverBase = {
-  boxShadow: "0 0 0 ".concat(Border.BordersDdsBorderFocusInputfieldStrokeWeight, " ").concat(Border.BordersDdsBorderFocusInputfieldStroke)
-};
-var chevronWrapperBase = {
-  width: IconSizes.DdsIconsizeMedium,
-  height: IconSizes.DdsIconsizeMedium,
-  marginLeft: Spacing.SizesDdsSpacingLocalX05
-};
-var cardAccordionHeaderTokens = {
-  base: base,
-  focus: {
-    base: focusBase
-  },
-  hover: {
-    base: hoverBase
-  },
-  chevronWrapper: {
-    base: chevronWrapperBase
-  },
-  chevron: {
-    width: IconSizes.DdsIconsizeMedium,
-    height: Spacing.SizesDdsSpacingLocalX05
-  }
-};
-
-export { cardAccordionHeaderTokens };

package/dist/components/Checkbox/CheckboxGroup.tokens.js

@@ -1,20 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var spacing = ddsBaseTokens.spacing;
-var groupContainer = {
-  row: {
-    gap: spacing.SizesDdsSpacingLocalX075
-  },
-  column: {
-    gap: spacing.SizesDdsSpacingLocalX05
-  }
-};
-var outerContainer = {
-  gap: spacing.SizesDdsSpacingLocalX0125
-};
-var checkboxGroupTokens = {
-  outerContainer: outerContainer,
-  groupContainer: groupContainer
-};
-
-export { checkboxGroupTokens };

package/dist/components/List/ListItem.tokens.d.ts

@@ -1,5 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const listItemTokens: {
-    base: CSSObject;
-    bulletSpacing: string;
-};

package/dist/components/List/ListItem.tokens.js

@@ -1,12 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var Spacing = ddsBaseTokens.spacing;
-var base = {
-  lineHeight: '2.5em'
-};
-var listItemTokens = {
-  base: base,
-  bulletSpacing: Spacing.SizesDdsSpacingLocalX025
-};
-
-export { listItemTokens };

package/dist/components/RadioButton/RadioButtonGroup.tokens.d.ts

@@ -1,19 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const radioButtonGroupTokens: {
-    label: {
-        spaceLeft: string;
-    };
-    container: {
-        base: CSSObject;
-    };
-    groupContainer: {
-        direction: {
-            row: {
-                base: CSSObject;
-            };
-            column: {
-                base: CSSObject;
-            };
-        };
-    };
-};

package/dist/components/RadioButton/RadioButtonGroup.tokens.js

@@ -1,32 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var Spacing = ddsBaseTokens.spacing;
-var groupContainerRowBase = {
-  gap: Spacing.SizesDdsSpacingLocalX075
-};
-var groupContainerColumnBase = {
-  gap: Spacing.SizesDdsSpacingLocalX05
-};
-var containerBase = {
-  gap: Spacing.SizesDdsSpacingLocalX0125
-};
-var radioButtonGroupTokens = {
-  label: {
-    spaceLeft: Spacing.SizesDdsSpacingLocalX025
-  },
-  container: {
-    base: containerBase
-  },
-  groupContainer: {
-    direction: {
-      row: {
-        base: groupContainerRowBase
-      },
-      column: {
-        base: groupContainerColumnBase
-      }
-    }
-  }
-};
-
-export { radioButtonGroupTokens };

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

@@ -1,6 +0,0 @@
-import { CSSObject } from 'styled-components';
-export declare const spinnerTokens: {
-    circle: {
-        base: CSSObject;
-    };
-};

package/dist/components/Spinner/Spinner.tokens.js

@@ -1,13 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-
-var Colors = ddsBaseTokens.colors;
-var ciclreBase = {
-  stroke: Colors.DdsColorInteractiveBase
-};
-var spinnerTokens = {
-  circle: {
-    base: ciclreBase
-  }
-};
-
-export { spinnerTokens };