Fakultas Ilmu Komputer UI

Commit 3dd7f403 authored by Doan Andreas Nathanael's avatar Doan Andreas Nathanael
Browse files

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

Create Initial Page UI, plus BigButton component

See merge request !8
parents 6dea5989 61cc97d4
Pipeline #67017 passed with stages
in 23 minutes and 49 seconds
......@@ -36,6 +36,7 @@
9C5DA1E5E36F41F2AB5513D6 /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7F142C51D25D4AA886FC3422 /* SimpleLineIcons.ttf */; };
F1FC0F9DF7AD4E16B1413E97 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FFFB1F491FAF45A6AB0B18CE /* Zocial.ttf */; };
4F26060B007F432094C404C8 /* Roboto-Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 18B35410CBB148C2BEFEA318 /* Roboto-Medium.ttf */; };
4335541BBE1046F882A88C90 /* Montserrat-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C58717AF5FB64985811F9CD9 /* Montserrat-Bold.ttf */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
......@@ -91,6 +92,7 @@
7F142C51D25D4AA886FC3422 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
FFFB1F491FAF45A6AB0B18CE /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
18B35410CBB148C2BEFEA318 /* Roboto-Medium.ttf */ = {isa = PBXFileReference; name = "Roboto-Medium.ttf"; path = "../assets/fonts/Roboto-Medium.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
C58717AF5FB64985811F9CD9 /* Montserrat-Bold.ttf */ = {isa = PBXFileReference; name = "Montserrat-Bold.ttf"; path = "../assets/fonts/Montserrat-Bold.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
......@@ -221,6 +223,7 @@
7F142C51D25D4AA886FC3422 /* SimpleLineIcons.ttf */,
FFFB1F491FAF45A6AB0B18CE /* Zocial.ttf */,
18B35410CBB148C2BEFEA318 /* Roboto-Medium.ttf */,
C58717AF5FB64985811F9CD9 /* Montserrat-Bold.ttf */,
);
name = Resources;
sourceTree = "<group>";
......@@ -384,6 +387,7 @@
9C5DA1E5E36F41F2AB5513D6 /* SimpleLineIcons.ttf in Resources */,
F1FC0F9DF7AD4E16B1413E97 /* Zocial.ttf in Resources */,
4F26060B007F432094C404C8 /* Roboto-Medium.ttf in Resources */,
4335541BBE1046F882A88C90 /* Montserrat-Bold.ttf in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
......
......@@ -75,6 +75,7 @@
<string>SimpleLineIcons.ttf</string>
<string>Zocial.ttf</string>
<string>Roboto-Medium.ttf</string>
<string>Montserrat-Bold.ttf</string>
</array>
</dict>
</plist>
export const banner_girl_eating = require('./banner_girl_eating.png');
export const logo_white_small = require('./logo_white_small.png');
import React from 'react';
import { act, create } from 'react-test-renderer';
import { fireEvent, render } from '@testing-library/react-native';
import BigButton from '.';
describe('BigButton', () => {
it('renders correctly when active', () => {
create(
<BigButton title="ima button" onPress={() => console.log('cool')} />,
);
});
it('renders correctly when disabled', () => {
create(
<BigButton
title="ima button"
onPress={() => console.log('cool')}
disabled
/>,
);
});
it('renders correctly when given a testID', () => {
create(
<BigButton
title="ima button"
onPress={() => console.log('cool')}
testID="button"
/>,
);
});
it('executes onPress callback when button is pressed', async () => {
let isPressed = false;
const component = create(
<BigButton
title="ima button"
onPress={() => (isPressed = true)}
testID="button"
/>,
);
const instance = component.root;
const button = instance.findAllByType(BigButton)[0];
act(() => button.props.onPress());
expect(isPressed).toBeTruthy();
});
});
import React, { FC } from 'react';
import { View } from 'react-native';
import Button from 'react-native-button';
import { styles } from './styles';
import { Props } from './types';
const BigButton: FC<Props> = ({ title, onPress, disabled, testID }) => (
<View testID={testID}>
<Button
style={styles.titleStyle}
styleDisabled={styles.disabledStyle}
disabled={disabled}
containerStyle={styles.containerStyle}
disabledContainerStyle={styles.disabledContainerStyle}
onPress={onPress}>
{title}
</Button>
</View>
);
export default BigButton;
import { StyleSheet } from 'react-native';
import { typographyStyles, colors } from 'styles';
export const styles = StyleSheet.create({
titleStyle: { ...typographyStyles.overlineBig, color: colors.textBlack },
containerStyle: {
padding: 12,
overflow: 'hidden',
borderRadius: 4,
backgroundColor: colors.buttonYellow,
},
disabledStyle: { color: 'white' },
disabledContainerStyle: { backgroundColor: 'pink' },
});
export interface Props {
title: string;
onPress: () => void;
disabled?: true;
testID?: string;
}
export { default as BigButton } from './Button';
export { default as WizardContainer } from './WizardContainer';
import React from 'react';
import { render } from '@testing-library/react-native';
import { fireEvent, render } from '@testing-library/react-native';
import InitialPage from '.';
......@@ -7,4 +7,25 @@ describe('InitialPage', () => {
it('renders correctly', () => {
render(<InitialPage />);
});
test('has background image', () => {
const { queryByTestId } = render(<InitialPage />);
expect(queryByTestId('background')).toBeTruthy();
});
test('has Dietela logo', () => {
const { queryByTestId } = render(<InitialPage />);
expect(queryByTestId('logo')).toBeTruthy();
});
test('has call-to-action button', () => {
const { queryByTestId } = render(<InitialPage />);
const button = queryByTestId('cta-button');
fireEvent.press(button);
expect(button).toBeTruthy();
});
});
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import { View, Text, ImageBackground, Image } from 'react-native';
import { layoutStyles, typographyStyles } from '../../../styles';
import { styles } from './styles';
import { banner_girl_eating, logo_white_small } from '../../../assets/images';
import BigButton from 'components/core/Button';
const InitialPage: FC = () => (
<View style={styles.view}>
<Text>Hello there</Text>
</View>
<ImageBackground
source={banner_girl_eating}
style={styles.bgImage}
testID="background">
<View style={[layoutStyles, styles.view]}>
<Image source={logo_white_small} style={styles.logo} testID="logo" />
<View style={styles.headingContainer}>
<Text
style={[typographyStyles.displayMediumMontserrat, styles.heading]}>
Online Nutritionist Pertama di Indonesia
</Text>
<Text style={[typographyStyles.bodyMedium, styles.heading]}>
Hadir untuk mendefinisikan ulang kata “Diet” untuk Anda!
</Text>
<Text style={[typographyStyles.bodyMedium, styles.heading]}>
Apapun masalah diet Anda, konsultasikan bersama kami!
</Text>
</View>
<View style={styles.ctaContainer}>
<BigButton
title="konsultasi sekarang"
onPress={() => console.log('keren')}
testID="cta-button"
/>
</View>
</View>
</ImageBackground>
);
export default InitialPage;
import { StyleSheet } from 'react-native';
import { Dimensions, StyleSheet } from 'react-native';
import { colors } from 'styles';
let { height } = Dimensions.get('window');
export const styles = StyleSheet.create({
view: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
justifyContent: 'space-between',
},
bgImage: {
width: '100%',
height: '100%',
},
logo: {
marginTop: height * 0.05,
height: 100,
resizeMode: 'contain',
overflow: 'visible',
},
ctaContainer: {
marginBottom: height * 0.05,
},
headingContainer: {
marginBottom: height * 0.05,
},
heading: {
marginBottom: 5,
color: colors.neutralLight,
},
});
......@@ -7,4 +7,6 @@ export const colors = {
neutralLight: '#F6F8FA',
formLabel: '#666666',
border: '#E0E0E0',
buttonYellow: '#E6AF05',
textBlack: '#000000',
};
......@@ -4,6 +4,7 @@ export const fontConfig = {
normal: 'Roboto-Regular',
italic: 'Roboto-Italic',
bold: 'Roboto-Medium',
bold_montserrat: 'Montserrat-Bold',
};
export const typography = {
......@@ -15,6 +16,10 @@ export const typography = {
fontFamily: fontConfig.bold,
fontSize: 32,
},
displayMediumMontserrat: {
fontFamily: fontConfig.bold_montserrat,
fontSize: 30,
},
headingLarge: {
fontFamily: fontConfig.bold,
fontSize: 24,
......@@ -64,6 +69,10 @@ export const typographyStyles: {
fontFamily: fontConfig.bold,
fontSize: 32,
},
displayMediumMontserrat: {
fontFamily: fontConfig.bold_montserrat,
fontSize: 32,
},
headingLarge: {
fontFamily: fontConfig.bold,
fontSize: 24,
......
......@@ -5946,7 +5946,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
......@@ -6026,6 +6026,13 @@ react-is@^17.0.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
react-native-button@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/react-native-button/-/react-native-button-3.0.1.tgz#89de59b6ee23f6cb4451c4ebe311cc14fb02c65a"
integrity sha512-Tkj7PwATNEXPOX4ubE+P8WnyJMenywU6Es/Bk2r2aR15204+AxSOEB3sp7JDP44LI+tUMetjudNBRRuKQOmoPw==
dependencies:
prop-types "^15.5.10"
react-native-elements@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/react-native-elements/-/react-native-elements-3.3.2.tgz#42cc05c90a5c85c8aee95ce363bce0c5a39fe633"
......
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