@moda/om 18.1.0 → 18.3.0

package/dist/src/components/AspectRatioBox/AspectRatioBox.d.ts

@@ -6,14 +6,14 @@ export declare const DEFAULT_PRODUCT_ASPECT_RATIO: number;
 export type AspectRatioBoxProps = React.HTMLAttributes<HTMLDivElement> & {
     aspectWidth?: number;
     aspectHeight?: number;
-    maxWidth: number;
-    maxHeight: number;
+    maxWidth?: number;
+    maxHeight?: number;
     outlined?: boolean;
 };
 export declare const AspectRatioBox: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     aspectWidth?: number | undefined;
     aspectHeight?: number | undefined;
-    maxWidth: number;
-    maxHeight: number;
+    maxWidth?: number | undefined;
+    maxHeight?: number | undefined;
     outlined?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Text/Text.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactHTML } from 'react';
 import { typography, colors } from '@moda/tokens';
 import './Text.scss';
-export type TextTreatment = keyof typeof typography['text-treatments'];
+export type TextTreatment = keyof (typeof typography)['text-treatments'];
 export type TextColor = keyof typeof colors.all;
 export type TextFontFamily = keyof typeof typography.fonts;
 export type TextProps = React.HTMLAttributes<HTMLSpanElement> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "18.1.0",
+  "version": "18.3.0",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@moda/icons": "^5.18.0",
-    "@moda/tokens": "^5.5.1",
+    "@moda/tokens": "^5.7.0",
     "@types/classnames": "^2.2.9",
     "classnames": "^2.2.6",
     "credit-card-type": "^9.0.0",
@@ -120,7 +120,6 @@
     "jest-environment-jsdom": "^29.0.0",
     "jest-matchmedia-mock": "^1.1.0",
     "lint-staged": "^13.0.0",
-    "node-sass": "^8.0.0",
     "node-sass-package-importer": "^5.3.2",
     "pinst": "^3.0.0",
     "postcss": "^8.1.10",
@@ -133,8 +132,9 @@
     "rollup": "^3.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-scss": "^4.0.0",
+    "sass": "^1.57.1",
     "sass-loader": "^13.0.0",
-    "semantic-release": "^19.0.2",
+    "semantic-release": "^20.0.2",
     "storybook-states": "^1.2.0",
     "style-loader": "^3.0.0",
     "ts-jest": "^29.0.1",

package/src/components/AspectRatioBox/AspectRatioBox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { scale } from 'proportional-scale';
+import { scale, paddingBottom } from 'proportional-scale';
 import './AspectRatioBox.scss';
 
 export const DEFAULT_PRODUCT_ASPECT_WIDTH = 128;
@@ -11,11 +11,31 @@ export const DEFAULT_PRODUCT_ASPECT_RATIO =
 export type AspectRatioBoxProps = React.HTMLAttributes<HTMLDivElement> & {
   aspectWidth?: number;
   aspectHeight?: number;
-  maxWidth: number;
-  maxHeight: number;
+  maxWidth?: number;
+  maxHeight?: number;
   outlined?: boolean;
 };
 
+const scaleDimensions = ({
+  width,
+  height,
+  maxWidth,
+  maxHeight
+}: {
+  width: number;
+  height: number;
+  maxWidth?: number;
+  maxHeight?: number;
+}) => {
+  if (maxWidth && maxHeight) return scale({ width, height, maxWidth, maxHeight });
+
+  if (maxWidth) return scale({ width, height, maxWidth });
+
+  if (maxHeight) return scale({ width, height, maxHeight });
+
+  return { width, height, paddingBottom: paddingBottom({ width, height }), scale: 1 };
+};
+
 export const AspectRatioBox = React.forwardRef(
   (
     {
@@ -30,7 +50,7 @@ export const AspectRatioBox = React.forwardRef(
     }: AspectRatioBoxProps,
     forwardedRef: React.Ref<HTMLDivElement>
   ) => {
-    const { width, paddingBottom } = scale({
+    const { width, paddingBottom } = scaleDimensions({
       width: aspectWidth,
       height: aspectHeight,
       maxWidth,
@@ -47,7 +67,7 @@ export const AspectRatioBox = React.forwardRef(
           },
           className
         )}
-        style={{ maxWidth: `${width}px` }}
+        style={maxWidth || maxHeight ? { maxWidth: `${width}px` } : undefined}
         {...rest}
       >
         <div className='AspectRatioBox__wrapper' style={{ paddingBottom }} />

package/src/components/Badge/Badge.scss

@@ -18,19 +18,19 @@
   &--forest-green {
     background-color: color(forest-green);
     border-color: transparent;
-    color: color(snow);
+    color: color('snow');
   }
 
   &--klein-blue {
     background-color: color(klein-blue);
     border-color: transparent;
-    color: color(snow);
+    color: color('snow');
   }
 
   &--brick {
     background-color: color(brick);
     border-color: transparent;
-    color: color(snow);
+    color: color('snow');
   }
 
   &--dark-fuchsia {

package/src/components/Breakpoint/Breakpoint.scss

@@ -1,7 +1,8 @@
+@use 'sass:math';
 @import '~om';
 
 .Breakpoint {
-  $onePixel: 1/16;
+  $onePixel: math.div(1, 16);
   $keys: map-keys($breakpoints);
 
   display: none;

package/src/components/Button/Button.scss

@@ -22,23 +22,23 @@
 
   &,
   &--primary {
-    color: color(snow);
+    color: color('snow');
     border-color: color(ink);
     background-color: color(ink);
     @include font-smoothing(subpixel);
 
     &#{$self}--hover,
     &:hover {
-      color: color(snow);
+      color: color('snow');
       border-color: color(fog, 0.32);
       background: linear-gradient(0deg, color(fog, 0.32), color(fog, 0.32)), color(ink);
     }
 
     &#{$self}--focus,
     &:focus {
-      color: color(snow);
+      color: color('snow');
       border-color: color(fog, 0.12);
-      background: linear-gradient(0deg, color(snow, 0.12), color(snow, 0.12)), color(ink);
+      background: linear-gradient(0deg, color('snow', 0.12), color('snow', 0.12)), color(ink);
     }
 
     &#{$self}--disabled,
@@ -54,7 +54,7 @@
   &--secondary {
     color: color(ink);
     border-color: color(ink);
-    background-color: color(snow);
+    background-color: color('snow');
 
     &#{$self}--hover,
     &:hover {
@@ -86,7 +86,7 @@
     padding: spacing(2, 3);
     color: color(ink);
     border-color: color(elephant);
-    background-color: color(snow);
+    background-color: color('snow');
     text-transform: none;
     line-height: 1.4;
 

package/src/components/Checkbox/Checkbox.scss

@@ -2,7 +2,7 @@
 
 .Checkbox {
   $checkbox-size: space(4);
-  $checkbox-check-offset: space(1) / 2;
+  $checkbox-check-offset: calc(space(1) / 2);
 
   @include stack(2, $direction: horizontal);
 
@@ -16,7 +16,7 @@
     position: relative;
     width: $checkbox-size;
     height: $checkbox-size;
-    margin-top: space(1) / 2;
+    margin-top: calc(space(1) / 2);
     flex-shrink: 0;
     border: 1px solid;
 

package/src/components/ColorSwatch/ColorSwatch.scss

@@ -33,7 +33,7 @@
     height: 33%;
     transform: translate(-50%, -50%);
     border-radius: 50%;
-    background-color: color(snow);
+    background-color: color('snow');
     z-index: 1;
   }
 
@@ -108,8 +108,8 @@
       content: '';
       display: block;
       position: absolute;
-      top: -($on-sale-dot-size / 2);
-      right: -($on-sale-dot-size / 2);
+      top: calc(-1 * $on-sale-dot-size / 2);
+      right: calc(-1 * $on-sale-dot-size / 2);
       width: $on-sale-dot-size;
       height: $on-sale-dot-size;
       border-radius: 50%;

package/src/components/Divider/Divider.scss

@@ -26,7 +26,7 @@
     &:before,
     &:after {
       $space-between-lines: 0.175rem;
-      $offset: $space-between-lines/2;
+      $offset: calc($space-between-lines / 2);
       transform: translateY(calc(-#{$offset}));
       background-color: color(ink);
       box-shadow: 0 $space-between-lines 0 0 color(ink);

package/src/components/Expandable/Expandable.scss

@@ -85,17 +85,17 @@
 
   &--dark-background {
     border-color: color(cement);
-    color: color(snow);
+    color: color('snow');
 
     #{$self}__name {
       &::before,
       &::after {
-        background-color: color(snow);
+        background-color: color('snow');
       }
     }
 
     #{$self}__contents {
-      color: color(snow);
+      color: color('snow');
     }
   }
 }

package/src/components/LoadingShapes/LoadingShapes.scss

@@ -3,7 +3,7 @@
 .LoadingShapes__item--current {
   // stylelint-disable-next-line plugin/selector-bem-pattern
   path {
-    fill: color(snow);
+    fill: color('snow');
     transition: fill 1s;
   }
 }

package/src/components/Popover/Popover.scss

@@ -3,14 +3,14 @@
 .Popover {
   $self: &;
   $caret-size: space(2);
-  $border-width: 1rem / 16;
+  $border-width: calc(1rem / 16);
   $offset: space(2);
 
   position: relative;
 
   &__content {
     position: absolute;
-    background-color: color(snow);
+    background-color: color('snow');
     border: $border-width solid color(elephant);
     z-index: 1;
 
@@ -119,7 +119,7 @@
         top: auto;
         bottom: -($border-width + $offset);
         border-top: none;
-        border-bottom: $caret-size solid color(snow);
+        border-bottom: $caret-size solid color('snow');
       }
 
       &:before {
@@ -137,7 +137,7 @@
       &:before {
         top: -($border-width + $offset);
         bottom: auto;
-        border-top: $caret-size solid color(snow);
+        border-top: $caret-size solid color('snow');
         border-bottom: none;
       }
 

package/src/components/RadioButton/RadioButton.scss

@@ -19,7 +19,7 @@
     flex-shrink: 0;
     border: 1px solid;
     border-radius: 50%;
-    background-color: color(snow);
+    background-color: color('snow');
 
     &--checked {
       background-color: color(ink);
@@ -33,14 +33,14 @@
         bottom: $radio-button-check-offset;
         left: $radio-button-check-offset;
         border-radius: 50%;
-        background-color: color(snow);
+        background-color: color('snow');
       }
     }
 
     &--disabled {
       color: color(elephant);
       pointer-events: none;
-      background-color: color(snow);
+      background-color: color('snow');
       &::after {
         background-color: color(elephant);
       }

package/src/components/Select/Select.scss

@@ -23,7 +23,7 @@
       &:hover,
       &:focus {
         border-color: color(elephant);
-        background-color: color(snow);
+        background-color: color('snow');
       }
     }
   }

package/src/components/Select/SelectOption.scss

@@ -23,7 +23,7 @@
     cursor: default;
 
     &:hover {
-      background-color: color(snow);
+      background-color: color('snow');
     }
   }
 }

package/src/components/Select/SelectOptions.scss

@@ -1,7 +1,7 @@
 @import '~om';
 
 .SelectOptions {
-  background-color: color(snow);
+  background-color: color('snow');
   border: 1px solid color(elephant);
 
   &:focus {

package/src/components/SlidingPane/SlidingPane.scss

@@ -8,7 +8,7 @@
   left: 0;
   right: 0;
   transition: all 500ms ease-out;
-  background-color: color(snow);
+  background-color: color('snow');
   margin-left: 0;
 
   &--active {

package/src/components/Text/Text.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { typography, colors } from '@moda/tokens';
 import './Text.scss';
 
-export type TextTreatment = keyof typeof typography['text-treatments'];
+export type TextTreatment = keyof (typeof typography)['text-treatments'];
 export type TextColor = keyof typeof colors.all;
 export type TextFontFamily = keyof typeof typography.fonts;
 

package/src/components/Toast/Toast.scss

@@ -1,7 +1,7 @@
 @import '~om';
 
 .Toast {
-  color: color(snow);
+  color: color('snow');
   padding: spacing(3);
 
   &--success {

package/src/mixins/input-styles/_input-styles.scss

@@ -11,7 +11,7 @@
   width: 100%;
   padding: spacing(3, 4);
   border: 1px solid color(elephant);
-  background-color: color(snow);
+  background-color: color('snow');
   border-radius: 0;
 
   &::placeholder {