💄 Fix dialog design according to design review.

ZeroGachis · Aug 22, 2024 · 188b064 · 188b064
1 parent a0fba46
commit 188b064
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 16 deletions.
diff --git a/Storybook/components/Dialog/Dialog.stories.tsx b/Storybook/components/Dialog/Dialog.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-native';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { Body, Dialog, useTheme } from 'smartway-react-native-ui';
+import { Body, Dialog } from 'smartway-react-native-ui';
 import { IconsName } from '../config/IconList';
 
 type DialogPropsAndCustomArgs = React.ComponentProps<typeof Dialog> & {
@@ -70,21 +70,15 @@ export default {
 type Story = StoryObj<DialogPropsAndCustomArgs>;
 
 const InsideDialog = ({ variantBody }: { variantBody?: 'left' | 'center' }) => {
-    const theme = useTheme();
-
     const styles = StyleSheet.create({
         content: {
-            color: theme.sw.color.neutral[600],
             textAlign: variantBody,
-            lineHeight: 22,
-            marginBottom: 0,
         },
     });
     return (
-        <Body style={styles.content} size='B2'>
-            A dialog is a type of modal window that appears in front of app
-            content to provide critical information. This is a dialog content
-            example.
+        <Body style={styles.content} typography={'n2'}>
+            A dialog is a type of modal window that appears in front of app content to provide
+            critical information. This is a dialog content example.
         </Body>
     );
 };

diff --git a/src/__tests__/components/__snapshots__/DateSelector.test.tsx.snap b/src/__tests__/components/__snapshots__/DateSelector.test.tsx.snap
@@ -84,6 +84,7 @@ exports[`MODULE | DateSelector component renders correctly with prefilled values
                   "color": "#212b36",
                   "fontFamily": "PublicSans-Bold",
                   "fontSize": 20,
+                  "lineHeight": 24,
                 },
                 {
                   "color": "#919eab",
@@ -142,6 +143,7 @@ exports[`MODULE | DateSelector component renders correctly with prefilled values
                   "color": "#212b36",
                   "fontFamily": "PublicSans-Bold",
                   "fontSize": 20,
+                  "lineHeight": 24,
                 },
                 {
                   "color": "#919eab",

diff --git a/src/components/dialogs/Dialog.tsx b/src/components/dialogs/Dialog.tsx
@@ -117,13 +117,14 @@ function useStyles({
     const commonStyleSheet = StyleSheet.create({
         dialog: {
             borderRadius: theme.sw.borderRadius.l,
-            marginTop: 0,
+            marginVertical: 0,
             marginLeft: 'auto',
             marginRight: 'auto',
             backgroundColor: theme.sw.color.neutral[0],
             ...style,
         },
         dialogContent: {
+            paddingBottom: 0,
             paddingHorizontal: 0,
         },
         title: {
@@ -172,14 +173,15 @@ function useStyles({
                 paddingVertical: 40,
                 width: '80%',
                 maxWidth: 500,
+                gap: theme.sw.spacing.m,
             },
             dialogContent: commonStyleSheet.dialogContent,
             title: {
                 ...commonStyleSheet.title,
-                marginBottom: theme.sw.spacing.m,
+                marginBottom: 0,
             },
             actions: {
-                marginTop: theme.sw.spacing.m,
+                marginBottom: 0,
                 ...commonStyleSheet.actions,
             },
             leftOption: commonStyleSheet.leftOption,

diff --git a/src/components/dialogs/DialogIcon.tsx b/src/components/dialogs/DialogIcon.tsx
@@ -24,7 +24,6 @@ export const DialogIcon = (props: DialogIconProps) => {
                 width: 100,
                 height: 100,
                 borderRadius: 50,
-                marginBottom: theme.sw.spacing.s,
             }}
         >
             <View

diff --git a/src/components/typography/Headline.tsx b/src/components/typography/Headline.tsx
@@ -3,21 +3,33 @@ import { StyleProp, Text, TextStyle } from 'react-native';
 import { useTheme } from '../../styles/themes';
 import type { TextProps } from 'react-native-paper';
 import { tokens } from '@zerogachis/smartway-design-token';
-import { getFont } from './utils';
+import { getFont, getLineHeight } from './utils';
+import { LineHeight } from '@zerogachis/smartway-design-token/dist/cjs/src/Tokens/TokensType';
 
 type HeadlineTypography = keyof typeof tokens.typography.headline;
 
 export interface HeadlineProps extends TextProps<Text> {
     typography: HeadlineTypography;
+    lineHeight?: keyof LineHeight;
 }
 
-export const Headline = ({ typography = 'n5', children, style, ...props }: HeadlineProps) => {
+export const Headline = ({
+    typography = 'n5',
+    lineHeight = 'normal',
+    children,
+    style,
+    ...props
+}: HeadlineProps) => {
     const theme = useTheme();
 
     const defaultHeadlineStyle: StyleProp<TextStyle> = {
         color: theme.sw.color.neutral[800],
         fontSize: tokens.typography.headline[typography]?.fontSize,
         fontFamily: getFont(tokens.typography.headline[typography]),
+        lineHeight: getLineHeight(
+            tokens.lineHeight[lineHeight],
+            tokens.typography.headline[typography]?.fontSize,
+        ),
     };
     return (
         <Text style={[defaultHeadlineStyle, style]} {...props}>

diff --git a/src/components/typography/utils.ts b/src/components/typography/utils.ts
@@ -1,5 +1,13 @@
 import { Font } from '@zerogachis/smartway-design-token/dist/cjs/src/Tokens/TokensType';
 
+export const getLineHeight = (lineHeight: string, fontSize?: number) => {
+    if (fontSize === undefined) {
+        return undefined;
+    }
+    const lineHeightPercent = parseFloat(lineHeight) / 100;
+    return fontSize * lineHeightPercent;
+};
+
 export const getFontWeight = (fontWeight: number | undefined) => {
     if (fontWeight === 400) {
         return 'Regular';