61 Add divider demo for insetLeft

docs/src/content/components/divider/Demos/InsetLeftDemo.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { View } from 'react-native';
+import { ComponentDemo, CodeInline } from '@components';
+import { Divider, List, ListItem, Avatar } from '../../../../../../src/index';
+
+export const code = `class DialogPage extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+  render() {
+    return (
+        <List subheader={'Favorites'} style={{ width: 300 }}>
+        <ListItem
+          text={'Janet Perkins'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
+
+        <ListItem
+          text={'Mary Perkins'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
+        <Divider insetLeft={20} />
+        <ListItem
+          text={'Peter Carlsson'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
+        <ListItem
+          text={'Trevor Hansen'}
+          media={
+            <Avatar
+              type="icon"
+              content="person"
+              contentColor={'#ececec'}
+              color={'#a3a3a3'}
+              size={40}
+            />
+          }
+        />
+     
+      </List>
+    );
+  }
+}
+`;
+
+const SubtitleDemo = ({ pageHref }) => (
+  <ComponentDemo
+    sectionName={'InsetLeft'}
+    sectionHref={`${pageHref}#insetleft`}
+    sectionId={'insetleft'}
+    code={code}
+    description={
+      <div>
+        <CodeInline code="insetLeft" type="prop" /> shortens the width of the
+        divider by the provided amount and moves the{' '}
+        <CodeInline code="Divider" type="element" /> to the right by that
+        amount. This is useful for keeping the{' '}
+        <CodeInline code="Divider" type="element" /> inline with other elements.
+      </div>
+    }
+    scope={{ View, Divider, List, ListItem, Avatar }}
+  />
+);
+export default SubtitleDemo;

docs/src/content/components/divider/Demos/index.js

@@ -3,18 +3,21 @@ import PropTypes from 'prop-types';
 import { ComponentDemoHeader } from '@components';
 
 import SubheaderDemo from './SubheaderDemo';
+import InsetLeftDemo from './InsetLeftDemo';
 
 export default class Demos extends Component {
   static propTypes = {
     pageHref: PropTypes.string,
   };
   render() {
     const { pageHref } = this.props;
+
     return (
       <div>
         <ComponentDemoHeader pageHref={pageHref} />
 
         <SubheaderDemo pageHref={pageHref} />
+        <InsetLeftDemo pageHref={pageHref} />
       </div>
     );
   }

docs/src/content/components/divider/index.js

@@ -11,6 +11,7 @@ const sections = [
   { name: 'Props' },
   { name: 'Demos' },
   { name: 'subheader', sub: true },
+  { name: 'insetLeft', sub: true },
 ];
 
 export default class DividerPage extends Component {

docs/src/content/components/divider/propData.js

@@ -1,6 +1,7 @@
 import { createTableData } from '../../../utils/createPropData';
 const propData = [
   ['insetHeader', 'Subheader inset number ', 'number', ''],
+  ['insetLeft', 'Inset of Divider from left ', 'number', ''],
   ['marginVertical', 'Adds magin on top and bottom for spacing', 'number', ''],
   ['style', 'Styles root element', 'object', ''],
   ['subheader', 'Displays under a divider as text ', 'string', ''],

src/Components/Divider/__snapshots__/Divider.test.js.snap

@@ -10,7 +10,9 @@ exports[`Divider Renders 1`] = `
       },
       Object {
         "height": 0.5,
+        "marginLeft": 0,
         "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]

src/Components/Icon/Icon.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import MaterialIcons from 'react-native-vector-icons/dist/MaterialIcons';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import withTheme from '../../Theme/withTheme';
 
 class Icon extends Component {