@helsenorge/designsystem-react 13.0.0-beta.4 → 13.0.0-workspaces-beta.1

package/components/Button/styles.module.scss

@@ -1,446 +0,0 @@
-@use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-
-$dark-mode-disabled-transparrent: #ffffffb3;
-$with-icons: // icon-class, size-class, padding-left, padding-right, padding-left desktop, padding-right desktop, svg-margin-left, svg-margin-right, svg-margin-left desktop, svg-margin-right desktop
-  'left-icon' 'normal' spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) 0 spacers.getSpacer(3xs) 0
-    spacers.getSpacer(2xs),
-  'right-icon' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(3xs) 0
-    spacers.getSpacer(2xs) 0,
-  'left-icon' 'large' spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l) 0 spacers.getSpacer(2xs) 0
-    spacers.getSpacer(xs),
-  'right-icon' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(s) spacers.getSpacer(2xs) 0
-    spacers.getSpacer(xs) 0,
-  'arrow' 'normal' spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(m) 0
-    spacers.getSpacer(l) 0,
-  'arrow' 'large' spacers.getSpacer(m) spacers.getSpacer(xs) spacers.getSpacer(l) spacers.getSpacer(xs) spacers.getSpacer(l) 0
-    spacers.getSpacer(xl) 0,
-  'arrow--both-icons' 'normal' 0 0 0 0 spacers.getSpacer(s) 0 spacers.getSpacer(m) 0,
-  'arrow--both-icons' 'large' 0 0 0 0 spacers.getSpacer(m) 0 spacers.getSpacer(l) 0,
-  'only-icon' 'normal' 0.062rem 0.062rem 0.375rem 0.375rem 0 0 0 0,
-  'only-icon' 'large' 0.312rem 0.312rem spacers.getSpacer(3xs) spacers.getSpacer(3xs) 0 0 0 0,
-  'both-icons' 'normal' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0,
-  'both-icons' 'large' spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) spacers.getSpacer(xs) 0 0 0 0;
-
-// Brukes til å aktivere hover styling uten at button hovres
-@mixin outline-borderless-hover {
-  @include outline-borderless-background(
-    var(--color-action-background-transparent-onlight-hover),
-    var(--color-action-background-transparent-onlight-hover)
-  );
-}
-
-@mixin outline-borderless-text-hover {
-  @include text-color(var(--color-action-text-onlight-hover), var(--color-action-text-onlight-hover));
-}
-
-@mixin focus-shadow($with-uu-border: true) {
-  box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$black;
-
-  @if $with-uu-border {
-    border: 1px solid var(--color-action-border-ondark-focus);
-  }
-}
-
-@mixin focus-shadow-on-dark($with-uu-border: true) {
-  box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$white;
-
-  @if $with-uu-border {
-    border: 1px solid var(--color-action-border-onlight-focus);
-  } @else {
-    border: none;
-  }
-}
-
-@mixin outline-borderless-background($background-color, $hover-background-color) {
-  background-color: $background-color;
-
-  &:hover {
-    background-color: $hover-background-color;
-  }
-
-  :disabled > & {
-    background-color: transparent;
-  }
-}
-
-@mixin outline($ouline-color, $hover-outline-color) {
-  outline: spacers.getSpacer(4xs) solid $ouline-color;
-  outline-offset: spacers.getSpacer(4xs) * -1;
-
-  &:hover {
-    box-shadow: none;
-  }
-
-  :disabled > & {
-    outline-color: palette.$neutral700;
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      outline-color: palette.$neutral500;
-    }
-  }
-}
-
-@mixin text-color($color, $hover-color) {
-  color: $color;
-
-  :hover > & {
-    color: $hover-color;
-  }
-
-  :disabled > & {
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      color: palette.$neutral700;
-    }
-  }
-}
-
-@mixin fill-on-dark($background-color) {
-  background-color: palette.$white;
-
-  &:hover {
-    box-shadow: none;
-  }
-
-  &:hover,
-  :focus > & {
-    background-color: $background-color;
-  }
-
-  /* stylelint-disable-next-line */
-  :disabled > & {
-    background-color: $dark-mode-disabled-transparrent;
-  }
-}
-
-@mixin on-dark-text($color) {
-  color: $color;
-
-  :disabled > & {
-    color: palette.$neutral700;
-  }
-}
-
-@mixin on-dark {
-  &--on-dark {
-    @include fill-on-dark(var(--color-action-background-ondark-hover));
-
-    :focus > & {
-      @include focus-shadow-on-dark(true);
-
-      &:hover {
-        @include focus-shadow-on-dark(true);
-
-        background-color: palette.$white;
-      }
-    }
-  }
-
-  &--on-dark#{&}--destructive {
-    @include fill-on-dark(palette.$cherry50);
-  }
-
-  &--on-dark#{&}--outline,
-  &--on-dark#{&}--borderless,
-  &--on-dark#{&}--outline#{&}--destructive,
-  &--on-dark#{&}--borderless#{&}--destructive {
-    background-color: transparent;
-
-    :focus > & {
-      @include focus-shadow-on-dark(false);
-
-      &:hover {
-        @include focus-shadow-on-dark(false);
-
-        background-color: palette.$inverted-hover;
-      }
-    }
-  }
-
-  &--on-dark#{&}--outline {
-    outline-color: palette.$white;
-
-    :disabled > & {
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        outline-color: $dark-mode-disabled-transparrent;
-      }
-    }
-  }
-
-  &--on-dark#{&}--borderless {
-    :disabled > & {
-      border-color: $dark-mode-disabled-transparrent;
-    }
-  }
-
-  &--on-dark &__text {
-    @include on-dark-text(palette.$blueberry600);
-  }
-
-  &--on-dark#{&}--destructive &__text {
-    @include on-dark-text(palette.$cherry600);
-  }
-
-  &--on-dark#{&}--outline &__text,
-  &--on-dark#{&}--borderless &__text {
-    color: palette.$white;
-
-    :disabled > & {
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        color: $dark-mode-disabled-transparrent;
-      }
-    }
-  }
-}
-
-// UU krav om klikkbart område er 48x48px, button-wrapper fyller de manglende 8px i høyden på mobilskjerm (synlig button er 40px høy)
-.button-wrapper {
-  display: inline-flex;
-  cursor: pointer;
-  text-decoration: none;
-  background-color: transparent;
-  outline: none;
-  border: 0;
-  padding: 0;
-
-  &--fluid {
-    width: 100%;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.button {
-  display: inline-flex;
-  background-color: palette.$blueberry500;
-  padding: 0 spacers.getSpacer(m);
-  font-size: font-settings.$font-size-sm;
-  font-weight: 600;
-  font-family: inherit;
-  line-height: 1.375rem;
-  align-items: center;
-  width: 100%;
-  min-height: 2.75rem;
-  box-sizing: border-box;
-  outline: none;
-  border-radius: 0.5rem;
-  letter-spacing: unset;
-
-  &:hover {
-    background-color: palette.$blueberry700;
-    box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$blueberry700;
-  }
-
-  :disabled > & {
-    pointer-events: none;
-    outline: spacers.getSpacer(4xs) dashed palette.$neutral700;
-    outline-offset: spacers.getSpacer(4xs) * -1;
-    background-color: palette.$neutral200;
-  }
-
-  :disabled > & &__text {
-    color: palette.$neutral800;
-  }
-
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    min-height: 3.125rem;
-    padding: 0 spacers.getSpacer(l);
-    font-size: font-settings.$font-size-md;
-    line-height: 1.5rem;
-  }
-
-  &--large {
-    min-height: 3.5rem;
-    padding: 0 spacers.getSpacer(l);
-    font-size: 1.3125rem;
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      min-height: 4.5rem;
-      padding: 0 spacers.getSpacer(xl);
-      font-size: font-settings.$font-size-lg;
-      line-height: 1.5rem;
-    }
-  }
-
-  @each $icon-class, $size-class, $pl, $pr, $pld, $prd, $svgml, $svgmr, $svgmld, $svgmrd in $with-icons {
-    &--#{$icon-class}#{&}--#{$size-class} {
-      padding-left: $pl;
-      padding-right: $pr;
-
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding-left: $pld;
-        padding-right: $prd;
-      }
-    }
-  }
-
-  @each $icon-class, $size-class, $pl, $pr, $pld, $prd, $svgml, $svgmr, $svgmld, $svgmrd in $with-icons {
-    &--#{$size-class} &__#{$icon-class} {
-      margin-left: $svgml;
-      margin-right: $svgmr;
-
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        margin-left: $svgmld;
-        margin-right: $svgmrd;
-      }
-    }
-  }
-
-  &--destructive {
-    background-color: palette.$cherry500;
-
-    &:hover {
-      background-color: palette.$cherry700;
-      box-shadow: 0 0 0 spacers.getSpacer(3xs) palette.$cherry700;
-    }
-  }
-
-  // Gives space to focus border
-  border: 1px solid transparent;
-
-  :focus > & {
-    @include focus-shadow;
-
-    &:hover {
-      @include focus-shadow;
-    }
-  }
-
-  &--outline,
-  &--borderless {
-    @include outline-borderless-background(transparent, var(--color-action-background-transparent-onlight-hover));
-
-    :focus > & {
-      @include focus-shadow(false);
-
-      &:hover {
-        @include focus-shadow(false);
-      }
-    }
-  }
-
-  &--outline#{&}--destructive,
-  &--borderless#{&}--destructive {
-    @include outline-borderless-background(transparent, palette.$cherry50);
-  }
-
-  &--outline {
-    @include outline(palette.$blueberry700, palette.$blueberry50);
-  }
-
-  &--outline#{&}--destructive {
-    @include outline(palette.$cherry700, palette.$cherry50);
-  }
-
-  &--borderless {
-    border-radius: 0;
-
-    &:hover {
-      box-shadow: none;
-    }
-
-    :disabled > & {
-      outline: none;
-    }
-  }
-
-  &--borderless:not(.button--only-icon) {
-    padding: 0 spacers.getSpacer(2xs);
-
-    &:has(.button__left-icon) {
-      padding-left: 0;
-    }
-
-    &:has(.button__right-icon) {
-      padding-right: 0;
-    }
-  }
-
-  /* stylelint-disable-next-line */
-  &__text {
-    color: palette.$white;
-    margin: 0 auto 0 0;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: left;
-    padding: 0.4375rem 0;
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      margin: 0 auto 0 0;
-      padding: 0.625rem 0;
-    }
-
-    &--ellipsis {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &--centered {
-      width: 100%;
-    }
-  }
-
-  &__right-unicode-arrow {
-    white-space: pre;
-  }
-
-  /* stylelint-disable-next-line */
-  &--outline &__text,
-  &--borderless &__text {
-    @include text-color(var(--color-action-text-onlight), var(--color-action-text-onlight-hover));
-  }
-
-  &--outline#{&}--destructive &__text,
-  &--borderless#{&}--destructive &__text {
-    @include text-color(palette.$cherry600, palette.$cherry700);
-  }
-
-  /* stylelint-disable-next-line */
-  &--only-icon &__text {
-    @include sr-only;
-  }
-
-  @include on-dark;
-
-  @include breakpoints.tiny-screens-media-query {
-    min-height: spacers.getSpacer(l);
-    padding: 0 spacers.getSpacer(xs);
-  }
-}
-
-.diagonal {
-  display: block;
-  transform: matrix(-1, 0, 0, 1, -8, 2);
-  position: absolute;
-  width: 3.7rem;
-  height: 2.25rem;
-
-  &__line {
-    display: block;
-    border-bottom: spacers.getSpacer(4xs) dashed palette.$neutral500;
-    transform-origin: top left;
-    transform: rotate(37.4deg);
-  }
-
-  &--on-dark &__line {
-    border-color: palette.$white;
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      border-color: $dark-mode-disabled-transparrent;
-    }
-  }
-}

package/components/Chip/index.js

@@ -1,55 +0,0 @@
-import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
-import { t as usePseudoClasses } from "../../usePseudoClasses.js";
-import { t as palette } from "../../palette.js";
-import { t as Icon_default } from "../../Icon.js";
-import { t as Undo_default } from "../../Undo.js";
-import { t as X_default } from "../../X.js";
-import React from "react";
-import cn from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./styles.module.scss";
-let ChipSize = /* @__PURE__ */ function(ChipSize$1) {
-	ChipSize$1["medium"] = "medium";
-	ChipSize$1["large"] = "large";
-	return ChipSize$1;
-}({});
-let ChipAction = /* @__PURE__ */ function(ChipAction$1) {
-	ChipAction$1["remove"] = "remove";
-	ChipAction$1["undo"] = "undo";
-	return ChipAction$1;
-}({});
-let ChipVariant = /* @__PURE__ */ function(ChipVariant$1) {
-	ChipVariant$1["normal"] = "normal";
-	ChipVariant$1["oncolor"] = "oncolor";
-	ChipVariant$1["emphasised"] = "emphasised";
-	return ChipVariant$1;
-}({});
-var Chip = (props) => {
-	const { children, size = ChipSize.medium, color = "blueberry", variant = "normal", action, onClick, testId } = props;
-	const { refObject, isHovered } = usePseudoClasses();
-	const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], { [styles[`chip--undo`]]: action === "undo" });
-	const getActionIcon = () => {
-		switch (action) {
-			case "undo": return Undo_default;
-			case "remove": return X_default;
-		}
-	};
-	return /* @__PURE__ */ jsxs("button", {
-		className: chipClasses,
-		onClick,
-		ref: refObject,
-		type: "button",
-		"data-testid": testId,
-		"data-analyticsid": AnalyticsId.Tag,
-		children: [children, /* @__PURE__ */ jsx(Icon_default, {
-			svgIcon: getActionIcon(),
-			size: IconSize.XXSmall,
-			color: palette[`${color}800`],
-			isHovered
-		})]
-	});
-};
-var Chip_default = Chip;
-export { ChipAction, ChipSize, ChipVariant, Chip_default as default };
-
-//# sourceMappingURL=index.js.map

package/components/Chip/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["Chip: React.FC<ChipProps>"],"sources":["../../../src/components/Chip/Chip.tsx","../../../src/components/Chip/index.ts"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport enum ChipSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ChipAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum ChipVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Sets the size of the chip. Default: medium */\n  size?: keyof typeof ChipSize;\n  /** Sets the background of the chip. Not used if action is \"undo\". Default: blueberry */\n  color?: ChipColors;\n  /* Changes the appearance of the chip. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof ChipVariant;\n  /* Makes the chip a clickable button that performs an action. onClick must also be set. */\n  action: keyof typeof ChipAction;\n  /* Called when action is set and the chip is clicked on. action must also be set. */\n  onClick: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, size = ChipSize.medium, color = 'blueberry', variant = 'normal', action, onClick, testId } = props;\n\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {\n    [styles[`chip--undo`]]: action === 'undo',\n  });\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'undo':\n        return Undo;\n      case 'remove':\n        return X;\n    }\n  };\n\n  return (\n    <button className={chipClasses} onClick={onClick} ref={refObject} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon svgIcon={getActionIcon()} size={IconSize.XXSmall} color={palette[`${color}800`]} isHovered={isHovered} />\n    </button>\n  );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;;AAaA,IAAY,WAAA,yBAAA,YAAL;AACL,YAAA,YAAA;AACA,YAAA,WAAA;;;AAGF,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,UAAA;;;AAGF,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,YAAA;AACA,eAAA,aAAA;AACA,eAAA,gBAAA;;;AAsBF,IAAMA,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,OAAO,SAAS,QAAQ,QAAQ,aAAa,UAAU,UAAU,QAAQ,SAAS,WAAW;CAE/G,MAAM,EAAE,WAAW,cAAc,kBAAqC;CAEtE,MAAM,cAAc,GAAG,OAAO,MAAM,OAAO,SAAS,SAAS,OAAO,SAAS,UAAU,OAAO,SAAS,YAAY,GAChH,OAAO,gBAAgB,WAAW,QACpC,CAAC;CAEF,MAAM,sBAA+B;AACnC,UAAQ,QAAR;GACE,KAAK,OACH,QAAO;GACT,KAAK,SACH,QAAO;;;AAIb,QACE,qBAAC,UAAA;EAAO,WAAW;EAAsB;EAAS,KAAK;EAAW,MAAK;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aAChI,UACD,oBAAC,cAAA;GAAK,SAAS,eAAe;GAAE,MAAM,SAAS;GAAS,OAAO,QAAQ,GAAG,MAAM;GAAkB;IAAa,CAAA;GACxG;;ACpEb,IAAA,eDwEe"}