superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.3

package/examples/pages/react/Buttons.tsx

@@ -108,82 +108,63 @@ export default class ButtonsDoc extends React.Component {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                     <div className="docs-page__content-row">
-                        <Button text="button small" size="small" onClick={()=> false} />
-                        <Button text="button default" onClick={()=> false} />
                         <Button text="button large" size="large" onClick={()=> false} />
+                        <Button text="button default" onClick={()=> false} />
+                        <Button text="button small" size="small" onClick={()=> false} />
                     </div>
                     <div className="docs-page__content-row">
-                        <Button text="small expanded button" expand={true} size="small" onClick={()=> false} />
-                    </div>                    
+                        <Button text="large expanded button" expand={true} size="large" onClick={()=> false} />
+                    </div>
                     <div className="docs-page__content-row">
                         <Button text="default expanded button" expand={true} onClick={()=> false} />
                     </div>
                     <div className="docs-page__content-row">
-                        <Button text="large expanded button" expand={true} size="large" onClick={()=> false} />
-                    </div>
+                        <Button text="small expanded button" expand={true} size="small" onClick={()=> false} />
+                    </div>                    
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <Button text="button default" size="default" />
-                        <Button text="button expanded" expand={true} />
+                        <Button text="button large" size="large" onClick={()=> false} />
+                        <Button text="button default" onClick={()=> false} />
+                        <Button text="button small" size="small" onClick={()=> false} />
+
+                        <Button text="large expanded button" expand={true} size="large" onClick={()=> false} />
+                        <Button text="default expanded button" expand={true} onClick={()=> false} />
+                        <Button text="small expanded button" expand={true} size="small" onClick={()=> false} />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <h3 className="docs-page__h3">Disabled</h3>
-                <p className="docs-page__paragraph"><code>disabled={'{true}'}</code></p>
+                <h3 className="docs-page__h3">States</h3>
+                <p className="docs-page__paragraph">Disabled state:<code>disabled={'{true}'}</code>; Loading state:<code>isLoading={'{true}'}</code>; </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
+                    <p className="docs-page__paragraph">// Disabled</p>
                     <div className="docs-page__content-row">
                         <Button text="default" disabled={true} onClick={()=> false} />
                         <Button text="primary" type="primary" disabled={true} onClick={()=> false} />
-                        <Button text="success" type="success" disabled={true} onClick={()=> false} />
-                        <Button text="warning" type="warning" disabled={true} onClick={()=> false} />
-                        <Button text="alert" type="alert" disabled={true} onClick={()=> false} />
-                        <Button text="highlight" type="highlight" disabled={true} onClick={()=> false} />
-                        <Button text="sd-green" type="sd-green" disabled={true} onClick={()=> false} />
-                    </div>
-                    <div className="docs-page__content-row">
                         <Button text="default" style="hollow" disabled={true} onClick={()=> false} />
-                        <Button text="primary" type="primary" style="hollow" disabled={true} onClick={()=> false} />
-                        <Button text="success" type="success" style="hollow" disabled={true} onClick={()=> false} />
-                        <Button text="warning" type="warning" style="hollow" disabled={true} onClick={()=> false} />
-                        <Button text="alert" type="alert" style="hollow" disabled={true} onClick={()=> false} />
-                        <Button text="highlight" type="highlight" style="hollow" disabled={true} onClick={()=> false} />
-                        <Button text="sd-green" type="sd-green" style="hollow" disabled={true} onClick={()=> false} />
+                        <Button text="primary" type="primary" disabled={true} style="hollow" onClick={()=> false} />
                     </div>
-                    <div className="docs-page__content-row docs-page__content-row--no-margin">
-                        <Button text="default" style="text-only" disabled={true} onClick={()=> false} />
-                        <Button text="primary" type="primary" style="text-only" disabled={true} onClick={()=> false} />
-                        <Button text="success" type="success" style="text-only" disabled={true} onClick={()=> false} />
-                        <Button text="warning" type="warning" style="text-only" disabled={true} onClick={()=> false} />
-                        <Button text="alert" type="alert" style="text-only" disabled={true} onClick={()=> false} />
-                        <Button text="highlight" type="highlight" style="text-only" disabled={true} onClick={()=> false} />
-                        <Button text="sd-green" type="sd-green" style="text-only" disabled={true} onClick={()=> false} />
+                    <p className="docs-page__paragraph">// Loading</p>
+                    <div className="docs-page__content-row">
+                        <Button text="default" isLoading={true} onClick={()=> false} />
+                        <Button text="primary" type="primary" isLoading={true} onClick={()=> false} />
+                        <Button text="default" style="hollow" isLoading={true} onClick={()=> false} />
+                        <Button text="primary" type="primary" isLoading={true} style="hollow" onClick={()=> false} />
                     </div>
+
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
+                        // Disabled
                         <Button text="default" disabled={true} onClick={()=> false} />
                         <Button text="primary" type="primary" disabled={true} onClick={()=> false} />
-                        <Button text="success" type="success" disabled={true} onClick={()=> false} />
-                        <Button text="warning" type="warning" disabled={true} onClick={()=> false} />
-                        <Button text="alert" type="alert" disabled={true} onClick={()=> false} />
-                        <Button text="highlight" type="highlight" disabled={true} onClick={()=> false} />
-                        <Button text="sd-green" type="sd-green" disabled={true} onClick={()=> false} />
-
                         <Button text="default" style="hollow" disabled={true} onClick={()=> false} />
-                        <Button text="primary" type="primary" style="hollow" disabled={true} onClick={()=> false} />
-                        <Button text="success" type="success" style="hollow" disabled={true} onClick={()=> false} />
-                        <Button text="warning" type="warning" style="hollow" disabled={true} onClick={()=> false} />
-                        <Button text="alert" type="alert" style="hollow" disabled={true} onClick={()=> false} />
-                        <Button text="highlight" type="highlight" style="hollow" disabled={true} onClick={()=> false} />
-                        <Button text="sd-green" type="sd-green" style="hollow" disabled={true} onClick={()=> false} />
+                        <Button text="primary" type="primary" disabled={true} style="hollow" onClick={()=> false} />
 
-                        <Button text="default" style="text-only" disabled={true} onClick={()=> false} />
-                        <Button text="primary" type="primary" style="text-only" disabled={true} onClick={()=> false} />
-                        <Button text="success" type="success" style="text-only" disabled={true} onClick={()=> false} />
-                        <Button text="warning" type="warning" style="text-only" disabled={true} onClick={()=> false} />
-                        <Button text="alert" type="alert" style="text-only" disabled={true} onClick={()=> false} />
-                        <Button text="highlight" type="highlight" style="text-only" disabled={true} onClick={()=> false} />
-                        <Button text="sd-green" type="sd-green" style="text-only" disabled={true} onClick={()=> false} />
+                        // Loading
+                        <Button text="default" isLoading={true} onClick={()=> false} />
+                        <Button text="primary" type="primary" isLoading={true} onClick={()=> false} />
+                        <Button text="default" style="hollow" isLoading={true} onClick={()=> false} />
+                        <Button text="primary" type="primary" isLoading={true} style="hollow" onClick={()=> false} />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
@@ -196,26 +177,21 @@ export default class ButtonsDoc extends React.Component {
                         <Button text="default" icon="info-sign" onClick={()=> false} />
                         <Button text="primary" type="primary" icon="plus-sign" onClick={()=> false} />
                         <Button text="success" type="success" icon="ok" onClick={()=> false} />
+                        <Button text="warning" type="warning" icon="exclamation-sign" onClick={()=> false} />
                         <Button text="alert" type="alert" icon="warning-sign" onClick={()=> false} />
+                        <br />
                         <Button text="default" icon="info-sign" style="hollow" onClick={()=> false} />
                         <Button text="primary" type="primary" icon="plus-sign" style="hollow" onClick={()=> false} />
                         <Button text="success" type="success" icon="ok" style="hollow" onClick={()=> false} />
-                        <Button text="warning" type="warning" icon="warning-sign" style="hollow" onClick={()=> false} />
-                        <Button text="default" icon="info-sign" disabled={true} onClick={()=> false} />
-                        <Button text="primary" type="primary" icon="plus-sign" disabled={true} onClick={()=> false} />
+                        <Button text="warning" type="warning" icon="exclamation-sign" style="hollow" onClick={()=> false} />
+                        <Button text="alert" type="alert" icon="warning-sign" style="hollow" onClick={()=> false} />
                     </div>
-                    <p className="docs-page__paragraph">// Large size</p>
+                    <p className="docs-page__paragraph">// Large and small options</p>
                     <div className="docs-page__content-row">
-                        <Button text="default" icon="info-sign" size="large" onClick={()=> false} />
-                        <Button text="primary" type="primary" icon="plus-sign" size="large" onClick={()=> false} />
-                        <Button text="success" type="success" icon="ok" size="large" onClick={()=> false} />
-                        <Button text="default" icon="info-sign" style="hollow" size="large" onClick={()=> false} />
-                        <Button text="primary" type="primary" icon="plus-sign" style="hollow" size="large" onClick={()=> false} />
-                    </div>
-                    <p className="docs-page__paragraph">// Small size</p>
-                    <div className="docs-page__content-row">
-                        <Button text="default" icon="info-sign" size="small" onClick={()=> false} />
-                        <Button text="primary" type="primary" icon="plus-sign" size="small" onClick={()=> false} />
+                        <Button text="default large" icon="info-sign" size="large" onClick={()=> false} />
+                        <Button text="primary large" type="primary" icon="plus-sign" size="large" onClick={()=> false} />
+                        <Button text="default small" icon="info-sign" size="small" onClick={()=> false} />
+                        <Button text="primary small" type="primary" icon="plus-sign" size="small" onClick={()=> false} />
                     </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
@@ -223,24 +199,20 @@ export default class ButtonsDoc extends React.Component {
                         <Button text="default" icon="info-sign" onClick={()=> false} />
                         <Button text="primary" type="primary" icon="plus-sign" onClick={()=> false} />
                         <Button text="success" type="success" icon="ok" onClick={()=> false} />
+                        <Button text="warning" type="warning" icon="exclamation-sign" onClick={()=> false} />
                         <Button text="alert" type="alert" icon="warning-sign" onClick={()=> false} />
+                        
                         <Button text="default" icon="info-sign" style="hollow" onClick={()=> false} />
                         <Button text="primary" type="primary" icon="plus-sign" style="hollow" onClick={()=> false} />
                         <Button text="success" type="success" icon="ok" style="hollow" onClick={()=> false} />
-                        <Button text="warning" type="warning" icon="warning-sign" style="hollow" onClick={()=> false} />
-                        <Button text="default" icon="info-sign" disabled={true} onClick={()=> false} />
-                        <Button text="primary" type="primary" icon="plus-sign" disabled={true} onClick={()=> false} />
-
-                        // Large size
-                        <Button text="default" icon="info-sign" size="large" onClick={()=> false} />
-                        <Button text="primary" type="primary" icon="plus-sign" size="large" onClick={()=> false} />
-                        <Button text="success" type="success" icon="ok" size="large" onClick={()=> false} />
-                        <Button text="default" icon="info-sign" style="hollow" size="large" onClick={()=> false} />
-                        <Button text="primary" type="primary" icon="plus-sign" style="hollow" size="large" onClick={()=> false} />
+                        <Button text="warning" type="warning" icon="exclamation-sign" style="hollow" onClick={()=> false} />
+                        <Button text="alert" type="alert" icon="warning-sign" style="hollow" onClick={()=> false} />
 
-                        // Small size
-                        <Button text="default" icon="info-sign" size="small" onClick={()=> false} />
-                        <Button text="primary" type="primary" icon="plus-sign" size="small" onClick={()=> false} />
+                        // Large and small options
+                        <Button text="default large" icon="info-sign" size="large" onClick={()=> false} />
+                        <Button text="primary large" type="primary" icon="plus-sign" size="large" onClick={()=> false} />
+                        <Button text="default small" icon="info-sign" size="small" onClick={()=> false} />
+                        <Button text="primary small" type="primary" icon="plus-sign" size="small" onClick={()=> false} />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
@@ -249,70 +221,49 @@ export default class ButtonsDoc extends React.Component {
                 The specified text value will be used for the <code>aria-label</code>.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                    <p className="docs-page__paragraph">// Default</p>
+                    <p className="docs-page__paragraph">// Large default and small</p>
                     <div className="docs-page__content-row">
+                    <Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" iconOnly={true} onClick={()=> false} />
+                        <Button type="primary" icon="plus-sign" text="plus-sign" style="hollow" size="large" iconOnly={true} onClick={()=> false} />
+                        <Button type="highlight" icon="bell" text="bell" size="large" iconOnly={true} onClick={()=> false} />
                         <Button icon="info-sign" text="info-sign" iconOnly={true} onClick={()=> false} />
                         <Button type="primary" icon="plus-sign" text="plus-sign" iconOnly={true} onClick={()=> false} />
                         <Button type="success" icon="ok" text="ok" iconOnly={true} onClick={()=> false} />
-                    </div>
-                    <p className="docs-page__paragraph">// Large</p>
-                    <div className="docs-page__content-row">
-                        <Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" iconOnly={true} onClick={()=> false} />
-                        <Button type="primary" icon="plus-sign" text="plus-sign" style="hollow" size="large" iconOnly={true} onClick={()=> false} />
-                        <Button type="highlight" icon="bell" text="bell" size="large" iconOnly={true} onClick={()=> false} />
-                    </div>
-                    <p className="docs-page__paragraph">// Small</p>
-                    <div className="docs-page__content-row">
                         <Button type="alert" style="hollow" icon="kill" text="kill" size="small" iconOnly={true} onClick={()=> false} />
                         <Button icon="calendar" size="small" text="calendar" iconOnly={true} onClick={()=> false} />
                         <Button type="primary" style="hollow" icon="refresh" text="refresh" size="small" iconOnly={true} onClick={()=> false} />
                     </div>
-                    <p className="docs-page__paragraph">// Circle default</p>
+
+                    <p className="docs-page__paragraph">// Circle (large, default and small)</p>
                     <div className="docs-page__content-row">
+                    <Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" shape="round" iconOnly={true} onClick={()=> false} />
+                        <Button type="primary" icon="plus-large" text="plus-large" style="hollow" size="large" shape="round" iconOnly={true} onClick={()=> false} />
+                        <Button type="highlight" icon="bell" text="bell" size="large" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button size="normal" icon="info-sign" text="info-sign" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button type="primary" icon="plus-large" text="plus-large" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button type="success" icon="ok" text="ok" shape="round" iconOnly={true} onClick={()=> false} />
-                    </div>
-                    <p className="docs-page__paragraph">// Circle large</p>
-                    <div className="docs-page__content-row">
-                        <Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" shape="round" iconOnly={true} onClick={()=> false} />
-                        <Button type="primary" icon="plus-large" text="plus-large" style="hollow" size="large" shape="round" iconOnly={true} onClick={()=> false} />
-                        <Button type="highlight" icon="bell" text="bell" size="large" shape="round" iconOnly={true} onClick={()=> false} />
-                    </div>
-                    <p className="docs-page__paragraph">// Circle small</p>
-                    <div className="docs-page__content-row">
                         <Button type="alert" icon="close-small" text="close-small" size="small" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button type="primary" icon="plus-large" text="plus-large" size="small" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button type="sd-green" icon="star" text="star" size="small" shape="round" iconOnly={true} onClick={()=> false} />
                     </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        // Default
+                        // Large default and small
+                        <Button type="primary" icon="plus-sign" text="plus-sign" style="hollow" size="large" iconOnly={true} onClick={()=> false} />
+                        <Button type="highlight" icon="bell" text="bell" size="large" iconOnly={true} onClick={()=> false} />
                         <Button icon="info-sign" text="info-sign" iconOnly={true} onClick={()=> false} />
                         <Button type="primary" icon="plus-sign" text="plus-sign" iconOnly={true} onClick={()=> false} />
                         <Button type="success" icon="ok" text="ok" iconOnly={true} onClick={()=> false} />
-
-                        // Large
-                        <Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" iconOnly={true} onClick={()=> false} />
-                        <Button type="primary" icon="plus-sign" text="plus-sign" style="hollow" size="large" iconOnly={true} onClick={()=> false} />
-                        <Button type="highlight" icon="bell" text="bell" size="large" iconOnly={true} onClick={()=> false} />
-
-                        // Small
                         <Button type="alert" style="hollow" icon="kill" text="kill" size="small" iconOnly={true} onClick={()=> false} />
                         <Button icon="calendar" size="small" text="calendar" iconOnly={true} onClick={()=> false} />
                         <Button type="primary" style="hollow" icon="refresh" text="refresh" size="small" iconOnly={true} onClick={()=> false} />
 
-                        // Circle default
+                        // // Circle (large, default and small)
+                        <Button type="primary" icon="plus-large" text="plus-large" style="hollow" size="large" shape="round" iconOnly={true} onClick={()=> false} />
+                        <Button type="highlight" icon="bell" text="bell" size="large" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button size="normal" icon="info-sign" text="info-sign" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button type="primary" icon="plus-large" text="plus-large" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button type="success" icon="ok" text="ok" shape="round" iconOnly={true} onClick={()=> false} />
-
-                        // Circle large
-                        <Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" shape="round" iconOnly={true} onClick={()=> false} />
-                        <Button type="primary" icon="plus-large" text="plus-large" style="hollow" size="large" shape="round" iconOnly={true} onClick={()=> false} />
-                        <Button type="highlight" icon="bell" text="bell" size="large" shape="round" iconOnly={true} onClick={()=> false} />
-
-                        // Circle small
                         <Button type="alert" icon="close-small" text="close-small" size="small" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button type="primary" icon="plus-large" text="plus-large" size="small" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button type="sd-green" icon="star" text="star" size="small" shape="round" iconOnly={true} onClick={()=> false} />
@@ -331,6 +282,7 @@ export default class ButtonsDoc extends React.Component {
                     <Prop name='size' isRequired={false} type='small | normal | large' default='normal' description='Specifies a small, normal or large button.'/>
                     <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
                     <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
+                    <Prop name='isLoading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator and disables the button if set to true.'/>
                     <Prop name='onClick' isRequired={true} type='function' default='false' description='Callback fired when a button is pressed.'/>
                 </PropsList>
             </section>

package/examples/pages/react/Carousel.tsx

@@ -46,11 +46,10 @@ export default class CarouselDoc extends React.Component {
                 </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <Carousel images={images} theme="dark"></Carousel>
+                        <Carousel images={images}></Carousel>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-const images = ${JSON.stringify(images, null, 2)};
-
+                        const images = ${JSON.stringify(images, null, 2)};
 <Carousel images={images}></Carousel>
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>

package/examples/pages/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>
         )