@helsenorge/designsystem-react 1.0.0-beta88 → 1.0.0-beta92

package/components/RadioButton/styles.module.scss

@@ -0,0 +1,236 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/font-settings.scss';
+
+.radio-button-errors {
+  font-size: $font-size-sm;
+  font-weight: 600;
+  color: $cherry500;
+  margin-top: 0;
+}
+
+.radio-button-wrapper {
+  cursor: pointer;
+  margin: getSpacer(s) 0;
+
+  &--with-error {
+    padding: getSpacer(s) getSpacer(xs) getSpacer(m);
+    background-color: $cherry50;
+    margin-left: -0.75rem;
+    border-left: 0.25rem solid $cherry500;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      padding: getSpacer(s) getSpacer(m) getSpacer(l);
+    }
+  }
+
+  &--with-error#{&}--bigform {
+    padding: getSpacer(m) getSpacer(m);
+  }
+
+  &--bigform {
+    margin: getSpacer(xs) 0 getSpacer(xs) 0;
+  }
+}
+
+.radio-button-wrapper:first-of-type {
+  margin-top: 0;
+}
+
+.radio-button-wrapper:last-of-type {
+  margin-bottom: 0;
+}
+
+.radio-button-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: $font-size-sm;
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+  }
+
+  &--on-dark {
+    color: $white;
+  }
+
+  &--invalid {
+    color: $black;
+  }
+
+  &--disabled {
+    cursor: default;
+    color: $neutral400;
+  }
+
+  &--bigform {
+    padding: getSpacer(s);
+    background-color: $neutral50;
+  }
+
+  &--bigform#{&}--on-blueberry {
+    background-color: $blueberry50;
+  }
+
+  &--bigform#{&}--on-dark {
+    background-color: $blueberry800;
+  }
+
+  &--bigform#{&}--invalid {
+    background-color: $white;
+  }
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    &--bigform {
+      padding: 1.68rem getSpacer(l);
+    }
+  }
+}
+
+.radio-button {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -o-appearance: none;
+
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10rem;
+  margin: getSpacer(3xs) getSpacer(s) getSpacer(3xs) getSpacer(3xs);
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: auto !important;
+  min-height: auto !important;
+  color: $neutral700;
+  box-shadow: 0 0 0 getSpacer(3xs);
+
+  &:checked {
+    color: $blueberry500;
+
+    &:hover {
+      background-color: $blueberry50;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 getSpacer(2xs);
+    color: $black;
+  }
+
+  &:hover {
+    box-shadow: 0 0 0 getSpacer(2xs);
+    background-color: $neutral100;
+  }
+
+  :active > & {
+    box-shadow: 0 0 0 getSpacer(2xs);
+    color: $black;
+  }
+
+  &--on-blueberry {
+    color: $blueberry500;
+
+    :hover > & {
+      background-color: $blueberry100;
+    }
+  }
+
+  &--on-dark {
+    color: $neutral200;
+
+    &:hover {
+      background-color: $inverted-hover;
+      box-shadow: 0 0 0 getSpacer(2xs);
+    }
+
+    &:checked {
+      color: $blueberry200;
+
+      &:hover {
+        background-color: $inverted-hover;
+      }
+    }
+
+    :active > & {
+      box-shadow: 0 0 0 getSpacer(2xs);
+      color: $white;
+    }
+
+    &:focus {
+      color: $white;
+    }
+  }
+
+  &--invalid {
+    color: $cherry500;
+
+    &:hover {
+      background-color: $cherry100;
+    }
+
+    &:checked {
+      color: $cherry500;
+
+      &:hover {
+        background-color: $cherry100;
+      }
+    }
+
+    &:active {
+      color: $black;
+    }
+
+    &:focus {
+      color: $black;
+    }
+  }
+
+  &--disabled {
+    cursor: default;
+
+    color: $neutral400;
+    &:checked {
+      color: $neutral400;
+
+      &:hover {
+        box-shadow: 0 0 0 getSpacer(3xs);
+        background-color: transparent;
+      }
+    }
+    &:hover {
+      box-shadow: 0 0 0 getSpacer(3xs);
+      background-color: transparent;
+    }
+
+    &:active {
+      color: $neutral400;
+    }
+  }
+
+  // :before er dot i RadioButton
+  &:checked::before {
+    content: '';
+    display: flex;
+    background-color: $blueberry500;
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 10rem;
+  }
+
+  &--on-dark:checked::before {
+    background-color: $blueberry200;
+  }
+
+  &--disabled:checked::before {
+    box-shadow: 0 0 0 0;
+    background-color: $neutral400;
+    color: $neutral400;
+  }
+
+  &--invalid:checked::before {
+    background-color: $cherry500;
+  }
+}

package/components/RadioButton/styles.module.scss.d.ts

@@ -0,0 +1,23 @@
+export type Styles = {
+  'radio-button': string;
+  'radio-button--disabled': string;
+  'radio-button--invalid': string;
+  'radio-button--on-blueberry': string;
+  'radio-button--on-dark': string;
+  'radio-button-errors': string;
+  'radio-button-label': string;
+  'radio-button-label--bigform': string;
+  'radio-button-label--disabled': string;
+  'radio-button-label--invalid': string;
+  'radio-button-label--on-blueberry': string;
+  'radio-button-label--on-dark': string;
+  'radio-button-wrapper': string;
+  'radio-button-wrapper--bigform': string;
+  'radio-button-wrapper--with-error': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Textarea/Textarea.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { HTMLTextareaProps, FormMode } from '../../constants';
+interface TextareaProps extends HTMLTextareaProps {
+    /** initial value for textarea */
+    defaultValue?: string;
+    /** max character limit in textarea  */
+    maxCharacters?: number;
+    /** The text is displayed in the end of the text-counter */
+    maxText?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** If true, the component will have a bottom margin. */
+    marginBottom?: boolean;
+    /** If true, the component will be transparent. */
+    transparent?: boolean;
+    /** Changes the visuals of the textarea */
+    mode?: keyof typeof FormMode;
+    /** Label of the input */
+    label?: string;
+    /** max rows */
+    maxRows?: number;
+    /** min rows */
+    minRows?: number;
+    /** auto-grows until maxRows */
+    grow?: boolean;
+    /** Error text to show above the component */
+    errorText?: string;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;
+//# sourceMappingURL=Textarea.d.ts.map

package/components/Textarea/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG9D,UAAU,aAAc,SAAQ,iBAAiB;IAC/C,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,2FAiHZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}