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

package/scss/_palette.scss

@@ -0,0 +1,146 @@
+$black: #000;
+$white: #fff;
+$banana50: #fdf8df;
+$banana100: #fcf2bf;
+$banana200: #f9ea9f;
+$banana300: #f5e080;
+$banana400: #ebc840;
+$banana500: #ddab06;
+$banana600: #c59302;
+$banana700: #ab7c00;
+$banana800: #916500;
+$banana900: #764f00;
+$blueberry50: #e4f7f9;
+$blueberry100: #cae7ed;
+$blueberry200: #afdae3;
+$blueberry300: #7abecc;
+$blueberry400: #58aabb;
+$blueberry500: #188097;
+$blueberry600: #126f87;
+$blueberry60010: #126f8710;
+$blueberry700: #08667c;
+$blueberry800: #06596c;
+$blueberry900: #084350;
+$cherry50: #fff2ea;
+$cherry100: #f7e1d2;
+$cherry200: #eec0a5;
+$cherry300: #e39376;
+$cherry400: #d56147;
+$cherry500: #c83521;
+$cherry600: #b62e1c;
+$cherry700: #a31f0e;
+$cherry800: #912112;
+$cherry900: #7e1c0e;
+$kiwi50: #e6f8ee;
+$kiwi100: #c2edd6;
+$kiwi200: #9de2bf;
+$kiwi300: #79d6aa;
+$kiwi400: #56ca96;
+$kiwi500: #33be84;
+$kiwi600: #10b172;
+$kiwi700: #0ca161;
+$kiwi800: #099150;
+$kiwi900: #078141;
+$neutral50: #f5f3f3;
+$neutral100: #eae7e7;
+$neutral200: #d6d4d3;
+$neutral300: #bdbab9;
+$neutral400: #aaa8a6;
+$neutral500: #989693;
+$neutral600: #7d7c79;
+$neutral700: #62625f;
+$neutral800: #474745;
+$neutral900: #2b2c2b;
+$plum50: #efe4fd;
+$plum100: #d7bdf9;
+$plum200: #bf98f3;
+$plum300: #a875eb;
+$plum400: #9153e2;
+$plum500: #7a33d7;
+$plum600: #6a2abf;
+$plum700: #5b22a6;
+$plum800: #4c1b8c;
+$plum900: #3c1471;
+$inverted-hover-old: #ffffff0d;
+$inverted-hover: #ffffff1a;
+$transparent-grey: rgb(102 102 102 / 75%);
+$palette-map: (
+  'banana50': $banana50,
+  'banana100': $banana100,
+  'banana200': $banana200,
+  'banana300': $banana300,
+  'banana400': $banana400,
+  'banana500': $banana500,
+  'banana600': $banana600,
+  'banana700': $banana700,
+  'banana800': $banana800,
+  'banana900': $banana900,
+  'blueberry50': $blueberry50,
+  'blueberry100': $blueberry100,
+  'blueberry200': $blueberry200,
+  'blueberry300': $blueberry300,
+  'blueberry400': $blueberry400,
+  'blueberry500': $blueberry500,
+  'blueberry600': $blueberry600,
+  'blueberry700': $blueberry700,
+  'blueberry800': $blueberry800,
+  'blueberry900': $blueberry900,
+  'cherry50': $cherry50,
+  'cherry100': $cherry100,
+  'cherry200': $cherry200,
+  'cherry300': $cherry300,
+  'cherry400': $cherry400,
+  'cherry500': $cherry500,
+  'cherry600': $cherry600,
+  'cherry700': $cherry700,
+  'cherry800': $cherry800,
+  'cherry900': $cherry900,
+  'kiwi50': $kiwi50,
+  'kiwi100': $kiwi100,
+  'kiwi200': $kiwi200,
+  'kiwi300': $kiwi300,
+  'kiwi400': $kiwi400,
+  'kiwi500': $kiwi500,
+  'kiwi600': $kiwi600,
+  'kiwi700': $kiwi700,
+  'kiwi800': $kiwi800,
+  'kiwi900': $kiwi900,
+  'neutral50': $neutral50,
+  'neutral100': $neutral100,
+  'neutral200': $neutral200,
+  'neutral300': $neutral300,
+  'neutral400': $neutral400,
+  'neutral500': $neutral500,
+  'neutral600': $neutral600,
+  'neutral700': $neutral700,
+  'neutral800': $neutral800,
+  'neutral900': $neutral900,
+  'plum50': $plum50,
+  'plum100': $plum100,
+  'plum200': $plum200,
+  'plum300': $plum300,
+  'plum400': $plum400,
+  'plum500': $plum500,
+  'plum600': $plum600,
+  'plum700': $plum700,
+  'plum800': $plum800,
+  'plum900': $plum900,
+  'black': $black,
+  'white': $white,
+);
+
+/**
+* Konverter en gjennomsiktig farge til en ugjennomsiktig farge ved å simulere fargen plassert
+* på en bakgrunnsfarge (f.eks. 50% gjennomsiktig $blueberry200 på hvit bakgrunn).
+* 
+* Fra https://makandracards.com/makandra/42500-sass-how-to-convert-an-rgba-color-to-its-rgb-look-alike
+* 
+* @param $rgba Farge med alpha-verdi, f.eks. rgba(black, 0.67)
+* @param $background Bakgrunnsfarge. Default: $white
+* 
+* @returns Farge uten gjennomsiktighet
+*/
+@function rgba-to-rgb($rgba, $background: $white) {
+  /* stylelint-disable-next-line scss/no-global-function-names */
+  @return mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%);
+}

package/scss/_print.scss

@@ -0,0 +1,219 @@
+@use 'sass:map';
+@use 'palette' as palette;
+@use 'breakpoints' as breakpoints;
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    text-shadow: none !important;
+    box-shadow: none !important;
+  }
+
+  @page {
+    size: a3;
+  }
+
+  body {
+    min-width: map.get(breakpoints.$grid-breakpoints, lg) !important;
+  }
+
+  .container {
+    min-width: map.get(breakpoints.$grid-breakpoints, lg) !important;
+  }
+
+  abbr[title]::after {
+    content: ' (' attr(title) ')';
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid palette.$neutral500;
+    page-break-inside: avoid;
+  }
+
+  .table {
+    border-collapse: collapse !important;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+
+  .col-print-1 {
+    max-width: 8.3333%;
+  }
+
+  .col-print-2 {
+    max-width: 16.6667%;
+  }
+
+  .col-print-3 {
+    max-width: 25%;
+  }
+
+  .col-print-4 {
+    max-width: 33.3333%;
+  }
+
+  .col-print-5 {
+    max-width: 41.6667%;
+  }
+
+  .col-print-6 {
+    max-width: 50%;
+  }
+
+  .col-print-7 {
+    max-width: 58.3333%;
+  }
+
+  .col-print-8 {
+    max-width: 66.6667%;
+  }
+
+  .col-print-9 {
+    max-width: 75%;
+  }
+
+  .col-print-10 {
+    max-width: 83.3333%;
+  }
+
+  .col-print-11 {
+    max-width: 91.6667%;
+  }
+
+  .col-print-12 {
+    max-width: 100%;
+  }
+
+  .order-print-first {
+    order: -1;
+  }
+
+  .order-print-last {
+    order: 13;
+  }
+
+  .order-print-0 {
+    order: 0;
+  }
+
+  .order-print-1 {
+    order: 1;
+  }
+
+  .order-print-2 {
+    order: 2;
+  }
+
+  .order-print-3 {
+    order: 3;
+  }
+
+  .order-print-4 {
+    order: 4;
+  }
+
+  .order-print-5 {
+    order: 5;
+  }
+
+  .order-print-6 {
+    order: 6;
+  }
+
+  .order-print-7 {
+    order: 7;
+  }
+
+  .order-print-8 {
+    order: 8;
+  }
+
+  .order-print-9 {
+    order: 9;
+  }
+
+  .order-print-10 {
+    order: 10;
+  }
+
+  .order-print-11 {
+    order: 11;
+  }
+
+  .order-print-12 {
+    order: 12;
+  }
+
+  .offset-print-0 {
+    margin-left: 0;
+  }
+
+  .offset-print-1 {
+    margin-left: 8.3333%;
+  }
+
+  .offset-print-2 {
+    margin-left: 16.6667%;
+  }
+
+  .offset-print-3 {
+    margin-left: 25%;
+  }
+
+  .offset-print-4 {
+    margin-left: 33.3333%;
+  }
+
+  .offset-print-5 {
+    margin-left: 41.6667%;
+  }
+
+  .offset-print-6 {
+    margin-left: 50%;
+  }
+
+  .offset-print-7 {
+    margin-left: 58.3333%;
+  }
+
+  .offset-print-8 {
+    margin-left: 66.6667%;
+  }
+
+  .offset-print-9 {
+    margin-left: 75%;
+  }
+
+  .offset-print-10 {
+    margin-left: 83.3333%;
+  }
+
+  .offset-print-11 {
+    margin-left: 91.6667%;
+  }
+}

package/scss/_reset.scss

@@ -0,0 +1,13 @@
+@import 'normalize.css/normalize.css';
+
+/** Fiks for iOS og Safari 15 */
+button,
+input,
+optgroup,
+select,
+textarea,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  color: black;
+}

package/scss/_screen-reader.scss

@@ -0,0 +1,63 @@
+/*
+	Improved screen reader only CSS class
+	@author Gaël Poupard
+		@note Based on Yahoo!'s technique
+		@author Thierry Koblentz
+		@see https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
+	* 1.
+		@note `clip` is deprecated but works everywhere
+		@see https://developer.mozilla.org/en-US/docs/Web/CSS/clip
+	* 2.
+		@note `clip-path` is the future-proof version, but not very well supported yet
+		@see https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
+		@see http://caniuse.com/#search=clip-path
+		@author Yvain Liechti
+		@see https://twitter.com/ryuran78/status/778943389819604992
+	* 3.
+		@note preventing text to be condensed
+		author J. Renée Beach
+		@see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+		@note Drupal 8 goes with word-wrap: normal instead
+		@see https://www.drupal.org/node/2045151
+		@see http://cgit.drupalcode.org/drupal/commit/?id=5b847ea
+	* 4.
+		@note !important is important
+		@note Obviously you wanna hide something
+		@author Harry Roberts
+		@see https://csswizardry.com/2016/05/the-importance-of-important/
+*/
+
+@mixin sr-only() {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+  clip-path: inset(50%) !important; /* 2 */
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important; /* 3 */
+}
+
+/*
+	Use in conjunction with .sr-only to only display content when it's focused.
+	@note Useful for skip links 
+	@see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+	@note Based on a HTML5 Boilerplate technique, included in Bootstrap
+	@note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver
+		@author Sylvain Pigeard
+		@see https://github.com/twbs/bootstrap/issues/20732
+*/
+@mixin sr-only-focusable() {
+  &:active,
+  &:focus {
+    clip: auto !important;
+    clip-path: none !important;
+    height: auto !important;
+    margin: auto !important;
+    overflow: visible !important;
+    width: auto !important;
+    white-space: normal !important;
+  }
+}

package/scss/_spacers.scss

@@ -0,0 +1,42 @@
+@use 'sass:map';
+
+$spacer: 1rem;
+$spacers: (
+  0: 0,
+  1: $spacer * 0.125,
+  2: $spacer * 0.25,
+  3: $spacer * 0.5,
+  4: $spacer * 0.75,
+  5: $spacer * 1,
+  6: $spacer * 1.5,
+  7: $spacer * 2,
+  8: $spacer * 3,
+  9: $spacer * 4,
+  10: $spacer * 5,
+  11: $spacer * 6,
+  12: $spacer * 7,
+  13: $spacer * 8,
+);
+/* stylelint-disable-next-line */
+@function getSpacer($spacerSize) {
+  $spacer-value: map.get(
+    (
+      4xs: map.get($spacers, 1),
+      3xs: map.get($spacers, 2),
+      2xs: map.get($spacers, 3),
+      xs: map.get($spacers, 4),
+      s: map.get($spacers, 5),
+      m: map.get($spacers, 6),
+      l: map.get($spacers, 7),
+      xl: map.get($spacers, 8),
+      2xl: map.get($spacers, 9),
+      3xl: map.get($spacers, 10),
+      4xl: map.get($spacers, 11),
+      5xl: map.get($spacers, 12),
+      6xl: map.get($spacers, 13),
+    ),
+    $spacerSize
+  );
+
+  @return $spacer-value;
+}

package/scss/bootstrap/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2011-2022 Twitter, Inc.
+Copyright (c) 2011-2022 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/scss/bootstrap/scss/_functions.scss

@@ -0,0 +1,210 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:list';
+// stylelint-disable scss/comment-no-empty, scss/no-global-function-names, scss/at-mixin-pattern, scss/at-if-no-null, scss/operator-no-newline-after
+
+// Bootstrap functions
+//
+// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+
+  @each $key, $num in $map {
+    @if $prev-num == null or math.unit($num) == '%' or math.unit($prev-num) == '%' {
+      // Do nothing
+    } @else if not math.compatible($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if $prev-num >= $num {
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    }
+
+    $prev-key: $key;
+    $prev-num: $num;
+  }
+}
+
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
+  @if list.length($map) > 0 {
+    $values: map.values($map);
+    $first-value: list.nth($values, 1);
+
+    @if $first-value != 0 {
+      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+    }
+  }
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace +
+      str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+
+@function escape-svg($string) {
+  @if string.index($string, 'data:image/svg+xml') {
+    @each $char, $encoded in $escaped-characters {
+      // Do not escape the url brackets
+      @if string.index($string, 'url(') == 1 {
+        $string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+
+  @return $string;
+}
+
+// Color contrast
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * 0.001;
+
+  @if $yiq >= $yiq-contrasted-threshold {
+    @return $dark;
+  } @else {
+    @return $light;
+  }
+}
+
+// Retrieve color Sass maps
+@function color($key: 'blue') {
+  @return map.get($colors, $key);
+}
+
+@function theme-color($key: 'primary') {
+  @return map.get($theme-colors, $key);
+}
+
+@function gray($key: '100') {
+  @return map.get($grays, $key);
+}
+
+// Request a theme color level
+@function theme-color-level($color-name: 'primary', $level: 0) {
+  $color: theme-color($color-name);
+  $color-base: if($level > 0, $black, $white);
+  $level: math.abs($level);
+
+  @return mix($color-base, $color, $level * $theme-color-interval);
+}
+
+// Return valid calc
+@function add($value1, $value2, $return-calc: true) {
+  @if $value1 == null {
+    @return $value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
+    @return $value1 + $value2;
+  }
+
+  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(' + ') + $value2);
+}
+
+@function subtract($value1, $value2, $return-calc: true) {
+  @if $value1 == null and $value2 == null {
+    @return null;
+  }
+
+  @if $value1 == null {
+    @return -$value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
+    @return $value1 - $value2;
+  }
+
+  @if meta.type-of($value2) != number {
+    $value2: string.unquote('(') + $value2 + string.unquote(')');
+  }
+
+  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + string.unquote(' - ') + $value2);
+}
+
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: math.abs($dividend);
+  $divisor: math.abs($divisor);
+
+  @if $dividend == 0 {
+    @return 0;
+  }
+
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+
+  @while $remainder > 0 and $precision >= 0 {
+    $quotient: 0;
+
+    @while $remainder >= $divisor {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+
+    $result: $result * 10 + $quotient;
+    $factor: $factor * 0.1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+
+    @if $precision < 0 and $remainder >= $divisor * 5 {
+      $result: $result + 1;
+    }
+  }
+
+  $result: $result * $factor * $sign;
+  $dividend-unit: math.unit($dividend);
+  $divisor-unit: math.unit($divisor);
+  $unit-map: (
+    'px': 1px,
+    'rem': 1rem,
+    'em': 1em,
+    '%': 1%,
+  );
+
+  @if $dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit) {
+    $result: $result * map.get($unit-map, $dividend-unit);
+  }
+
+  @return $result;
+}