Fakultas Ilmu Komputer UI

Commit 96decd10 authored by Doan Andreas Nathanael's avatar Doan Andreas Nathanael
Browse files

Merge branch 'PBI-1-Quiz_Result' into 'staging'

Dietela Quiz Result UI

See merge request !9
parents 694f5590 5db7e9d4
Pipeline #67429 failed with stages
in 30 minutes and 38 seconds
export const banner_girl_eating = require('./banner_girl_eating.png');
export const logo_white_small = require('./logo_white_small.png');
export const status_berat_badan = require('./status_berat_badan.png');
import React from 'react';
import { render } from '@testing-library/react-native';
import AutoImage from '.';
import { logo_white_small } from '../../../assets/images';
describe('AutoImage', () => {
it('renders correctly', () => {
render(<AutoImage source={logo_white_small} />);
});
});
import React, { FC } from 'react';
import { View, Image, ImageSourcePropType } from 'react-native';
import FullWidthImage from 'react-native-fullwidth-image';
interface Props {
source: ImageSourcePropType;
ratio?: number;
testID?: string;
}
const AutoImage: FC<Props> = ({ source, ratio, testID }) => {
const { width, height } = Image.resolveAssetSource(source);
return (
<View testID={testID}>
<FullWidthImage
source={source}
width={width}
height={height}
ratio={ratio}
/>
</View>
);
};
export default AutoImage;
import React from 'react';
import { render } from '@testing-library/react-native';
import CarouselPagination from '.';
describe('CarouselPagination', () => {
it('renders correctly', () => {
render(<CarouselPagination index={0} length={9} />);
});
});
import React, { FC } from 'react';
import { Pagination } from 'react-native-snap-carousel';
import { styles } from './styles';
interface Props {
index: number;
length: number;
}
const CarouselPagination: FC<Props> = ({ index, length }) => (
<Pagination
dotsLength={length}
activeDotIndex={index}
dotStyle={styles.dotStyle}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
/>
);
export default CarouselPagination;
import { StyleSheet } from 'react-native';
import { colors } from 'styles';
export const styles = StyleSheet.create({
dotStyle: {
width: 10,
height: 10,
borderRadius: 5,
marginHorizontal: -3,
backgroundColor: colors.primary,
},
});
import React from 'react';
import { render } from '@testing-library/react-native';
import InfoCard from '.';
describe('InfoCard', () => {
it('renders correctly', () => {
render(<InfoCard />);
});
});
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import { typographyStyles } from 'styles';
import { styles } from './styles';
interface Props {
content: string;
testID?: string;
}
const InfoCard: FC<Props> = ({ content, testID }) => {
return (
<View style={[styles.card]} testID={testID}>
<Text style={typographyStyles.bodyMedium}>{content}</Text>
</View>
);
};
export default InfoCard;
import { StyleSheet } from 'react-native';
import { colors } from 'styles';
export const styles = StyleSheet.create({
card: {
borderRadius: 8,
padding: 15,
backgroundColor: colors.neutralLight,
},
});
import React from 'react';
import { render } from '@testing-library/react-native';
import ResultCard from '.';
describe('ResultCard', () => {
const info = [
{
title: 'Energi per hari',
content: '1953 kkal',
},
{
title: 'Protein per hari',
content: '23 kkal',
},
];
it('renders correctly', () => {
render(<ResultCard status="healthy" infos={info} />);
});
});
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import { typographyStyles } from 'styles';
import { styles } from './styles';
interface Props {
infos: { title: string; content: string }[];
status: 'healthy' | 'warning' | 'danger';
testID?: string;
}
const ResultCard: FC<Props> = ({ infos, status, testID }) => {
const getColorFromStatus = (status: string) => {
if (status === 'healthy') {
return '#1DD1A1';
} else if (status === 'warning') {
return '#FF9A3E';
} else {
return '#F44771';
}
};
const cardColor = getColorFromStatus(status);
const infoPairs = infos.reduce(function (result, value, index, array) {
if (index % 2 === 0) result.push(array.slice(index, index + 2));
return result;
}, []);
return (
<View style={[styles.card, { backgroundColor: cardColor }]} testID={testID}>
{infoPairs.map((pair, ii) => (
<View style={styles.row} key={ii}>
{pair.map((info, jj) => {
const padding =
jj % 2 === 0
? { flex: 1, paddingRight: 10 }
: { flex: 1, paddingLeft: 10 };
return (
<View style={[styles.content, padding]} key={info.title}>
<Text style={[typographyStyles.overlineBig, styles.text]}>
{info.title}
</Text>
<Text
style={[
typographyStyles.headingMedium,
styles.text,
{ marginTop: 4 },
]}>
{info.content}
</Text>
</View>
);
})}
</View>
))}
</View>
);
};
export default ResultCard;
import { StyleSheet } from 'react-native';
import { colors } from 'styles';
export const styles = StyleSheet.create({
card: {
borderRadius: 8,
},
row: {
padding: 15,
flexDirection: 'row',
},
content: {
flex: 1,
},
text: {
color: colors.neutralLight,
},
});
import React from 'react';
import { render } from '@testing-library/react-native';
import Statistic from '.';
describe('Statistic', () => {
it('renders correctly', () => {
render(<Statistic title="berat badan" emote="⚖️" content="77 kg" />);
});
});
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import { typographyStyles } from 'styles';
import { styles } from './styles';
interface Props {
title: string;
emote: string;
content: string;
testID?: string;
}
const Statistic: FC<Props> = ({ title, emote, content, testID }) => {
return (
<View testID={testID}>
<Text style={[typographyStyles.overlineBig, styles.title]}>{title}</Text>
<View>
<Text style={typographyStyles.bodyMedium}>
<View style={styles.emote}>
<Text style={[typographyStyles.bodyMedium, styles.emote]}>
{emote}
</Text>
</View>
<View>
<Text style={typographyStyles.bodyMedium}>{content}</Text>
</View>
</Text>
</View>
</View>
);
};
export default Statistic;
import { StyleSheet } from 'react-native';
export const styles = StyleSheet.create({
title: {
marginBottom: 4,
},
contentContainer: {
flexDirection: 'row',
},
emote: {
marginRight: 8,
},
});
export { default as BigButton } from './Button';
export { default as WizardContainer } from './WizardContainer';
export { default as AutoImage } from './AutoImage';
export { default as ResultCard } from './ResultCard';
export { default as Statistic } from './Statistic';
export { default as CarouselPagination } from './CarouselPagination';
export { default as InfoCard } from './InfoCard';
export { default as Toast } from 'react-native-toast-message';
import React from 'react';
import { render } from '@testing-library/react-native';
import Section from '.';
describe('Section', () => {
it('renders correctly', () => {
render(<Section />);
});
});
import React, { FC } from 'react';
import { View } from 'react-native';
const Section: FC = ({ children }) => (
<View style={{ marginTop: 15 }}>{children}</View>
);
export default Section;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment