@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

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

@@ -0,0 +1,360 @@
+/*
+ * 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 "../../mixins.module";
+
+.rdp-root {
+  --rdp-day-height: calc(2 * var(--font-size));
+  --rdp-day-width: calc(2 * var(--font-size));
+
+  --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: var(--font-size-sub);
+  --rdp-nav_button-width: var(--font-size-sub);
+  --rdp-nav-height: 2.75rem;
+
+  --rdp-range_middle-background-color: var(--color-blue-grey100);
+  --rdp-range_middle-color: black;
+
+  --rdp-range_start-color: var(--color-blue-grey25);
+  --rdp-range_start-background: var(--color-blue-grey500);
+  --rdp-range_start-date-background-color: var(--color-blue-grey500);
+
+  --rdp-range_end-background: var(--color-blue-grey500);
+  --rdp-range_end-color: var(--color-blue-grey25);
+  --rdp-range_end-date-background-color: var(--color-blue-grey500);
+
+  --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($fontSize: var(--font-size-sub), $lineHeight: var(--font-size));
+}
+
+.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;
+
+  svg {
+    transform: scale(var(--font-size));
+  }
+}
+
+.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: var(--font-size-small);
+  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) {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 67%;
+    left: calc(50% - 0.125rem);
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 0.5rem;
+    background-color: var(--color-blue-grey900);
+  }
+
+  &.rdp-range_end {
+    &::after {
+      background-color: var(--color-blue-grey25);
+    }
+  }
+
+  &.rdp-range_start {
+    &::after {
+      background-color: var(--color-blue-grey25);
+    }
+  }
+}
+
+.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-blue-grey500);
+}
+
+.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,98 @@
+/*
+ * 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,
+  CustomComponents
+} from "react-day-picker";
+import classes from "./DatePicker.module.scss";
+import * as locales from "date-fns/locale";
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+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;
+  numberOfMonths?: number;
+  components?: Partial<CustomComponents>;
+  disabled?: boolean;
+}
+
+export const DatePicker = ({ onSelect, value, required, mode, locale, ...rest }: Props) => {
+  const [dayPickerLocale, setDayPickerLocale] = useState<Locale>(locales.enGB);
+  //we have to specify the endMonth value. Otherwise, the date range picker doesn't let us navigate between years
+  const endMonth = new Date(3000, 12);
+
+  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}
+          endMonth={endMonth}
+          onSelect={onSelect}
+          selected={value as Date | undefined}
+        ></DayPicker>
+      ) : (
+        <DayPicker
+          {...rest}
+          {...commonProps}
+          mode={mode}
+          endMonth={endMonth}
+          onSelect={onSelect}
+          selected={value as DateRange | undefined}
+        />
+      )}
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,221 @@
+/*!
+ * 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.
+ */
+@use "../../../mixins.module.scss";
+@use "../../../functions" as *;
+
+.checkbox-wrapper {
+  position: relative;
+
+  + .checkbox-wrapper {
+    margin-top: 0.75rem;
+  }
+}
+
+.checkbox-container {
+  display: flex;
+
+  label {
+    display: inline-block;
+    margin-left: relativeToBaseFontSize(0.5);
+    user-select: none;
+    font-size: var(--font-size-form-label);
+    font-family: var(--font-family);
+    margin-top: 0.1rem;
+  }
+}
+
+.checkbox-list {
+  padding: 0;
+  margin: 1rem 0 0 1.75rem;
+  list-style: none;
+
+  li + li {
+    margin-top: 0.75rem;
+  }
+}
+
+.native-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  margin: 0;
+  width: var(--font-size-big);
+  height: var(--font-size-big);
+  z-index: 2;
+
+  &:checked:not(.disabled) + * {
+    color: var(--checkbox-checked-color);
+  }
+
+  &:focus-visible {
+    + * {
+      border-radius: 2px;
+      outline: 2px solid var(--color-focus);
+      outline-offset: 2px;
+    }
+  }
+
+  &:active:not(.disabled) + span {
+    background-color: var(--disabled);
+  }
+
+  &.error:focus-visible {
+    + * {
+      outline-color: var(--color-error);
+    }
+  }
+
+  & + span[data-icon="true"]:before {
+    display: block;
+    width: var(--font-size-big);
+    height: var(--font-size-big);
+  }
+
+  &:hover + .square:not(.disabled) {
+    background-color: var(--checkbox-unchecked-hover-color);
+  }
+
+  &:active + .square:not(.disabled) {
+    background-color: var(--checkbox-unchecked-pressed-color);
+  }
+
+  &:hover + .checkmark:not(.disabled),
+  &:active + .indeterminate:not(.disabled) {
+    color: var(--checkbox-checked-hover-color);
+  }
+
+  &:active + .checkmark:not(.disabled),
+  &:active + .indeterminate:not(.disabled) {
+    color: var(--checkbox-checked-pressed-color);
+  }
+}
+
+.error-message {
+  margin-top: 0.25rem;
+  margin-left: relativeToBaseFontSize(1.75);
+  font-size: var(--font-size-sub);
+}
+
+.input {
+  font-size: var(--font-size-big);
+  width: var(--font-size-big);
+  height: var(--font-size-big);
+  z-index: 1;
+
+  color: var(--checkbox-unchecked-color);
+}
+
+.disabled {
+  cursor: not-allowed;
+
+  & + span {
+    color: var(--disabled);
+    pointer-events: none;
+  }
+
+  & + label {
+    color: var(--greyed-out);
+  }
+
+  & + .checkmark,
+  & + .indeterminate {
+    color: var(--disabled);
+    background-color: var(--greyed-out);
+    border-radius: 2px;
+    outline: 1px var(--disabled) solid;
+    outline-offset: -1px;
+  }
+}
+
+.indeterminate {
+  color: var(--checkbox-checked-color);
+}
+
+[data-readonlyview="true"] .checkbox-wrapper {
+  & label {
+    border-color: var(--read-only-border-color);
+    color: var(--read-only-text-color);
+    background-color: transparent;
+    user-select: text;
+  }
+
+  & span {
+    color: var(--color-blue-grey100);
+
+    &.checkmark {
+      background-color: var(--color-blue-grey900);
+      color: var(--color-white);
+      border-radius: 2px;
+      &:before {
+        outline: 1px solid var(--read-only-border-color);
+        border-radius: 2px;
+        outline-offset: -1px;
+      }
+    }
+  }
+
+  input[type="checkbox"] {
+    pointer-events: none;
+  }
+}
+
+.checkbox-container input[type="checkbox"] {
+  &[data-readonlyview="true"] {
+    & ~ span {
+      &:before {
+        color: var(--color-blue-grey100);
+      }
+
+      &.checkmark {
+        background-color: var(--color-blue-grey900);
+        color: var(--color-white);
+        border: 1px solid var(--read-only-border-color);
+        border-radius: 3px;
+        &:before {
+          color: var(--color-white);
+        }
+      }
+    }
+
+    & ~ span[data-icon="true"] {
+      color: var(--color-blue-grey100);
+
+      &.checkmark {
+        background-color: var(--color-blue-grey900);
+        color: var(--color-white);
+        border: 0;
+        &:before {
+          outline: 1px solid var(--read-only-border-color);
+          outline-offset: -1px;
+          border-radius: 2px;
+        }
+      }
+    }
+
+    & ~ label {
+      pointer-events: none;
+      user-select: text;
+    }
+  }
+}
+
+.required {
+  &:after {
+    content: " *";
+    color: var(--error);
+  }
+}