@momo-kits/foundation 0.80.9 → 0.81.1-beta.0

package/Text/styles.ts

@@ -1,4 +1,42 @@
 export default {
+  headline_default_bold: {fontSize: 24, lineHeight: 34, fontWeight: '700'},
+  header_m_bold: {fontSize: 18, lineHeight: 26, fontWeight: '700'},
+  header_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
+  header_s_semibold: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
+  header_xs_semibold: {fontSize: 12, lineHeight: 18, fontWeight: '600'},
+  body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
+  body_default_regularstrikethrought: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  description_default_regular: {
+    fontSize: 12,
+    lineHeight: 18,
+    fontWeight: '400',
+  },
+  description_default_regularstrikethrought: {
+    fontSize: 12,
+    lineHeight: 18,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  description_xs_regular: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
+  description_xs_regularstrikethrought: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: '400',
+    textDecorationLine: 'line-through',
+  },
+  label_default_medium: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
+  label_s_medium: {fontSize: 12, lineHeight: 18, fontWeight: '500'},
+  label_xs_medium: {fontSize: 10, lineHeight: 14, fontWeight: '500'},
+  action_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
+  action_s_bold: {fontSize: 14, lineHeight: 20, fontWeight: '700'},
+  action_xs_bold: {fontSize: 12, lineHeight: 18, fontWeight: '700'},
+  action_xxs_bold: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
+  /**non-support**/
   headline_default: {
     fontSize: 28,
     lineHeight: 34,

package/Text/types.ts

@@ -14,27 +14,39 @@ export type TypographyWeight = {
 };
 
 export type Typography =
+  /**
+   * @deprecated
+   **/
   | 'headline_default'
-  | 'headline_s'
   | 'headline_l'
   | 'headline_xl'
   | 'title_default'
   | 'title_xs'
   | 'title_s'
   | 'header_default'
-  | 'header_xs'
-  | 'header_s'
   | 'paragraph_default'
   | 'paragraph_bold'
   | 'paragraph_italic'
-  | 'description_default'
-  | 'description_xs'
-  | 'description_s'
-  | 'label_default'
   | 'label_xxs'
-  | 'label_xs'
-  | 'label_s'
-  | 'action_default'
-  | 'action_xxs'
-  | 'action_xs'
-  | 'action_s';
+  | 'action_s'
+  /**
+   * end
+   **/
+  | 'headline_default_bold'
+  | 'header_m_bold'
+  | 'header_default_bold'
+  | 'header_s_semibold'
+  | 'header_xs_semibold'
+  | 'body_default_regular'
+  | 'body_default_regularstrikethrought'
+  | 'description_default_regular'
+  | 'description_default_regularstrikethrought'
+  | 'description_xs_regular'
+  | 'description_xs_regularstrikethrought'
+  | 'label_default_medium'
+  | 'label_s_medium'
+  | 'label_xs_medium'
+  | 'action_default_bold'
+  | 'action_s_bold'
+  | 'action_xs_bold'
+  | 'action_xxs_bold';

package/Title/index.tsx

@@ -1,85 +1,199 @@
-import React, {FC, useContext} from 'react';
-import {Text as RNText, TouchableOpacity, View} from 'react-native';
-import {TitleProps} from './types';
-import {Icon} from '../Icon';
+import React, {FC, useContext, useState} from 'react';
+import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
+import {
+  Typography,
+  Colors,
+  Icon,
+  Badge,
+  ApplicationContext,
+  scaleSize,
+  Text,
+} from '@momo-kits/foundation';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
-import {Colors, Spacing} from '../Consts';
-import {scaleSize, Text} from '../Text';
+import {TitleProps} from './types';
 
 const Title: FC<TitleProps> = ({
-  size = 'large',
-  type = 'section',
-  onPressAction,
-  actionTitle,
   title = 'Title',
-  titleFlex = true,
-  showAction = true,
+  type = 'section',
+  size = 'medium',
   icon,
   description,
+  iconColor = null,
+  iconAlign = 'top',
+  showRightAction = false,
+  showTrailingAction = false,
+  badgeLabel,
+  buttonTitle,
+  onPressRightAction = () => {},
+  onPressTrailingAction = () => {},
+  buttonSize = 'small',
+  textOnly = false,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const flexStyle = titleFlex ? {flex: 1} : {};
-  const typeStyle =
-    type === 'screen' ? styles.screen : styles[`${type}_${size}`];
-  const actionColor = titleFlex
-    ? theme.colors.primary
-    : theme.colors.text.default;
-  const actionBackground = titleFlex
-    ? theme.colors.primary + '0F'
-    : Colors.black_06;
-  const actionSize = titleFlex ? scaleSize(22) : scaleSize(18);
-  const titleWeight = type === 'screen' ? 'Semibold' : 'Bold';
-  const marginStyle = type === 'section' ? {marginTop: Spacing.M} : {};
+  const [badgeWidth, setBadgeWidth] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+  const styleSheet: {
+    [key: string]: any;
+  } = styles;
+  const typography = `${type}_${size}`;
+  const isSection = type === 'section';
+  const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
+  const buttonTypo: Typography =
+    buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
+  const flexStyle = showTrailingAction && {maxWidth: '70%'};
 
-  const renderAction = () => {
-    return !!actionTitle && titleFlex ? (
-      <TouchableOpacity onPress={onPressAction}>
-        <Text typography={'action_s'} color={theme.colors.primary}>
-          {actionTitle}
-        </Text>
-      </TouchableOpacity>
-    ) : (
+  const renderIcon = () => {
+    if (!icon) return null;
+
+    let iconStyle: ViewStyle = {
+      justifyContent: 'flex-start',
+    };
+
+    if (iconAlign === 'middle') {
+      iconStyle = {justifyContent: 'center'};
+    }
+
+    if (iconAlign === 'bottom') {
+      iconStyle = {justifyContent: 'flex-end'};
+    }
+
+    return (
+      <View style={[styles.iconView, iconStyle]}>
+        <Icon color={iconColor} source={icon} />
+      </View>
+    );
+  };
+
+  const renderContent = () => {
+    return (
+      <View style={styles.contentView}>
+        <View
+          onLayout={e => {
+            if (e.nativeEvent.layout.width !== contentWidth) {
+              setContentWidth(e.nativeEvent.layout.width);
+            }
+          }}
+          style={[styles.iconLeftView, flexStyle]}>
+          <RNText
+            numberOfLines={numberOfLines}
+            style={[
+              styleSheet[typography],
+              styles.title,
+              {
+                maxWidth:
+                  contentWidth > 0 ? contentWidth - badgeWidth : undefined,
+              },
+            ]}>
+            {title}
+          </RNText>
+          {badgeLabel && (
+            <View
+              onLayout={e => {
+                if (e.nativeEvent.layout.width !== badgeWidth) {
+                  setBadgeWidth(e.nativeEvent.layout.width);
+                }
+              }}
+              style={{
+                alignItems: 'center',
+              }}>
+              <Badge style={styles.badge} label={badgeLabel} />
+            </View>
+          )}
+          {renderActionLeft()}
+        </View>
+        {description && (
+          <Text
+            style={styles.description}
+            color={theme.colors.text.secondary}
+            typography={'description_default_regular'}>
+            {description}
+          </Text>
+        )}
+      </View>
+    );
+  };
+
+  const renderActionLeft = () => {
+    return (
       <TouchableOpacity
-        style={[
-          {backgroundColor: actionBackground},
-          styles.actionIcon,
-          {width: actionSize, height: actionSize},
-        ]}
-        onPress={onPressAction}>
-        <Icon
-          size={actionSize}
-          color={actionColor}
-          source={'arrow_chevron_right_small'}
-        />
+        onPress={onPressTrailingAction}
+        style={styles.iconLeftView}>
+        {showTrailingAction && !showRightAction && (
+          <View
+            style={[
+              styles.iconLeft,
+              {
+                backgroundColor: isSection
+                  ? Colors.black_06 + '99'
+                  : Colors.black_06 + '4D',
+              },
+            ]}>
+            <Icon
+              source={'arrow_chevron_right_small'}
+              size={scaleSize(18)}
+              color={theme.colors.text.default}
+            />
+          </View>
+        )}
       </TouchableOpacity>
     );
   };
 
-  return (
-    <View style={styles.wrapper}>
-      <View style={[styles.container, marginStyle]}>
-        {!!icon && type !== 'screen' && (
-          <Icon style={styles.icon} source={icon} />
+  const renderActionRight = () => {
+    if (!showRightAction || showTrailingAction) return false;
+
+    const lineHeight = styleSheet[typography].lineHeight;
+
+    return (
+      <View
+        style={{
+          height: lineHeight,
+          justifyContent: 'center',
+        }}>
+        {!buttonTitle ? (
+          <TouchableOpacity
+            onPress={onPressRightAction}
+            style={[
+              styles.iconRight,
+              {
+                backgroundColor: theme.colors.primary + '0F',
+              },
+            ]}>
+            <Icon
+              source={'arrow_chevron_right_small'}
+              size={scaleSize(22)}
+              color={theme.colors.primary}
+            />
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity onPress={onPressRightAction}>
+            <Text color={theme.colors.primary} typography={buttonTypo}>
+              {buttonTitle}
+            </Text>
+          </TouchableOpacity>
         )}
+      </View>
+    );
+  };
+
+  if (textOnly) {
+    return (
+      <View style={isSection && styles.margin}>
         <RNText
-          style={[
-            typeStyle,
-            flexStyle,
-            styles.title,
-            {
-              fontFamily: `${theme.font}-${titleWeight}`,
-            },
-          ]}>
+          numberOfLines={numberOfLines}
+          style={[styleSheet[typography], styles.title]}>
           {title}
         </RNText>
-        {showAction && type !== 'screen' && renderAction()}
       </View>
-      {!!description && type !== 'screen' && (
-        <Text typography={'description_s'} color={theme.colors.text.secondary}>
-          {description}
-        </Text>
-      )}
+    );
+  }
+
+  return (
+    <View style={[style, styles.wrapper, isSection && styles.margin]}>
+      {renderIcon()}
+      {renderContent()}
+      {renderActionRight()}
     </View>
   );
 };

package/Title/styles.ts

@@ -1,9 +1,13 @@
 import {StyleSheet} from 'react-native';
 import {scaleSize} from '../Text';
-import {Radius, Spacing} from '../Consts';
+import {Colors, Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   card_small: {
+    fontSize: scaleSize(14),
+    lineHeight: scaleSize(20),
+  },
+  card_medium: {
     fontSize: scaleSize(16),
     lineHeight: scaleSize(22),
   },
@@ -11,36 +15,65 @@ export default StyleSheet.create({
     fontSize: scaleSize(18),
     lineHeight: scaleSize(26),
   },
-  section_small: {
+  section_medium: {
     fontSize: scaleSize(20),
     lineHeight: scaleSize(28),
   },
+  section_small: {
+    fontSize: scaleSize(16),
+    lineHeight: scaleSize(22),
+  },
   section_large: {
     fontSize: scaleSize(24),
     lineHeight: scaleSize(34),
   },
-  screen: {
-    fontSize: scaleSize(36),
-    lineHeight: scaleSize(44),
+  actionIcon: {
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  title: {
-    marginRight: Spacing.XS,
+  icon: {
+    marginRight: Spacing.S,
+    borderRadius: Radius.XS,
   },
-  container: {
+  wrapper: {
     flexDirection: 'row',
+  },
+  margin: {
+    marginTop: Spacing.S,
+  },
+  iconView: {
+    marginRight: Spacing.S,
+  },
+  iconRight: {
+    width: scaleSize(22),
+    height: scaleSize(22),
+    borderRadius: Radius.M,
     alignItems: 'center',
-    width: '100%',
+    justifyContent: 'center',
+    marginLeft: Spacing.S,
   },
-  actionIcon: {
+  iconLeft: {
+    width: scaleSize(18),
+    height: scaleSize(18),
     borderRadius: Radius.M,
     alignItems: 'center',
     justifyContent: 'center',
+    marginHorizontal: Spacing.XS,
   },
-  icon: {
-    marginRight: Spacing.XS,
-    borderRadius: Radius.XS,
+  iconLeftView: {
+    flexDirection: 'row',
+    alignItems: 'center',
   },
-  wrapper: {
-    width: '100%',
+  contentView: {marginRight: Spacing.S, flex: 1},
+  title: {
+    fontWeight: 'bold',
+    color: Colors.black_17,
+  },
+  badge: {
+    marginLeft: Spacing.XS,
+  },
+  description: {
+    marginTop: Spacing.XS,
   },
 });

package/Title/types.ts

@@ -1,51 +1,20 @@
-export type TitleProps = {
-  /**
-   * Optional. Defines the type of Title component.
-   * 'screen' - Used for screen titles.
-   * 'section' - Used for section titles within a screen.
-   * 'card' - Used for titles within a card component.
-   */
-  type?: 'screen' | 'section' | 'card';
+import {ViewStyle} from 'react-native';
 
-  /**
-   * Required. The text of the title.
-   */
+export type TitleProps = {
+  type?: 'card' | 'section';
+  size?: 'small' | 'medium' | 'large';
   title: string;
-
-  /**
-   * Optional. A description or subtitle that appears below the title.
-   */
-  description?: string;
-
-  /**
-   * Optional. Defines the size of the Title component.
-   * 'large' - A larger, more prominent title.
-   * 'small' - A smaller, less prominent title.
-   */
-  size?: 'large' | 'small';
-
-  /**
-   * Optional. Represents the name or key of the icon to be displayed alongside the title.
-   */
   icon?: string;
-
-  /**
-   * Optional. If `true`, the title will be flexible in its container, adjusting its width dynamically.
-   */
-  titleFlex?: boolean;
-
-  /**
-   * Optional. Text for an action button associated with the title.
-   */
-  actionTitle?: string;
-
-  /**
-   * Optional. Function to be called when the action associated with the title is pressed.
-   */
-  onPressAction?: () => void;
-
-  /**
-   * Optional. If `true`, an action button or icon is displayed alongside the title.
-   */
-  showAction?: boolean;
+  description?: string;
+  iconColor?: string;
+  iconAlign?: 'top' | 'middle' | 'bottom';
+  showRightAction?: boolean;
+  showTrailingAction?: boolean;
+  badgeLabel?: string;
+  buttonTitle?: string;
+  buttonSize?: 'small' | 'large';
+  onPressRightAction?: () => void;
+  onPressTrailingAction?: () => void;
+  textOnly?: boolean;
+  style?: ViewStyle;
 };