@helsenorge/designsystem-react 1.0.0-beta.7 → 1.0.0-beta101

package/components/Button/styles.module.scss

@@ -0,0 +1,434 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+
+$primaryHoverColor: #08667c0d; //$blueberry700 + '0D';
+$warningHoverColor: #ab7c000d; //$banana700 + '0D';
+$dangerHoverColor: #a31f0e0d; //$cherry700 + '0D';
+$invertedHoverColor: #ffffff0d; //$white + '0D';
+
+.content-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: inherit;
+  height: 100%;
+  &:focus {
+    border-bottom: 1px solid $white;
+  }
+}
+
+.button {
+  // Referanse for grandparent selection i underklassene lenger nede
+  $button: &;
+
+  padding: 0 1.5rem;
+  min-height: 2.5rem;
+  font-size: 1.125rem;
+  font-family: inherit;
+  font-weight: 600;
+  display: inline-block;
+  box-sizing: border-box;
+  text-decoration: none;
+  outline: none;
+  border: 0;
+  letter-spacing: unset;
+  cursor: pointer;
+
+  &:disabled {
+    pointer-events: none;
+  }
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    min-height: 3.125rem;
+    font-size: 1.25rem;
+    padding: 0 2.5rem;
+  }
+
+  &--fluid {
+    width: 100%;
+  }
+
+  &--large {
+    min-height: 3.5rem;
+    font-size: 1.125rem;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      min-height: 4.5rem;
+    }
+  }
+
+  &--fill {
+    border-width: 0.125rem;
+    border-style: solid;
+    background-color: $blueberry500;
+    border-color: $blueberry500;
+    color: $white;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $blueberry700;
+      box-shadow: 0 0 0 0.25rem $blueberry700;
+      border-color: transparent;
+    }
+    &:disabled {
+      background-color: $neutral200;
+      border: 0.125rem solid $neutral200;
+      box-shadow: 0 0 0 0.25rem $neutral200;
+      color: $neutral600;
+    }
+  }
+  &--fill#{&}--warning {
+    background-color: $banana500;
+    border-color: $banana500;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $banana700;
+      border-color: $banana700;
+      box-shadow: 0 0 0 0.25rem $banana700;
+    }
+  }
+  &--fill#{&}--danger {
+    background-color: $cherry500;
+    border-color: $cherry500;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $cherry700;
+      border-color: $cherry700;
+      box-shadow: 0 0 0 0.25rem $cherry700;
+    }
+  }
+  &--fill#{&}--inverted {
+    background-color: $white;
+    border-color: $white;
+    color: $blueberry500;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $white;
+      border-color: $white;
+      box-shadow: 0 0 0 0.25rem $white;
+    }
+  }
+  &--fill#{&}--warning#{&}--inverted {
+    color: $banana500;
+  }
+  &--fill#{&}--danger#{&}--inverted {
+    color: $cherry500;
+  }
+
+  &--outline {
+    border-width: 0.125rem;
+    border-style: solid;
+    background-color: transparent;
+    border-color: $blueberry500;
+    color: $blueberry600;
+    position: relative;
+
+    &:before {
+      content: ' ';
+      position: absolute;
+      top: -0.25rem;
+      left: -0.25rem;
+      right: -0.25rem;
+      bottom: -0.25rem;
+      border: 0.125rem solid transparent;
+    }
+    &:after {
+      content: ' ';
+      position: absolute;
+      top: -0.375rem;
+      left: -0.375rem;
+      right: -0.375rem;
+      bottom: -0.375rem;
+      border: 0.125rem solid transparent;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $primaryHoverColor;
+      border-color: transparent;
+      &:before {
+        border: 0.125rem solid $primaryHoverColor;
+      }
+      &:after {
+        border: 0.125rem solid $blueberry700;
+      }
+    }
+    &:disabled {
+      background-color: transparent;
+      border: 0.125rem solid $neutral200;
+      color: $neutral600;
+
+      &:before {
+        border: none;
+      }
+
+      &:after {
+        border: none;
+      }
+    }
+  }
+  &--outline#{&}--warning {
+    border-color: $banana500;
+    color: $banana600;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $warningHoverColor;
+      border-color: transparent;
+
+      &:before {
+        border-color: $warningHoverColor;
+      }
+      &:after {
+        border-color: $banana700;
+      }
+    }
+  }
+  &--outline#{&}--danger {
+    border-color: $cherry500;
+    color: $cherry600;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $dangerHoverColor;
+      border-color: transparent;
+
+      &:before {
+        border-color: $dangerHoverColor;
+      }
+      &:after {
+        border-color: $cherry700;
+      }
+    }
+  }
+  &--outline#{&}--inverted {
+    border-color: $white;
+    color: $white;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $invertedHoverColor;
+      border-color: transparent;
+
+      &:before {
+        border-color: $invertedHoverColor;
+      }
+      &:after {
+        border-color: $white;
+      }
+    }
+  }
+
+  &--borderless {
+    border-width: 0.125rem;
+    border-style: solid;
+    background-color: transparent;
+    border: 0;
+    color: $blueberry600;
+    position: relative;
+    padding: 0;
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      padding: 0;
+    }
+    &:disabled {
+      color: $neutral600;
+    }
+  }
+  &--borderless#{&}--warning {
+    color: $banana600;
+  }
+  &--borderless#{&}--danger {
+    color: $cherry600;
+  }
+  &--borderless#{&}--inverted {
+    color: $white;
+  }
+
+  &--with-icon {
+    padding: 0;
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      padding: 0;
+    }
+    svg {
+      margin: 0 0.125rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin: 0 0.75rem;
+      }
+    }
+  }
+  &--large#{&}--with-icon {
+    svg {
+      margin: 0 0.5rem;
+    }
+  }
+
+  &--ellipsis#{&}--with-icon {
+    max-width: 100%;
+  }
+
+  &--borderless#{&}--with-icon {
+    svg:first-child {
+      margin-left: 0;
+      margin-right: 0.125rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: 0.75rem;
+      }
+    }
+    svg:last-child {
+      margin-left: 0.125rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-left: 0.75rem;
+      }
+    }
+  }
+  &--large#{&}--borderless#{&}--with-icon {
+    svg:first-child {
+      margin-left: 0;
+      margin-right: 0.5rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: 0.75rem;
+      }
+    }
+    svg:last-child {
+      margin-left: 0.5rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-left: 0.75rem;
+      }
+    }
+  }
+
+  &__content {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    white-space: normal;
+
+    &--fill {
+      #{$button}:focus & {
+        border-bottom: 1px solid $white;
+      }
+    }
+
+    &--fill#{&}--inverted {
+      #{$button}:focus & {
+        border-bottom-color: $blueberry700;
+      }
+    }
+    &--fill#{&}--warning#{&}--inverted {
+      #{$button}:focus & {
+        border-bottom-color: $banana700;
+      }
+    }
+    &--fill#{&}--danger#{&}--inverted {
+      #{$button}:focus & {
+        border-bottom-color: $cherry700;
+      }
+    }
+
+    &--borderless {
+      border-bottom: 1px solid transparent;
+
+      #{$button}:hover &,
+      #{$button}:active &,
+      #{$button}:focus & {
+        border-bottom-color: $blueberry700;
+      }
+    }
+    &--borderless#{&}--warning {
+      #{$button}:hover &,
+      #{$button}:active &,
+      #{$button}:focus & {
+        border-bottom-color: $banana700;
+      }
+    }
+    &--borderless#{&}--danger {
+      #{$button}:hover &,
+      #{$button}:active &,
+      #{$button}:focus & {
+        border-bottom-color: $cherry700;
+      }
+    }
+    &--borderless#{&}--inverted {
+      #{$button}:hover &,
+      #{$button}:active &,
+      #{$button}:focus & {
+        border-bottom-color: $white;
+      }
+    }
+
+    &--with-icon:first-child {
+      margin-left: 1.5rem;
+    }
+    &--with-icon:last-child {
+      margin-right: 1.5rem;
+    }
+    &--large#{&}--with-icon:first-child {
+      margin-left: 2.5rem;
+    }
+    &--large#{&}--with-icon:last-child {
+      margin-right: 2.5rem;
+    }
+    &--borderless#{&}--with-icon:first-child {
+      margin-left: 0;
+    }
+    &--borderless#{&}--with-icon:last-child {
+      margin-right: 0;
+    }
+
+    &--ellipsis#{&}--with-icon {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &--fluid#{&}--with-icon:last-child {
+      margin-right: 0;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: 1.5rem;
+      }
+    }
+    &--large-fluid#{&}--with-icon:last-child {
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: 2.5rem;
+      }
+    }
+
+    #{$button}:disabled & {
+      border-bottom: none;
+    }
+  }
+
+  &__left-fluid-content {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+
+    &--with-icon {
+      text-align: left;
+    }
+    &--with-icon:last-child {
+      margin-right: 1.5rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: 0;
+      }
+    }
+    &--large#{&}--with-icon:last-child {
+      margin-right: 2.5rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+export type Styles = {
+  button: string;
+  button__content: string;
+  'button__content--borderless': string;
+  'button__content--danger': string;
+  'button__content--ellipsis': string;
+  'button__content--fill': string;
+  'button__content--fluid': string;
+  'button__content--inverted': string;
+  'button__content--large': string;
+  'button__content--large-fluid': string;
+  'button__content--warning': string;
+  'button__content--with-icon': string;
+  'button__left-fluid-content': string;
+  'button__left-fluid-content--large': string;
+  'button__left-fluid-content--with-icon': string;
+  'button--borderless': string;
+  'button--danger': string;
+  'button--ellipsis': string;
+  'button--fill': string;
+  'button--fluid': string;
+  'button--inverted': string;
+  'button--large': string;
+  'button--outline': string;
+  'button--warning': string;
+  'button--with-icon': string;
+  'content-wrapper': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/ButtonWithModal/ButtonWithModal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ModalProps } from '../Modal/Modal';
+interface ModalWithButtonProps extends ModalProps {
+    /** Text of the button */
+    buttonText: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const ModalWithButton: React.ForwardRefExoticComponent<ModalWithButtonProps & React.RefAttributes<HTMLElement>>;
+export default ModalWithButton;
+//# sourceMappingURL=ButtonWithModal.d.ts.map

package/components/ButtonWithModal/ButtonWithModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonWithModal.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonWithModal/ButtonWithModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEnD,UAAU,oBAAqB,SAAQ,UAAU;IAC/C,yBAAyB;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,eAAe,0FASnB,CAAC;AAEH,eAAe,eAAe,CAAC"}