superdesk-ui-framework 3.1.9 → 3.1.13

package/dist/components/Index.tsx

@@ -72,8 +72,18 @@ import { ResizablePanelsDoc } from './ResizablePanels';
 import { IllustrationButtonDoc } from './IllustrationButton';
 
 // Utilities
-import {SpacingUtilitiesDoc} from './utilities/SpacingUtilities';
-import {TextUtilitiesDoc} from './utilities/TextUtilities';
+import { SpacingUtilitiesDoc } from './utilities/SpacingUtilities';
+import { TextUtilitiesDoc } from './utilities/TextUtilities';
+import { ShadowUtilitiesDoc } from './utilities/ShadowUtilities';
+import { PositionUtilitiesDoc } from './utilities/PositionUtilities';
+import { OverflowUtilitiesDoc } from './utilities/OverflowUtilities';
+import { DisplayUtilitiesDoc } from './utilities/DisplayUtilities';
+import { FlexAndGridUtilitiesDoc } from './utilities/FlexAndGridUtilities';
+import { BorderRadiusUtilitiesDoc } from './utilities/BorderRadiusUtilities';
+import { BorderUtilitiesDoc } from './utilities/BorderUtilities';
+import { OpacityUtilitiesDoc } from './utilities/OpacityUtilities';
+import { ObjectFitUtilitiesDoc } from './utilities/ObjectFitUtilities';
+import { ObjectPositionUtilitiesDoc } from './utilities/ObjectPositionUtilities';
 
 const pages = {
     basicComponents: {
@@ -136,7 +146,7 @@ const pages = {
             "drag-handle": {
                 name: 'Drag handle'
             },
-            "illustration-button" : {
+            "illustration-button": {
                 name: 'Illustration Button'
             }
         }
@@ -299,65 +309,52 @@ const pages = {
     utilityClasses: {
         name: "Utility classes",
         items: {
+            'border-utilities': {
+                name: 'Border'
+            },
+            'border-radius-utilities': {
+                name: 'Border Radius'
+            },
+            'display-utilities': {
+                name: 'Display'
+            },
+            'flex-and-grid-utilities': {
+                name: 'Flex & Grid'
+            },
+            'object-fit-utilities': {
+                name: 'Object Fit'
+            },
+            'object-position-utilities': {
+                name: 'Object Position'
+            },
+            'opacity-utilities': {
+                name: 'Opacity'
+            },
+            'overflow-utilities': {
+                name: 'Overflow'
+            },
+            'position-utilities': {
+                name: 'Position'
+            },
+            'shadow-utilities': {
+                name: 'Shadow'
+            },
             'spacing-utilities': {
-                name: 'Spacing Utilities',
+                name: 'Spacing',
             },
             'text-utilities': {
-                name: 'Text utilities'
+                name: 'Text'
             }
         }
     }
 }
-interface IProps {
-    theme?: string;
-}
-interface IState {
-    theme: 'dark-ui' | 'light-ui' | string;
-}
-
-class ReactDoc extends React.Component<IProps, IState> {
-    constructor(props: IProps) {
-        super(props);
-        this.state = {
-            theme: 'light-ui',
-        }
-        this.handleTheme = this.handleTheme.bind(this);
-    }
-
-    handleTheme(newTheme: string) {
-        document.body.setAttribute('data-theme', newTheme);
-
-        this.setState({
-            theme: newTheme
-        })
-    }
-
-    checkTheme(theme: string) {
-        return this.state.theme === theme;
-    }
 
+class ReactDoc extends React.Component {
     render() {
         return (
             <React.Fragment>
                 <ReactNav pages={pages} />
                 <main className="docs-page__content docs-page__container-fluid">
-                    <div className="docs-page__fla-button-container">
-                        <Dropdown
-                            items={[
-                                {
-                                    type: 'group', label: 'Chose a theme', items: [
-                                        'divider',
-                                        { label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
-                                        { label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
-                                        { label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
-                                    ]
-                                },
-                            ]}>
-                            <button className="docs-page__fla-button" aria-label="Change theme" onClick={() => false}>
-                                <i className="icon-adjust"></i>
-                            </button>
-                        </Dropdown>
-                    </div>
                     <Switch>
                         <Route path="/components/buttons" component={ButtonsDoc} />
                         <Route path="/components/icon-buttons" component={IconButtonDoc} />
@@ -422,6 +419,16 @@ class ReactDoc extends React.Component<IProps, IState> {
                         {/* Utilities */}
                         <Route path="/components/spacing-utilities" component={SpacingUtilitiesDoc} />
                         <Route path="/components/text-utilities" component={TextUtilitiesDoc} />
+                        <Route path="/components/shadow-utilities" component={ShadowUtilitiesDoc} />
+                        <Route path="/components/position-utilities" component={PositionUtilitiesDoc} />
+                        <Route path="/components/overflow-utilities" component={OverflowUtilitiesDoc} />
+                        <Route path="/components/display-utilities" component={DisplayUtilitiesDoc} />
+                        <Route path="/components/flex-and-grid-utilities" component={FlexAndGridUtilitiesDoc} />
+                        <Route path="/components/border-radius-utilities" component={BorderRadiusUtilitiesDoc} />
+                        <Route path="/components/border-utilities" component={BorderUtilitiesDoc} />
+                        <Route path="/components/opacity-utilities" component={OpacityUtilitiesDoc} />
+                        <Route path="/components/object-fit-utilities" component={ObjectFitUtilitiesDoc} />
+                        <Route path="/components/object-position-utilities" component={ObjectPositionUtilitiesDoc} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>
@@ -444,6 +451,54 @@ class ReactPlayground extends React.Component<IProps> {
     }
 }
 
+interface IProps {
+    theme?: string;
+}
+interface IState {
+    theme: 'dark-ui' | 'light-ui' | string;
+}
+class ReactThemePicker extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            theme: 'light-ui',
+        }
+        this.handleTheme = this.handleTheme.bind(this);
+    }
+
+    handleTheme(newTheme: string) {
+        document.body.setAttribute('data-theme', newTheme);
+
+        this.setState({
+            theme: newTheme
+        })
+    }
+
+    checkTheme(theme: string) {
+        return this.state.theme === theme;
+    }
+
+    render() {
+        return (
+            <Dropdown
+                items={[
+                    {
+                        type: 'group', label: 'Chose a theme', items: [
+                            'divider',
+                            { label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
+                            { label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
+                            { label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
+                        ]
+                    },
+                ]}>
+                <button className="docs-page__header-button" aria-label="Change theme" onClick={() => false}>
+                    <i className="icon-adjust"></i>
+                </button>
+            </Dropdown>
+        );
+    }
+}
+
 const parsePlayground = ({ match }, playgrounds) => {
     const Component = Playgrounds[playgrounds[match.params.id].component];
     return (
@@ -451,5 +506,5 @@ const parsePlayground = ({ match }, playgrounds) => {
     );
 };
 
-export { ReactDoc, ReactPlayground };
+export { ReactDoc, ReactPlayground, ReactThemePicker };
 

package/dist/components/Panel.tsx

@@ -57,15 +57,15 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Left</p>
-                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
+                        <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
                             {this.state.openPanel1 ? null : 
-                                <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                <div className='d-flex items-center justify-center sd-flex--grow'>
                                     <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel1': true})} />
                                 </div> 
                             }
                             <PanelElements.Panel side='left' background='light' open={this.state.openPanel1} size='x-small'>
                                 <PanelElements.PanelHeader
-                                    title='This is the title for the Panel'
+                                    title='This is the Panel title'
                                     onClose={() => this.setState({'openPanel1': false})}
                                     iconButtons={[
                                         <Rotate degrees={this.state.rotate ? 90 : 0}>
@@ -92,7 +92,7 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                     <Markup.ReactMarkupCode>{`
                         // Left
                         {this.state.openPanel1 ? null : 
-                            <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                            <div className='d-flex items-center justify-center sd-flex--grow'>
                                 <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel1': true})} />
                             </div> 
                         }
@@ -130,9 +130,9 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// Right, custom elements inside the footer + dark theme.</p>
-                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
+                        <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
                             {this.state.openPanel2 ? null :
-                                <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                <div className='d-flex items-center justify-center sd-flex--grow'>
                                     <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel2': true})} />
                                 </div>
                             }
@@ -168,7 +168,7 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                         // Right, custom elements inside the footer + dark theme.
 
                         {this.state.openPanel2 ? null :
-                            <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                            <div className='d-flex items-center justify-center sd-flex--grow'>
                                 <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel2': true})} />
                             </div>
                         }
@@ -201,9 +201,9 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// With PanelHeaderSlidingToolbar element inside the PanelHeader</p>
-                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
+                        <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
                             {this.state.openPanel3 ? null :
-                                <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                <div className='d-flex items-center justify-center sd-flex--grow'>
                                     <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel3': true})} />
                                 </div>
                             }
@@ -245,7 +245,7 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                         // With PanelHeaderSlidingToolbar element inside the PanelHeader
 
                         {this.state.openPanel3 ? null :
-                            <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                            <div className='d-flex items-center justify-center sd-flex--grow'>
                                 <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel3': true})} />
                             </div>
                         }
@@ -284,9 +284,9 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <p className="docs-page__paragraph">// With PanelTools (allowing custom actions) + dark theme</p>
-                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
+                        <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
                             {this.state.openPanel4 ? null :
-                                <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                                <div className='d-flex items-center justify-center sd-flex--grow'>
                                     <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel4': true})} />
                                 </div>
                             }
@@ -317,7 +317,7 @@ export default class PanelDoc extends React.Component<IProps, IState> {
                         // With PanelTools (allowing custom actions) + dark theme
 
                         {this.state.openPanel4 ? null :
-                            <div className='sd-display--flex sd-flex--items-center sd-flex--justify-center sd-flex--grow'>
+                            <div className='d-flex items-center justify-center sd-flex--grow'>
                                 <Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel4': true})} />
                             </div>
                         }

package/dist/components/Tags.tsx

@@ -55,7 +55,7 @@ export default class TagDoc extends React.Component<{}, ITag> {
             
             <Markup.ReactMarkup>
                 <Markup.ReactMarkupPreview>
-                <div className='docs-page__content-row sd-display--flex sd-gap--small'>
+                <div className='docs-page__content-row d-flex gap-1'>
                     {this.state.tags.map((tag,index)=>{
                         return (
                             <React.Fragment key={index}>
@@ -86,7 +86,7 @@ export default class TagDoc extends React.Component<{}, ITag> {
 
             <Markup.ReactMarkup>
                 <Markup.ReactMarkupPreview>
-                <div className='docs-page__content-row sd-display--flex sd-gap--small'>
+                <div className='docs-page__content-row d-flex gap-1'>
                     {this.state.tags2.map((tag,index)=>{
                         return (
                             <React.Fragment key={index}>

package/dist/components/TimePicker.tsx

@@ -2,6 +2,10 @@ import * as React from 'react';
 import * as Markup from '../../js/react';
 import {PropsList, Prop} from '../../../app-typescript';
 import {TimePicker} from '../../../app-typescript/components/TimePicker';
+import {TimePickerV2} from '../../../app-typescript/components/TimePickerV2';
+
+let minutes = Array.from(Array(60).keys());
+let changedMinutes = minutes.filter((num) => num % 15 !== 0)
 
 class TimePickerExample extends React.PureComponent<{}, {time: string}> {
     constructor(props) {
@@ -27,7 +31,15 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
     }
 }
 
-export default class TimePickerDoc extends React.Component {
+export default class TimePickerDoc extends React.Component<{}, {time: string}> {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            time: '14:00',
+        };
+    }
+
     render() {
         return (
             <section className="docs-page__container">
@@ -59,6 +71,36 @@ export default class TimePickerDoc extends React.Component {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
+                <p className='docs-page__paragraph'>TimePickerV2:</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                            <TimePickerV2
+                                value={this.state.time}
+                                label='This is Label'
+                                disabledOptions={{
+                                    minutes: changedMinutes,
+                                }}
+                                onChange={(time) => {
+                                    this.setState({time});
+                                }}
+                            />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <TimePickerV2
+                            value={this.state.time}
+                            label='This is Label'
+                            disableOptions={{
+                                minutes: changedMinutes,
+                            }}
+                            onChange={(time) => {
+                                this.setState({time})
+                            }}
+                        />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
                     <Prop name='value' isRequired={true} type='string' default='/' description='Item value.' />

package/dist/components/Togglebox.tsx

@@ -1,48 +1,202 @@
 import * as React from "react";
 import * as Markup from "../../js/react";
-import { ToggleBox, PropsList, Prop, Button, Badge } from "../../../app-typescript";
+import { PropsList, Prop, Badge, Icon, Label, AvatarGroup, ContentDivider, FormLabel, Text } from "../../../app-typescript";
+import {ToggleBox} from './../../../app-typescript/components/ToggleBox/index';
+import {IAvatarInGroup} from '../../../app-typescript/components/avatar/avatar-group';
+
+const avatars: Array<IAvatarInGroup> = [
+    {
+        imageUrl: null,
+        initials: "VS",
+        displayName: 'Vladimir Stefanovic',
+        icon:{name: 'text', color: 'var(--sd-colour-highlight)'},
+    },
+    {
+        imageUrl: null,
+        initials: "JL",
+        displayName: 'Jeffrey Lebowski',
+        icon:{name: 'photo', color: 'var(--sd-colour-highlight)'}
+    },
+    {
+        imageUrl: null,
+        initials: "WS",
+        displayName: 'Walter Sobchak',
+        icon:{name: 'video', color: 'var(--sd-colour-highlight)'}
+    },
+    {
+        imageUrl: null,
+        initials: "ML",
+        displayName: 'Maude Lebowski',
+        icon:{name: 'file', color: 'var(--sd-colour-highlight)'}
+    },
+];
 
-const ToggleboxDocs = () => {
-    const toggleRef = React.useRef();
 
+const ToggleboxDocs = () => {
     return (
         <section className="docs-page__container">
             <h2 className="docs-page__h2">Togglebox</h2>
-            <p className="docs-page__paragraph">Simple toggle box element. It provides toggle() function that can be used with React's ref functionality and control close/open state from outside. Arrow left, Arrow right and Enter are supported keyboard events.</p>
             <Markup.ReactMarkupCodePreview>{`
-                    <ToggleBox title="togglebox title">togglebox content</ToggleBox>
+                    <ToggleBox variant="simple" title="togglebox title">togglebox content</ToggleBox>
                 `}
             </Markup.ReactMarkupCodePreview>
+            <p className="docs-page__paragraph">Simple ToggleBox:</p>
+            <Markup.ReactMarkup>
+                <Markup.ReactMarkupPreview>
+                    <div style={{ marginTop: "2em" }}>
+                        <ToggleBox variant="simple" title="Simple togglebox">Togglebox content</ToggleBox>
+                        <ToggleBox variant='simple' title="With badge" badge={<Badge text='2' type='primary' />}>Togglebox content</ToggleBox>
+                        <ToggleBox variant='simple' title="Togglebox - circled chevron" circledChevron={true}>Togglebox content</ToggleBox>
+                        <ToggleBox variant='simple' title="Large title" largeTitle={true} circledChevron={true}>
+                            <div className="px-4 text-sm line-height-lg">
+                                <p className="mb-2">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. 
+                                Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 
+                                Curabitur blandit tempus porttitor.</p>
+
+                                <p className="mb-2">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.
+                                Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere 
+                                erat a ante venenatis dapibus posuere velit aliquet.</p>
+
+                                <p className="">Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id 
+                                ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+                            </div>
+                        </ToggleBox>
+                    </div>
+                </Markup.ReactMarkupPreview>
+                <Markup.ReactMarkupCode>{`
+                    <ToggleBox variant='simple' title="Simple togglebox">Togglebox content</ToggleBox>
+                    <ToggleBox variant='simple' title="With badge" badge={<Badge text='2' type='primary' />}>Togglebox content</ToggleBox>
+                    <ToggleBox variant='simple' title="Togglebox - circled chevron" className="toggle-box--circle">Togglebox content</ToggleBox>
+                `}</Markup.ReactMarkupCode>
+            </Markup.ReactMarkup>
+
+            <p className="docs-page__paragraph">Custom header ToggleBox:</p>
             <Markup.ReactMarkup>
                 <Markup.ReactMarkupPreview>
-                    <Button text="Toggle programatically" onClick={() => { toggleRef.current.toggle() }} />
                     <div style={{ marginTop: "2em" }}>
-                        <ToggleBox title="Simple togglebox" ref={toggleRef} initiallyOpen={true}>Togglebox content</ToggleBox>
-                        <ToggleBox title="With badge" badge={<Badge text='2' type='primary' />}>Togglebox content</ToggleBox>
-                        <ToggleBox title="With different badge" badge={<Badge text='!' type='alert' shape='square' />}>Togglebox content</ToggleBox>
-                        <ToggleBox title="Togglebox - circled chevron" className="toggle-box--circle">Togglebox content</ToggleBox>
+                        <ToggleBox
+                            variant='custom-header'
+                            header={
+                                <div role="listitem" className="sd-list-item sd-list-item--no-hover">
+                                    <div className="sd-list-item__border sd-list-item__border--locked"></div>
+                                    <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
+                                        <Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
+                                    </div>
+                                    <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
+                                        <div className="sd-list-item__row">
+                                            <span className="sd-list-item__slugline">Planning Slugline</span>
+                                        </div>
+                                        <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
+                                            <Label text='draft' style='translucent'/>
+                                            <span className="sd-margin-s--auto">
+                                            <AvatarGroup
+                                                size="x-small"
+                                                items={avatars}
+                                            />
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            }
+                            toggleButtonLabel={'show more'}
+                            onToggle={(isOpen) => false}
+                        >
+                            <div>
+                                <FormLabel text='Name'/>
+                                <Text size='small' weight='medium'>Australian Open 2024</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='Current Date'/>
+                                <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='Current Repeat Summary'/>
+                                <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='No. of events'/>
+                                <Text size='small' weight='medium'>1</Text>
+                            </div>
+                        </ToggleBox>
                     </div>
                 </Markup.ReactMarkupPreview>
                 <Markup.ReactMarkupCode>{`
-                    <Button text="Toggle programatically" onClick={() => { toggleRef.current.toggle() }} />
-                   
-                    <ToggleBox title="Simple togglebox" ref={toggleRef} initiallyOpen={true}>Togglebox content</ToggleBox>
-                    <ToggleBox title="With badge" badge={<Badge text='2' type='primary' />}>Togglebox content</ToggleBox>
-                    <ToggleBox title="With different badge" badge={<Badge text='!' type='alert' shape='square' />}>Togglebox content</ToggleBox>
-                    <ToggleBox title="Togglebox - circled chevron" className="toggle-box--circle">Togglebox content</ToggleBox>
+                    <ToggleBox
+                        variant='custom-header'
+                        header={
+                            <div role="listitem" className="sd-list-item sd-list-item--no-hover">
+                                <div className="sd-list-item__border sd-list-item__border--locked"></div>
+                                <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
+                                    <Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
+                                </div>
+                                <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
+                                    <div className="sd-list-item__row">
+                                        <span className="sd-list-item__slugline">Planning Slugline</span>
+                                    </div>
+                                    <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
+                                        <Label text='draft' style='translucent'/>
+                                        <span className="sd-margin-s--auto">
+                                        <AvatarGroup
+                                            size="x-small"
+                                            items={avatars}
+                                        />
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        }
+                        onToggle={() => false}
+                    >
+                        <div>
+                            <FormLabel text='Name'/>
+                            <Text size='small' weight='medium'>Australian Open 2024</Text>
+                        </div>
+                        <ContentDivider type="dashed" margin='x-small' />
+                        <div>
+                            <FormLabel text='Current Date'/>
+                            <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
+                        </div>
+                        <ContentDivider type="dashed" margin='x-small' />
+                        <div>
+                            <FormLabel text='Current Repeat Summary'/>
+                            <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
+                        </div>
+                        <ContentDivider type="dashed" margin='x-small' />
+                        <div>
+                            <FormLabel text='No. of events'/>
+                            <Text size='small' weight='medium'>1</Text>
+                        </div>
+                    </ToggleBox>
                 `}</Markup.ReactMarkupCode>
             </Markup.ReactMarkup>
 
             <h3 className="docs-page__h3">Props</h3>
+            <PropsList>
+                <Prop name='variant' isRequired={true} type='simple | custom header' default='null' description='Type of component.' />
+            </PropsList>
+
+            <h3 className="docs-page__h3">Props: variant: 'simple'</h3>
             <PropsList>
                 <Prop name='title' isRequired={true} type='string' default='null' description='Togglebox title' />
                 <Prop name='badge' isRequired={false} type='JSX.Element' default='null' description='Badge' />
-                <Prop name='hideUsingCSS' isRequired={false} type='boolean' default='false' description='Usefull when working with forms. Content of togglebox will be hidden but remain rendered.' />
                 <Prop name='initiallyOpen' isRequired={false} type='boolean' default='false' description='Opens togglebox on initial render' />
                 <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
                 <Prop name='margin' isRequired={false} type='none | small | normal | large' default='normal' description='Defines the bottom margin of the toggle box.' />
                 <Prop name='onOpen' isRequired={false} type='function' default='null' description='Callback on open event' />
                 <Prop name='onClose' isRequired={false} type='function' default='null' description='Callback on close event' />
+                <Prop name='circledChevron' isRequired={false} type='boolean' default='false' description='Adds a light, circle-shaped background around the chevron.' />
+                <Prop name='largeTitle' isRequired={false} type='boolean' default='false' description='This option will increase the size of the title. Always use a circled chevron (circledChevron) in combination with this option.' />
+            </PropsList>
+
+            <h3 className="docs-page__h3">Props: variant: 'custom-header'</h3>
+            <PropsList>
+                <Prop name='header' isRequired={true} type='JSX.Component' default='null' description='Always visible part of component.' />
+                <Prop name='children' isRequired={false} type='JSX.Component' default='null' description='Appear on clicking the button.' />
+                <Prop name='initiallyOpen' isRequired={false} type='boolean' default='false' description='Opens togglebox on initial render.' />
+                <Prop name='onClose' isRequired={false} type='function' default='null' description='Callback on toggle.' />
             </PropsList>
         </section>
     )

package/dist/components/TreeMenu.tsx

@@ -176,6 +176,7 @@ export class TreeMenuDocs extends React.Component<{}, {}> {
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <TreeMenu
+                                searchPlaceholder='Search...'
                                 getOptions={() => options}
                                 getId={(item) => item.name}
                                 getLabel={(item) => item.name}
@@ -208,6 +209,7 @@ export class TreeMenuDocs extends React.Component<{}, {}> {
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <TreeMenu
+                                searchPlaceholder='Search...'
                                 getOptions={() => options2}
                                 getId={(item) => item.name}
                                 getLabel={(item) => item.name}