@moda/om 18.2.0 → 18.3.1

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/Popover/Popover.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import './Popover.scss';
-export type PopoverProps = React.HTMLAttributes<HTMLDivElement> & {
-    content: JSX.Element;
+export type PopoverProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> & {
+    content: ReactNode;
     children: JSX.Element;
     open?: boolean;
     anchor?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';

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.1",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -71,22 +71,22 @@
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/addon-links": "^6.5.6",
+    "@storybook/addon-actions": "^7.0.2",
+    "@storybook/addon-essentials": "^7.0.2",
+    "@storybook/addon-links": "^7.0.2",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-viewport": "^6.5.6",
-    "@storybook/addons": "^6.5.6",
-    "@storybook/builder-webpack5": "^6.5.6",
+    "@storybook/addon-viewport": "^7.0.2",
+    "@storybook/addons": "^7.0.2",
+    "@storybook/builder-webpack5": "^7.0.2",
     "@storybook/manager-webpack5": "^6.5.6",
-    "@storybook/react": "^6.5.6",
+    "@storybook/react": "^7.0.2",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.1.1",
     "@types/cheerio": "^0.22.22",
     "@types/credit-card-type": "^9.0.0",
     "@types/jest": "^29.0.3",
-    "@types/ramda": "^0.28.0",
+    "@types/ramda": "^0.29.0",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.1",
     "@types/react-input-mask": "^3.0.2",
@@ -125,7 +125,7 @@
     "postcss": "^8.1.10",
     "postcss-loader": "^7.0.0",
     "prettier": "^2.7.1",
-    "ramda": "^0.28.0",
+    "ramda": "^0.29.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^5.1.2",
@@ -134,11 +134,11 @@
     "rollup-plugin-scss": "^4.0.0",
     "sass": "^1.57.1",
     "sass-loader": "^13.0.0",
-    "semantic-release": "^19.0.2",
+    "semantic-release": "^21.0.0",
     "storybook-states": "^1.2.0",
     "style-loader": "^3.0.0",
     "ts-jest": "^29.0.1",
-    "typescript": "^4.0.2",
+    "typescript": "^5.0.2",
     "waait": "^1.0.5",
     "webpack": "^5.72.1",
     "webpack-cli": "^5.0.0"

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/Popover/Popover.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+import React, { useState, useCallback, useEffect, useRef, ReactNode } from 'react';
 import classNames from 'classnames';
 import './Popover.scss';
 
-export type PopoverProps = React.HTMLAttributes<HTMLDivElement> & {
-  content: JSX.Element;
+export type PopoverProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> & {
+  content: ReactNode;
   children: JSX.Element;
   open?: boolean;
   anchor?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';

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;