superdesk-ui-framework 4.0.46 → 4.0.48

package/examples/pages/components/GridItem.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { GridList, Icon, IconButton, Badge, Label, Checkbox, Prop, PropsList } from '../../../app-typescript';
+import {GridList, Icon, IconButton, Badge, Label, Checkbox, Prop, PropsList} from '../../../app-typescript';
 import * as GridElements from '../../../app-typescript/components/GridItem';
 
 interface IState {
-    selected: boolean,
-    locked: boolean,
-    status: Array<string>
+    selected: boolean;
+    locked: boolean;
+    status: Array<string>;
 }
 
 export default class GridItemDoc extends React.Component<{}, IState> {
@@ -15,7 +15,7 @@ export default class GridItemDoc extends React.Component<{}, IState> {
         this.state = {
             selected: true,
             locked: false,
-            status: ['selected']
+            status: ['selected'],
         };
     }
 
@@ -30,13 +30,14 @@ export default class GridItemDoc extends React.Component<{}, IState> {
 
         this.setState({status: statuses});
     }
-    
+
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>GridItem</h2>
-                
-                <Markup.ReactMarkupCodePreview>{`
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">GridItem</h2>
+
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <GridElements.GridItem itemtype='photo'>
                         <GridElements.GridItemMedia>...</GridElements.GridItemMedia>
                         <GridElements.GridItemContent>
@@ -56,9 +57,11 @@ export default class GridItemDoc extends React.Component<{}, IState> {
                 `}
                 </Markup.ReactMarkupCodePreview>
 
-                <p className="docs-page__paragraph">The <code>GridItem</code> is a complex container component intended for the display of content items in a grid structure.
-                Although it can be used as a standalone element, it works best as a child of the <code>GridList</code> component. If used without the <code>GridList</code> it should 
-                be placed in an element with a constrained width, as it doesn't have a limited width on its own. 
+                <p className="docs-page__paragraph">
+                    The <code>GridItem</code> is a complex container component intended for the display of content items
+                    in a grid structure. Although it can be used as a standalone element, it works best as a child of
+                    the <code>GridList</code> component. If used without the <code>GridList</code> it should be placed
+                    in an element with a constrained width, as it doesn't have a limited width on its own.
                 </p>
 
                 <h3 className="docs-page__h3 docs-page__h3--small-top-m">Full structure</h3>
@@ -66,129 +69,169 @@ export default class GridItemDoc extends React.Component<{}, IState> {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <GridList size="small" gap="medium" margin="1">
-                            <GridElements.GridItem itemtype='photo' status={this.state.status} onClick={()=> false}>
+                            <GridElements.GridItem itemtype="photo" status={this.state.status} onClick={() => false}>
                                 <GridElements.GridItemCheckWrapper>
-                                    <Checkbox checked={this.state.selected} label={{text:''}} onChange={(value) => {
+                                    <Checkbox
+                                        checked={this.state.selected}
+                                        label={{text: ''}}
+                                        onChange={(value) => {
                                             this.setState({selected: value});
                                             this.changeStatus('selected');
-                                    }} />
+                                        }}
+                                    />
                                 </GridElements.GridItemCheckWrapper>
                                 <GridElements.GridItemTopActions>
-                                    <IconButton icon='fullscreen' ariaValue='Fullscreen preview' onClick={()=> false} />
+                                    <IconButton
+                                        icon="fullscreen"
+                                        ariaValue="Fullscreen preview"
+                                        onClick={() => false}
+                                    />
                                 </GridElements.GridItemTopActions>
                                 <GridElements.GridItemMedia>
                                     <img src="/bill.jpg" alt="Bill" />
                                 </GridElements.GridItemMedia>
                                 <GridElements.GridItemContent>
-                                    <GridElements.GridItemTime time='10.11.2020' />
-                                    <GridElements.GridItemTitle>Item title nulla vitae elit libero, a pharetra augue</GridElements.GridItemTitle>
-                                    <GridElements.GridItemText>Item description cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet...</GridElements.GridItemText>
+                                    <GridElements.GridItemTime time="10.11.2020" />
+                                    <GridElements.GridItemTitle>
+                                        Item title nulla vitae elit libero, a pharetra augue
+                                    </GridElements.GridItemTitle>
+                                    <GridElements.GridItemText>
+                                        Item description cras mattis consectetur purus sit amet fermentum. Vivamus
+                                        sagittis lacus vel augue laoreet...
+                                    </GridElements.GridItemText>
                                 </GridElements.GridItemContent>
                                 <GridElements.GridItemFooter>
-                                    <GridElements.GridItemFooterBlock align='left'>
-                                        <Icon name='photo' className='sd-grid-item__type-icn' />
-                                        <Badge text='2' color='deep-orange--500' />
-                                        <Badge text='5' shape='square' color='blue-grey--300' />
+                                    <GridElements.GridItemFooterBlock align="left">
+                                        <Icon name="photo" className="sd-grid-item__type-icn" />
+                                        <Badge text="2" color="deep-orange--500" />
+                                        <Badge text="5" shape="square" color="blue-grey--300" />
                                     </GridElements.GridItemFooterBlock>
                                     <GridElements.GridItemFooterActions>
-                                        <IconButton icon='dots-vertical' ariaValue='Actions' onClick={()=> false} />
+                                        <IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
                                     </GridElements.GridItemFooterActions>
                                 </GridElements.GridItemFooter>
                             </GridElements.GridItem>
 
-                            <GridElements.GridItem itemtype='audio' locked={true} fetched={true} onClick={()=> false}>
+                            <GridElements.GridItem itemtype="audio" locked={true} fetched={true} onClick={() => false}>
                                 <GridElements.GridItemTopActions>
-                                    <IconButton icon='play' ariaValue='Play' onClick={()=> false} />
+                                    <IconButton icon="play" ariaValue="Play" onClick={() => false} />
                                 </GridElements.GridItemTopActions>
                                 <GridElements.GridItemMedia></GridElements.GridItemMedia>
                                 <GridElements.GridItemContent>
-                                    <GridElements.GridItemTime time='10.11.2020' />
-                                    <GridElements.GridItemTitle>Maecenas faucibus mollis interdum</GridElements.GridItemTitle>
-                                    <GridElements.GridItemText>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis...</GridElements.GridItemText>
+                                    <GridElements.GridItemTime time="10.11.2020" />
+                                    <GridElements.GridItemTitle>
+                                        Maecenas faucibus mollis interdum
+                                    </GridElements.GridItemTitle>
+                                    <GridElements.GridItemText>
+                                        Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+                                        Sed posuere consectetur est at lobortis...
+                                    </GridElements.GridItemText>
                                 </GridElements.GridItemContent>
                                 <GridElements.GridItemFooter>
-                                    <GridElements.GridItemFooterBlock align='left'>
-                                        <Icon name='audio' className='sd-grid-item__type-icn' />
-                                        <Badge text='1' color='deep-orange--600' />
-                                        <Badge text='4' shape='square' color='blue-grey--500' />
+                                    <GridElements.GridItemFooterBlock align="left">
+                                        <Icon name="audio" className="sd-grid-item__type-icn" />
+                                        <Badge text="1" color="deep-orange--600" />
+                                        <Badge text="4" shape="square" color="blue-grey--500" />
                                     </GridElements.GridItemFooterBlock>
                                     <GridElements.GridItemFooterActions>
-                                        <IconButton icon='dots-vertical' ariaValue='Actions' onClick={()=> false} />
+                                        <IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
                                     </GridElements.GridItemFooterActions>
                                 </GridElements.GridItemFooter>
                             </GridElements.GridItem>
 
-                            <GridElements.GridItem itemtype='photo'>
+                            <GridElements.GridItem itemtype="photo">
                                 <GridElements.GridItemTopActions>
-                                    <IconButton icon='fullscreen' ariaValue='Fullscreen preview' onClick={()=> false} />
+                                    <IconButton
+                                        icon="fullscreen"
+                                        ariaValue="Fullscreen preview"
+                                        onClick={() => false}
+                                    />
                                 </GridElements.GridItemTopActions>
                                 <GridElements.GridItemMedia>
                                     <img src="/obama_2.jpg" alt="Barack" />
                                 </GridElements.GridItemMedia>
                                 <GridElements.GridItemContent>
-                                    <GridElements.GridItemTime time='10.11.2020' />
-                                    <GridElements.GridItemTitle>Fusce dapibus, tellus ac cursus commodo, tortor mauris</GridElements.GridItemTitle>
-                                    <GridElements.GridItemText>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna...</GridElements.GridItemText>
+                                    <GridElements.GridItemTime time="10.11.2020" />
+                                    <GridElements.GridItemTitle>
+                                        Fusce dapibus, tellus ac cursus commodo, tortor mauris
+                                    </GridElements.GridItemTitle>
+                                    <GridElements.GridItemText>
+                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam
+                                        eget risus varius blandit sit amet non magna...
+                                    </GridElements.GridItemText>
                                 </GridElements.GridItemContent>
                                 <GridElements.GridItemFooter>
-                                    <GridElements.GridItemFooterBlock align='left'>
-                                        <Icon name='photo' className='sd-grid-item__type-icn' />
-                                        <Badge text='3' color='orange--500' />
-                                        <Badge text='5' shape='square' color='blue-grey--300' />
+                                    <GridElements.GridItemFooterBlock align="left">
+                                        <Icon name="photo" className="sd-grid-item__type-icn" />
+                                        <Badge text="3" color="orange--500" />
+                                        <Badge text="5" shape="square" color="blue-grey--300" />
                                     </GridElements.GridItemFooterBlock>
                                     <GridElements.GridItemFooterActions>
-                                        <IconButton icon='dots-vertical' ariaValue='Actions' onClick={()=> false} />
+                                        <IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
                                     </GridElements.GridItemFooterActions>
                                 </GridElements.GridItemFooter>
                             </GridElements.GridItem>
 
-                            <GridElements.GridItem itemtype='photo' status={['actioning']}>
+                            <GridElements.GridItem itemtype="photo" status={['actioning']}>
                                 <GridElements.GridItemTopActions>
-                                    <IconButton icon='fullscreen' ariaValue='Fullscreen preview' onClick={()=> false} />
+                                    <IconButton
+                                        icon="fullscreen"
+                                        ariaValue="Fullscreen preview"
+                                        onClick={() => false}
+                                    />
                                 </GridElements.GridItemTopActions>
                                 <GridElements.GridItemMedia>
                                     <img src="/d_trump.jpg" alt="Ronmo" />
                                 </GridElements.GridItemMedia>
                                 <GridElements.GridItemContent>
-                                    <GridElements.GridItemTime time='10.11.2020' />
-                                    <GridElements.GridItemTitle>Sed posuere consectetur est at lobortis</GridElements.GridItemTitle>
-                                    <GridElements.GridItemText>Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis...</GridElements.GridItemText>
+                                    <GridElements.GridItemTime time="10.11.2020" />
+                                    <GridElements.GridItemTitle>
+                                        Sed posuere consectetur est at lobortis
+                                    </GridElements.GridItemTitle>
+                                    <GridElements.GridItemText>
+                                        Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere
+                                        consectetur est at lobortis...
+                                    </GridElements.GridItemText>
                                 </GridElements.GridItemContent>
                                 <GridElements.GridItemFooter>
-                                    <GridElements.GridItemFooterBlock align='left'>
-                                        <Icon name='photo' className='sd-grid-item__type-icn' />
-                                        <Badge text='3' color='orange--500' />
-                                        <Badge text='5' shape='square' color='blue-grey--300' />
+                                    <GridElements.GridItemFooterBlock align="left">
+                                        <Icon name="photo" className="sd-grid-item__type-icn" />
+                                        <Badge text="3" color="orange--500" />
+                                        <Badge text="5" shape="square" color="blue-grey--300" />
                                     </GridElements.GridItemFooterBlock>
                                     <GridElements.GridItemFooterActions>
-                                        <IconButton icon='dots-vertical' ariaValue='Actions' onClick={()=> false} />
+                                        <IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
                                     </GridElements.GridItemFooterActions>
                                 </GridElements.GridItemFooter>
                             </GridElements.GridItem>
 
-                            <GridElements.GridItem itemtype='slideshow' fetched={true} onClick={()=> false}>
+                            <GridElements.GridItem itemtype="slideshow" fetched={true} onClick={() => false}>
                                 <GridElements.GridItemMedia></GridElements.GridItemMedia>
                                 <GridElements.GridItemContent>
-                                    <GridElements.GridItemTime time='10.11.2020' />
-                                    <GridElements.GridItemTitle>Nulla vitae elit libero, a pharetra augue</GridElements.GridItemTitle>
-                                    <GridElements.GridItemText>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui...</GridElements.GridItemText>
+                                    <GridElements.GridItemTime time="10.11.2020" />
+                                    <GridElements.GridItemTitle>
+                                        Nulla vitae elit libero, a pharetra augue
+                                    </GridElements.GridItemTitle>
+                                    <GridElements.GridItemText>
+                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio
+                                        dui...
+                                    </GridElements.GridItemText>
                                 </GridElements.GridItemContent>
                                 <GridElements.GridItemFooter>
-                                    <GridElements.GridItemFooterBlock align='left'>
-                                        <Icon name='slideshow' className='sd-grid-item__type-icn' />
-                                        <Badge text='1' color='deep-orange--600' />
-                                        <Badge text='5' shape='square' color='blue-grey--300' />
+                                    <GridElements.GridItemFooterBlock align="left">
+                                        <Icon name="slideshow" className="sd-grid-item__type-icn" />
+                                        <Badge text="1" color="deep-orange--600" />
+                                        <Badge text="5" shape="square" color="blue-grey--300" />
                                     </GridElements.GridItemFooterBlock>
                                     <GridElements.GridItemFooterActions>
-                                        <IconButton icon='dots-vertical' ariaValue='Actions' onClick={()=> false} />
+                                        <IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
                                     </GridElements.GridItemFooterActions>
                                 </GridElements.GridItemFooter>
                             </GridElements.GridItem>
-
                         </GridList>
-
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <GridList size="small" gap="medium" margin="1">
                             <GridElements.GridItem itemtype='photo' status={this.state.status} onClick={()=> false}>
                                 <GridElements.GridItemCheckWrapper>
@@ -315,39 +358,50 @@ export default class GridItemDoc extends React.Component<{}, IState> {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3 docs-page__h3--small-top-m">Minimal structure</h3>
-                <p className="docs-page__paragraph">Mandatory structural sub-elements of the <code>GridItem</code> are <code>GridItemMedia</code> and <code>GridItemContent</code>. The use of the <code>GridItemText</code> component is optional, 
-                any appropriate and properly styled HTML element can be used instead.
+                <p className="docs-page__paragraph">
+                    Mandatory structural sub-elements of the <code>GridItem</code> are <code>GridItemMedia</code> and{' '}
+                    <code>GridItemContent</code>. The use of the <code>GridItemText</code> component is optional, any
+                    appropriate and properly styled HTML element can be used instead.
                 </p>
 
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <GridList size="small" gap="medium" margin="1">
-                            <GridElements.GridItem itemtype='photo' onClick={()=> false}>
+                            <GridElements.GridItem itemtype="photo" onClick={() => false}>
                                 <GridElements.GridItemMedia>
                                     <img src="/bill.jpg" alt="Bill" />
                                 </GridElements.GridItemMedia>
                                 <GridElements.GridItemContent>
-                                    <GridElements.GridItemText>Item description cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet...</GridElements.GridItemText>
+                                    <GridElements.GridItemText>
+                                        Item description cras mattis consectetur purus sit amet fermentum. Vivamus
+                                        sagittis lacus vel augue laoreet...
+                                    </GridElements.GridItemText>
                                 </GridElements.GridItemContent>
                             </GridElements.GridItem>
 
-                            <GridElements.GridItem itemtype='audio' locked={true} fetched={true} onClick={()=> false}>
+                            <GridElements.GridItem itemtype="audio" locked={true} fetched={true} onClick={() => false}>
                                 <GridElements.GridItemMedia></GridElements.GridItemMedia>
                                 <GridElements.GridItemContent>
-                                    <GridElements.GridItemText>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis...</GridElements.GridItemText>
+                                    <GridElements.GridItemText>
+                                        Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+                                        Sed posuere consectetur est at lobortis...
+                                    </GridElements.GridItemText>
                                 </GridElements.GridItemContent>
                             </GridElements.GridItem>
 
-                            <GridElements.GridItem itemtype='composite' status={['activated']}>
+                            <GridElements.GridItem itemtype="composite" status={['activated']}>
                                 <GridElements.GridItemMedia></GridElements.GridItemMedia>
                                 <GridElements.GridItemContent>
-                                    <GridElements.GridItemText>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna...</GridElements.GridItemText>
+                                    <GridElements.GridItemText>
+                                        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam
+                                        eget risus varius blandit sit amet non magna...
+                                    </GridElements.GridItemText>
                                 </GridElements.GridItemContent>
                             </GridElements.GridItem>
                         </GridList>
-
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <GridList size="small" gap="medium" margin="1">
                             <GridElements.GridItem itemtype='photo' onClick={()=> false}>
                                 <GridElements.GridItemMedia>
@@ -375,34 +429,79 @@ export default class GridItemDoc extends React.Component<{}, IState> {
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
-                
+
                 <h3 className="docs-page__h3">GridItem Props</h3>
                 <PropsList>
-                    <Prop name='status' isRequired={false} type='actioning | selected | activated | string' default='/' description='Specifies the status of the item. Multiple values are possible.'/>
-                    <Prop name='itemtype' isRequired={false} type='audio | composite | file | graphic | photo | slideshow | text | video | string' default='file' description='Specifies the file type of the item.'/>
-                    <Prop name='fetched' isRequired={false} type='boolean' default='false' description='If set to true it will add a visual marker in the content area indicating that the item was fetched.'/>
-                    <Prop name='locked' isRequired={false} type='boolean' default='false' description='Visual indication if the item is locked (red border at the bottom).'/>
-                    <Prop name='onClick' isRequired={false} type='function' default='false' description='Callback fired when when the item is pressed. Should be added only if there is a click action on the whole item. Adds pointer cursor and hover action to the item if present.'/>
+                    <Prop
+                        name="status"
+                        isRequired={false}
+                        type="actioning | selected | activated | string"
+                        default="/"
+                        description="Specifies the status of the item. Multiple values are possible."
+                    />
+                    <Prop
+                        name="itemtype"
+                        isRequired={false}
+                        type="audio | composite | file | graphic | photo | slideshow | text | video | string"
+                        default="file"
+                        description="Specifies the file type of the item."
+                    />
+                    <Prop
+                        name="fetched"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="If set to true it will add a visual marker in the content area indicating that the item was fetched."
+                    />
+                    <Prop
+                        name="locked"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Visual indication if the item is locked (red border at the bottom)."
+                    />
+                    <Prop
+                        name="onClick"
+                        isRequired={false}
+                        type="function"
+                        default="false"
+                        description="Callback fired when when the item is pressed. Should be added only if there is a click action on the whole item. Adds pointer cursor and hover action to the item if present."
+                    />
                 </PropsList>
 
                 <h3 className="docs-page__h3">GridItemFooterBlock Props</h3>
                 <PropsList>
-                    <Prop name='align' isRequired={false} type='left | right' default='left' description='Sets the alignment of items inside the footer. Must be placed inside the GridItemFooter component.'/>
+                    <Prop
+                        name="align"
+                        isRequired={false}
+                        type="left | right"
+                        default="left"
+                        description="Sets the alignment of items inside the footer. Must be placed inside the GridItemFooter component."
+                    />
                 </PropsList>
 
                 <h3 className="docs-page__h3">GridItemFooterActions Props</h3>
                 <PropsList>
-                    <Prop name='autohide' isRequired={false} type='boolean' default='true' description='Action buttons in the footer are by default hidden and revealed only when the cursor hovers the item. Set to false to make the action buttons always visible.'/>
+                    <Prop
+                        name="autohide"
+                        isRequired={false}
+                        type="boolean"
+                        default="true"
+                        description="Action buttons in the footer are by default hidden and revealed only when the cursor hovers the item. Set to false to make the action buttons always visible."
+                    />
                 </PropsList>
 
                 <h3 className="docs-page__h3">GridItemTime Props</h3>
                 <PropsList>
-                    <Prop name='time' isRequired={true} type='sring' default='/' description='Sets the value of the time component.'/>
+                    <Prop
+                        name="time"
+                        isRequired={true}
+                        type="sring"
+                        default="/"
+                        description="Sets the value of the time component."
+                    />
                 </PropsList>
-
-                
-
             </section>
-        )
+        );
     }
-}
+}

package/examples/pages/components/GridList.tsx

@@ -1,28 +1,32 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { GridList, Prop, PropsList } from '../../../app-typescript';
-
+import {GridList, Prop, PropsList} from '../../../app-typescript';
 
 export default class GridListDoc extends React.Component {
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>GridList</h2>
-                
-                <Markup.ReactMarkupCodePreview>{`
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">GridList</h2>
+
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <GridList size="small" gap="medium" margin="1">
                     ... 
                     </GridList>
                 `}
                 </Markup.ReactMarkupCodePreview>
 
-                <p className="docs-page__paragraph">Grid list component implemented with CSS grid. The list is responsive by default, no additional media query is needed. Any container item can be placed inside the grid list but it's ideally combined with the GridItem.</p>
+                <p className="docs-page__paragraph">
+                    Grid list component implemented with CSS grid. The list is responsive by default, no additional
+                    media query is needed. Any container item can be placed inside the grid list but it's ideally
+                    combined with the GridItem.
+                </p>
 
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// default (small)</p>
                         <GridList size="small" gap="medium" margin="1">
-                        <div className="docs-page__example-box sd-shadow--z2">
+                            <div className="docs-page__example-box sd-shadow--z2">
                                 <p>Item 1</p>
                             </div>
                             <div className="docs-page__example-box sd-shadow--z2">
@@ -65,9 +69,9 @@ export default class GridListDoc extends React.Component {
                                 <p>Item 4</p>
                             </div>
                         </GridList>
-
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         // default (small)
                         <GridList size="small" gap="medium" margin="1">
                             Item 1
@@ -92,15 +96,31 @@ export default class GridListDoc extends React.Component {
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='size' isRequired={false} type='x-small | small | medium | large' default='small' description='Specifies the size of the items in the grid. '/>
-                    <Prop name='gap' isRequired={false} type='small | medium | large | x-large' default='small' description='Defines the gap between the items inside the Grid list. '/>
-                    <Prop name='margin' isRequired={false} type='0 | 1 | 2 | 3' default='3' description='Defines the margin around the Grid list. The values are based on multipliers of the the $sd-base-increment (equal to 8px). Setting the value to 3 results in a margin of 24px.'/>
+                    <Prop
+                        name="size"
+                        isRequired={false}
+                        type="x-small | small | medium | large"
+                        default="small"
+                        description="Specifies the size of the items in the grid. "
+                    />
+                    <Prop
+                        name="gap"
+                        isRequired={false}
+                        type="small | medium | large | x-large"
+                        default="small"
+                        description="Defines the gap between the items inside the Grid list. "
+                    />
+                    <Prop
+                        name="margin"
+                        isRequired={false}
+                        type="0 | 1 | 2 | 3"
+                        default="3"
+                        description="Defines the margin around the Grid list. The values are based on multipliers of the the $sd-base-increment (equal to 8px). Setting the value to 3 results in a margin of 24px."
+                    />
                 </PropsList>
-
             </section>
-        )
+        );
     }
-}
+}