@moda/om 19.8.2 → 20.0.0

package/src/components/LoadingShapes/LoadingShapes.scss

@@ -1,9 +1,9 @@
-@import '~om';
+@use '~@moda/om';
 
 .LoadingShapes__item--current {
   // stylelint-disable-next-line plugin/selector-bem-pattern
   path {
-    fill: color('snow');
+    fill: om.color('snow');
     transition: fill 1s;
   }
 }

package/src/components/Modal/Modal.scss

@@ -1,4 +1,4 @@
-@import '~om';
+@use '~@moda/om';
 
 .Modal {
   position: fixed;

package/src/components/ModalOverlay/ModalOverlay.scss

@@ -1,15 +1,15 @@
-@import '~om';
+@use '~@moda/om';
 
 .ModalOverlay {
   background: rgba(255, 255, 255, 0.9);
-  padding: spacing(8, 6);
+  padding: om.spacing(8, 6);
 
-  @include breakpoint(sm, $prop: max-width) {
-    padding: spacing(8, 4);
+  @include om.breakpoint(sm, $prop: max-width) {
+    padding: om.spacing(8, 4);
   }
 
-  @include breakpoint(xs, $prop: max-width) {
-    padding: spacing(8, 2);
+  @include om.breakpoint(xs, $prop: max-width) {
+    padding: om.spacing(8, 2);
   }
 
   &__content {

package/src/components/Overlay/Overlay.scss

@@ -1,17 +1,17 @@
-@import '~om';
+@use '~@moda/om';
 
 .Overlay {
-  @include stack(2);
+  @include om.stack(2);
 
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: color('snow', 0.9);
+  background-color: om.color('snow', 0.9);
   justify-content: center;
   align-items: center;
-  color: color('ink');
+  color: om.color('ink');
   animation: slow-in 0.5s;
 
   @keyframes slow-in {

package/src/components/Paginator/Paginator.scss

@@ -1,21 +1,21 @@
-@import '~om';
+@use '~@moda/om';
 
 .Paginator {
   display: flex;
   justify-content: center;
 
   &__button {
-    @include text(body1);
+    @include om.text(body1);
 
     border: none;
-    height: space(6);
-    width: space(6);
+    height: om.space(6);
+    width: om.space(6);
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    margin-right: space(1);
-    margin-left: space(1);
+    margin-right: om.space(1);
+    margin-left: om.space(1);
     background-color: transparent;
 
     &:first-child {
@@ -27,7 +27,7 @@
     }
 
     &:hover {
-      background-color: color(noise);
+      background-color: om.color(noise);
     }
 
     &--next,
@@ -36,16 +36,16 @@
     }
 
     &--currentPage {
-      background-color: color(noise);
+      background-color: om.color(noise);
     }
   }
 
   &__next-chevron {
-    margin-left: space(2);
+    margin-left: om.space(2);
   }
 
   &__previous-chevron {
-    margin-right: space(2);
+    margin-right: om.space(2);
   }
 
   &__button--ellipsis {

package/src/components/PasswordInput/PasswordInput.scss

@@ -1,4 +1,4 @@
-@import '~om';
+@use '~@moda/om';
 
 .PasswordInput {
   position: relative;
@@ -9,10 +9,10 @@
 
   &__password-action {
     position: absolute;
-    top: space(2);
-    right: space(6);
+    top: om.space(2);
+    right: om.space(6);
 
-    @include breakpoint(sm, $prop: max-width) {
+    @include om.breakpoint(sm, $prop: max-width) {
       top: 0.7rem;
     }
   }

package/src/components/Popover/Popover.scss

@@ -1,17 +1,17 @@
-@import '~om';
+@use '~@moda/om';
 
 .Popover {
   $self: &;
-  $caret-size: space(2);
+  $caret-size: om.space(2);
   $border-width: calc(1rem / 16);
-  $offset: space(2);
+  $offset: om.space(2);
 
   position: relative;
 
   &__content {
     position: absolute;
-    background-color: color('snow');
-    border: $border-width solid color(elephant);
+    background-color: om.color('snow');
+    border: $border-width solid om.color(elephant);
     z-index: 1;
 
     // Fills space of offset so hover works without issue
@@ -119,11 +119,11 @@
         top: auto;
         bottom: -($border-width + $offset);
         border-top: none;
-        border-bottom: $caret-size solid color('snow');
+        border-bottom: $caret-size solid om.color('snow');
       }
 
       &:before {
-        border-bottom: $caret-size solid color(ink);
+        border-bottom: $caret-size solid om.color(ink);
       }
     }
   }
@@ -137,12 +137,12 @@
       &:before {
         top: -($border-width + $offset);
         bottom: auto;
-        border-top: $caret-size solid color('snow');
+        border-top: $caret-size solid om.color('snow');
         border-bottom: none;
       }
 
       &:before {
-        border-top: $caret-size solid color(ink);
+        border-top: $caret-size solid om.color(ink);
       }
     }
   }

package/src/components/Popover/Popover.tsx

@@ -69,7 +69,7 @@ export const Popover: React.FC<PopoverProps> = ({
 
   const handleMouseEnter = useCallback(() => {
     if (!open) {
-      timeout.current && clearTimeout(timeout.current);
+      if (timeout.current) clearTimeout(timeout.current);
       handleOpen();
     }
   }, [handleOpen, open]);
@@ -115,7 +115,11 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (open === undefined) return;
 
-    open ? handleOpen() : handleClose();
+    if (open) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
   }, [handleClose, handleOpen, open]);
 
   const isOpen =

package/src/components/PromoBanner/PromoBanner.scss

@@ -1,12 +1,12 @@
-@import '~om';
+@use '~@moda/om';
 
 .PromoBanner {
   $self: &;
 
-  @include text(body2);
+  @include om.text(body2);
 
-  background-color: color(cream);
-  border-top: space(1) solid color(burnt-orange);
+  background-color: om.color(cream);
+  border-top: om.space(1) solid om.color(burnt-orange);
 
   &__constrain {
     display: flex;
@@ -15,8 +15,8 @@
   }
 
   &__child {
-    min-width: space(11);
-    padding: spacing(2, 3);
+    min-width: om.space(11);
+    padding: om.spacing(2, 3);
 
     &--center {
       flex: 1;
@@ -33,13 +33,13 @@
     }
 
     > a {
-      color: color(ink);
+      color: om.color(ink);
 
-      @include thin-underline();
+      @include om.thin-underline();
     }
   }
 
-  @include breakpoint(sm, $prop: max-width) {
+  @include om.breakpoint(sm, $prop: max-width) {
     #{$self}__child--left,
     #{$self}__child--right {
       display: none;

package/src/components/RadioButton/RadioButton.scss

@@ -1,16 +1,16 @@
-@import '~om';
+@use '~@moda/om';
 
 .RadioButton {
-  $radio-button-size: space(4);
-  $radio-button-check-offset: space(1);
+  $radio-button-size: om.space(4);
+  $radio-button-check-offset: om.space(1);
 
-  @include stack(2, $direction: horizontal);
+  @include om.stack(2, $direction: horizontal);
 
   position: relative;
   align-items: center;
   user-select: none;
   cursor: pointer;
-  color: color(ink);
+  color: om.color(ink);
 
   &__indicator {
     position: relative;
@@ -19,10 +19,10 @@
     flex-shrink: 0;
     border: 1px solid;
     border-radius: 50%;
-    background-color: color('snow');
+    background-color: om.color('snow');
 
     &--checked {
-      background-color: color(ink);
+      background-color: om.color(ink);
 
       &::after {
         content: '';
@@ -33,27 +33,27 @@
         bottom: $radio-button-check-offset;
         left: $radio-button-check-offset;
         border-radius: 50%;
-        background-color: color('snow');
+        background-color: om.color('snow');
       }
     }
 
     &--disabled {
-      color: color(elephant);
+      color: om.color(elephant);
       pointer-events: none;
-      background-color: color('snow');
+      background-color: om.color('snow');
       &::after {
-        background-color: color(elephant);
+        background-color: om.color(elephant);
       }
     }
   }
 
   &__input {
-    @include visually-hidden();
+    @include om.visually-hidden();
   }
 
   &__label {
-    @include text(body1);
+    @include om.text(body1);
 
-    color: color(ink);
+    color: om.color(ink);
   }
 }

package/src/components/SearchInput/SearchInput.scss

@@ -1,7 +1,7 @@
-@import '~om';
+@use '~@moda/om';
 
 .SearchInput {
-  $icon-width: space(7);
+  $icon-width: om.space(7);
 
   position: relative;
   display: inline-block;
@@ -16,7 +16,7 @@
     bottom: 0;
     width: $icon-width;
     height: 100%;
-    color: color(cement);
+    color: om.color(cement);
   }
 
   &__input--round-borders {
@@ -37,7 +37,7 @@
     right: 0;
 
     &:hover {
-      color: color(ink);
+      color: om.color(ink);
       cursor: pointer;
     }
   }

package/src/components/Select/MultiSelect.scss

@@ -1,4 +1,4 @@
-@import '~om';
+@use '~@moda/om';
 
 .MultiSelect {
   $self: &;
@@ -12,27 +12,27 @@
     cursor: default;
 
     #{$self}__search {
-      color: color(fog);
+      color: om.color(fog);
       cursor: default;
 
       &:hover,
       &:focus {
-        border-color: color(elephant);
-        background-color: color(noise);
+        border-color: om.color(elephant);
+        background-color: om.color(noise);
       }
     }
   }
 
   &--error {
-    border: 1px solid color(code-red);
+    border: 1px solid om.color(code-red);
   }
 
   &__search {
-    @include input-styles();
+    @include om.input-styles();
 
     display: flex;
     align-items: center;
-    padding: spacing(1, 7, 1, 1);
+    padding: om.spacing(1, 7, 1, 1);
   }
 
   &__selected-items {
@@ -43,10 +43,10 @@
   &__selected-item {
     display: flex;
     align-items: center;
-    border: 1px solid color('ink');
-    border-radius: space(2);
-    margin: space(1);
-    padding: space(1);
+    border: 1px solid om.color('ink');
+    border-radius: om.space(2);
+    margin: om.space(1);
+    padding: om.space(1);
   }
 
   &__selected-value {
@@ -54,19 +54,19 @@
   }
 
   &__exit {
-    margin-left: space(1);
+    margin-left: om.space(1);
     cursor: pointer;
   }
 
   &__icon {
     pointer-events: none;
     position: absolute;
-    right: space(4);
+    right: om.space(4);
     top: 50%;
     transform: translateY(-50%);
 
     &--shifted {
-      right: space(6);
+      right: om.space(6);
     }
   }
 }

package/src/components/Select/MultiSelect.tsx

@@ -71,7 +71,7 @@ export const MultiSelect: React.FC<Props> = ({
   );
 
   useEffect(() => {
-    onChange && onChange(values);
+    onChange?.(values);
   }, [onChange, values]);
 
   return (

package/src/components/Select/Select.scss

@@ -1,11 +1,11 @@
-@import '~om';
+@use '~@moda/om';
 
 .Select {
   $self: &;
 
   //ios devices zoom in if inputs are smaller than 16px
-  @include breakpoint(sm, $prop: max-width) {
-    @include text(h6);
+  @include om.breakpoint(sm, $prop: max-width) {
+    @include om.text(h6);
   }
 
   min-height: 2.5625rem;
@@ -17,35 +17,35 @@
     cursor: default;
 
     #{$self}__value {
-      color: color(fog);
+      color: om.color(fog);
       cursor: default;
 
       &:hover,
       &:focus {
-        border-color: color(elephant);
-        background-color: color('snow');
+        border-color: om.color(elephant);
+        background-color: om.color('snow');
       }
     }
   }
 
   &--error {
-    border: 1px solid color(code-red);
+    border: 1px solid om.color(code-red);
   }
 
   &__value {
-    @include text(body1);
+    @include om.text(body1);
 
     //ios devices zoom in if inputs are smaller than 16px
-    @include breakpoint(sm, $prop: max-width) {
-      @include text(h6);
+    @include om.breakpoint(sm, $prop: max-width) {
+      @include om.text(h6);
     }
 
     display: block;
     width: 100%;
     text-align: left;
-    padding: spacing(2, 7, 2, 3);
-    color: color(ink);
-    border: 1px solid color(elephant);
+    padding: om.spacing(2, 7, 2, 3);
+    color: om.color(ink);
+    border: 1px solid om.color(elephant);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -53,25 +53,25 @@
     cursor: pointer;
 
     &:hover {
-      border-color: color(cement);
-      background-color: color(noise);
+      border-color: om.color(cement);
+      background-color: om.color(noise);
     }
 
     &:focus {
-      border-color: color(cement);
-      background-color: color(elephant);
+      border-color: om.color(cement);
+      background-color: om.color(elephant);
     }
   }
 
   &__icon {
     pointer-events: none;
     position: absolute;
-    right: space(4);
+    right: om.space(4);
     top: 50%;
     transform: translateY(-50%);
 
     &--shifted {
-      right: space(6);
+      right: om.space(6);
     }
   }
 
@@ -85,12 +85,12 @@
     &--up {
       flex-direction: column-reverse;
       bottom: 100%;
-      margin-bottom: space(1);
+      margin-bottom: om.space(1);
     }
 
     &--down {
       flex-direction: column;
-      margin-top: space(1);
+      margin-top: om.space(1);
       top: 100%;
     }
   }
@@ -105,15 +105,15 @@
   }
 
   &__selected-color {
-    border-color: color(ink);
+    border-color: om.color(ink);
     border-style: solid;
     border-radius: 50%;
     border-width: 1px;
     display: inline-block;
-    height: space(4);
+    height: om.space(4);
     position: absolute;
-    right: space(7);
+    right: om.space(7);
     transform: translateY(25%);
-    width: space(4);
+    width: om.space(4);
   }
 }

package/src/components/Select/Select.tsx

@@ -82,7 +82,7 @@ export const Select: React.FC<SelectProps> = ({
 
   const handleAutofill = useCallback(
     (value: string) => {
-      value && dispatch({ type: 'SELECT', payload: { value } });
+      if (value) dispatch({ type: 'SELECT', payload: { value } });
     },
     [dispatch]
   );

package/src/components/Select/SelectOption.scss

@@ -1,13 +1,13 @@
-@import '~om';
+@use '~@moda/om';
 
 .SelectOption {
-  @include text(body1);
+  @include om.text(body1);
 
   display: block;
   width: 100%;
   text-align: left;
-  padding: spacing(2, 3);
-  color: color(ink);
+  padding: om.spacing(2, 3);
+  color: om.color(ink);
 
   &--selected {
     text-decoration: underline;
@@ -15,15 +15,15 @@
 
   &:hover,
   &--active {
-    background-color: color(noise);
+    background-color: om.color(noise);
   }
 
   &--disabled {
-    color: color(fog);
+    color: om.color(fog);
     cursor: default;
 
     &:hover {
-      background-color: color('snow');
+      background-color: om.color('snow');
     }
   }
 }

package/src/components/Select/SelectOption.tsx

@@ -25,7 +25,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLLIElement>) => {
       event.preventDefault();
-      !option.disabled && onClick(option);
+      if (!option.disabled) onClick(option);
     },
     [onClick, option]
   );

package/src/components/Select/SelectOptions.scss

@@ -1,24 +1,24 @@
-@import '~om';
+@use '~@moda/om';
 
 .SelectOptions {
-  background-color: color('snow');
-  border: 1px solid color(elephant);
+  background-color: om.color('snow');
+  border: 1px solid om.color(elephant);
 
   &:focus {
     outline: 0;
-    border-color: color(cement);
+    border-color: om.color(cement);
   }
 
   &__search {
-    margin: space(2);
+    margin: om.space(2);
   }
 
   &__none {
-    padding: spacing(2, 3);
+    padding: om.spacing(2, 3);
   }
 
   &__list {
-    @include overflow-scroll();
-    max-height: space(12);
+    @include om.overflow-scroll();
+    max-height: om.space(12);
   }
 }

package/src/components/Select/SelectOptions.tsx

@@ -51,12 +51,12 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
 
   useEffect(() => {
     if (autoFocus) {
-      ref.current && ref.current.focus();
+      ref.current?.focus();
     }
   }, [autoFocus]);
 
   useUpdateEffect(() => {
-    onFocus && activeOption && onFocus(activeOption);
+    if (activeOption) onFocus?.(activeOption);
   }, [activeOption, onFocus]);
 
   return (