@onewelcome/react-lib-components 1.7.0 → 1.8.0

package/dist/util/helper.d.ts

@@ -10,4 +10,6 @@ export declare const areArraysDifferent: (arr1: Record<string, any>[], arr2: Rec
 export declare const getValueByPath: (obj: {
     [key: string]: any;
 }, path: string) => any;
+/** Source: https://stackoverflow.com/a/42769683/5084110 */
+export declare const remToPx: (rem: number) => number;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -83,7 +83,7 @@
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
     "babel-loader": "^9.1.2",
-    "chromatic": "^6.17.0",
+    "chromatic": "^6.17.1",
     "dts-cli": "^1.6.3",
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
@@ -102,7 +102,7 @@
     "react-dom": "^17.0.2",
     "react-is": "^18.2.0",
     "react-router": "^6.6.2",
-    "react-router-dom": "^6.8.1",
+    "react-router-dom": "^6.8.2",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-styles": "^4.0.0",
     "sass": "^1.58.3",

package/src/Breadcrumbs/Breadcrumbs.module.scss

@@ -16,12 +16,12 @@
 
 .breadcrumbs {
   .last {
-    color: var(--greyed-out);
+    color: var(--color-primary);
     margin: 0;
   }
 
   .icon {
-    color: var(--greyed-out);
+    color: var(--color-primary);
     font-size: 0.75rem;
     line-height: 1.5rem;
     margin-left: 0.375rem;

package/src/Button/Button.module.scss

@@ -33,13 +33,13 @@
   align-items: center;
 
   &.start-icon {
-    padding-left: 1rem;
+    padding-left: 0.75rem;
     padding-right: 1.25rem;
   }
 
   &.end-icon {
     padding-left: 1.25rem;
-    padding-right: 1rem;
+    padding-right: 0.75rem;
   }
 
   i {
@@ -51,3 +51,15 @@
     margin-right: 0.25rem;
   }
 }
+
+@media only screen and (min-width: 30em) {
+  .has-icon {
+    &.start-icon {
+      padding-left: 1rem;
+    }
+
+    &.end-icon {
+      padding-right: 1rem;
+    }
+  }
+}

package/src/ContextMenu/ContextMenuItem.module.scss

@@ -22,6 +22,7 @@
     border: 0;
     font-family: var(--font-family);
     font-size: var(--font-size);
+    line-height: var(--default-line-height);
     cursor: pointer;
     width: 100%;
     height: 100%;

package/src/DataGrid/DataGridHeader/DataGridHeader.module.scss

@@ -20,7 +20,7 @@
     position: absolute;
     width: calc(100% - 2rem);
     left: 1rem;
-    border-bottom: 1px solid var(--grey);
+    border-bottom: 2px solid var(--light-grey-border);
   }
 }
 

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.module.scss

@@ -45,7 +45,7 @@
 .headline {
   font-family: var(--font-family);
   font-size: var(--font-size);
-  line-height: 1.5;
+  line-height: var(--default-line-height);
   font-weight: 700;
   color: var(--default);
 }

package/src/Form/Fieldset/Fieldset.module.scss

@@ -14,9 +14,11 @@
  *    limitations under the License.
  */
 
+@use "src/variables";
+
 .fieldset {
   border: 0;
-  padding: 1rem 1.25rem;
+  padding: 1rem variables.$form-element-horizontal-padding-mobile;
   border-radius: 0.5rem;
   margin: 0;
 
@@ -43,3 +45,8 @@
     }
   }
 }
+@media only screen and (min-width: 30em) {
+  .fieldset {
+    padding: 1rem variables.$form-element-horizontal-padding-desktop;
+  }
+}

package/src/Form/FileUpload/FileUpload.module.scss

@@ -29,11 +29,11 @@
   @include transition(all, 0.2s, ease-in-out);
   &.drag-active {
     @include outline(
-      var(--vivid-violet),
+      var(--color-primary),
       var(--drag-border-style),
       var(--input-border-width),
       var(--input-border-radius),
-      var(--light-pink)
+      var(--drag-background-color)
     );
     @include outlineStates;
   }

package/src/Form/Input/Input.module.scss

@@ -14,7 +14,8 @@
  *    limitations under the License.
  */
 
-@use "../../mixins.module.scss";
+@use "src/mixins.module";
+@use "src/variables";
 
 .input-wrapper {
   position: relative;
@@ -24,7 +25,7 @@
   border: 0;
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
-  padding: 0 1.25rem;
+  padding: 0 variables.$form-element-horizontal-padding-mobile;
   @include mixins.transition(all, 0.2s, ease-in-out);
 
   // General autofill styles
@@ -141,3 +142,9 @@
   display: block;
   z-index: 1;
 }
+
+@media only screen and (min-width: 30em) {
+  .input-wrapper {
+    padding: 0 variables.$form-element-horizontal-padding-desktop;
+  }
+}

package/src/Form/Select/Select.module.scss

@@ -14,7 +14,8 @@
  *    limitations under the License.
  */
 
-@use "../../mixins.module.scss";
+@use "src/mixins.module";
+@use "src/variables";
 
 $listItemHeight: 2.125rem;
 
@@ -41,7 +42,11 @@ $listItemHeight: 2.125rem;
   &:not(.expanded) {
     button:focus:not(.error) {
       border: var(--input-border-width-focus) solid var(--color-focus);
-      padding: 0 calc(1.25rem - var(--input-border-width-focus) + var(--input-border-width));
+      padding: 0
+        calc(
+          variables.$form-element-horizontal-padding-mobile - var(--input-border-width-focus) +
+            var(--input-border-width)
+        );
     }
   }
 
@@ -56,7 +61,7 @@ $listItemHeight: 2.125rem;
     position: relative;
     width: 100%;
     min-height: calc(4rem - (2 * var(--input-border-width)));
-    padding: 0 1.25rem;
+    padding: 0 variables.$form-element-horizontal-padding-mobile;
     background-color: transparent;
     border-color: var(--light-grey-border);
     border-style: var(--input-border-style);
@@ -215,3 +220,21 @@ $listItemHeight: 2.125rem;
     pointer-events: none;
   }
 }
+
+@media only screen and (min-width: 30em) {
+  .select {
+    .custom-select {
+      padding: 0 variables.$form-element-horizontal-padding-desktop;
+    }
+
+    &:not(.expanded) {
+      button:focus:not(.error) {
+        padding: 0
+          calc(
+            variables.$form-element-horizontal-padding-desktop - var(--input-border-width-focus) +
+              var(--input-border-width)
+          );
+      }
+    }
+  }
+}

package/src/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -25,6 +25,7 @@ import { Input, Type, Props as InputProps } from "../../Input/Input";
 import classes from "./InputWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
 import { useWrapper } from "../../../hooks/useWrapper";
+import { remToPx } from "../../../util/helper";
 
 interface PartialInputProps extends Partial<InputProps> {}
 
@@ -95,6 +96,7 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   const { prefix, suffix } = inputProps || {};
   const input = useRef<HTMLInputElement>(null);
   const hasValueOrActiveFloatingLabel = !!value || floatingLabelActive;
+  const helperIndent = window.innerWidth >= remToPx(30) ? remToPx(1.25) : remToPx(1);
   const { labelOffset } = useLabelOffset(
     (inputProps && (inputProps.ref as React.RefObject<HTMLInputElement>)) || input,
     floatingLabelActive,
@@ -130,7 +132,7 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         ...helperProps,
         className: `${classes["input-wrapper-helper"]} ${helperProps?.className ?? ""} `
       }}
-      helperIndent={20}
+      helperIndent={helperIndent}
       disabled={disabled}
     >
       <Input

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.module.scss

@@ -14,6 +14,8 @@
  *    limitations under the License.
  */
 
+@use "src/variables";
+
 .select-label {
   left: calc(
     1.25rem + 2px
@@ -22,9 +24,15 @@
 
 .select-helper-text {
   margin-top: 0.25rem;
-  margin-left: 1.25rem;
+  margin-left: variables.$form-element-horizontal-padding-mobile;
 }
 
 .floating-label-active [data-display] {
   top: calc(50% + 0.5rem);
 }
+
+@media only screen and (min-width: 30em) {
+  .select-helper-text {
+    margin-left: variables.$form-element-horizontal-padding-desktop;
+  }
+}

package/src/Form/Wrapper/Wrapper/Wrapper.module.scss

@@ -14,7 +14,8 @@
  *    limitations under the License.
  */
 
-@use "../../../mixins.module.scss";
+@use "src/mixins.module";
+@use "src/variables";
 
 .floating-wrapper {
   position: relative;
@@ -25,7 +26,7 @@
     position: absolute;
     z-index: 2;
     top: 1.3125rem;
-    left: 1.25rem;
+    left: variables.$form-element-horizontal-padding-mobile;
     transform-origin: left top;
     @include mixins.transition(all, 0.2s, ease-in-out);
     pointer-events: none;
@@ -56,3 +57,11 @@
     content: " *";
   }
 }
+
+@media only screen and (min-width: 30em) {
+  .floating-wrapper {
+    .floating-label {
+      left: variables.$form-element-horizontal-padding-desktop;
+    }
+  }
+}

package/src/Link/Link.module.scss

@@ -21,7 +21,7 @@
   font-size: var(--font-size);
   font-style: normal;
   font-variant: normal;
-  line-height: 1.5;
+  line-height: var(--default-line-height);
   font-weight: normal;
   text-transform: none;
   letter-spacing: 0;

package/src/Notifications/Banner/Banner.module.scss

@@ -18,7 +18,7 @@
   padding: 1rem 1.25rem;
   background-color: var(--light);
   display: flex;
-  border-width: 1px;
+  border-width: var(--banner-border-width);
   border-style: solid;
   flex-grow: 0;
   border-radius: var(--banner-border-radius);
@@ -54,7 +54,7 @@
   }
 
   &.warning {
-    border-color: var(--error);
+    border-color: var(--warning);
     .icon {
       color: var(--warning);
     }

package/src/Pagination/Pagination.module.scss

@@ -17,6 +17,7 @@
 .pagination-wrapper {
   font-family: var(--font-family);
   font-size: var(--font-size);
+  line-height: var(--default-line-height);
   color: var(--greyed-out);
   display: flex;
   flex-direction: column;

package/src/Tabs/TabButton.module.scss

@@ -18,7 +18,7 @@
   border: 0;
   border-radius: 0;
   font-size: var(--font-size);
-  line-height: 1.5;
+  line-height: var(--default-line-height);
   margin: 0;
   padding: 0.25rem 0 1rem 0;
   min-height: 2.5rem;
@@ -27,7 +27,7 @@
   background-color: transparent;
   white-space: nowrap;
   position: relative;
-  font-weight: bold;
+  font-weight: normal;
   color: transparent;
 
   &:focus-visible {
@@ -42,7 +42,7 @@
   }
 
   &.selected {
-    color: var(--tab-text-color);
+    color: var(--color-primary);
 
     span {
       color: transparent;

package/src/Tabs/Tabs.module.scss

@@ -43,6 +43,7 @@ $focus-width: 5px;
 
   position: absolute;
   height: var(--tab-active-border-height);
+  border-radius: 2px 2px 0 0;
   background-color: var(--tab-active-border-color);
 
   @include mixins.transition($transition-property, 0.2s, ease-in-out);

package/src/Typography/Typography.module.scss

@@ -45,11 +45,11 @@
   }
 
   &body {
-    @include fontProperties(var(--font-family), var(--font-size), 400, 1.5);
+    @include fontProperties(var(--font-family), var(--font-size), 400, var(--default-line-height));
   }
 
   &body-bold {
-    @include fontProperties(var(--font-family), var(--font-size), 700, 1.5);
+    @include fontProperties(var(--font-family), var(--font-size), 700, var(--default-line-height));
   }
 
   &sub-text {

package/src/Typography/Typography.tsx

@@ -28,7 +28,7 @@ export const validVariants = [
   "sub-text",
   "code"
 ] as const;
-export type Variant = typeof validVariants[number];
+export type Variant = (typeof validVariants)[number];
 
 type Tags =
   | "h1"

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.module.scss

@@ -46,8 +46,8 @@
   &:disabled {
     .number-wrapper {
       .number {
-        border: 2px solid var(--greyed-out);
-        color: var(--greyed-out);
+        border: 2px solid var(--disabled);
+        color: var(--disabled);
       }
     }
 
@@ -117,6 +117,10 @@
       font-weight: 700;
       color: var(--color-primary);
     }
+
+    .two-line-text-overflow {
+      display: unset;
+    }
   }
 
   //Future state for clickable elements - future state is a default one
@@ -165,17 +169,17 @@
 .number {
   font-family: var(--font-family);
   font-size: 1rem;
-  font-weight: bold;
+  font-weight: normal;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid var(--greyed-out);
+  border: 2px solid var(--wizard-step-indicator-future-color);
   border-radius: 50%;
   min-width: 1.5rem;
   min-height: 1.5rem;
   width: 1.5rem;
   height: 1.5rem;
-  color: var(--greyed-out);
+  color: var(--wizard-step-indicator-future-color);
   line-height: 1.5rem;
   background-color: var(--light);
   box-sizing: content-box;
@@ -183,7 +187,7 @@
 
 .two-line-text-overflow {
   max-height: 2rem;
-  display: -webkit-box;
+  display: none;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
@@ -195,10 +199,16 @@
   font-size: 0.75rem;
   line-height: 1rem;
   overflow: hidden;
-  color: var(--greyed-out);
+  color: var(--default);
   text-align: center;
 }
 
 .checkmark {
   font-size: 0.875rem;
 }
+
+@media only screen and (min-width: 30em) {
+  .two-line-text-overflow {
+    display: unset;
+  }
+}

package/src/_BaseStyling_/BaseStyling.tsx

@@ -28,6 +28,23 @@ interface CSSProperties {
   colorTertiary?: string;
   lightPink?: string;
   vividViolet?: string;
+  colorPrimary300?: string;
+  colorPrimary500?: string;
+  colorPrimary600?: string;
+  colorPrimary700?: string;
+  colorPrimary900?: string;
+  colorBlueGrey100?: string;
+  colorBlueGrey200?: string;
+  colorBlueGrey400?: string;
+  colorBlueGrey25?: string;
+  colorBlueGrey500?: string;
+  colorBlueGrey700?: string;
+  colorBlueGrey900?: string;
+  colorGreen500?: string;
+  colorLightBlue500?: string;
+  colorLightBlue600?: string;
+  colorOrange500?: string;
+  colorRed500?: string;
   defaultLineHeight?: string;
   buttonBorderRadius?: string;
   buttonBorderWidth?: string;
@@ -41,6 +58,7 @@ interface CSSProperties {
   inputBorderWidthFocus?: string;
   inputBorderStyle?: string;
   inputBackgroundColor?: string;
+  dragBackgroundColor?: string;
   dragBorderStyle?: string;
   modalShadowColor?: string;
   modalBackgroundColor?: string;
@@ -53,6 +71,7 @@ interface CSSProperties {
   snackbarErrorBackgroundColor?: string;
   snackbarBorderRadius?: string;
   bannerBorderRadius?: string;
+  bannerBorderWidth?: string;
   dataGridRowBackgroundColor?: string;
   dataGridRowHoverBackgroundColor?: string;
   tabsBackgroundColor?: string;
@@ -62,6 +81,7 @@ interface CSSProperties {
   tablistBorderStyle?: string;
   tablistBorderColor?: string;
   tabTextColor?: string;
+  wizardStepIndicatorFutureColor?: string;
   default?: string;
   success?: string;
   error?: string;
@@ -90,53 +110,74 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const BaseStyling = ({ children, properties = {} }: Props) => {
   const defaultProperties: CSSProperties = {
-    colorFocus: "var(--color-primary)",
-    colorPrimary: "#9e006b",
-    colorSecondary: "#003b5e",
-    colorTertiary: "#ff1e4e",
+    colorPrimary300: "#6871BF",
+    colorPrimary500: "#041295",
+    colorPrimary600: "#030F77",
+    colorPrimary700: "#020B59",
+    colorPrimary900: "#01041E",
+    colorBlueGrey25: "#F7F7F9",
+    colorBlueGrey100: "#DEDEE6",
+    colorBlueGrey200: "#BCBECE",
+    colorBlueGrey400: "#797D9C",
+    colorBlueGrey500: "#5D607E",
+    colorBlueGrey700: "#383A4B",
+    colorBlueGrey900: "#131319",
+    colorGreen500: "#178244",
+    colorLightBlue500: "#00BCDD",
+    colorLightBlue600: "#0096B1",
+    colorOrange500: "#E07900",
+    colorRed500: "#E01E00",
+    colorFocus: "var(--color-primary300)",
+    colorPrimary: "var(--color-primary500)",
+    colorSecondary: "var(--color-blue-grey700)",
+    colorTertiary: "var(--color-light-blue600)",
     lightPink: "#9E006B1A",
     vividViolet: "#9E006B",
-    defaultLineHeight: "26px",
-    buttonBorderRadius: "20px",
+    defaultLineHeight: "1.5",
+    buttonBorderRadius: "2px",
     buttonBorderWidth: "2px",
     buttonFontSize: "1rem",
     buttonBorderStyle: "solid",
     buttonFillTextColor: "var(--light)",
     buttonFillHoverBackgroundColor: "var(--light)",
     buttonOutlineHoverTextColor: "var(--light)",
-    inputBorderRadius: "8px",
+    inputBorderRadius: "2px",
     inputBorderWidth: "1px",
     inputBorderWidthFocus: "2px",
     inputBorderStyle: "solid",
     inputBackgroundColor: "var(--light)",
+    dragBackgroundColor: "#1313191A",
+    dragBorderStyle: "dashed",
     modalShadowColor: "rgba(0, 0, 0, 0.16)",
-    modalBackgroundColor: "#f5f8f8",
+    modalBackgroundColor: "var(--color-blue-grey25)",
     modalHeaderBackgroundColor: "var(--light)",
     skeletonBackgroundColor: "var(--disabled)",
     skeletonAnimationColorRgb: "255, 255, 255",
     snackbarTextColor: "var(--light)",
-    snackbarInfoBackgroundColor: "#003b5e",
-    snackbarSuccessBackgroundColor: "#008a28",
-    snackbarErrorBackgroundColor: "#d9291c",
-    snackbarBorderRadius: "8px",
-    bannerBorderRadius: "8px",
+    snackbarInfoBackgroundColor: "var(--color-primary500)",
+    snackbarSuccessBackgroundColor: "var(--color-green500)",
+    snackbarErrorBackgroundColor: "var(--color-red500)",
+    snackbarBorderRadius: "2px",
+    bannerBorderRadius: "2px",
+    bannerBorderWidth: "0 0 0 4px",
     dataGridRowBackgroundColor: "transparent",
-    dataGridRowHoverBackgroundColor: "#f5e6f0",
+    dataGridRowHoverBackgroundColor: "var(--color-blue-grey25)",
     tabsBackgroundColor: "var(--light)",
-    tabActiveBorderHeight: "2px",
+    tabActiveBorderHeight: "4px",
     tabActiveBorderColor: "var(--color-primary)",
     tablistBorderWidth: "1px",
     tablistBorderStyle: "solid",
-    tablistBorderColor: "#C3C3C7",
-    tabTextColor: "#0f0f1e",
-    default: "#0f0f1e",
-    success: "#008a28",
-    error: "#d9291c",
-    info: "var(--color-secondary)",
-    disabled: "#e9e9eb",
-    greyedOut: "#6f6f76",
-    lightGreyBorder: "#e9e9eb",
-    warning: "#ff6105",
+    tablistBorderColor: "var(--color-blue-grey100)",
+    tabTextColor: "var(--color-blue-grey900)",
+    wizardStepIndicatorFutureColor: "var(--color-blue-grey200)",
+    default: "var(--color-blue-grey900)",
+    success: "var(--color-green500)",
+    error: "var(--color-red500)",
+    info: "var(--color-primary500)",
+    disabled: "var(--color-blue-grey100)",
+    greyedOut: "var(--color-blue-grey500)",
+    lightGreyBorder: "var(--color-blue-grey100)",
+    warning: "var(--color-orange500)",
     light: "#FFF",
     grey: "#c3c3c7",
     fontFamily: "Roboto, sans-serif",
@@ -147,8 +188,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     fontSizeH3: "1.5rem",
     fontSizeH4: "1.25rem",
     fontSizeSub: ".75rem",
-    fontSizeCode: "1rem",
-    dragBorderStyle: "dashed"
+    fontSizeCode: "1rem"
   };
 
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */

package/src/mixins.module.scss

@@ -30,10 +30,10 @@
         color: var(--button-fill-text-color);
       }
     }
-    font-weight: bold;
+    font-weight: 500;
   } @else if $variant == "outline" {
     background-color: var(--white);
-    font-weight: bold;
+    font-weight: 500;
   }
 
   &.primary:not(#{$disabledSelector}) {