Addition of WordWrap Styles

This commit introduces WordWrap styles to the application. This change enhances the readability of text content by ensuring that long lines of text do not overflow their container, but instead wrap onto the next line.

Author: Hector Arce De Las Heras

src/types/styles/animation.ts

@@ -1,3 +1,7 @@
 export type AnimationType = {
   transition?: string;
+  transition_delay?: string;
+  transition_duration?: string;
+  transition_property?: string;
+  transition_timing_function?: string;
 };

src/types/styles/commonStyle.ts

@@ -9,6 +9,7 @@ import { PaddingTypes } from './padding';
 import { PointerTypes } from './pointer';
 import { PositionTypes } from './position';
 import { BoxShadowTypes } from './shadow';
+import { WordWrapTypes } from './wordWrap';
 
 type BreakPointsStyleType = {
   [key in DeviceBreakpointsType]?: GenericStyleType & PseudoElementsType;
@@ -23,7 +24,8 @@ type GenericStyleType = PaddingTypes &
   MarginTypes &
   PositionTypes &
   PointerTypes &
-  AnimationType;
+  AnimationType &
+  WordWrapTypes;
 
 export type AfterOrBeforeType = { content?: string } & GenericStyleType;
 

src/types/styles/index.ts

@@ -24,3 +24,4 @@ export * from './icon';
 export * from './illustration';
 export * from './pointer';
 export * from './commonStyle';
+export * from './wordWrap';

src/types/styles/typography.ts

@@ -1,4 +1,5 @@
 import { DeviceBreakpointsType } from '../breakpoints';
+import { WordWrapTypes } from './wordWrap';
 
 /**
  * @property font_variant variant for the Text component
@@ -17,16 +18,13 @@ type GenericDeviceTypographyType = {
   text_align?: string;
   text_decoration?: string;
   text_transform?: string;
-  white_space?: string;
-  word_break?: string;
-  word_wrap?: string;
-  text_overflow?: string;
   text_shadow?: string;
   text_indent?: string;
   text_justify?: string;
   color?: string;
   overflow?: string;
-} & TypographyCustomType;
+} & TypographyCustomType &
+  WordWrapTypes;
 
 export type TypographyTypes = GenericDeviceTypographyType & {
   [key in DeviceBreakpointsType]?: GenericDeviceTypographyType;

src/types/styles/wordWrap.ts

@@ -0,0 +1,6 @@
+export type WordWrapTypes = {
+  word_break?: string;
+  word_wrap?: string;
+  white_space?: string;
+  text_overflow?: string;
+};

src/utils/getStyles/getStyles.ts

@@ -14,6 +14,7 @@ import {
   PointerTypes,
   PositionTypes,
   TypographyTypes,
+  WordWrapTypes,
 } from '@/types/styles';
 import { AnimationType } from '@/types/styles/animation';
 
@@ -479,6 +480,20 @@ export const getPointerStyles = (prop?: PointerTypes): CSSProp => {
   `;
 };
 
+export const getWordWrapStyles = (prop?: WordWrapTypes): CSSProp => {
+  if (!prop) {
+    return css``;
+  }
+  const { word_wrap, word_break, white_space, text_overflow } = prop;
+
+  return css`
+    ${word_wrap && `word-wrap: ${word_wrap};`}
+    ${word_break && `word-break: ${word_break};`}
+    ${white_space && `white-space: ${white_space};`}
+    ${text_overflow && `text-overflow: ${text_overflow};`}
+  `;
+};
+
 const getGenericStyles = (styles?: CommonStyleType): CSSProp => {
   return css`
     ${getPaddingStyles(styles)}
@@ -490,6 +505,8 @@ const getGenericStyles = (styles?: CommonStyleType): CSSProp => {
     ${getMarginStyles(styles)}
     ${getPositionStyles(styles)}
     ${getPointerStyles(styles)}
+    ${getWordWrapStyles(styles)}
+    ${getAnimationStyles(styles)}
   `;
 };
 
@@ -560,9 +577,19 @@ export const getAnimationStyles = (prop?: AnimationType): CSSProp => {
   if (!prop) {
     return css``;
   }
-  const { transition } = prop;
+  const {
+    transition,
+    transition_delay,
+    transition_duration,
+    transition_property,
+    transition_timing_function,
+  } = prop;
 
   return css`
-    ${transition && `display: ${transition};`}
+    ${transition && `transition: ${transition};`}
+    ${transition_delay && `transition-delay: ${transition_delay};`}
+    ${transition_duration && `transition-duration: ${transition_duration};`}
+    ${transition_property && `transition-property: ${transition_property};`}
+    ${transition_timing_function && `transition-timing-function: ${transition_timing_function};`}
   `;
 };