@norges-domstoler/dds-components 13.8.1 → 13.8.3

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

@@ -1,332 +0,0 @@
-import { StaticTypographyType } from '@norges-domstoler/dds-typography';
-import { ButtonSize } from '.';
-export declare const typographyTypes: {
-    [k in ButtonSize]: StaticTypographyType;
-};
-export declare const buttonTokens: {
-    button: {
-        base: {
-            border: string;
-        };
-        sizes: {
-            large: {
-                justIcon: {
-                    icon: {
-                        fontSize: string;
-                        padding: string;
-                    };
-                    wrapper: {
-                        height: string;
-                        width: string;
-                    };
-                };
-                text: {
-                    padding: string;
-                };
-                textAndIcon: {
-                    gap: string;
-                };
-            };
-            medium: {
-                justIcon: {
-                    icon: {
-                        fontSize: string;
-                        padding: string;
-                    };
-                    wrapper: {
-                        height: string;
-                        width: string;
-                    };
-                };
-                text: {
-                    padding: string;
-                };
-                textAndIcon: {
-                    gap: string;
-                };
-            };
-            small: {
-                justIcon: {
-                    icon: {
-                        fontSize: string;
-                        padding: string;
-                    };
-                    wrapper: {
-                        height: string;
-                        width: string;
-                    };
-                };
-                text: {
-                    padding: string;
-                };
-                textAndIcon: {
-                    gap: string;
-                };
-            };
-            tiny: {
-                justIcon: {
-                    icon: {
-                        fontSize: string;
-                        padding: string;
-                    };
-                    wrapper: {
-                        height: string;
-                        width: string;
-                    };
-                };
-                text: {
-                    padding: string;
-                };
-                textAndIcon: {
-                    gap: string;
-                };
-            };
-        };
-        appearances: {
-            filled: {
-                base: {
-                    borderRadius: string;
-                    boxShadow: string;
-                };
-                purpose: {
-                    primary: {
-                        base: {
-                            color: string;
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        active: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                    };
-                    secondary: {
-                        base: {
-                            color: string;
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        active: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                    };
-                    danger: {
-                        base: {
-                            color: string;
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        active: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                    };
-                };
-            };
-            ghost: {
-                base: {
-                    borderRadius: string;
-                    boxShadow: string;
-                    backgroundColor: string;
-                };
-                purpose: {
-                    primary: {
-                        base: {
-                            color: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            color: string;
-                            borderColor: string;
-                            boxShadow: string;
-                        };
-                        active: {
-                            color: string;
-                            borderColor: string;
-                            boxShadow: string;
-                        };
-                    };
-                    secondary: {
-                        base: {
-                            color: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            color: string;
-                            borderColor: string;
-                            boxShadow: string;
-                        };
-                        active: {
-                            color: string;
-                            borderColor: string;
-                            boxShadow: string;
-                        };
-                    };
-                    danger: {
-                        base: {
-                            color: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            color: string;
-                            borderColor: string;
-                            boxShadow: string;
-                        };
-                        active: {
-                            color: string;
-                            borderColor: string;
-                            boxShadow: string;
-                        };
-                    };
-                };
-            };
-            borderless: {
-                base: {
-                    borderRadius: string;
-                    boxShadow: string;
-                    backgroundColor: string;
-                    borderColor: string;
-                    textDecoration: string;
-                    textDecorationColor: string;
-                };
-                purpose: {
-                    primary: {
-                        base: {
-                            color: string;
-                        };
-                        hover: {
-                            color: string;
-                            textDecorationColor: string;
-                        };
-                        active: {
-                            color: string;
-                            textDecorationColor: string;
-                        };
-                        icon: {
-                            hover: {
-                                borderColor: string;
-                                boxShadow: string;
-                            };
-                            active: {
-                                borderColor: string;
-                                boxShadow: string;
-                            };
-                        };
-                    };
-                    secondary: {
-                        base: {
-                            color: string;
-                        };
-                        hover: {
-                            color: string;
-                            textDecorationColor: string;
-                        };
-                        active: {
-                            color: string;
-                            textDecorationColor: string;
-                        };
-                        icon: {
-                            hover: {
-                                borderColor: string;
-                                boxShadow: string;
-                            };
-                            active: {
-                                borderColor: string;
-                                boxShadow: string;
-                            };
-                        };
-                    };
-                    danger: {
-                        base: {
-                            color: string;
-                        };
-                        hover: {
-                            color: string;
-                            textDecorationColor: string;
-                        };
-                        active: {
-                            color: string;
-                            textDecorationColor: string;
-                        };
-                        icon: {
-                            hover: {
-                                borderColor: string;
-                                boxShadow: string;
-                            };
-                            active: {
-                                borderColor: string;
-                                boxShadow: string;
-                            };
-                        };
-                    };
-                };
-            };
-            rounded: {
-                base: {
-                    borderRadius: string;
-                    boxShadow: string;
-                };
-                purpose: {
-                    primary: {
-                        base: {
-                            color: string;
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        active: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                    };
-                    secondary: {
-                        base: {
-                            color: string;
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        active: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                    };
-                    danger: {
-                        base: {
-                            color: string;
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        active: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                    };
-                };
-            };
-        };
-    };
-};

package/dist/components/Button/Button.tokens.js

@@ -1,351 +0,0 @@
-import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
-import { calculateHeightWithLineHeight } from '@norges-domstoler/dds-core';
-
-var colors = ddsBaseTokens.colors,
-  border = ddsBaseTokens.border,
-  spacing = ddsBaseTokens.spacing,
-  fontPackages = ddsBaseTokens.fontPackages,
-  borderRadius = ddsBaseTokens.borderRadius,
-  outerShadow = ddsBaseTokens.outerShadow;
-var typographyTypes = {
-  large: 'bodySans04',
-  medium: 'bodySans02',
-  small: 'bodySans01',
-  tiny: 'supportingStyleTiny01'
-};
-var iconSizeTinyPx = calculateHeightWithLineHeight(fontPackages.supportingStyle_tiny_01.numbers.lineHeightNumber, fontPackages.supportingStyle_tiny_01.numbers.fontSizeNumber);
-var iconSizeSmallPx = calculateHeightWithLineHeight(fontPackages.body_sans_01.numbers.lineHeightNumber, fontPackages.body_sans_01.numbers.fontSizeNumber);
-var iconSizeMediumPx = calculateHeightWithLineHeight(fontPackages.body_sans_02.numbers.lineHeightNumber, fontPackages.body_sans_02.numbers.fontSizeNumber);
-var iconSizeLargePx = calculateHeightWithLineHeight(fontPackages.body_sans_04.numbers.lineHeightNumber, fontPackages.body_sans_04.numbers.fontSizeNumber);
-var svgOffset = spacing.SizesDdsSpacingLocalX0125NumberPx;
-var filledButtonColors = {
-  primary: {
-    base: {
-      color: colors.DdsColorNeutralsWhite,
-      backgroundColor: colors.DdsColorInteractiveBase,
-      borderColor: colors.DdsColorInteractiveBase
-    },
-    hover: {
-      base: {
-        backgroundColor: colors.DdsColorInteractiveDark,
-        borderColor: colors.DdsColorInteractiveDark
-      }
-    },
-    active: {
-      base: {
-        backgroundColor: colors.DdsColorInteractiveDarker,
-        borderColor: colors.DdsColorInteractiveDarker
-      }
-    }
-  },
-  secondary: {
-    base: {
-      color: colors.DdsColorNeutralsGray8,
-      backgroundColor: colors.DdsColorNeutralsGray1,
-      borderColor: colors.DdsColorNeutralsGray5
-    },
-    hover: {
-      base: {
-        backgroundColor: colors.DdsColorNeutralsGray2,
-        borderColor: colors.DdsColorNeutralsGray5
-      }
-    },
-    active: {
-      base: {
-        backgroundColor: colors.DdsColorNeutralsGray3,
-        borderColor: colors.DdsColorNeutralsGray5
-      }
-    }
-  },
-  danger: {
-    base: {
-      color: colors.DdsColorNeutralsWhite,
-      backgroundColor: colors.DdsColorDangerBase,
-      borderColor: colors.DdsColorDangerBase
-    },
-    hover: {
-      base: {
-        backgroundColor: colors.DdsColorDangerDark,
-        borderColor: colors.DdsColorDangerDark
-      }
-    },
-    active: {
-      base: {
-        backgroundColor: colors.DdsColorDangerDarker,
-        borderColor: colors.DdsColorDangerDarker
-      }
-    }
-  }
-};
-var sizes = {
-  large: {
-    justIcon: {
-      icon: {
-        fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-        padding: spacing.SizesDdsSpacingLocalX1
-      },
-      wrapper: {
-        height: "".concat(iconSizeLargePx, "px"),
-        width: "".concat(iconSizeLargePx, "px")
-      }
-    },
-    text: {
-      padding: "".concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX2NumberPx - 2, "px")
-    },
-    textAndIcon: {
-      gap: spacing.SizesDdsSpacingLocalX1
-    }
-  },
-  medium: {
-    justIcon: {
-      icon: {
-        fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-        padding: spacing.SizesDdsSpacingLocalX075
-      },
-      wrapper: {
-        height: "".concat(iconSizeMediumPx, "px"),
-        width: "".concat(iconSizeMediumPx, "px")
-      }
-    },
-    text: {
-      padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX15NumberPx - 2, "px")
-    },
-    textAndIcon: {
-      gap: spacing.SizesDdsSpacingLocalX075
-    }
-  },
-  small: {
-    justIcon: {
-      icon: {
-        fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-        padding: spacing.SizesDdsSpacingLocalX05
-      },
-      wrapper: {
-        height: "".concat(iconSizeSmallPx, "px"),
-        width: "".concat(iconSizeSmallPx, "px")
-      }
-    },
-    text: {
-      padding: "".concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX1NumberPx - 2, "px")
-    },
-    textAndIcon: {
-      gap: spacing.SizesDdsSpacingLocalX05
-    }
-  },
-  tiny: {
-    justIcon: {
-      icon: {
-        fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-        padding: spacing.SizesDdsSpacingLocalX025
-      },
-      wrapper: {
-        height: "".concat(iconSizeTinyPx, "px"),
-        width: "".concat(iconSizeTinyPx, "px")
-      }
-    },
-    text: {
-      padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX075)
-    },
-    textAndIcon: {
-      gap: spacing.SizesDdsSpacingLocalX05
-    }
-  }
-};
-var appearances = {
-  filled: {
-    base: {
-      borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
-      boxShadow: outerShadow.DdsShadow1Onlight
-    },
-    purpose: {
-      primary: {
-        base: filledButtonColors.primary.base,
-        hover: filledButtonColors.primary.hover.base,
-        active: filledButtonColors.primary.active.base
-      },
-      secondary: {
-        base: filledButtonColors.secondary.base,
-        hover: filledButtonColors.secondary.hover.base,
-        active: filledButtonColors.secondary.active.base
-      },
-      danger: {
-        base: filledButtonColors.danger.base,
-        hover: filledButtonColors.danger.hover.base,
-        active: filledButtonColors.danger.active.base
-      }
-    }
-  },
-  ghost: {
-    base: {
-      borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
-      boxShadow: 'none',
-      backgroundColor: 'transparent'
-    },
-    purpose: {
-      primary: {
-        base: {
-          color: colors.DdsColorInteractiveBase,
-          borderColor: colors.DdsColorInteractiveBase
-        },
-        hover: {
-          color: colors.DdsColorInteractiveDark,
-          borderColor: colors.DdsColorInteractiveDark,
-          boxShadow: "0 0 0 1px ".concat(colors.DdsColorInteractiveDark)
-        },
-        active: {
-          color: colors.DdsColorInteractiveDarker,
-          borderColor: colors.DdsColorInteractiveDarker,
-          boxShadow: "0 0 0 1px ".concat(colors.DdsColorInteractiveDarker)
-        }
-      },
-      secondary: {
-        base: {
-          color: colors.DdsColorNeutralsGray7,
-          borderColor: colors.DdsColorNeutralsGray7
-        },
-        hover: {
-          color: colors.DdsColorNeutralsGray8,
-          borderColor: colors.DdsColorNeutralsGray8,
-          boxShadow: "0 0 0 1px ".concat(colors.DdsColorNeutralsGray8)
-        },
-        active: {
-          color: colors.DdsColorNeutralsGray9,
-          borderColor: colors.DdsColorNeutralsGray9,
-          boxShadow: "0 0 0 1px ".concat(colors.DdsColorNeutralsGray9)
-        }
-      },
-      danger: {
-        base: {
-          color: colors.DdsColorDangerBase,
-          borderColor: colors.DdsColorDangerBase
-        },
-        hover: {
-          color: colors.DdsColorDangerDark,
-          borderColor: colors.DdsColorDangerDark,
-          boxShadow: "0 0 0 1px ".concat(colors.DdsColorDangerDark)
-        },
-        active: {
-          color: colors.DdsColorDangerDarkest,
-          borderColor: colors.DdsColorDangerDarkest,
-          boxShadow: "0 0 0 1px ".concat(colors.DdsColorDangerDarkest)
-        }
-      }
-    }
-  },
-  borderless: {
-    base: {
-      borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
-      boxShadow: 'none',
-      backgroundColor: 'transparent',
-      borderColor: 'transparent',
-      textDecoration: 'underline',
-      textDecorationColor: 'transparent'
-    },
-    purpose: {
-      primary: {
-        base: {
-          color: colors.DdsColorInteractiveBase
-        },
-        hover: {
-          color: colors.DdsColorInteractiveDark,
-          textDecorationColor: colors.DdsColorInteractiveDark
-        },
-        active: {
-          color: colors.DdsColorInteractiveDarker,
-          textDecorationColor: colors.DdsColorInteractiveDarker
-        },
-        icon: {
-          hover: {
-            borderColor: colors.DdsColorInteractiveDark,
-            boxShadow: "0 0 0 1px ".concat(colors.DdsColorInteractiveDark)
-          },
-          active: {
-            borderColor: colors.DdsColorInteractiveDarker,
-            boxShadow: "0 0 0 1px ".concat(colors.DdsColorInteractiveDarker)
-          }
-        }
-      },
-      secondary: {
-        base: {
-          color: colors.DdsColorNeutralsGray7
-        },
-        hover: {
-          color: colors.DdsColorNeutralsGray8,
-          textDecorationColor: colors.DdsColorNeutralsGray8
-        },
-        active: {
-          color: colors.DdsColorNeutralsGray9,
-          textDecorationColor: colors.DdsColorNeutralsGray9
-        },
-        icon: {
-          hover: {
-            borderColor: colors.DdsColorNeutralsGray8,
-            boxShadow: "0 0 0 1px ".concat(colors.DdsColorNeutralsGray8)
-          },
-          active: {
-            borderColor: colors.DdsColorNeutralsGray9,
-            boxShadow: "0 0 0 1px ".concat(colors.DdsColorNeutralsGray9)
-          }
-        }
-      },
-      danger: {
-        base: {
-          color: colors.DdsColorDangerBase
-        },
-        hover: {
-          color: colors.DdsColorDangerDarker,
-          textDecorationColor: colors.DdsColorDangerDarker
-        },
-        active: {
-          color: colors.DdsColorDangerDarkest,
-          textDecorationColor: colors.DdsColorDangerDarkest
-        },
-        icon: {
-          hover: {
-            borderColor: colors.DdsColorDangerDark,
-            boxShadow: "0 0 0 1px ".concat(colors.DdsColorDangerDark)
-          },
-          active: {
-            borderColor: colors.DdsColorDangerDarker,
-            boxShadow: "0 0 0 1px ".concat(colors.DdsColorDangerDarker)
-          }
-        }
-      }
-    }
-  },
-  rounded: {
-    base: {
-      borderRadius: '100px',
-      boxShadow: outerShadow.DdsShadow1Onlight
-    },
-    purpose: {
-      primary: {
-        base: filledButtonColors.primary.base,
-        hover: filledButtonColors.primary.hover.base,
-        active: filledButtonColors.primary.active.base
-      },
-      secondary: {
-        base: filledButtonColors.secondary.base,
-        hover: filledButtonColors.secondary.hover.base,
-        active: filledButtonColors.secondary.active.base
-      },
-      danger: {
-        base: filledButtonColors.danger.base,
-        hover: filledButtonColors.danger.hover.base,
-        active: filledButtonColors.danger.active.base
-      }
-    }
-  }
-};
-var button = {
-  base: {
-    border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid")
-  },
-  sizes: sizes,
-  appearances: appearances
-};
-var buttonTokens = {
-  button: button
-};
-
-export { buttonTokens, typographyTypes };

package/dist/components/Button/Button.types.d.ts

@@ -1,33 +0,0 @@
-import { ButtonHTMLAttributes, ReactElement } from 'react';
-import { BaseComponentProps } from '@norges-domstoler/dds-core';
-import { SvgIcon } from '@norges-domstoler/dds-icons';
-export type ButtonPurpose = 'primary' | 'secondary' | 'danger';
-export type ButtonSize = 'tiny' | 'small' | 'medium' | 'large';
-export type ButtonAppearance = 'filled' | 'ghost' | 'rounded' | 'borderless';
-export type IconPosition = 'left' | 'right';
-type PickedHTMLAttributes = Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur' | 'type'>;
-export type ButtonProps = BaseComponentProps<HTMLButtonElement, {
-    /**Størrelsen på knappen. */
-    size?: ButtonSize;
-    /**Tekst i knappen. */
-    label?: string | ReactElement;
-    /**Bestemmer farger basert på formål. */
-    purpose?: ButtonPurpose;
-    /**	Posisjonen til ikonet i forhold til teksten.*/
-    iconPosition?: IconPosition;
-    /**Bestemmer utseende på knappen, bl.a. bakgrunn, border radius og skygger.  */
-    appearance?: ButtonAppearance;
-    /**Indikerer en loading-knapp. */
-    loading?: boolean;
-    /**Tooltip som vises ved loading. */
-    loadingTooltip?: string;
-    /**Ikonet som ligger i knappen.  */
-    icon?: SvgIcon;
-    /**Knapp med full bredde. */
-    fullWidth?: boolean;
-    /**URL for knapper som skal brukes som lenke. Knappen blir til et `<a>`-element. */
-    href?: string;
-    /**Nativt target-attributt som kan spesifiseres når knappen er et `<a>`-element.  */
-    target?: string;
-} & PickedHTMLAttributes, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof PickedHTMLAttributes>>;
-export {};