@moda/om 18.2.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.2.0",
+  "version": "18.3.0",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -134,7 +134,7 @@
     "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/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;