@onewelcome/react-lib-components 8.1.2 → 8.3.0

package/src/components/DatePicker/DatePicker.module.scss

@@ -0,0 +1,333 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+/*
+  Those styles were originally taken from https://github.com/gpbl/react-day-picker/blob/main/src/style.css.
+  Some where updated as per design, to match the single select mode. The rest is kept intact in the file to simplify the
+  styling of the upcoming features.
+ */
+
+@use "../../variables.scss";
+@use "src/mixins.module";
+
+.rdp-root {
+  --rdp-day-height: 2rem;
+  --rdp-day-width: 2rem;
+
+  --rdp-disabled-opacity: 0.5;
+  --rdp-outside-opacity: 0.75;
+
+  --rdp-dropdown-gap: 0.5rem;
+  --rdp-months-gap: 2rem;
+
+  --rdp-nav_button-disabled-opacity: 0.5;
+  --rdp-nav_button-height: 0.75rem;
+  --rdp-nav_button-width: 0.75rem;
+  --rdp-nav-height: 2.75rem;
+
+  --rdp-range_middle-background-color: var(--color-primary50);
+  --rdp-range_middle-color: black;
+
+  --rdp-range_start-color: white;
+  --rdp-range_start-background: var(--color-primary);
+  --rdp-range_start-date-background-color: var(--color-primary);
+
+  --rdp-range_end-background: var(--color-primary);
+  --rdp-range_end-color: white;
+  --rdp-range_end-date-background-color: var(--color-primary);
+
+  --rdp-week_number-border-radius: var(--button-border-radius);
+  --rdp-week_number-border: var(--button-border-radius) solid transparent;
+  --rdp-week_number-height: var(--rdp-day-height);
+  --rdp-week_number-opacity: 0.75;
+  --rdp-week_number-width: var(--rdp-day-width);
+  --rdp-weeknumber-text-align: center;
+
+  --rdp-weekday-padding: 0.5rem 0rem;
+  --rdp-weekday-text-align: center;
+
+  --rdp-gradient-direction: 90deg;
+}
+
+.rdp-root[dir="rtl"] {
+  --rdp-gradient-direction: -90deg;
+}
+
+.rdp-root {
+  position: relative;
+  box-sizing: border-box;
+  @include mixins.fontProperties(var(--font-family), var(--font-size-sub), 400, 1rem);
+}
+
+.rdp-root * {
+  box-sizing: border-box;
+}
+
+.rdp-day {
+  width: var(--rdp-day-width);
+  height: var(--rdp-day-height);
+  border: none;
+  text-align: center;
+  padding: 0;
+}
+
+.rdp-day_button {
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  width: var(--rdp-day-width);
+  height: var(--rdp-day-height);
+  border: var(--button-border-radius) solid transparent;
+  border-radius: var(--button-border-radius);
+
+  @include mixins.focusVisibleOutline($outlineOffset: -2px);
+}
+
+.rdp-day_button:disabled {
+  cursor: revert;
+}
+
+.rdp-caption_label {
+  z-index: 1;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  white-space: nowrap;
+  border: 0;
+}
+
+.rdp-button_next,
+.rdp-button_previous {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  appearance: none;
+
+  width: var(--rdp-nav_button-width);
+  height: var(--rdp-nav_button-height);
+
+  @include mixins.focusVisibleOutline($outlineOffset: 2px);
+}
+
+.rdp-button_previous {
+  margin-right: 0.5rem;
+}
+
+.rdp-button_next:disabled,
+.rdp-button_previous:disabled {
+  cursor: revert;
+
+  opacity: var(--rdp-nav_button-disabled-opacity);
+}
+
+.rdp-chevron {
+  display: inline-block;
+  fill: var(--color-blue-grey500);
+}
+
+.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
+  transform: rotate(180deg);
+}
+
+.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
+  transform: rotate(180deg);
+  transform-origin: 50%;
+}
+
+.rdp-dropdowns {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rdp-dropdown-gap);
+  color: var(--color-blue-grey500);
+  font-weight: 700;
+}
+
+.rdp-dropdown {
+  z-index: 2;
+
+  /* Reset */
+  opacity: 0;
+  appearance: none;
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+  border: none;
+  line-height: inherit;
+}
+
+.rdp-dropdown_root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.rdp-years_dropdown {
+  &:focus-visible + .rdp-caption_label .rdp-chevron {
+    @include mixins.focusVisibleOutline($selectors: null, $outlineOffset: 0);
+  }
+}
+
+.rdp-years_dropdown + .rdp-caption_label .rdp-chevron {
+  margin-left: 0.25rem;
+  width: 0.875rem;
+}
+
+.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
+  opacity: var(--rdp-disabled-opacity);
+}
+
+.rdp-month_caption {
+  display: flex;
+  align-content: center;
+  height: var(--rdp-nav-height);
+}
+
+.rdp-months {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rdp-months-gap);
+  max-width: fit-content;
+}
+
+.rdp-month_grid {
+  border-collapse: collapse;
+}
+
+.rdp-nav {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+
+  display: flex;
+  align-items: center;
+
+  height: var(--rdp-nav-height);
+}
+
+.rdp-weekday {
+  padding: var(--rdp-weekday-padding);
+  text-align: var(--rdp-weekday-text-align);
+  font-size: 0.625rem;
+  color: var(--color-blue-grey400);
+  height: var(--rdp-day-height);
+  width: var(--rdp-day-width);
+  font-weight: 400;
+}
+
+.rdp-week_number {
+  opacity: var(--rdp-week_number-opacity);
+  height: var(--rdp-week_number-height);
+  width: var(--rdp-week_number-width);
+  border: var(--rdp-week_number-border);
+  border-radius: var(--rdp-week_number-border-radius);
+  text-align: var(--rdp-weeknumber-text-align);
+}
+
+.rdp-today:not(.rdp-outside) {
+  color: var(--color-primary);
+}
+
+.rdp-selected {
+  color: white;
+  background-color: var(--color-primary);
+  border-radius: var(--button-border-radius);
+}
+
+.rdp-selected.rdp-outside.rdp-range_middle .rdp-day_button {
+  color: var(--color-blue-grey400);
+}
+
+.rdp-selected .rdp-day_button {
+  border: var(--button-border-radius) solid var(--color-primary);
+}
+
+.rdp-outside {
+  color: var(--color-blue-grey400);
+}
+
+.rdp-disabled {
+  opacity: var(--rdp-disabled-opacity);
+}
+
+.rdp-hidden {
+  visibility: hidden;
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-range_start {
+  background: var(--rdp-range_start-background);
+}
+
+.rdp-range_start .rdp-day_button {
+  background-color: var(--rdp-range_start-date-background-color);
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-range_middle {
+  background-color: var(--rdp-range_middle-background-color);
+  border-radius: 0;
+
+  &:focus-visible {
+    border-radius: var(--focus-border-radius);
+  }
+}
+
+.rdp-range_middle .rdp-day_button {
+  border-color: transparent;
+  color: var(--rdp-range_middle-color);
+}
+
+.rdp-range_end {
+  background: var(--rdp-range_end-background);
+  color: var(--rdp-range_end-color);
+}
+
+.rdp-range_end .rdp-day_button {
+  color: var(--rdp-range_start-color);
+  background-color: var(--rdp-range_end-date-background-color);
+}
+
+.rdp-range_start.rdp-range_end {
+  background: revert;
+}
+
+.rdp-focusable {
+  cursor: pointer;
+}

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,83 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ComponentPropsWithoutRef, Fragment, useEffect, useState } from "react";
+import { ClassNames, DateRange, DayPicker, Locale, PropsBase } from "react-day-picker";
+import classes from "./DatePicker.module.scss";
+import * as locales from "date-fns/locale";
+
+export interface Props extends ComponentPropsWithoutRef<any> {
+  onSelect: (date: Date | DateRange | undefined) => void;
+  mode: "single" | "range";
+  value: Date | DateRange | undefined;
+  required?: boolean;
+  locale?: keyof typeof locales;
+}
+
+export const DatePicker = ({ onSelect, value, required, mode, locale, ...rest }: Props) => {
+  const [dayPickerLocale, setDayPickerLocale] = useState<Locale>(locales.enGB);
+
+  useEffect(() => {
+    try {
+      const selectedLocale = locales[locale!];
+      setDayPickerLocale(selectedLocale);
+    } catch (e) {
+      setDayPickerLocale(locales.enGB);
+    }
+  }, [locale]);
+
+  const getCustomClassNamesMapping = (): Partial<ClassNames> => {
+    const CLASSNAME_PREFIX = "rdp-";
+    const dayPickerClassNames: Partial<ClassNames> = {};
+
+    Object.keys(classes).forEach(key => {
+      const classKey = key.replace(CLASSNAME_PREFIX, "") as keyof ClassNames;
+      dayPickerClassNames[classKey] = classes[key];
+    });
+
+    return dayPickerClassNames;
+  };
+
+  const commonProps: PropsBase = {
+    showOutsideDays: true,
+    captionLayout: "dropdown-years",
+    required: required,
+    classNames: getCustomClassNamesMapping(),
+    locale: dayPickerLocale
+  };
+
+  return (
+    <Fragment>
+      {mode === "single" ? (
+        <DayPicker
+          {...rest}
+          {...commonProps}
+          mode={mode}
+          onSelect={onSelect}
+          selected={value as Date | undefined}
+        ></DayPicker>
+      ) : (
+        <DayPicker
+          {...rest}
+          {...commonProps}
+          mode={mode}
+          onSelect={onSelect}
+          selected={value as DateRange | undefined}
+        />
+      )}
+    </Fragment>
+  );
+};

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

@@ -32,7 +32,6 @@
     font-weight: 400;
   }
 
-  @include transition(all, 0.2s, ease-in-out);
   &.error {
     span[data-icon-status],
     .file-upload-title {
@@ -70,6 +69,10 @@
   .file-upload-title-mandatory {
     color: var(--color-red500);
   }
+
+  & {
+    @include transition(all, 0.2s, ease-in-out);
+  }
 }
 
 .upload-button-wrapper {
@@ -89,6 +92,7 @@
       background-color: var(--color-primary50);
 
       @include transition(all, 0.2s, ease-in-out);
+
       &::before {
         content: "Drop here";
         text-align: center;

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

@@ -105,7 +105,6 @@
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
-  @include mixins.transition(all, 0.2s, ease-in-out);
   background-color: transparent;
   z-index: 1;
 
@@ -122,7 +121,10 @@
     width: auto;
   }
 
-  @include mixins.browserOutlineDisabled;
+  & {
+    @include mixins.transition(all, 0.2s, ease-in-out);
+    @include mixins.browserOutlineDisabled;
+  }
 }
 
 @include mixins.outline;
@@ -140,9 +142,10 @@
 
 .input-wrapper [data-prefix],
 .input-wrapper [data-suffix] {
-  @include mixins.transition(all, 0.2s, ease-in-out);
   display: block;
   z-index: 1;
+
+  @include mixins.transition(all, 0.2s, ease-in-out);
 }
 
 @media only screen and (min-width: 30em) {

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

@@ -22,12 +22,13 @@ $listItemHeight: 2.5rem;
 .select {
   position: relative;
   box-sizing: border-box;
-  @include mixins.transition(all, 0.2s, ease-in-out);
   border: 0;
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
   font-size: var(--form-control-font-size);
 
+  @include mixins.transition(all, 0.2s, ease-in-out);
+
   [data-display] {
     color: var(--color-default);
     font-family: var(--font-family);
@@ -66,6 +67,7 @@ $listItemHeight: 2.5rem;
     border-width: var(--input-border-width);
     border-radius: var(--input-border-radius);
     font-size: var(--form-control-font-size);
+
     @include mixins.transition(all, 0.2s, ease-in-out);
 
     &:focus {
@@ -149,7 +151,6 @@ $listItemHeight: 2.5rem;
         outline: none;
 
         &::before {
-          @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
           content: "";
           position: absolute;
           top: 0;
@@ -158,6 +159,8 @@ $listItemHeight: 2.5rem;
           width: calc(100% - 0.25rem);
           opacity: 1;
           z-index: calc(variables.$popover-z-index + 1);
+
+          @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
         }
       }
 

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

@@ -22,12 +22,13 @@ $listItemHeight: 2.5rem;
 .select {
   position: relative;
   box-sizing: border-box;
-  @include mixins.transition(all, 0.2s, ease-in-out);
   border: 0;
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
   font-size: var(--form-control-font-size);
 
+  @include mixins.transition(all, 0.2s, ease-in-out);
+
   [data-display] {
     color: var(--color-default);
     font-family: var(--font-family);
@@ -128,7 +129,6 @@ $listItemHeight: 2.5rem;
         outline: none;
 
         &::before {
-          @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
           content: "";
           position: absolute;
           top: 0;
@@ -137,6 +137,8 @@ $listItemHeight: 2.5rem;
           width: calc(100% - 0.25rem);
           opacity: 1;
           z-index: calc(variables.$popover-z-index + 1);
+
+          @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
         }
       }
 

package/src/components/Form/Textarea/Textarea.module.scss

@@ -56,7 +56,6 @@
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
-  @include mixins.transition(all, 0.2s, ease-in-out);
   font-family: var(--font-family);
   font-size: var(--form-control-font-size);
   color: var(--color-blue-grey900);
@@ -74,11 +73,14 @@
     color: var(--greyed-out);
   }
 
-  @include mixins.browserOutlineDisabled();
+  & {
+    @include mixins.transition(all, 0.2s, ease-in-out);
+    @include mixins.browserOutlineDisabled();
+  }
 }
 
-@include mixins.outline();
-
 .error {
   border-color: var(--error);
 }
+
+@include mixins.outline();

package/src/components/Form/Toggle/Toggle.module.scss

@@ -134,10 +134,11 @@ $borderRadius: 2.5rem;
   background-color: var(--toggle-background-color);
   border-radius: $borderRadius;
   position: relative;
-  @include mixins.transition(background-color, 0.2s, ease-in-out);
   display: block;
   pointer-events: none;
 
+  @include mixins.transition(background-color, 0.2s, ease-in-out);
+
   &:before {
     content: "";
     width: 1rem;

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

@@ -16,6 +16,8 @@
 
 @use "../../../../mixins.module.scss";
 
+@include mixins.searchInputPointer("search", ".input-wrapper");
+
 input {
   &.floating-label {
     padding-top: 1rem;
@@ -28,12 +30,13 @@ input {
 
 .input-wrapper {
   [data-icon]:before {
-    @include mixins.transition(all, 0.2s, ease-in-out);
     transform: translateY(0px);
     font-size: 1.125rem;
     display: flex;
     align-items: center;
     justify-content: center;
+
+    @include mixins.transition(all, 0.2s, ease-in-out);
   }
 
   [data-prefix],

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

@@ -19,7 +19,6 @@
 .textarea-wrapper {
   &:after {
     content: "";
-    @include mixins.transition(all, 0.15s, ease-in-out);
     display: block;
     width: calc(95%);
     background-color: var(--light);
@@ -28,6 +27,8 @@
     left: 1px;
     top: 1px;
     border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
+
+    @include mixins.transition(all, 0.15s, ease-in-out);
   }
 
   &.disabled:after {

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

@@ -28,8 +28,8 @@
     top: 1.3125rem;
     left: variables.$form-element-horizontal-padding-mobile;
     transform-origin: left top;
-    @include mixins.transition(all, 0.2s, ease-in-out);
     pointer-events: none;
+    @include mixins.transition(all, 0.2s, ease-in-out);
 
     &.error {
       color: var(--error);

package/src/components/Link/Link.module.scss

@@ -88,10 +88,10 @@
 }
 
 .button {
-  @include mixins.buttonBase("link");
-
   text-decoration: none;
 
+  @include mixins.buttonBase("link");
+
   &.fill {
     @include mixins.button("fill", "link");
   }

package/src/components/Notifications/Alert/AlertContainer/AlertContainer.module.scss

@@ -15,6 +15,7 @@
  */
 @use "../../../../mixins.module.scss";
 @use "../../../../variables.scss";
+@use "../alertVariables.scss";
 
 .alerts {
   position: fixed;
@@ -50,7 +51,7 @@
     width: initial;
 
     &.center {
-      left: calc(50% - 18.75rem);
+      left: calc(50% - (alertVariables.$alert-item-width / 2));
     }
   }
 }

package/src/components/Notifications/Alert/AlertItem/AlertItem.module.scss

@@ -15,6 +15,7 @@
  */
 
 @use "../../../../mixins.module.scss";
+@use "../alertVariables.scss";
 
 .alert {
   padding: 1rem 0.875rem;
@@ -224,6 +225,7 @@
     font-size: 0.875rem;
     line-height: 1.25rem;
     margin-bottom: 0;
+    word-break: break-word;
   }
 
   .actions {
@@ -272,6 +274,6 @@
 @media only screen and (min-width: 37.5em) {
   .alert {
     width: min-content;
-    min-width: 25rem;
+    min-width: alertVariables.$alert-item-width;
   }
 }