Merge pull request #284 from codypearce/21-banner-with-appbar

21 create banner appbar demo
codypearce · Sep 9, 2019 · 153329b · 153329b
2 parents 83ab152 + d3f5875
commit 153329b
Showing 1 changed file with 49 additions and 1 deletion.
diff --git a/src/Components/Banner/Banner.stories.js b/src/Components/Banner/Banner.stories.js
@@ -1,10 +1,13 @@
 import React from 'react';
+import { View, StyleSheet, Platform, Dimensions } from 'react-native';
 import { storiesOf } from '../../storybook/helpers/storiesOf';
 
-import { Banner, Avatar } from '../../';
+import { Banner, Avatar, Appbar, Heading, BodyText } from '../../';
 import Header from '../../storybook/components/Header';
 import Container from '../../storybook/components/Container';
 
+const pageWidth = Platform.OS == 'web' ? 400 : Dimensions.get('window').width;
+
 /* eslint-disable no-console */
 export default storiesOf('Components|Banner', module)
   .addParameters({ jest: ['Banner'] })
@@ -92,4 +95,49 @@ export default storiesOf('Components|Banner', module)
         style={{ marginBottom: 40 }}
       />
     </Container>
+  ))
+  .add('With Appbar', () => (
+    <Container scroll style={{ padding: 0 }}>
+      <View style={styles.container}>
+        <View style={styles.body}>
+          <Appbar
+            barType={'normal'}
+            title={'Trivia App'}
+            navigation={'menu'}
+            actionItems={[{ name: 'search' }, { name: 'more-vert' }]}
+          />
+          <Banner
+            visible
+            mobileLayout
+            actionItems={[{ name: 'Fix it' }, { name: 'Learn more' }]}
+            message={
+              'There was a problem processsing a transaction on your card. '
+            }
+          />
+          <View
+            style={{
+              marginTop: 20,
+              alignItems: 'center',
+              paddingLeft: 24,
+              paddingRight: 24,
+            }}>
+            <Heading type={4} style={{ marginBottom: 20 }}>
+              Trivia Page Content
+            </Heading>
+            <BodyText text="Cassowaries cannot fly due to lack of chest bone that supports muscles used for flying." />
+          </View>
+        </View>
+      </View>
+    </Container>
   ));
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 1,
+    position: 'relative',
+  },
+  body: {
+    width: pageWidth,
+    height: 500,
+  },
+});