@onewelcome/react-lib-components 0.1.12-alpha → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.1.12-alpha",
+  "version": "0.2.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -47,7 +47,7 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.0",
+    "@babel/core": "^7.18.6",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-docs": "^6.5.9",
@@ -59,7 +59,7 @@
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.9",
     "@storybook/theming": "^6.5.9",
-    "@testing-library/dom": "^8.13.0",
+    "@testing-library/dom": "^8.16.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^7.0.2",
@@ -68,15 +68,15 @@
     "@tsconfig/recommended": "^1.0.1",
     "@types/color-convert": "^2.0.0",
     "@types/mdx": "^2.0.2",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^17.0.47",
+    "@types/react-dom": "^17.0.17",
     "babel-loader": "^8.2.5",
-    "dts-cli": "^1.5.1",
+    "dts-cli": "^1.5.2",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest-junit": "^13.2.0",
-    "lint-staged": "^12.4.1",
+    "lint-staged": "^13.0.3",
     "npm-run-all": "^4.1.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -84,9 +84,9 @@
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "rollup-plugin-styles": "^4.0.0",
-    "sass": "^1.52.0",
+    "sass": "^1.53.0",
     "size-limit": "^7.0.8",
     "tslib": "^2.4.0",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.4"
   }
 }

package/src/DataGrid/DataGridActions/DataGridColumnsToggle.module.scss

@@ -2,6 +2,7 @@
   background-color: var(--modal-background-color);
   z-index: 1;
   min-width: 17.5rem;
+  font-family: var(--font-family);
 }
 
 .backdrop {

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

@@ -2,7 +2,9 @@
   position: relative;
   display: flex;
   align-items: center;
+  height: calc(4rem - (2 * var(--input-border-width)));
   padding: 0 1.25rem;
+
   background-color: var(--input-background-color);
   border-color: var(--input-border-color);
   border-style: var(--input-border-style);
@@ -10,8 +12,12 @@
   border-radius: var(--input-border-radius);
   transition: all 0.2s ease-in-out;
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled):not(.error) {
+    height: calc(4rem - (2 * var(--input-border-width)));
+    padding: 0 1.25rem;
+
     border-color: var(--default);
+    border-width: var(--input-border-width);
   }
 
   &.disabled,
@@ -26,12 +32,18 @@
   }
 
   &.focus {
+    height: calc(4rem - (2 * var(--input-border-width-focus)));
+    padding: 0 calc(1.25rem - var(--input-border-width));
+    border-width: var(--input-border-width-focus);
+  }
+
+  &.focus:not(.error) {
     border-color: var(--color-primary);
   }
 }
 
 .input {
-  height: 4rem;
+  height: calc(4rem - (2 * var(--input-border-width)));
   border: 0;
   color: var(--greyed-out);
   font-size: var(--font-size);
@@ -41,6 +53,7 @@
   padding: 0;
 
   &:focus:not(:disabled) {
+    height: calc(4rem - (2 * var(--input-border-width-focus)));
     outline: none;
     border-color: var(--color-primary);
   }

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

@@ -3,10 +3,6 @@
 $listItemHeight: 2.125rem;
 
 .select {
-  border-color: var(--input-border-color);
-  border-style: var(--input-border-style);
-  border-width: var(--input-border-width);
-  border-radius: var(--input-border-radius);
   position: relative;
   box-sizing: border-box;
   transition: all 0.2s ease-in-out;
@@ -28,29 +24,45 @@ $listItemHeight: 2.125rem;
   }
 
   &:not(.expanded) {
-    button:focus-visible {
-      outline: 1px solid var(--color-primary);
+    button:focus-visible:not(.error) {
+      border: var(--input-border-width-focus) solid var(--color-primary);
     }
   }
 
-  &:hover:not(.disabled):not(.expanded) {
-    border-color: var(--default);
+  &:hover:not(.disabled):not(.expanded):not(.error) {
+    button {
+      border-color: var(--default);
+      border-width: var(--input-border-width);
+    }
   }
 
   .custom-select {
+    position: relative;
     width: 100%;
-    min-height: 4rem;
-    background-color: transparent;
+    min-height: calc(4rem - (2 * var(--input-border-width)));
     border: 0;
-    cursor: pointer;
     padding: 0 1.25rem;
-    position: relative;
-    font-size: var(--font-size);
+    background-color: transparent;
+    border-color: var(--input-border-color);
+    border-style: var(--input-border-style);
+    border-width: var(--input-border-width);
     border-radius: var(--input-border-radius);
+    font-size: var(--font-size);
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
 
     &:focus-visible {
       outline: 0;
     }
+
+    &.error {
+      border-color: var(--error);
+      color: var(--error);
+    }
+
+    &.error:focus-visible {
+      border-width: var(--input-border-width-focus);
+    }
   }
 
   .list-wrapper {
@@ -166,11 +178,6 @@ $listItemHeight: 2.125rem;
   color: var(--greyed-out);
 }
 
-.error {
-  border-color: var(--error);
-  color: var(--error);
-}
-
 .select-search-wrapper + ul {
   border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
 }

package/src/Form/Select/Select.tsx

@@ -403,6 +403,7 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
             }}
             type="button"
             name={name}
+            className={`${classes['custom-select']} ${additionalClasses.join(' ')} `}
             disabled={disabled}
             aria-disabled={disabled}
             aria-invalid={error}
@@ -410,7 +411,6 @@ export const Select = React.forwardRef<HTMLSelectElement, Props>(
             aria-haspopup="listbox"
             aria-labelledby={labeledBy}
             aria-describedby={describedBy}
-            className={classes['custom-select']}
           >
             <div data-display className={classes['selected']}>
               {!value && placeholder && (

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

@@ -26,17 +26,18 @@
     cursor: not-allowed;
   }
 
-  &:active:not(:disabled) {
-    border-color: var(--color-primary);
+  &:focus:not(:disabled) {
+    outline: none;
+    border-width: var(--input-border-width-focus);
   }
 
-  &:hover:not(:disabled) {
-    border-color: var(--default);
+  &:focus:not(:disabled):not(.error) {
+    border-color: var(--color-primary);
   }
 
-  &:focus:not(:disabled) {
-    border-color: var(--color-primary);
-    outline: none;
+  &:hover:not(:disabled):not(.error) {
+    border-color: var(--default);
+    border-width: var(--input-border-width);
   }
 }
 

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

@@ -133,7 +133,8 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
             e.target.placeholder ||
             inputProps?.placeholder?.length ||
             type === 'datetime-local' ||
-            type === 'time'
+            type === 'time' ||
+            type === 'date'
               ? setFloatingLabelActive(true)
               : setFloatingLabelActive(false);
           }}

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

@@ -6,6 +6,9 @@
   &.focus {
     color: var(--color-primary);
   }
+  &.error {
+    color: var(--error);
+  }
 }
 
 .textarea {
@@ -15,7 +18,7 @@
     border-color: var(--color-primary);
   }
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled):not(.error) {
     border-color: var(--default);
   }
 

package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.tsx

@@ -65,7 +65,7 @@ export const TextareaWrapper = React.forwardRef<HTMLDivElement, Props>(
         disabled={disabled}
         labelProps={{
           id: labelId,
-          className: `${classes['textarea-label']} ${hasFocus ? classes['focus'] : ''}`,
+          className: `${classes['textarea-label']} ${optionalClasses.join('')}`,
         }}
         name={name}
         label={label}
@@ -108,7 +108,7 @@ export const TextareaWrapper = React.forwardRef<HTMLDivElement, Props>(
             onMouseLeave && onMouseLeave(e);
             setHover(false);
           }}
-          className={classes['textarea']}
+          className={`${classes['textarea']} ${error ? classes['error'] : ''}`}
           wrapperProps={{
             className: `${classes['textarea-wrapper']}} ${optionalClasses.join(' ')}`,
           }}

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -30,23 +30,23 @@
   .headline {
     display: flex;
     color: var(--snackbar-text-color);
+  }
 
-    .close-btn {
-      color: var(--snackbar-text-color);
+  #close-btn {
+    color: var(--snackbar-text-color);
 
-      &:hover,
-      &:focus {
-        border-color: var(--snackbar-text-color);
-      }
+    &:hover,
+    &:focus {
+      border-color: var(--snackbar-text-color);
+    }
 
-      &:active {
-        border-color: transparent;
+    &:active {
+      border-color: transparent;
 
-        &:after {
-          top: 0;
-          height: 100%;
-          background-color: var(--snackbar-text-color);
-        }
+      &:after {
+        top: 0;
+        height: 100%;
+        background-color: var(--snackbar-text-color);
       }
     }
   }

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -85,8 +85,8 @@ export const SnackbarItem = ({
             {title}
           </Typography>
           <IconButton
+            id={classes['close-btn']}
             onClick={() => startAnimation()}
-            className={classes['close-btn']}
             title={closeButtonTitle}
           >
             <Icon icon={Icons.Times} color={textColor} />

package/src/Popover/Popover.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentPropsWithRef, ReactNode, RefObject, useEffect, useRef } from 'react';
-import { usePosition, Offset, Placement } from '../hooks/usePosition';
+import { Offset, Placement, usePosition } from '../hooks/usePosition';
 import classes from './Popover.module.scss';
 
 export interface Props extends ComponentPropsWithRef<'div'> {

package/src/Typography/Typography.tsx

@@ -2,7 +2,16 @@ import React, { ComponentPropsWithRef, ReactNode } from 'react';
 import classes from './Typography.module.scss';
 import { Spacing, useSpacing } from '../hooks/useSpacing';
 
-const validVariants = ['h1', 'h2', 'h3', 'h4', 'body', 'body-bold', 'sub-text', 'code'] as const;
+export const validVariants = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'body',
+  'body-bold',
+  'sub-text',
+  'code',
+] as const;
 export type Variant = typeof validVariants[number];
 
 type Tags =
@@ -24,7 +33,6 @@ type Tags =
   | 'ins'
   | 'blockquote';
 
-/** I couldn't find anything on the internet that indicated that ComponentPropsWithRef can take multiple tags. Since the TagName can be many different things I have to use any here. Using a mix of tags (like the Tags type) will throw an error. */
 export interface Props extends ComponentPropsWithRef<any> {
   children: ReactNode;
   variant: Variant;

package/src/_BaseStyling_/BaseStyling.tsx

@@ -16,6 +16,7 @@ interface CSSProperties {
   inputBorderColor?: string;
   inputBorderRadius?: string;
   inputBorderWidth?: string;
+  inputBorderWidthFocus?: string;
   inputBorderStyle?: string;
   inputBackgroundColor?: string;
   modalShadowColor?: string;
@@ -74,6 +75,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     inputBorderColor: '#e9e9eb',
     inputBorderRadius: '8px',
     inputBorderWidth: '1px',
+    inputBorderWidthFocus: '2px',
     inputBorderStyle: 'solid',
     inputBackgroundColor: '#fff',
     modalShadowColor: 'rgba(0, 0, 0, 0.16)',