@helsenorge/designsystem-react 1.0.0-experimental.0 → 1.0.0

package/scss/_input.scss

@@ -0,0 +1,176 @@
+@mixin input-wrapper {
+  width: 100%;
+  line-height: 0;
+
+  &__label-wrapper {
+    display: inline-flex;
+    align-items: center;
+    line-height: getSpacer(m);
+    font-size: $font-size-sm;
+    font-weight: 600;
+    padding-bottom: getSpacer(xs);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      line-height: getSpacer(l);
+      font-size: $font-size-md;
+    }
+
+    &--on-dark {
+      color: $white;
+    }
+  }
+
+  &__after-label-children {
+    padding-left: 0.75rem;
+  }
+}
+
+@mixin content-wrapper {
+  font-size: $font-size-sm;
+  width: 100%;
+  border: $neutral700 2px solid;
+  outline: none;
+  background: $white;
+
+  svg:first-of-type {
+    padding-left: 0.375rem;
+  }
+
+  svg:last-of-type {
+    padding-right: 0.375rem;
+  }
+
+  &--bigform {
+    padding: getSpacer(2xs) 0;
+
+    svg:first-of-type {
+      padding-left: getSpacer(2xs);
+    }
+
+    svg:last-of-type {
+      padding-right: getSpacer(2xs);
+    }
+  }
+
+  &:hover {
+    background: $neutral50;
+    border-color: $neutral700;
+    box-shadow: 0px 0px 0px 1px $neutral700;
+
+    &:focus-within {
+      border-color: $black;
+      box-shadow: 0px 0px 0px 2px $black;
+    }
+  }
+  &:focus-within {
+    background: $white;
+    border-color: $neutral900;
+    box-shadow: 0px 0px 0px 2px $neutral900;
+  }
+
+  &--on-blueberry {
+    border-color: $blueberry500;
+
+    &:hover {
+      background: $blueberry50;
+      box-shadow: 0px 0px 0px 1px $blueberry500;
+      border-color: $blueberry500;
+    }
+
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--on-dark {
+    border-color: $blueberry900;
+    &:hover {
+      background: $blueberry50;
+      border-color: $blueberry900;
+      box-shadow: 0px 0px 0px 1px $blueberry900;
+    }
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--invalid {
+    border-color: $cherry500;
+
+    &:hover {
+      background: $cherry100;
+      border-color: $cherry500;
+      box-shadow: 0px 0px 0px 2px $cherry500;
+    }
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--transparent {
+    background: transparent;
+
+    &:hover {
+      background: $neutral100;
+    }
+
+    &:focus-within {
+      background: $white;
+    }
+  }
+  &--transparent#{&}--on-blueberry {
+    &:hover {
+      background: $blueberry100;
+    }
+
+    &:focus-within {
+      background: $white;
+    }
+  }
+
+  &--disabled {
+    background: $neutral50;
+    border-color: $neutral500;
+    color: $neutral500;
+
+    &:hover {
+      background: $neutral50;
+      border-color: $neutral500;
+      box-shadow: none;
+    }
+  }
+
+  &__input {
+    line-height: 1.625rem;
+    font-family: inherit;
+    font-size: $font-size-sm;
+    padding: 0 getSpacer(2xs);
+    border: none;
+    outline: none;
+    background-color: transparent;
+    width: 100%;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      font-size: $font-size-md;
+    }
+
+    &::placeholder {
+      color: $neutral500;
+    }
+
+    &--disabled {
+      color: $neutral500;
+    }
+
+    &:first-child {
+      padding-left: getSpacer(s);
+    }
+
+    &:last-child {
+      padding-right: getSpacer(s);
+    }
+  }
+}

package/{dist/scss → scss}/_palette.scss

@@ -67,6 +67,9 @@ $plum700: #5b22a6;
 $plum800: #4c1b8c;
 $plum900: #3c1471;
 
+$inverted-hover: #ffffff0d;
+$transparentGrey: rgba(102, 102, 102, 0.75);
+
 $palette-map: (
   'banana50': $banana50,
   'banana100': $banana100,

package/scss/_print.scss

@@ -0,0 +1,179 @@
+@import 'palette';
+@import 'breakpoints';
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    text-shadow: none !important;
+    box-shadow: none !important;
+  }
+
+  @page {
+    size: a3;
+  }
+
+  body {
+    min-width: map-get($grid-breakpoints, lg) !important;
+  }
+  .container {
+    min-width: map-get($grid-breakpoints, lg) !important;
+  }
+
+  abbr[title]::after {
+    content: ' (' attr(title) ')';
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid $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.33333%;
+  }
+  .col-print-2 {
+    max-width: 16.66667%;
+  }
+  .col-print-3 {
+    max-width: 25%;
+  }
+  .col-print-4 {
+    max-width: 33.33333%;
+  }
+  .col-print-5 {
+    max-width: 41.66667%;
+  }
+  .col-print-6 {
+    max-width: 50%;
+  }
+  .col-print-7 {
+    max-width: 58.33333%;
+  }
+  .col-print-8 {
+    max-width: 66.66667%;
+  }
+  .col-print-9 {
+    max-width: 75%;
+  }
+  .col-print-10 {
+    max-width: 83.33333%;
+  }
+  .col-print-11 {
+    max-width: 91.66667%;
+  }
+  .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.33333%;
+  }
+  .offset-print-2 {
+    margin-left: 16.66667%;
+  }
+  .offset-print-3 {
+    margin-left: 25%;
+  }
+  .offset-print-4 {
+    margin-left: 33.33333%;
+  }
+  .offset-print-5 {
+    margin-left: 41.66667%;
+  }
+  .offset-print-6 {
+    margin-left: 50%;
+  }
+  .offset-print-7 {
+    margin-left: 58.33333%;
+  }
+  .offset-print-8 {
+    margin-left: 66.66667%;
+  }
+  .offset-print-9 {
+    margin-left: 75%;
+  }
+  .offset-print-10 {
+    margin-left: 83.33333%;
+  }
+  .offset-print-11 {
+    margin-left: 91.66667%;
+  }
+}

package/scss/_print.scss.d.ts

@@ -0,0 +1,49 @@
+export type Styles = {
+  'col-print-1': string;
+  'col-print-10': string;
+  'col-print-11': string;
+  'col-print-12': string;
+  'col-print-2': string;
+  'col-print-3': string;
+  'col-print-4': string;
+  'col-print-5': string;
+  'col-print-6': string;
+  'col-print-7': string;
+  'col-print-8': string;
+  'col-print-9': string;
+  container: string;
+  'offset-print-0': string;
+  'offset-print-1': string;
+  'offset-print-10': string;
+  'offset-print-11': string;
+  'offset-print-2': string;
+  'offset-print-3': string;
+  'offset-print-4': string;
+  'offset-print-5': string;
+  'offset-print-6': string;
+  'offset-print-7': string;
+  'offset-print-8': string;
+  'offset-print-9': string;
+  'order-print-0': string;
+  'order-print-1': string;
+  'order-print-10': string;
+  'order-print-11': string;
+  'order-print-12': string;
+  'order-print-2': string;
+  'order-print-3': string;
+  'order-print-4': string;
+  'order-print-5': string;
+  'order-print-6': string;
+  'order-print-7': string;
+  'order-print-8': string;
+  'order-print-9': string;
+  'order-print-first': string;
+  'order-print-last': string;
+  table: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/scss/_reset.scss

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

package/scss/_spacers.scss

@@ -0,0 +1,40 @@
+$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,
+);
+
+@function getSpacer($spacerSize) {
+  $spacerValue: 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 $spacerValue;
+}

package/scss/_title.scss

@@ -0,0 +1,59 @@
+@import './spacers';
+@import './breakpoints';
+@import './font-settings';
+
+@mixin title-feature {
+  font-size: 2.375rem;
+  line-height: 2.875rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: 4rem;
+    line-height: 5rem;
+  }
+}
+
+@mixin title1 {
+  font-size: 2.25rem;
+  line-height: 2.75rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: 3.25rem;
+    line-height: 3.75rem;
+  }
+}
+
+@mixin title2 {
+  font-size: 1.625rem;
+  line-height: 2.125rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: 2rem;
+    line-height: 2.75rem;
+  }
+}
+
+@mixin title3 {
+  font-size: 1.375rem;
+  line-height: 1.875rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+
+@mixin title4 {
+  font-size: $font-size-md;
+  line-height: $lineheight-size-sm;
+  font-weight: 700;
+}
+
+@mixin title5 {
+  font-size: $spacer;
+  line-height: 1.5rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-sm;
+  }
+}

package/{dist/scss → scss}/helsenorge.scss

@@ -1,9 +1,8 @@
-@import 'variables';
 @import 'reset';
 @import 'spacers';
 @import 'breakpoints';
 @import 'grid';
-
 @import 'palette';
 @import 'fonts';
 @import 'body';
+@import 'print';