@lumx/react 2.2.22 → 2.2.23

package/src/components/thumbnail/useFocusPointStyle.tsx

@@ -3,11 +3,24 @@ import { AspectRatio } from '@lumx/react/components';
 import { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';
 
 // Calculate shift to center the focus point in the container.
-function shiftPosition(scale: number, focusPoint: number, imageSize: number, containerSize: number) {
+export function shiftPosition({
+    scale,
+    focusPoint,
+    imageSize,
+    containerSize,
+}: {
+    scale: number;
+    focusPoint: number;
+    imageSize: number;
+    containerSize: number;
+}) {
+    if (imageSize === containerSize) return 0;
     const scaledSize = imageSize / scale;
+
     const scaledFocusHeight = focusPoint * scaledSize;
     const startFocus = scaledFocusHeight - containerSize / 2;
     const shift = startFocus / (scaledSize - containerSize);
+
     return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
 }
 
@@ -73,14 +86,23 @@ export const useFocusPointStyle = (
 
         // Focus Y relative to the top (instead of the center)
         const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;
-        const y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerSize.height);
+        const y = shiftPosition({
+            scale,
+            focusPoint: focusPointFromTop,
+            imageSize: imageSize.height,
+            containerSize: containerSize.height,
+        });
 
         // Focus X relative to the left (instead of the center)
         const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;
-        const x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerSize.width);
+        const x = shiftPosition({
+            scale,
+            focusPoint: focusPointFromLeft,
+            imageSize: imageSize.width,
+            containerSize: containerSize.width,
+        });
 
         const objectPosition = `${x}% ${y}%`;
-
         // Update only if needed.
         setStyle((oldStyle) => (oldStyle.objectPosition === objectPosition ? oldStyle : { objectPosition }));
     }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);

package/types.d.ts

@@ -162,13 +162,16 @@ export declare const TypographyTitleCustom: {
 	readonly title6: "custom-title6";
 };
 export declare type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
-declare const TypographyCustom: {
-	readonly intro: "intro";
-	readonly "body-large": "body-large";
-	readonly body: "body";
-	readonly quote: "quote";
-	readonly "publish-info": "publish-info";
-	readonly button: "button";
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+export declare const TypographyCustom: {
+	readonly intro: "custom-intro";
+	readonly "body-large": "custom-body-large";
+	readonly body: "custom-body";
+	readonly quote: "custom-quote";
+	readonly "publish-info": "custom-publish-info";
+	readonly button: "custom-button";
 	readonly title1: "custom-title1";
 	readonly title2: "custom-title2";
 	readonly title3: "custom-title3";
@@ -182,12 +185,12 @@ export declare type TypographyCustom = ValueOf<typeof TypographyCustom>;
  */
 export declare const Typography: {
 	readonly custom: {
-		readonly intro: "intro";
-		readonly "body-large": "body-large";
-		readonly body: "body";
-		readonly quote: "quote";
-		readonly "publish-info": "publish-info";
-		readonly button: "button";
+		readonly intro: "custom-intro";
+		readonly "body-large": "custom-body-large";
+		readonly body: "custom-body";
+		readonly quote: "custom-quote";
+		readonly "publish-info": "custom-publish-info";
+		readonly button: "custom-button";
 		readonly title1: "custom-title1";
 		readonly title2: "custom-title2";
 		readonly title3: "custom-title3";
@@ -1096,7 +1099,7 @@ export interface FlagProps extends GenericProps, HasTheme {
  */
 export declare const Flag: Comp<FlagProps, HTMLDivElement>;
 export declare type MarginAutoAlignment = Extract<Alignment, "top" | "bottom" | "right" | "left">;
-export declare type GapSize = Extract<Size, "regular" | "medium" | "big" | "huge">;
+export declare type GapSize = Extract<Size, "tiny" | "regular" | "medium" | "big" | "huge">;
 /**
  * Defines the props of the component.
  */
@@ -1471,7 +1474,7 @@ export interface LinkProps extends GenericProps {
 	/** Link target. */
 	target?: HTMLAnchorProps["target"];
 	/** Typography variant. */
-	typography?: TypographyInterface | TypographyTitleCustom;
+	typography?: Typography;
 }
 /**
  * Link component.

package/src/components/generic-block/GenericBlock.stories.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { mdiPencil } from '@lumx/icons';
-import { GenericBlock, Button, Icon, Size, Orientation, Alignment } from '@lumx/react';
-import { HasTheme } from '@lumx/react/utils';
-
-export default { title: 'LumX components/generic-block/GenericBlock' };
-
-const redBorderStyle = { border: '1px solid red' };
-
-/**
- * Fill sections using props
- */
-export const SectionsInProps = ({ theme }: HasTheme) => (
-    <GenericBlock
-        figure={<Icon icon={mdiPencil} size={Size.m} />}
-        actionsProps={{ style: redBorderStyle }}
-        figureProps={{ style: redBorderStyle }}
-        contentProps={{ style: redBorderStyle }}
-        actions={<Button theme={theme}>Button</Button>}
-    >
-        Content
-    </GenericBlock>
-);
-
-/**
- * Fill sections using child section components.
- */
-export const SectionsInChildren = ({ theme }: HasTheme) => (
-    <GenericBlock>
-        <GenericBlock.Figure style={redBorderStyle}>
-            <Icon icon={mdiPencil} size={Size.m} />
-        </GenericBlock.Figure>
-        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
-        <GenericBlock.Actions style={redBorderStyle}>
-            <Button theme={theme}>Button</Button>
-        </GenericBlock.Actions>
-    </GenericBlock>
-);
-
-export const Vertical = ({ theme }: HasTheme) => (
-    <GenericBlock orientation={Orientation.vertical}>
-        <GenericBlock.Figure style={redBorderStyle}>
-            <Icon icon={mdiPencil} size={Size.m} />
-        </GenericBlock.Figure>
-        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
-        <GenericBlock.Actions fillSpace style={redBorderStyle}>
-            <Button theme={theme}>Button</Button>
-        </GenericBlock.Actions>
-    </GenericBlock>
-);
-
-export const Horizontal = ({ theme }: HasTheme) => (
-    <GenericBlock orientation={Orientation.horizontal}>
-        <GenericBlock.Figure style={redBorderStyle}>
-            <Icon icon={mdiPencil} size={Size.m} />
-        </GenericBlock.Figure>
-        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
-        <GenericBlock.Actions style={redBorderStyle}>
-            <Button theme={theme}>Button</Button>
-        </GenericBlock.Actions>
-    </GenericBlock>
-);
-
-export const HorizontalTop = ({ theme }: HasTheme) => (
-    <GenericBlock orientation={Orientation.horizontal} hAlign={Alignment.top}>
-        <GenericBlock.Figure style={redBorderStyle}>
-            <Icon icon={mdiPencil} size={Size.m} />
-        </GenericBlock.Figure>
-        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
-        <GenericBlock.Actions style={redBorderStyle}>
-            <Button theme={theme}>Button</Button>
-        </GenericBlock.Actions>
-    </GenericBlock>
-);
-
-export const GapSizes = ({ theme }: HasTheme) =>
-    [Size.regular, Size.big, Size.huge].map((gap) => (
-        <GenericBlock key={gap} orientation={Orientation.vertical} gap={gap} style={{ marginBottom: 40 }}>
-            <GenericBlock.Figure style={redBorderStyle}>
-                <Icon icon={mdiPencil} size={Size.m} />
-            </GenericBlock.Figure>
-            <GenericBlock.Content style={redBorderStyle}>
-                <h2>{gap} gap size</h2>
-                <p>block description</p>
-            </GenericBlock.Content>
-            <GenericBlock.Actions style={redBorderStyle}>
-                <Button theme={theme}>Button</Button>
-            </GenericBlock.Actions>
-        </GenericBlock>
-    ));