Merge branch 'feature/#538-Recalc-transformer-widht-height-on-text-co…

…mponents-font-changes' of github.com:Lemoncode/quickmock into feature/#538-Recalc-transformer-widht-height-on-text-components-font-changes
Lemoncode · Nov 23, 2024 · 74ab664 · 74ab664
2 parents cb97c7f + 9f544f2
commit 74ab664
Show file tree

Hide file tree

Showing 21 changed files with 239 additions and 39 deletions.
diff --git a/src/common/components/mock-components/front-components/shape.const.ts b/src/common/components/mock-components/front-components/shape.const.ts
@@ -15,6 +15,7 @@ const DEFAULT_TEXT_HEIGHT = 38;
 const DEFAULT_FONT_VARIANT = 'normal';
 const DEFAULT_FONT_STYLE = 'normal';
 const DEFAULT_TEXT_DECORATION = 'none';
+const DEFAULT_TEXT_ALIGNMENT = 'left';
 
 export interface DefaultStyleShape {
   DEFAULT_CORNER_RADIUS: number;
@@ -32,6 +33,7 @@ export interface DefaultStyleShape {
   DEFAULT_FONT_VARIANT: string;
   DEFAULT_FONT_STYLE: string;
   DEFAULT_TEXT_DECORATION: string;
+  DEFAULT_TEXT_ALIGNMENT: 'left' | 'center' | 'right';
 }
 
 export const BASIC_SHAPE: DefaultStyleShape = {
@@ -50,6 +52,7 @@ export const BASIC_SHAPE: DefaultStyleShape = {
   DEFAULT_FONT_VARIANT,
   DEFAULT_FONT_STYLE,
   DEFAULT_TEXT_DECORATION,
+  DEFAULT_TEXT_ALIGNMENT,
 };
 
 export const INPUT_SHAPE: DefaultStyleShape = {
@@ -68,6 +71,7 @@ export const INPUT_SHAPE: DefaultStyleShape = {
   DEFAULT_FONT_VARIANT,
   DEFAULT_FONT_STYLE,
   DEFAULT_TEXT_DECORATION,
+  DEFAULT_TEXT_ALIGNMENT,
 };
 
 //! maybe a function to calc max height base on the text
@@ -87,6 +91,7 @@ export const POSTIT_SHAPE: DefaultStyleShape = {
   DEFAULT_FONT_VARIANT,
   DEFAULT_FONT_STYLE,
   DEFAULT_TEXT_DECORATION,
+  DEFAULT_TEXT_ALIGNMENT,
 };
 
 interface FontValues {

diff --git a/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx
@@ -41,8 +41,14 @@ export const Heading1Shape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, textDecoration, fontStyle, fontVariant, fontSize } =
-    useShapeProps(otherProps, BASIC_SHAPE);
+  const {
+    textColor,
+    textDecoration,
+    fontStyle,
+    fontVariant,
+    fontSize,
+    textAlignment,
+  } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -64,7 +70,7 @@ export const Heading1Shape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="center"
+        align={textAlignment}
         verticalAlign="middle"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx
@@ -41,8 +41,14 @@ export const Heading2Shape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontVariant, fontStyle, textDecoration, fontSize } =
-    useShapeProps(otherProps, BASIC_SHAPE);
+  const {
+    textColor,
+    fontVariant,
+    fontStyle,
+    textDecoration,
+    fontSize,
+    textAlignment,
+  } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -64,7 +70,7 @@ export const Heading2Shape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="center"
+        align={textAlignment}
         verticalAlign="middle"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx
@@ -42,8 +42,14 @@ export const Heading3Shape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontVariant, fontStyle, textDecoration, fontSize } =
-    useShapeProps(otherProps, BASIC_SHAPE);
+  const {
+    textColor,
+    fontVariant,
+    fontStyle,
+    textDecoration,
+    fontSize,
+    textAlignment,
+  } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -65,7 +71,7 @@ export const Heading3Shape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="center"
+        align={textAlignment}
         verticalAlign="middle"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/mock-components/front-text-components/link-text-shape.tsx b/src/common/components/mock-components/front-text-components/link-text-shape.tsx
@@ -42,10 +42,8 @@ export const LinkShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, textDecoration, fontSize, fontVariant } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { textColor, textDecoration, fontSize, textAlignment, fontVariant } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -67,7 +65,7 @@ export const LinkShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="center"
+        align={textAlignment}
         verticalAlign="middle"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/mock-components/front-text-components/normaltext-shape.tsx b/src/common/components/mock-components/front-text-components/normaltext-shape.tsx
@@ -41,8 +41,14 @@ export const NormaltextShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontVariant, fontStyle, textDecoration, fontSize } =
-    useShapeProps(otherProps, BASIC_SHAPE);
+  const {
+    textColor,
+    fontVariant,
+    fontStyle,
+    textDecoration,
+    fontSize,
+    textAlignment,
+  } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -64,7 +70,7 @@ export const NormaltextShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="center"
+        align={textAlignment}
         verticalAlign="middle"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx b/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx
@@ -41,7 +41,7 @@ export const ParagraphShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontSize, fontVariant } = useShapeProps(
+  const { textColor, fontSize, textAlignment, fontVariant } = useShapeProps(
     otherProps,
     BASIC_SHAPE
   );
@@ -66,7 +66,7 @@ export const ParagraphShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="left"
+        align={textAlignment}
         ellipsis={true}
       />
     </Group>

diff --git a/src/common/components/mock-components/front-text-components/smalltext-shape.tsx b/src/common/components/mock-components/front-text-components/smalltext-shape.tsx
@@ -41,8 +41,14 @@ export const SmalltextShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontVariant, fontStyle, textDecoration, fontSize } =
-    useShapeProps(otherProps, BASIC_SHAPE);
+  const {
+    textColor,
+    fontVariant,
+    fontStyle,
+    textDecoration,
+    fontSize,
+    textAlignment,
+  } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -64,7 +70,7 @@ export const SmalltextShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={fontSize}
         fill={textColor}
-        align="center"
+        align={textAlignment}
         verticalAlign="middle"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/modal-dialog/modal-dialog.component.module.css b/src/common/components/modal-dialog/modal-dialog.component.module.css
@@ -1,26 +1,43 @@
 .container {
   z-index: 2;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
   background-color: var(--primary-900-50-opacity);
 }
 
+.dialog {
+  position: relative;
+  z-index: 3;
+  width: 90%;
+  max-width: 1280px;
+  height: 80%;
+  overflow: auto;
+  border-radius: var(--border-radius-l);
+}
+
+.dialogContent {
+  overflow: auto;
+  flex: 1;
+}
+
 .dialogHeader {
+  position: sticky;
+  top: 0;
+  z-index: 4;
   background-color: var(--primary-500);
-  width: 70vw;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: var(--space-s) var(--space-md);
-  border-top-left-radius: var(--border-radius-m);
-  border-top-right-radius: var(--border-radius-m);
+  border-top-left-radius: var(--border-radius-l);
+  border-top-right-radius: var(--border-radius-l);
 }
 
 .dialogTitle {
@@ -41,3 +58,10 @@
 .dialogButton:hover {
   cursor: pointer;
 }
+
+@media screen and (max-device-width: 780px) {
+  .dialog {
+    width: 92%;
+    height: 82%;
+  }
+}
diff --git a/src/common/components/modal-dialog/modal-dialog.component.tsx b/src/common/components/modal-dialog/modal-dialog.component.tsx
@@ -16,17 +16,19 @@ export const ModalDialogComponent: React.FC = () => {
   return (
     isOpen && (
       <div className={classes.container}>
-        <div className={classes.dialogHeader}>
-          <h2 className={classes.dialogTitle}>{title}</h2>
-          <button
-            className={classes.dialogButton}
-            onClick={handleClick}
-            aria-label="close modal dialog"
-          >
-            <XIconComponent />
-          </button>
+        <div className={classes.dialog}>
+          <div className={classes.dialogHeader}>
+            <h2 className={classes.dialogTitle}>{title}</h2>
+            <button
+              className={classes.dialogButton}
+              onClick={handleClick}
+              aria-label="close modal dialog"
+            >
+              <XIconComponent />
+            </button>
+          </div>
+          <div className={classes.dialogContent}>{selectedComponent}</div>
         </div>
-        <div>{selectedComponent}</div>
       </div>
     )
   );

diff --git a/src/common/components/shapes/use-shape-props.hook.ts b/src/common/components/shapes/use-shape-props.hook.ts
@@ -43,6 +43,11 @@ export const useShapeProps = (
     [otherProps?.textDecoration]
   );
 
+  const textAlignment = useMemo(
+    () => otherProps?.textAlignment ?? defaultStyleShape.DEFAULT_TEXT_ALIGNMENT,
+    [otherProps?.textAlignment]
+  );
+
   const strokeStyle = useMemo(
     () => otherProps?.strokeStyle ?? [],
     [otherProps?.strokeStyle]
@@ -81,5 +86,6 @@ export const useShapeProps = (
     fontStyle,
     fontSize,
     textDecoration,
+    textAlignment,
   };
 };
diff --git a/src/core/local-disk/shapes-to-document.mapper.ts b/src/core/local-disk/shapes-to-document.mapper.ts
@@ -30,6 +30,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.HEADING1,
+          textAlignment: 'center',
         },
       };
     case 'heading2':
@@ -38,6 +39,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.HEADING2,
+          textAlignment: 'center',
         },
       };
     case 'heading3':
@@ -46,6 +48,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.HEADING3,
+          textAlignment: 'center',
         },
       };
     case 'link':
@@ -54,6 +57,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.LINK,
+          textAlignment: 'center',
         },
       };
     case 'normaltext':
@@ -62,6 +66,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.NORMALTEXT,
+          textAlignment: 'center',
         },
       };
     case 'smalltext':
@@ -70,6 +75,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.SMALLTEXT,
+          textAlignment: 'center',
         },
       };
     case 'paragraph':
@@ -78,6 +84,7 @@ const mapTextElementFromV0_1ToV0_2 = (shape: ShapeModel): ShapeModel => {
         otherProps: {
           ...shape,
           fontSize: FONT_SIZE_VALUES.PARAGRAPH,
+          textAlignment: 'center',
         },
       };
     default:

diff --git a/src/core/model/index.ts b/src/core/model/index.ts
@@ -174,6 +174,7 @@ export interface OtherProps {
   borderRadius?: string;
   activeElement?: number;
   selectedBackgroundColor?: string;
+  textAlignment?: 'left' | 'center' | 'right';
 }
 
 export const BASE_ICONS_URL = '/icons/';

diff --git a/src/pods/about/about.pod.module.css b/src/pods/about/about.pod.module.css
@@ -1,6 +1,5 @@
 .container {
   background-color: var(--primary-700);
-  width: 70vw;
   height: auto;
   display: flex;
   flex-direction: column;

diff --git a/src/pods/about/components/developmentTeam.component.module.css b/src/pods/about/components/developmentTeam.component.module.css
@@ -13,4 +13,6 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-md) var(--space-xxl);
+  align-items: start;
+  justify-content: center;
 }