superdesk-ui-framework 2.4.21 → 3.0.1-beta.2

package/dist/react/Checkboxs.tsx

@@ -46,6 +46,10 @@ interface IState {
     value39: boolean;
     value40: boolean;
     value41: boolean;
+    value42: boolean;
+    value43: boolean;
+    value44: boolean;
+    value45: boolean;
 }
 
 export default class CheckboxsDoc extends React.Component<{}, IState> {
@@ -93,6 +97,10 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
             value39: false,
             value40: false,
             value41: false,
+            value42: false,
+            value43: false,
+            value44: false,
+            value45: false,
         };
     }
 
@@ -102,29 +110,29 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                 <h2 className="docs-page__h2">Checkbox</h2>
                 <p className="docs-page__paragraph"></p>
                 <Markup.ReactMarkupCodePreview>{`
-                    <Checkbox checked={value1} label={{text:'Checkbox label right'}} 
+                    <Checkbox checked={value1} label={{text:'Checkbox label end'}} 
                               onChange={(value) => this.setState(() => ({ value1: value }))} />
                 `}
                 </Markup.ReactMarkupCodePreview>
                 <h3 className="docs-page__h3">Basic Checkbox</h3>
-                <p className="docs-page__paragraph">The label of the checkbox is by default always on the right. Although it's not in line with Superdesk design standards the label can also be placed to the left, by addind the prop <code>labelSide='left'</code>.</p>
+                <p className="docs-page__paragraph">The label of the checkbox is by default always on the end (right). Although it's not in line with Superdesk design standards the label can also be placed to the start (left), by addind the prop <code>labelSide='start'</code>.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <p className="docs-page__paragraph">// Label on the right (default)</p>
+                        <p className="docs-page__paragraph">// Label on the end/right (default)</p>
                         <div className='form__row'>
                             <CheckGroup>
-                                <Checkbox checked={this.state.value1} label={{text:'Checkbox label right'}} onChange={(value) => this.setState(() => ({ value1: value }))} />
+                                <Checkbox checked={this.state.value1} label={{text:'Checkbox label end'}} onChange={(value) => this.setState(() => ({ value1: value }))} />
                                 <Checkbox checked={this.state.value2} label={{text:'Check me!'}} onChange={(value) => this.setState(() => ({ value2: value }))} />
                                 <Checkbox checked={this.state.value3} label={{text:'Check me too!'}} onChange={(value) => this.setState(() => ({ value3: value }))} />
-                                <Checkbox checked={this.state.value4} label={{text:'I"m disabled:('}} disabled= {true} onChange={(value) => this.setState(() => ({ value4: value }))} />
+                                <Checkbox checked={this.state.value4} label={{text:'I"m disabled :('}} disabled= {true} onChange={(value) => this.setState(() => ({ value4: value }))} />
                                 <Checkbox checked={this.state.value5} label={{text:"I'm disabled and checked :("}} disabled= {true} onChange={(value) => this.setState(() => ({ value5: value }))} />
                             </CheckGroup>
                         </div>
-                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Label on the left</p>
+                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Label on the start</p>
                         <p className="docs-page__paragraph--small">This option should be avoided in Superdesk.</p>
                         <div className='form__row'>
                             <CheckGroup>
-                                <Checkbox checked={this.state.value6} label={{text:'Checkbox label left', side:'left'}} onChange={(value) => this.setState(() => ({ value6: value }))} />
+                                <Checkbox checked={this.state.value6} label={{text:'Checkbox label start', side:'start'}} onChange={(value) => this.setState(() => ({ value6: value }))} />
                             </CheckGroup>
                         </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Checkbox with custom values</p>
@@ -135,9 +143,9 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        // Label on the right (default)
+                        // Label on the end (default)
                         <CheckGroup>
-                            <Checkbox checked={value1} label={{text:'Checkbox label right'}}
+                            <Checkbox checked={value1} label={{text:'Checkbox label end'}}
                                       onChange={(value) => this.setState(() => ({ value1: value }))} />
                             <Checkbox checked={value2} label={{text:'Check me!'}}
                                       onChange={(value) => this.setState(() => ({ value2: value }))} />
@@ -149,9 +157,9 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                                       onChange={(value) => this.setState(() => ({ value5: value }))} />
                         </CheckGroup>
 
-                        // Label on the left
+                        // Label on the start (left)
                         <CheckGroup>
-                            <Checkbox checked={value6} label={{text:'Checkbox label left', side:'left'}}
+                            <Checkbox checked={value6} label={{text:'Checkbox label start', side:'start'}}
                                       onChange={(value) => this.setState(() => ({ value6: value }))} />
                         </CheckGroup>
 
@@ -234,6 +242,15 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                                 <CheckboxButton checked={this.state.value11} label={{text: "U can't touch this"}} disabled={true} onChange={(value) => this.setState(() => ({ value11: value }))} />
                             </CheckButtonGroup>
                         </div>
+                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// With label</p>
+                        <div className='form__group'>
+                            <CheckButtonGroup groupLabel='My group label'>
+                                <CheckboxButton checked={this.state.value42} label={{text: 'Button style checkbox'}} onChange={(value) => this.setState(() => ({ value42: value }))} />
+                                <CheckboxButton checked={this.state.value43} label={{text: 'Check this out'}} onChange={(value) => this.setState(() => ({ value43: value }))} />
+                                <CheckboxButton checked={this.state.value44} label={{text: 'Check this too!'}} onChange={(value) => this.setState(() => ({ value44: value }))} />
+                                <CheckboxButton checked={this.state.value45} label={{text: "U can't touch this"}} disabled={true} onChange={(value) => this.setState(() => ({ value45: value }))} />
+                            </CheckButtonGroup>
+                        </div>
                         <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Button style with icon</p>
                         <div className='form__group'>
                             <CheckButtonGroup>
@@ -249,7 +266,7 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                                 <CheckboxButton checked={this.state.value38} label={{text: 'Button style with hidden text', icon: 'th-list', hidden: true}} onChange={(value) => this.setState(() => ({ value38: value }))} />
                                 <CheckboxButton checked={this.state.value39} label={{text: 'The text is hidden but still accessible', icon: 'th', hidden: true}} onChange={(value) => this.setState(() => ({ value39: value }))} />
                                 <CheckboxButton checked={this.state.value40} label={{text: 'The text is still here', icon: 'th-large', hidden: true}} onChange={(value) => this.setState(() => ({ value40: value }))} />
-                                <CheckboxButton checked={this.state.value41} label={{text: 'Icon, no text ;)', icon: 'star', hidden: true}} onChange={(value) => this.setState(() => ({ value41: value }))} />
+                                <CheckboxButton checked={this.state.value41} label={{text: 'Icon, no text ;)', icon: 'star', hidden: true}} disabled={true} onChange={(value) => this.setState(() => ({ value41: value }))} />
                             </CheckButtonGroup>
                         </div>
                     </Markup.ReactMarkupPreview>
@@ -266,6 +283,18 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                                             onChange={(value) => this.setState(() => ({ value11: value }))} />
                         </CheckButtonGroup>
 
+                        // With label
+                        <CheckButtonGroup groupLabel='My group label'>
+                            <CheckboxButton checked={value8} label={{text: 'Button style checkbox'}}
+                                            onChange={(value) => this.setState(() => ({ value8: value }))} />
+                            <CheckboxButton checked={value9} label={{text: 'Check this out'}}
+                                            onChange={(value) => this.setState(() => ({ value9: value }))} />
+                            <CheckboxButton checked={value10} label={{text: 'Check this too!'}}
+                                            onChange={(value) => this.setState(() => ({ value10: value }))} />
+                            <CheckboxButton checked={value11} label={{text: "U can't touch this"}}
+                                            onChange={(value) => this.setState(() => ({ value11: value }))} />
+                        </CheckButtonGroup>
+
                         // Button style with icon
                         <CheckButtonGroup>
                             <CheckboxButton checked={value12} label={{text: 'Button style with icon', icon: 'th-list'}}
@@ -294,22 +323,22 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Button style checkbox Groups</h3>          
-                <p className="docs-page__paragraph"><code>CheckButtonGroup</code> is a helpful wrapper component used to group <code>CheckboxButton</code> components. By default the CheckboxButton components are grouped horizontaly. A few more options are available compared to the <code>CheckGroup</code> component – alignment (left, right and center) and grid layout. </p>
+                <p className="docs-page__paragraph"><code>CheckButtonGroup</code> is a helpful wrapper component used to group <code>CheckboxButton</code> components. By default the CheckboxButton components are grouped horizontaly. A few more options are available compared to the <code>CheckGroup</code> component – alignment (start, end and center) and grid layout. </p>
                 <Alert style='hollow' size='small' type='primary'>
                     NOTE: Alignment will work only in parent elements with display: flex;
                 </Alert>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Left (default)</p>
+                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Start (default)</p>
                         <div className='form__row form__row--flex docs-page__test-helper-2'>
                             <CheckButtonGroup>
                                 <CheckboxButton checked={this.state.value22} label={{text: 'Option one'}} onChange={(value) => this.setState(() => ({ value22: value }))} />
                                 <CheckboxButton checked={this.state.value23} label={{text: 'Option two'}} onChange={(value) => this.setState(() => ({ value23: value }))} />
                             </CheckButtonGroup>
-                        </div>
-                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Right</p>
+                        </div>  
+                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// End</p>
                         <div className='form__row form__row--flex docs-page__test-helper-2'>
-                            <CheckButtonGroup align='right'>
+                            <CheckButtonGroup align='end' >
                                 <CheckboxButton checked={this.state.value24} label={{text: 'Option one'}} onChange={(value) => this.setState(() => ({ value24: value }))} />
                                 <CheckboxButton checked={this.state.value25} label={{text: 'Option two'}} onChange={(value) => this.setState(() => ({ value25: value }))} />
                             </CheckButtonGroup>
@@ -321,7 +350,7 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                                 <CheckboxButton checked={this.state.value27} label={{text: 'Option two'}} onChange={(value) => this.setState(() => ({ value27: value }))} />
                             </CheckButtonGroup>
                         </div>
-                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Left + Center + Right</p>
+                        <p className="docs-page__paragraph docs-page__paragraph--topMarginL">// Start + Center + End</p>
                         <div className='form__row form__row--flex docs-page__test-helper-2'>
                             <CheckButtonGroup>
                                 <CheckboxButton checked={this.state.value28} label={{text: 'One'}} onChange={(value) => this.setState(() => ({ value28: value }))} />
@@ -333,7 +362,7 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                                 <CheckboxButton checked={this.state.value31} label={{text: 'Four'}} onChange={(value) => this.setState(() => ({ value31: value }))} />
                             </CheckButtonGroup>
 
-                            <CheckButtonGroup align='right'>
+                            <CheckButtonGroup align='end'>
                                 <CheckboxButton checked={this.state.value32} label={{text: 'Five'}} onChange={(value) => this.setState(() => ({ value32: value }))} />
                                 <CheckboxButton checked={this.state.value33} label={{text: 'Six'}} onChange={(value) => this.setState(() => ({ value33: value }))} />
                             </CheckButtonGroup>
@@ -349,7 +378,7 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        // Left (default)
+                        // Start (default)
                         <CheckButtonGroup>
                             <CheckboxButton checked={value22} label={{text: 'Option one'}}
                                             onChange={(value) => this.setState(() => ({ value22: value }))} />
@@ -357,8 +386,8 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                                             onChange={(value) => this.setState(() => ({ value23: value }))} />
                         </CheckButtonGroup>
 
-                        // Right
-                        <CheckButtonGroup align='right'>
+                        // End
+                        <CheckButtonGroup align='end'>
                             <CheckboxButton checked={value24} label={{text: 'Option one'}}
                                             onChange={(value) => this.setState(() => ({ value24: value }))} />
                             <CheckboxButton checked={value25} label={{text: 'Option two'}}
@@ -373,7 +402,7 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                                             onChange={(value) => this.setState(() => ({ value27: value }))} />
                         </CheckButtonGroup>
 
-                        // Left + Center + Right
+                        // Start + Center + End
                         <div className='form__row form__row--flex'>
                             <CheckButtonGroup>
                                 <CheckboxButton checked={value28} label={{text: 'One'}}
@@ -389,7 +418,7 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                                                 onChange={(value) => this.setState(() => ({ value31: value }))} />
                             </CheckButtonGroup>
 
-                            <CheckButtonGroup align='right'>
+                            <CheckButtonGroup align='end'>
                                 <CheckboxButton checked={value32} label={{text: 'Five'}}
                                                 onChange={(value) => this.setState(() => ({ value32: value }))} />
                                 <CheckboxButton checked={value33} label={{text: 'Six'}}
@@ -417,9 +446,11 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                 <PropsList>
                     <Prop name='checked' isRequired={true} type='boolean' default='false' description='The checked state of the input.'/>
                     <Prop name='label text' isRequired={true} type='string' default='/' description='Label text value.'/>
-                    <Prop name='label side' isRequired={false} type='left | right' default='right' description='Position of label relative to the button.'/>
+                    <Prop name='label side' isRequired={false} type='start | end' default='end' description='Position of label relative to the button.'/>
                     <Prop name='label hidden' isRequired={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
                     <Prop name='disabled' isRequired={false} type='boolean' default='false' description='The disabled state of Checkbox.'/>
+                    <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
+                    <Prop name='groupLabelledBy' isRequired={false} type='string' default='/' description='Aria-labelledby for screen-reader support.'/>
                 </PropsList>
                 <p className="docs-page__paragraph">Checkbox Button</p>
                 <PropsList>
@@ -428,6 +459,16 @@ export default class CheckboxsDoc extends React.Component<{}, IState> {
                     <Prop name='label icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
                     <Prop name='label hidden' isRequired={false} type='boolean' default='false' description='Hides visually the label and adds an aria-label for screen-reader support.'/>
                     <Prop name='disabled' isRequired={false} type='boolean' default='false' description='The disabled state of CheckboxButton'/>
+                    <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.' />
+                </PropsList>
+                <p className="docs-page__paragraph">CheckButtonGroup</p>
+                <PropsList>
+                    <Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='The checked state of the input'/>
+                    <Prop name='grid' isRequired={false} type='boolean' default='/' description='Lays out child elements in an uniform grid list.'/>
+                    <Prop name='align' isRequired={false} type='start | end | center | inline' default='start' description='Alignemnt of the whole group relative to the parent container. Container must be flex for this to work.'/>
+                    <Prop name='padded' isRequired={false} type='boolean' default='/' description='Adds padding on the start and end (left and right) of the group.'/>
+                    <Prop name='groupLabel' isRequired={false} type='string' default='/' description='Label text value.'/>
+                    <Prop name='groupLabelledBy' isRequired={false} type='string' default='/' description='Aria-labelledby for screen-reader support.'/>
                 </PropsList>
             </section>
         )

package/dist/react/Container.tsx

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop, Container, Text, Heading, Button, ButtonGroup } from '../../../app-typescript';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+export default class ContainerDoc extends React.Component<IProps> {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Container</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <Container>
+                        Cum sociis natoque penatibus et magnis dis parturient...
+                    </Container>
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">
+                    The Container is a convenient layout component with different layout options and support for external CSS classes.
+                    The display model is <code>flex</code> by default, but can be changed with the <code>display</code> prop. It is 
+                    intended to be used with helper CSS classes to achieve desired styling options
+                </p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Basic</p>
+                        <div className='docs-page__content-row'>
+                            <Container>
+                                Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
+                                est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
+                                consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
+                                sem lacinia quam venenatis vestibulum. 
+                            </Container>
+                        </div>
+
+                        <p className="docs-page__paragraph">// Usage examples</p>
+
+                        <div className='docs-page__content-row'>
+                            <Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
+                                <span>Curabitur blandit tempus porttitor.</span>
+                                <Button text="Test button" type="primary" onClick={()=> false} />
+                                <Button text="Test button" type="highlight" onClick={()=> false} />
+                                <ButtonGroup align="end">
+                                    <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                    <Button text="Submit" onClick={()=> false} type="primary" />
+                                </ButtonGroup>
+                            </Container>
+                        </div>
+
+                        <div className='docs-page__content-row'>
+                            <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
+                                <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
+                                <Text color='light'>
+                                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+                                    Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                                    Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
+                                    posuere velit aliquet. Aenean eu leo quam.
+                                </Text>
+                                <ButtonGroup align="end">
+                                    <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                    <Button text="Submit" onClick={()=> false} type="primary" />
+                                </ButtonGroup>
+                            </Container>
+                        </div>
+
+                        <div className='docs-page__content-row'>
+                            <Container gap="large" theme='dark' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
+                                <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
+                                <Text color='light'>
+                                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+                                    Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                                    Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
+                                    posuere velit aliquet. Aenean eu leo quam.
+                                </Text>
+                                <ButtonGroup align="end">
+                                    <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                    <Button text="Submit" onClick={()=> false} type="primary" />
+                                </ButtonGroup>
+                            </Container>
+                        </div>
+                        
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        // Basic
+
+                        <Container>
+                            Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et... 
+                        </Container>
+
+                        // Usage examples
+
+                        <Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
+                            <span>Curabitur blandit tempus porttitor.</span>
+                            <Button text="Test button" type="primary" onClick={()=> false} />
+                            <Button text="Test button" type="highlight" onClick={()=> false} />
+                            <ButtonGroup align="end">
+                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                <Button text="Submit" onClick={()=> false} type="primary" />
+                            </ButtonGroup>
+                        </Container>
+
+                        <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
+                            <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
+                            <Text color='light'>
+                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
+                            </Text>
+                            <ButtonGroup align="end">
+                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                <Button text="Submit" onClick={()=> false} type="primary" />
+                            </ButtonGroup>
+                        </Container>
+
+                        <Container gap="large" theme='dark' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
+                        <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
+                        <Text color='light'>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
+                        </Text>
+                        <ButtonGroup align="end">
+                            <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                            <Button text="Submit" onClick={()=> false} type="primary" />
+                        </ButtonGroup>
+                    </Container>
+  
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='display' isRequired={false} type='flex | inline-flex | block' default='flex' description='Change the default display mode (flex).'/>
+                    <Prop name='direction' isRequired={false} type='row | column' default='row' description='Change the flex-direction property.'/>
+                    <Prop name='gap' isRequired={false} type='none | x-small | small |  medium | large' default='none' description='Set the gap between elements inside the Container.'/>
+                    <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All items inside will inherit the theme of the Container if it is set.'/>
+                    <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/dist/react/ContentDivider.tsx

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { ContentDivider, Button, Prop, PropsList } from '../../../app-typescript';
+
+export default class ContentDividerDoc extends React.Component {
+
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Content Divider</h2>
+                <Markup.ReactMarkupCodePreview>{`
+                    <ContentDivider>
+                        Child element
+                    </ContentDivider>
+                `}
+                </Markup.ReactMarkupCodePreview>
+                <h3 className="docs-page__h3">No text</h3>
+                <p className="docs-page__paragraph"></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.
+                            Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus
+                            auctor fringilla.</p>
+                            <ContentDivider />
+                            <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat
+                            a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum
+                            nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum
+                            at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                            <ContentDivider type="dashed" />
+                            <p>Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet,
+                            consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.
+                            Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur
+                            purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
+                            <ContentDivider type="dotted" />
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus
+                            ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
+                            risus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac
+                            facilisis in, egestas eget quam.</p>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <p>Maecenas sed diam eget risus varius...</p>
+
+                        <ContentDivider />
+
+                        <p>Vestibulum id ligula porta felis euismod...</p>
+
+                        <ContentDivider type="dashed" />
+
+                        <p>Donec ullamcorper nulla non metus auctor fringilla...</p>
+
+                        <ContentDivider type="dotted" />
+
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">With text</h3>
+                <p className="docs-page__paragraph"></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                            <ContentDivider>
+                                Centered (default)
+                            </ContentDivider>
+                            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.
+                            Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus
+                            auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia
+                            quam venenatis vestibulum.</p>
+                            <ContentDivider align="left">
+                                Left aligned
+                            </ContentDivider>
+                            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.
+                            Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur
+                            purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod.
+                            Cras mattis consectetur purus sit amet fermentum.</p>
+                            <ContentDivider align="right" type="dotted">
+                                Right aligned
+                            </ContentDivider>
+                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+                            Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
+                            vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.
+                            Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
+                            massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <ContentDivider>
+                            Centered (default)
+                        </ContentDivider>
+
+                        <p>Maecenas sed diam eget...</p>
+
+                        <ContentDivider align="left">
+                            Left aligned
+                        </ContentDivider>
+
+                        <p>Maecenas sed diam eget risus...</p>
+
+                        <ContentDivider align="right" type="dotted">
+                            Right aligned
+                        </ContentDivider>
+
+                        <p>Praesent commodo cursus magna...</p>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Vertical</h3>
+                <p className="docs-page__paragraph"></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Basic</p>
+                        <div className='docs-page__content-row'>
+                            <span>Option one</span>
+                            <ContentDivider orientation="vertical" type="dotted" />
+                            <span>Option two</span>
+                            <ContentDivider orientation="vertical" type="dotted" />
+                            <span>Option three</span>
+                        </div>
+                        <p className="docs-page__paragraph ">// With text</p>
+                        <p className="docs-page__paragraph--small sd-margin-b--3">Inside a flex container (flex-direction: column;).</p>
+                        <div className='docs-page__content-row sd-display--flex'>
+                            <div style={{width:'100%'}}>
+                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et
+                                magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit
+                                sit amet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla
+                                sed consectetur. Vivamus sagittis lacus vel augue.
+                            </div>
+                            <ContentDivider orientation="vertical">
+                                or
+                            </ContentDivider>
+                            <div style={{width:'100%'}}>
+                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus.
+                                Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.
+                                Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue.
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        // Basic
+
+                        <span>Option one</span>
+                        <ContentDivider orientation="vertical" type="dotted" />
+                        <span>Option two</span>
+                        <ContentDivider orientation="vertical" type="dotted" />
+                        <span>Option three</span>
+
+                        // With text
+
+                        <div>
+                            Cras justo odio, dapibus ac facilisis in, egestas eget quam...
+                        </div>
+
+                        <ContentDivider orientation="vertical">
+                            or
+                        </ContentDivider>
+
+                        <div>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
+                        </div>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='type' isRequered={false} type='dashed | dotted | solid' default='solid' description='Border style of the divider.'/>
+                    <Prop name='orientation' isRequered={false} type='horizontal | vertical' default='horizontal' description='Defines if the divider is horizontal or vertical. Default is horizontal.'/>
+                    <Prop name='align' isRequered={false} type='center | left | right' default='right' description='Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.'/>
+                    <Prop name='border' isRequered={false} type='boolean' default='true' description='Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.'/>
+                </PropsList>
+            </section>
+        )
+    }
+}