superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/dist/react/Avatar.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-
 import * as Markup from '../../js/react';
 
-import {AvatarWrapper, AvatarContentText, AvatarContentImage} from '../../../app-typescript';
+import {AvatarWrapper, AvatarContentText, AvatarContentImage, AvatarGroup, Container, PropsList, Prop} from '../../../app-typescript';
 
 export default class AvatarDoc extends React.PureComponent {
     render() {
@@ -10,189 +9,377 @@ export default class AvatarDoc extends React.PureComponent {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Avatar</h2>
 
-                <Markup.ReactMarkup>
+                <Markup.ReactMarkupCodePreview>{`
+                    <AvatarWrapper
+                        size="small"
+                        statusIndicator={{status: 'online', tooltipText: "Online"}}
+                        administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
+                    >
+                        <AvatarContentText text="JD" tooltipText="John Doe" />
+                    </AvatarWrapper>
+                `}
+                </Markup.ReactMarkupCodePreview>
 
+                <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <AvatarWrapper
-                            size="small"
-                            statusIndicator={{status: 'online', tooltipText: "Online"}}
-                            administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
-                        >
-                            <AvatarContentText text="ABC" tooltipText="John Doe" />
-                        </AvatarWrapper>
-
-                        <br />
+                        <p className="docs-page__paragraph">// Basic with size variations</p>
+                        <Container gap='medium' className='sd-margin-b--3'>
+
+                            <AvatarWrapper size="small">
+                                <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="medium">
+                                <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="The Dude" />
+                            </AvatarWrapper>
+                            
+                            <AvatarWrapper size="x-large">
+                                <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="xx-large">
+                                <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="The Dude" />
+                            </AvatarWrapper>
+
+                        </Container>
+
+                        <p className="docs-page__paragraph">// With status indicator</p>
+                        <Container gap='medium' className='sd-margin-b--3'>
+                            <AvatarWrapper
+                                size="large"
+                                statusIndicator={{status: 'online', tooltipText: "Online"}}
+                            >
+                                <AvatarContentText text="JJB" tooltipText="Jean Jacques Burnel" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper
+                                size="large"
+                                statusIndicator={{status: 'offline', tooltipText: "Offline"}}
+                            >
+                                <AvatarContentImage tooltipText="Jean Jacques Burnel" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper
+                                size="large"
+                                statusIndicator={{status: 'offline', tooltipText: "Offline"}}
+                            >
+                                <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
+                            </AvatarWrapper>
+                        </Container>
+
+                        <p className="docs-page__paragraph">// With administrator indicator</p>
+                        <Container gap='medium' className='sd-margin-b--3'>
+                            <AvatarWrapper
+                                size="large"
+                                administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
+                            >
+                                <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper
+                                size="large"
+                                administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
+                            >
+                                <AvatarContentText text="DD" tooltipText="Andre Romelle Young" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper
+                                size="large"
+                                administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
+                            >
+                                <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
+                            </AvatarWrapper>
+                        </Container>
+
+                        <p className="docs-page__paragraph">// Combo</p>
+                        <Container gap='medium' className='sd-margin-b--3'>
+                            <AvatarWrapper
+                                size="large"
+                                statusIndicator={{status: 'online', tooltipText: "Online"}}
+                                administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
+                            >
+                                <AvatarContentText text="DH" tooltipText="Debbie Harry" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper
+                                size="large"
+                                statusIndicator={{status: 'offline', tooltipText: "Offline"}}
+                                administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
+                            >
+                                <AvatarContentImage tooltipText="Debbie Harry" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper
+                                size="large"
+                                statusIndicator={{status: 'offline', tooltipText: "Offline"}}
+                                administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
+                            >
+                                <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
+                            </AvatarWrapper>
+                        </Container>
+                    </Markup.ReactMarkupPreview>
 
-                        <AvatarWrapper
-                            size="medium"
-                            statusIndicator={{status: 'offline', tooltipText: "Offline"}}
-                            administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
-                        >
-                            <AvatarContentText text="ABC" tooltipText="John Doe" />
+                    <Markup.ReactMarkupCode>{`
+                        // Basic with size variations
+                        <AvatarWrapper size="small">
+                            <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="Jeffrey Lebowski" />
                         </AvatarWrapper>
 
-                        <br />
-
-                        <AvatarWrapper
-                            size="large"
-                            statusIndicator={{status: 'online', tooltipText: "Online"}}
-                            administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
-                        >
-                            <AvatarContentText text="ABC" tooltipText="John Doe" />
+                        <AvatarWrapper size="medium">
+                            <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
                         </AvatarWrapper>
 
-                        <br />
-
-                        <AvatarWrapper
-                            size="small"
-                            statusIndicator={{status: 'online', tooltipText: "Online"}}
-                            administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
-                        >
-                            <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
+                        <AvatarWrapper size="large">
+                            <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="The Dude" />
                         </AvatarWrapper>
-
-                        <br />
-
-                        <AvatarWrapper
-                            size="medium"
-                            statusIndicator={{status: 'offline', tooltipText: "Offline"}}
-                            administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
-                        >
-                            <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
+                        
+                        <AvatarWrapper size="x-large">
+                            <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
                         </AvatarWrapper>
 
-                        <br />
-
-                        <AvatarWrapper
-                            size="large"
-                            statusIndicator={{status: 'online', tooltipText: "Online"}}
-                            administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
-                        >
-                            <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
+                        <AvatarWrapper size="xx-large">
+                            <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="The Dude" />
                         </AvatarWrapper>
 
-                        <br />
 
+                        // With status indicator
                         <AvatarWrapper
-                            size="small"
+                            size="large"
                             statusIndicator={{status: 'online', tooltipText: "Online"}}
-                            administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
                         >
-                            <AvatarContentImage tooltipText="John Doe" />
+                            <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
                         </AvatarWrapper>
 
-                        <br />
-
                         <AvatarWrapper
-                            size="medium"
+                            size="large"
                             statusIndicator={{status: 'offline', tooltipText: "Offline"}}
-                            administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
                         >
-                            <AvatarContentImage tooltipText="John Doe" />
+                            <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="Jeffrey Lebowski" />
                         </AvatarWrapper>
 
-                        <br />
-
+                        // With administrator indicator
+                        <Container gap='medium' className='sd-margin-b--3'>
                         <AvatarWrapper
                             size="large"
-                            statusIndicator={{status: 'online', tooltipText: "Online"}}
                             administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
                         >
-                            <AvatarContentImage tooltipText="John Doe" />
+                            <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
                         </AvatarWrapper>
-                    </Markup.ReactMarkupPreview>
-
-                    <Markup.ReactMarkupCode>{`
-                        <AvatarWrapper
-                            size="small"
-                            statusIndicator={{status: 'online', tooltipText: "Online"}}
-                            administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
-                        >
-                            <AvatarContentText text="ABC" tooltipText="John Doe" />
-                        </AvatarWrapper>
-
-                        <br />
-
-                        <AvatarWrapper
-                            size="medium"
-                            statusIndicator={{status: 'offline', tooltipText: "Offline"}}
-                            administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
-                        >
-                            <AvatarContentText text="ABC" tooltipText="John Doe" />
-                        </AvatarWrapper>
-
-                        <br />
 
                         <AvatarWrapper
                             size="large"
-                            statusIndicator={{status: 'online', tooltipText: "Online"}}
                             administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
                         >
-                            <AvatarContentText text="ABC" tooltipText="John Doe" />
+                            <AvatarContentImage tooltipText="Jeffrey Lebowski" />
                         </AvatarWrapper>
 
-                        <br />
-
+                        // Combo
                         <AvatarWrapper
-                            size="small"
+                            size="large"
                             statusIndicator={{status: 'online', tooltipText: "Online"}}
                             administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
                         >
-                            <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
+                            <AvatarContentText text="DH" tooltipText="Debbie Harry" />
                         </AvatarWrapper>
 
-                        <br />
-
                         <AvatarWrapper
-                            size="medium"
+                            size="large"
                             statusIndicator={{status: 'offline', tooltipText: "Offline"}}
                             administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
                         >
-                            <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
+                            <AvatarContentImage tooltipText="Debbie Harry" />
                         </AvatarWrapper>
 
-                        <br />
-
                         <AvatarWrapper
                             size="large"
-                            statusIndicator={{status: 'online', tooltipText: "Online"}}
-                            administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
-                        >
-                            <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
-                        </AvatarWrapper>
-
-                        <br />
-
-                        <AvatarWrapper
-                            size="small"
-                            statusIndicator={{status: 'online', tooltipText: "Online"}}
-                            administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
-                        >
-                            <AvatarContentImage tooltipText="John Doe" />
-                        </AvatarWrapper>
-
-                        <br />
-
-                        <AvatarWrapper
-                            size="medium"
                             statusIndicator={{status: 'offline', tooltipText: "Offline"}}
                             administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
                         >
-                            <AvatarContentImage tooltipText="John Doe" />
+                            <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
                         </AvatarWrapper>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
 
-                        <br />
+                <h3 className="docs-page__h3 docs-page__h3--small-top-m">AvatarGroup</h3>
+                <p className='docs-page__paragraph'></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Stacked</p>
+                        <AvatarGroup>
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
+                            </AvatarWrapper>
+                            
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
+                            </AvatarWrapper>
+                            {/* <AvatarWrapper size="large">
+                                <AvatarContentText text="6+" tooltipText="6 more" />
+                            </AvatarWrapper> */}
+                        </AvatarGroup>
+
+                        <p className="docs-page__paragraph">// Grid</p>
+                        <AvatarGroup appearance='grid' className='sd-width--xx-small'>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
+                            </AvatarWrapper>
+                            
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="Biggie Smalls" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage tooltipText="John Doe" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentText text="DD" tooltipText="Andre Romelle Young" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
+                            </AvatarWrapper>
+
+                        </AvatarGroup>
+                    </Markup.ReactMarkupPreview>
 
-                        <AvatarWrapper
-                            size="large"
-                            statusIndicator={{status: 'online', tooltipText: "Online"}}
-                            administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
-                        >
-                            <AvatarContentImage tooltipText="John Doe" />
-                        </AvatarWrapper>
+                    <Markup.ReactMarkupCode>{`
+                        // Stacked
+                        <AvatarGroup>
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
+                            </AvatarWrapper>
+                            
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
+                            </AvatarWrapper>
+                        </AvatarGroup>
+
+                    // Grid
+                        <AvatarGroup appearance='grid' className='sd-width--xx-small'>
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
+                            </AvatarWrapper>
+                            
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="Biggie Smalls" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage tooltipText="John Doe" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentText text="DD" tooltipText="Andre Romelle Young" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
+                            </AvatarWrapper>
+
+                            <AvatarWrapper size="large">
+                                <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
+                            </AvatarWrapper>
+                        </AvatarGroup>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Avatar props</h3>
+                <p className="docs-page__paragraph">AvatarWrapper</p>
+                <PropsList>
+                    <Prop name='size' isRequired={false} type='small | medium | large | x-large | xx-large' default='medium' description='Display size of the Avatar.'/>
+                    <Prop name='statusIndicator' isRequired={false} type='group' default='/' description='Optional prop group to display the status of the user.'/>
+                    <Prop name='statusIndicator status' isRequired={true} type='online | offline' default='/' description='Indicates if the user is online or offline'/>
+                    <Prop name='statusIndicator tooltipText' isRequired={false} type='string' default='/' description='Optional tooltip value for the status indicator.'/>
+                    <Prop name='administratorIndicator' isRequired={false} type='group' default='/' description='Optional prop group to display that the user is an administrator.'/>
+                    <Prop name='administratorIndicator enabled' isRequired={true} type='boolean' default='/' description='Indicates that the user is an admistrator if set to true.'/>
+                    <Prop name='administratorIndicator tooltipText' isRequired={false} type='string' default='/' description='Optional tooltip value for the administrator indicator.'/>
+                </PropsList>
+
+                <p className="docs-page__paragraph">AvatarContentText</p>
+                <PropsList>
+                    <Prop name='text' isRequired={true} type='string' default='/' description='Visible text value of the avatar, limited to 3 charactes.'/>
+                    <Prop name='tooltipText' isRequired={false} type='string' default='/' description='Tooltip value, displayed on hover.'/>
+                </PropsList>
+
+                <p className="docs-page__paragraph">AvatarContentImage</p>
+                <PropsList>
+                    <Prop name='imageUrl' isRequired={true} type='string' default='/' description='URL of the avatar image. A placeholder image will be displayed if not set.'/>
+                    <Prop name='tooltipText' isRequired={false} type='string' default='/' description='Tooltip value, displayed on hover.'/>
+                </PropsList>
+                <h3 className="docs-page__h3">AvatarGroup</h3>
+                <PropsList>
+                    <Prop name='appearance' isRequired={false} type='stacked | grid' default='stacked' description='Appearance of the Avatar group. Stacked displays the Avatars in an horizontal list, with slightly overlapped avatars.'/>
+                    <Prop name='borderColor' isRequired={false} type='000 | 050 | 100 | 150 | 200' default='000' description='Border color for stacked avatars. Should be matched with the parent background colour.'/>
+                    <Prop name='className' isRequired={false} type='online | offline' default='/' description='Add helper classes for margins, paddings etc.'/>
+                </PropsList>
             </section>
         );
     }

package/dist/react/Badges.tsx

@@ -89,6 +89,16 @@ export default class BadgeDoc extends React.Component {
                             <Badge text='E' color='purple--400' shape='square' />
                             <Badge text='F' color='purple--500' shape='square' />
                         </div>
+
+                        <p className="docs-page__paragraph">// Custom hex colours</p>
+                        <div className='docs-page__content-row'>
+                            <Badge text='1' hexColor='#008773' />
+                            <Badge text='2' hexColor='#0000FF' />
+                            <Badge text='3' hexColor='#00D100' />
+                            <Badge text='4' hexColor='#5531D9' shape='square' />
+                            <Badge text='5' hexColor='#960E0F' shape='square' />
+                            <Badge text='6' hexColor='#DB60FF' shape='square' />
+                        </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         // Basic colour palette
@@ -112,6 +122,13 @@ export default class BadgeDoc extends React.Component {
                         <Badge text='D' color='purple--300' shape='square'/>
                         <Badge text='E' color='purple--400' shape='square'/>
                         <Badge text='F' color='purple--500' shape='square'/>
+                        // Custom hex colours
+                        <Badge text='1' hexColor='#008773' />
+                        <Badge text='2' hexColor='#0000FF' />
+                        <Badge text='3' hexColor='#00D100' />
+                        <Badge text='4' hexColor='#5531D9' shape='square' />
+                        <Badge text='5' hexColor='#960E0F' shape='square' />
+                        <Badge text='6' hexColor='#DB60FF' shape='square' />
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -152,6 +169,7 @@ export default class BadgeDoc extends React.Component {
                     <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.)' />
                     <Prop name='color' isRequired={false} type='string' default='/' description='Extended color palette from the framework (e.g. red--500);  NOTE: The badge can have either a Type or Color defined, not both at the same time.' />
                     <Prop name='shape' isRequired={false} type='round | square' default='round' description='Make shape of badge square or default round.' />
+                    <Prop name='hexColor' isRequired={false} type='string' default='/' description='Define a custom Hex colour for the Badge.'/>
                 </PropsList>
             </section>
         )