@onewelcome/react-lib-components 0.2.1 → 0.2.2

package/src/hooks/useWrapper.test.ts

@@ -1,9 +1,9 @@
-import { renderHook, act } from '@testing-library/react-hooks';
-import { useWrapper } from './useWrapper';
+import { renderHook, act } from "@testing-library/react-hooks";
+import { useWrapper } from "./useWrapper";
 
-describe('it should give the correct results based on no value, no placeholder and default text input', () => {
-  it('should execute correctly', () => {
-    const { result } = renderHook(() => useWrapper('', undefined, 'text'));
+describe("it should give the correct results based on no value, no placeholder and default text input", () => {
+  it("should execute correctly", () => {
+    const { result } = renderHook(() => useWrapper("", undefined, "text"));
 
     expect(result.current.helperId).toHaveLength(20);
     expect(result.current.errorId).toHaveLength(20);
@@ -30,19 +30,19 @@ describe('it should give the correct results based on no value, no placeholder a
   });
 });
 
-describe('it should have floating label active because of the value', () => {
-  it('should have active floating label state', () => {
-    const { result } = renderHook(() => useWrapper('value', undefined, 'text'));
+describe("it should have floating label active because of the value", () => {
+  it("should have active floating label state", () => {
+    const { result } = renderHook(() => useWrapper("value", undefined, "text"));
 
     expect(result.current.floatingLabelActive).toBe(true);
   });
-  it('should have floating label active because input type is datetime-local', () => {
-    const { result } = renderHook(() => useWrapper('', undefined, 'datetime-local'));
+  it("should have floating label active because input type is datetime-local", () => {
+    const { result } = renderHook(() => useWrapper("", undefined, "datetime-local"));
 
     expect(result.current.floatingLabelActive).toBe(true);
   });
-  it('should have floating label active because of placeholder', () => {
-    const { result } = renderHook(() => useWrapper('', 'placeholder', 'text'));
+  it("should have floating label active because of placeholder", () => {
+    const { result } = renderHook(() => useWrapper("", "placeholder", "text"));
 
     expect(result.current.floatingLabelActive).toBe(true);
   });

package/src/hooks/useWrapper.ts

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
-import { generateID } from '../util/helper';
-import { Type as InputTypes } from '../Form/Input/Input';
+import { useEffect, useState } from "react";
+import { generateID } from "../util/helper";
+import { Type as InputTypes } from "../Form/Input/Input";
 
 export const useWrapper = (value?: string, placeholder?: string, type?: InputTypes) => {
   const [helperId] = useState(generateID(20));
@@ -13,9 +13,9 @@ export const useWrapper = (value?: string, placeholder?: string, type?: InputTyp
     if (
       (value?.length && value.length > 0) ||
       placeholder ||
-      type === 'datetime-local' ||
-      type === 'time' ||
-      type === 'date'
+      type === "datetime-local" ||
+      type === "time" ||
+      type === "date"
     ) {
       setFloatingLabelActive(true);
     }
@@ -27,9 +27,9 @@ export const useWrapper = (value?: string, placeholder?: string, type?: InputTyp
     } else if (
       !placeholder &&
       !hasFocus &&
-      type !== 'datetime-local' &&
-      type !== 'time' &&
-      type !== 'date'
+      type !== "datetime-local" &&
+      type !== "time" &&
+      type !== "date"
     ) {
       setFloatingLabelActive(false);
     }
@@ -42,6 +42,6 @@ export const useWrapper = (value?: string, placeholder?: string, type?: InputTyp
     floatingLabelActive,
     setFloatingLabelActive,
     hasFocus,
-    setHasFocus,
+    setHasFocus
   };
 };

package/src/index.ts

@@ -1,107 +1,107 @@
 /* Components */
-export { BaseStyling } from './_BaseStyling_/BaseStyling';
-export { Button, Props as ButtonProps } from './Button/Button';
-export { Breadcrumbs, Props as BreadcrumbsProps } from './Breadcrumbs/Breadcrumbs';
-export { ContextMenu, Props as ContextMenuProps } from './ContextMenu/ContextMenu';
-export { ContextMenuItem, Props as ContextMenuItemProps } from './ContextMenu/ContextMenuItem';
-export { Link, Props as LinkProps, AnchorType } from './Link/Link';
-export { Icon, Icons, Props as IconProps } from './Icon/Icon';
-export { IconButton, Props as IconButtonProps } from './Button/IconButton';
-export { Tab, Props as TabProps } from './Tabs/Tab';
-export { Tabs, Props as TabsProps } from './Tabs/Tabs';
-export { TextEllipsis, Props as TextEllipsisProps } from './TextEllipsis/TextEllipsis';
-export { Tile, Props as TileProps } from './Tiles/Tile';
-export { Tiles, Props as TilesProps } from './Tiles/Tiles';
-export { Tooltip, Props as TooltipProps } from './Tooltip/Tooltip';
-export { Typography, Variant, Props as TypographyProps } from './Typography/Typography';
-export { Skeleton, Props as SkeletonProps } from './Skeleton/Skeleton';
-export { StatusIndicator, Props as StatusIndicatorProps } from './StatusIndicator/StatusIndicator';
+export { BaseStyling } from "./_BaseStyling_/BaseStyling";
+export { Button, Props as ButtonProps } from "./Button/Button";
+export { Breadcrumbs, Props as BreadcrumbsProps } from "./Breadcrumbs/Breadcrumbs";
+export { ContextMenu, Props as ContextMenuProps } from "./ContextMenu/ContextMenu";
+export { ContextMenuItem, Props as ContextMenuItemProps } from "./ContextMenu/ContextMenuItem";
+export { Link, Props as LinkProps, AnchorType } from "./Link/Link";
+export { Icon, Icons, Props as IconProps } from "./Icon/Icon";
+export { IconButton, Props as IconButtonProps } from "./Button/IconButton";
+export { Tab, Props as TabProps } from "./Tabs/Tab";
+export { Tabs, Props as TabsProps } from "./Tabs/Tabs";
+export { TextEllipsis, Props as TextEllipsisProps } from "./TextEllipsis/TextEllipsis";
+export { Tile, Props as TileProps } from "./Tiles/Tile";
+export { Tiles, Props as TilesProps } from "./Tiles/Tiles";
+export { Tooltip, Props as TooltipProps } from "./Tooltip/Tooltip";
+export { Typography, Variant, Props as TypographyProps } from "./Typography/Typography";
+export { Skeleton, Props as SkeletonProps } from "./Skeleton/Skeleton";
+export { StatusIndicator, Props as StatusIndicatorProps } from "./StatusIndicator/StatusIndicator";
 export {
   Pagination,
   Props as PaginationProps,
   PageChangeLabels,
   PaginationTranslations,
-  PageSize,
-} from './Pagination/Pagination';
+  PageSize
+} from "./Pagination/Pagination";
 
 /* Utils */
-export { useRepeater } from './hooks/useRepeater';
-export { generateID } from './util/helper';
+export { useRepeater } from "./hooks/useRepeater";
+export { generateID } from "./util/helper";
 
 /* Notifications */
-export { Modal, Props as ModalProps } from './Notifications/Modal/Modal';
-export { useSnackbar } from './Notifications/Snackbar/useSnackbar';
+export { Modal, Props as ModalProps } from "./Notifications/Modal/Modal";
+export { useSnackbar } from "./Notifications/Snackbar/useSnackbar";
 export {
   Dialog,
   Props as DialogProps,
-  Action as DialogAction,
-} from './Notifications/Dialog/Dialog';
+  Action as DialogAction
+} from "./Notifications/Dialog/Dialog";
 export {
   DiscardChangesModal,
-  Props as DiscardChangesModalProps,
-} from './Notifications/DiscardChangesModal/DiscardChangesModal';
+  Props as DiscardChangesModalProps
+} from "./Notifications/DiscardChangesModal/DiscardChangesModal";
 export {
   ModalActions,
-  Props as ModalActionsProps,
-} from './Notifications/Modal/ModalActions/ModalActions';
+  Props as ModalActionsProps
+} from "./Notifications/Modal/ModalActions/ModalActions";
 export {
   ModalContent,
-  Props as ModalContentProps,
-} from './Notifications/Modal/ModalContent/ModalContent';
+  Props as ModalContentProps
+} from "./Notifications/Modal/ModalContent/ModalContent";
 export {
   ModalHeader,
-  Props as ModalHeaderProps,
-} from './Notifications/Modal/ModalHeader/ModalHeader';
+  Props as ModalHeaderProps
+} from "./Notifications/Modal/ModalHeader/ModalHeader";
 export {
   SlideInModal,
-  Props as SlideInModalProps,
-} from './Notifications/SlideInModal/SlideInModal';
+  Props as SlideInModalProps
+} from "./Notifications/SlideInModal/SlideInModal";
 export {
   SnackbarProvider,
-  Props as SnackbarProviderProps,
-} from './Notifications/Snackbar/SnackbarProvider/SnackbarProvider';
+  Props as SnackbarProviderProps
+} from "./Notifications/Snackbar/SnackbarProvider/SnackbarProvider";
 
 /** Form components */
-export { Checkbox, Props as CheckboxProps } from './Form/Checkbox/Checkbox';
-export { Fieldset, Props as FieldsetProps } from './Form/Fieldset/Fieldset';
-export { Form, Props as FormProps } from './Form/Form';
-export { FormControl, Props as FormControlProps } from './Form/FormControl/FormControl';
-export { FormGroup, Props as FormGroupProps } from './Form/FormGroup/FormGroup';
-export { FormHelperText, Props as FormHelperTextProps } from './Form/FormHelperText/FormHelperText';
-export { Input, Props as InputProps, Type as InputType } from './Form/Input/Input';
-export { InputWrapper, Props as InputWrapperProps } from './Form/Wrapper/InputWrapper/InputWrapper';
-export { Label, Props as LabelProps } from './Form/Label/Label';
-export { Option, Props as OptionProps } from './Form/Select/Option';
-export { Radio, Props as RadioProps } from './Form/Radio/Radio';
-export { RadioWrapper, Props as RadioWrapperProps } from './Form/Wrapper/RadioWrapper/RadioWrapper';
-export { Select, Props as SelectProps } from './Form/Select/Select';
-export { Textarea, Props as TextareaProps } from './Form/Textarea/Textarea';
-export { Toggle, Props as ToggleProps } from './Form/Toggle/Toggle';
+export { Checkbox, Props as CheckboxProps } from "./Form/Checkbox/Checkbox";
+export { Fieldset, Props as FieldsetProps } from "./Form/Fieldset/Fieldset";
+export { Form, Props as FormProps } from "./Form/Form";
+export { FormControl, Props as FormControlProps } from "./Form/FormControl/FormControl";
+export { FormGroup, Props as FormGroupProps } from "./Form/FormGroup/FormGroup";
+export { FormHelperText, Props as FormHelperTextProps } from "./Form/FormHelperText/FormHelperText";
+export { Input, Props as InputProps, Type as InputType } from "./Form/Input/Input";
+export { InputWrapper, Props as InputWrapperProps } from "./Form/Wrapper/InputWrapper/InputWrapper";
+export { Label, Props as LabelProps } from "./Form/Label/Label";
+export { Option, Props as OptionProps } from "./Form/Select/Option";
+export { Radio, Props as RadioProps } from "./Form/Radio/Radio";
+export { RadioWrapper, Props as RadioWrapperProps } from "./Form/Wrapper/RadioWrapper/RadioWrapper";
+export { Select, Props as SelectProps } from "./Form/Select/Select";
+export { Textarea, Props as TextareaProps } from "./Form/Textarea/Textarea";
+export { Toggle, Props as ToggleProps } from "./Form/Toggle/Toggle";
 export {
   CheckboxWrapper,
-  Props as CheckboxWrapperProps,
-} from './Form/Wrapper/CheckboxWrapper/CheckboxWrapper';
+  Props as CheckboxWrapperProps
+} from "./Form/Wrapper/CheckboxWrapper/CheckboxWrapper";
 export {
   TextareaWrapper,
-  Props as TextareaWrapperProps,
-} from './Form/Wrapper/TextareaWrapper/TextareaWrapper';
+  Props as TextareaWrapperProps
+} from "./Form/Wrapper/TextareaWrapper/TextareaWrapper";
 export {
   SelectWrapper,
-  Props as SelectWrapperProps,
-} from './Form/Wrapper/SelectWrapper/SelectWrapper';
+  Props as SelectWrapperProps
+} from "./Form/Wrapper/SelectWrapper/SelectWrapper";
 
 /** Wizard */
-export { Wizard, Props as WizardProps } from './Wizard/Wizard';
-export { WizardActions, Props as WizardActionsProps } from './Wizard/WizardActions/WizardActions';
-export { WizardSteps, Props as WizardStepsProps } from './Wizard/WizardSteps/WizardSteps';
+export { Wizard, Props as WizardProps } from "./Wizard/Wizard";
+export { WizardActions, Props as WizardActionsProps } from "./Wizard/WizardActions/WizardActions";
+export { WizardSteps, Props as WizardStepsProps } from "./Wizard/WizardSteps/WizardSteps";
 export {
   BaseWizardSteps,
   Props as BaseWizardStepsProps,
-  Step as WizardStep,
-} from './Wizard/BaseWizardSteps/BaseWizardSteps';
+  Step as WizardStep
+} from "./Wizard/BaseWizardSteps/BaseWizardSteps";
 
 /** DataGrid */
-export { HeaderCell } from './DataGrid/datagrid.interfaces';
-export { DataGrid, Props as DataGridProps } from './DataGrid/DataGrid';
-export { DataGridRow, Props as DataGridRowProps } from './DataGrid/DataGridBody/DataGridRow';
-export { DataGridCell, Props as DataGridCellProps } from './DataGrid/DataGridBody/DataGridCell';
+export { HeaderCell } from "./DataGrid/datagrid.interfaces";
+export { DataGrid, Props as DataGridProps } from "./DataGrid/DataGrid";
+export { DataGridRow, Props as DataGridRowProps } from "./DataGrid/DataGridBody/DataGridRow";
+export { DataGridCell, Props as DataGridCellProps } from "./DataGrid/DataGridBody/DataGridCell";

package/src/mixins.module.scss

@@ -1,21 +1,21 @@
-@import './readyclasses.module.scss';
+@import "./readyclasses.module.scss";
 
-@mixin button($variant: 'text', $type: 'default') {
-  $disabledSelector: if($type == 'link', '.disabled', ':disabled');
+@mixin button($variant: "text", $type: "default") {
+  $disabledSelector: if($type == "link", ".disabled", ":disabled");
 
-  @if $variant == 'text' {
+  @if $variant == "text" {
     border-color: transparent;
     background-color: transparent;
-  } @else if $variant == 'fill' {
-    @if $type == 'default' {
+  } @else if $variant == "fill" {
+    @if $type == "default" {
       color: var(--button-fill-text-color);
-    } @else if $type == 'icon' or $type == 'link' {
+    } @else if $type == "icon" or $type == "link" {
       &:not(#{$disabledSelector}) {
         color: var(--button-fill-text-color);
       }
     }
     font-weight: bold;
-  } @else if $variant == 'outline' {
+  } @else if $variant == "outline" {
     background-color: var(--button-fill-background-color);
     font-weight: bold;
   }
@@ -33,7 +33,7 @@
     @include buttonStyles(var(--default), $variant, $type);
   }
 
-  @if $variant == 'fill' {
+  @if $variant == "fill" {
     &:hover:not(#{$disabledSelector}),
     &:focus:not(#{$disabledSelector}),
     &:active:not(#{$disabledSelector}) {
@@ -44,7 +44,7 @@
       background-color: var(--disabled);
       border-color: var(--disabled);
     }
-  } @else if $variant == 'outline' {
+  } @else if $variant == "outline" {
     &:hover:not(#{$disabledSelector}),
     &:focus:not(#{$disabledSelector}) {
       color: var(--button-outline-hover-text-color);
@@ -57,13 +57,13 @@
   }
 }
 
-@mixin buttonStyles($color, $variant: 'text', $type: 'default') {
-  @if $variant == 'text' {
+@mixin buttonStyles($color, $variant: "text", $type: "default") {
+  @if $variant == "text" {
     color: $color;
-  } @else if $variant == 'fill' {
+  } @else if $variant == "fill" {
     border-color: $color;
     background-color: $color;
-  } @else if $variant == 'outline' {
+  } @else if $variant == "outline" {
     border-color: $color;
     color: $color;
   }
@@ -72,39 +72,39 @@
 
   &:hover:not(.disabled),
   &:focus:not(.disabled) {
-    @if $variant == 'text' {
+    @if $variant == "text" {
       border-color: $color;
-    } @else if $variant == 'fill' {
+    } @else if $variant == "fill" {
       color: $color;
-    } @else if $variant == 'outline' {
+    } @else if $variant == "outline" {
       background-color: $color;
     }
   }
 
-  @if $variant == 'text' or $variant == 'fill' {
+  @if $variant == "text" or $variant == "fill" {
     &:active:not(.disabled) {
-      @if $variant == 'text' {
+      @if $variant == "text" {
         background-color: transparent;
         position: relative;
         color: $color;
         border-color: var(--button-fill-background-color);
-      } @else if $variant == 'fill' {
+      } @else if $variant == "fill" {
         position: relative;
         color: $color;
       }
 
       &:after {
-        content: '';
+        content: "";
         position: absolute;
-        @if $variant == 'fill' {
+        @if $variant == "fill" {
           top: calc(-1 * var(--button-border-width));
         } @else {
           top: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
         }
-        @if $type == 'default' or $type == 'link' {
+        @if $type == "default" or $type == "link" {
           left: 0;
           width: 100%;
-        } @else if $type == 'icon' {
+        } @else if $type == "icon" {
           left: calc(-1 * var(--button-border-width) + (var(--button-border-width) / 2));
           width: calc(100% + var(--button-border-width));
         }
@@ -117,8 +117,8 @@
   }
 }
 
-@mixin buttonBase($type: 'default') {
-  $disabledSelector: if($type == 'link', '.disabled', ':disabled');
+@mixin buttonBase($type: "default") {
+  $disabledSelector: if($type == "link", ".disabled", ":disabled");
 
   border-width: var(--button-border-width);
   border-style: var(--button-border-style);
@@ -140,6 +140,55 @@
   }
 }
 
+@mixin outline {
+  .outline {
+    pointer-events: none;
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    inset: 0;
+    border-color: var(--input-border-color);
+    border-style: var(--input-border-style);
+    border-width: var(--input-border-width);
+    border-radius: var(--input-border-radius);
+    transition: all 0.2s ease-in-out;
+  }
+}
+
+@mixin outlineStates {
+  &:hover .outline {
+    border-color: var(--default);
+  }
+
+  .outline.disabled {
+    border-color: #fff;
+  }
+
+  .outline.error {
+    border-color: var(--error);
+  }
+
+  .outline.focus {
+    border-width: var(--input-border-width-focus);
+  }
+
+  .outline.focus:not(.error) {
+    border-color: var(--color-primary);
+  }
+}
+
+@mixin browserOutlineDisabled {
+  &:focus:not(:disabled) {
+    outline: none;
+  }
+}
+
+@mixin inputLabelPrimaryColorOnFocus($labelSelector) {
+  #{$labelSelector}.focus {
+    color: var(--color-primary);
+  }
+}
+
 @mixin skeletonLoading() {
   position: relative;
   overflow: hidden;
@@ -160,7 +209,7 @@
       rgba(#fff, 0)
     );
     animation: shimmer 2s infinite;
-    content: '';
+    content: "";
   }
 
   @keyframes shimmer {

package/src/types.d.ts

@@ -1,4 +1,4 @@
-declare module '*.scss' {
+declare module "*.scss" {
   const content: { [className: string]: string };
   export default content;
 }

package/src/util/helper.test.tsx

@@ -1,52 +1,52 @@
-import { generateID, filterProps } from './helper';
+import { generateID, filterProps } from "./helper";
 
 /* Generate an ID of 20 characters with a string woven in */
 
-describe('generateID should correctly generate IDs in the correct way', () => {
-  it('generates an ID of length 20 with a string woven in', () => {
-    const ID1 = generateID(20, 'thistestingstring');
+describe("generateID should correctly generate IDs in the correct way", () => {
+  it("generates an ID of length 20 with a string woven in", () => {
+    const ID1 = generateID(20, "thistestingstring");
     expect(ID1.length).toBe(20);
   });
 
-  it('genereates an ID without a string woven in', () => {
+  it("genereates an ID without a string woven in", () => {
     const ID2 = generateID(20);
     expect(ID2.length).toBe(20);
   });
 });
 
-describe('filterprops should return the correct object', () => {
-  it('gives back the props we told it to filter', () => {
+describe("filterprops should return the correct object", () => {
+  it("gives back the props we told it to filter", () => {
     const propsObject = {
-      'data-filter': true,
-      'data-test': false,
-      'aria-hidden': false,
-      'aria-expanded': true,
-      title: 'test',
-      className: 'example-classname',
+      "data-filter": true,
+      "data-test": false,
+      "aria-hidden": false,
+      "aria-expanded": true,
+      title: "test",
+      className: "example-classname"
     };
 
     const returnedPropsObject = filterProps(propsObject, /^data-/);
 
-    expect(returnedPropsObject).toStrictEqual({ 'data-filter': true, 'data-test': false });
+    expect(returnedPropsObject).toStrictEqual({ "data-filter": true, "data-test": false });
   });
 
-  it('gives back the propsObject without the props we told it to filter', () => {
+  it("gives back the propsObject without the props we told it to filter", () => {
     const propsObject = {
-      'data-filter': true,
-      'data-test': false,
-      'aria-hidden': false,
-      'aria-expanded': true,
-      title: 'test',
-      className: 'example-classname',
+      "data-filter": true,
+      "data-test": false,
+      "aria-hidden": false,
+      "aria-expanded": true,
+      title: "test",
+      className: "example-classname"
     };
 
     const returnedPropsObject = filterProps(propsObject, /^data-/, false);
 
     expect(returnedPropsObject).toStrictEqual({
-      'aria-hidden': false,
-      'aria-expanded': true,
-      title: 'test',
-      className: 'example-classname',
+      "aria-hidden": false,
+      "aria-expanded": true,
+      title: "test",
+      className: "example-classname"
     });
   });
 });