superdesk-ui-framework 3.1.9 → 3.1.13

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

package/examples/pages/components/utilities/BorderRadiusUtilities.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import * as Markup from '../../../js/react';
+
+class BorderRadiusUtilitiesDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Border Radius</h2>
+                <p className="docs-page__paragraph">
+                    Utility classes for controlling the border radius of an element. 
+                </p>
+                <div className='docs-page__container-block--position'>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>radius-xs</td>
+                                    <td>{'border-radius: var(--b-radius--x-small);'} <span className="doc-text--highlight">/* 2px */</span></td>
+                                </tr>
+                                <tr>
+                                    <td>radius-sm</td>
+                                    <td>{'border-radius: var(--b-radius--small);'} <span className="doc-text--highlight">/* 3px */</span></td>
+                                </tr>
+                                <tr>
+                                    <td>radius-md</td>
+                                    <td>{'border-radius: var(--b-radius--medium);'} <span className="doc-text--highlight">/* 4px */</span></td>
+                                </tr>
+                                <tr>
+                                    <td>radius-lg</td>
+                                    <td>{'border-radius: var(--b-radius--large);'} <span className="doc-text--highlight">/* 6px */</span></td>
+                                </tr>
+                                <tr>
+                                    <td>radius-xl</td>
+                                    <td>{'border-radius: var(--b-radius--x-large);'} <span className="doc-text--highlight">/* 8px */</span></td>
+                                </tr>
+                                <tr>
+                                    <td>radius-full</td>
+                                    <td>{'border-radius: var(--b-radius--full);'} <span className="doc-text--highlight">/* 9999px */</span></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+            </section>
+        )
+    }
+}
+
+export { BorderRadiusUtilitiesDoc };

package/examples/pages/components/utilities/BorderUtilities.tsx

@@ -0,0 +1,170 @@
+import * as React from 'react';
+import * as Markup from '../../../js/react';
+
+class BorderUtilitiesDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Border</h2>
+                <p className="docs-page__paragraph">
+                    Utility classes for controlling the borders of an element.. 
+                </p>
+                <div className='docs-page__container-block--border'>
+                    <h3 className="docs-page__h3">Basic Border with neutral color</h3>
+                    <p className='docs-page__paragraph'>
+                        Utilities classes for adding a neutral 1px solid border to an element.
+                    </p>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                    <th></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>sd-border--x-light</td>
+                                    <td>{'border: 1px solid var(--sd-colour-line--x-light);'}</td>
+                                    <td><div className='border-example-box sd-border--x-light'></div></td>
+                                </tr>
+                                <tr>
+                                    <td>sd-border--light</td>
+                                    <td>{'border: 1px solid var(--sd-colour-line--light);'}</td>
+                                    <td><div className='border-example-box sd-border--light'></div></td>
+                                </tr>
+                                <tr>
+                                    <td>sd-border--medium</td>
+                                    <td>{'border: 1px solid var(--sd-colour-line--medium);'}</td>
+                                    <td><div className='border-example-box sd-border--medium'></div></td>
+                                </tr>
+                                <tr>
+                                    <td>sd-border--strong</td>
+                                    <td>{'border: 1px solid var(--sd-colour-line--strong);'}</td>
+                                    <td><div className='border-example-box sd-border--strong'></div></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--border-width'>
+                    <h3 className="docs-page__h3">Border Width</h3>
+                    <p className='docs-page__paragraph'>
+                        Utilities classes for overriding the border width of an element. Options are limited to common use cases.
+                    </p>
+                    <div className="utilities-table__container utilities-table__container--no-height">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>border-0</td>
+                                    <td>{'border-width: 0px;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>border-1</td>
+                                    <td>{'border-width: 1px;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>border-2</td>
+                                    <td>{'border-width: 2px;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>border-3</td>
+                                    <td>{'border-width: 2px;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>border-4</td>
+                                    <td>{'border-width: 4px;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>border-x-0</td>
+                                    <td>
+                                        {'border-inline-start-width: 0px;'}<br />
+                                        {'border-inline-end-width: 0px;'}
+
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>border-y-0</td>
+                                    <td>
+                                        {'border-block-start-width: 0px;'}<br />
+                                        {'border-block-end-width: 0px;'}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>border-s-0</td>
+                                    <td>
+                                        {'border-inline-start-width: 0px;'}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>border-e-0</td>
+                                    <td>
+                                        {'border-inline-end-width: 0px;'}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>border-t-0</td>
+                                    <td>
+                                        {'border-top: 0px;'}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>border-b-0</td>
+                                    <td>
+                                        {'border-bottom: 0px;'}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='docs-page__container-block--border-style'>
+                    <h3 className="docs-page__h3">Border Style</h3>
+                    <p className='docs-page__paragraph'>
+                        Utilities classes for overriding the border style of an element.
+                    </p>
+                    <div className="utilities-table__container utilities-table__container--no-height">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>border-solid</td>
+                                    <td>{'border-style: solid;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>border-dotted</td>
+                                    <td>{'border-style: dotted;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>border-dashed</td>
+                                    <td>{'border-style: dashed;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>border-double</td>
+                                    <td>{'border-style: double;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+            </section>
+        )
+    }
+}
+
+export { BorderUtilitiesDoc };

package/examples/pages/components/utilities/DisplayUtilities.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import * as Markup from '../../../js/react';
+
+class DisplayUtilitiesDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Display</h2>
+                <p className="docs-page__paragraph">
+                Utility classes for controlling the display box type of an element.
+                </p>
+                <div className='docs-page__container-block--display'>
+                    <div className="utilities-table__container utilities-table__container--no-height">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>d-block</td>
+                                    <td>{'display: auto !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-inline-block</td>
+                                    <td>{'display: inline-block !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-inline</td>
+                                    <td>{'display: inline !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-flex</td>
+                                    <td>{'display: flex !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-inline-flex</td>
+                                    <td>{'display: inline-flex !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-grid</td>
+                                    <td>{'display: grid !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-inline-grid</td>
+                                    <td>{'display: inline-grid !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-contents</td>
+                                    <td>{'display: contents !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-none</td>
+                                    <td>{'display: none !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-flow-root</td>
+                                    <td>{'display: flow-root !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-list-item</td>
+                                    <td>{'display: list-item !important;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-table</td>
+                                    <td>{'display: table;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-inline-table</td>
+                                    <td>{'display: inline-table;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-table-caption</td>
+                                    <td>{'display: table-caption;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-table-cell</td>
+                                    <td>{'display: table-cell;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-table-column</td>
+                                    <td>{'display: table-column;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-table-column-group</td>
+                                    <td>{'display: table-column-group;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-table-footer-group</td>
+                                    <td>{'display: table-footer-group;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-table-header-group</td>
+                                    <td>{'display: table-header-group;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-table-row</td>
+                                    <td>{'display: table-row;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>d-table-row-group</td>
+                                    <td>{'display: table-row-group;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+            </section>
+        )
+    }
+}
+
+export { DisplayUtilitiesDoc };