superdesk-ui-framework 3.1.9 → 3.1.12

package/app/styles/_master-desk.scss

@@ -39,7 +39,7 @@ $board-header-border-color: var(--color-kanban-border);
 }
 
 .sd-board__content-block {
-    @include sd-shadow('z2');
+    box-shadow: var(--sd-shadow--z2);
     border-radius: $border-radius__base--x-small;
     background-color: var(--sd-item__main-Bg);
     display: flex;
@@ -51,7 +51,7 @@ $board-header-border-color: var(--color-kanban-border);
     cursor: pointer;
 
     &:hover {
-       @include sd-shadow('z3');
+       box-shadow: var(--sd-shadow--z3);
        outline: 1px solid var(--sd-colour-interactive--alpha-50);
     }
 }

package/app/styles/components/_sd-collapse-box.scss

@@ -140,3 +140,116 @@
         align-items: center;
     }
 }
+
+// NEW COLLAPSE BOX
+.new-collapse-box {
+    --collapse-box-clor-bg: var(--sd-colour-panel-bg--100);
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 0fr auto;
+    border-radius: var(--b-radius--small);
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    outline: 1px solid var(--sd-colour-line--x-light);
+}
+.new-collapse-box__header {
+    grid-row: 1 / 2;
+    height: auto;
+    padding: 0;
+    overflow: hidden;
+    transition: all 0.2s ease;
+}
+.new-collapse-box__content {
+    grid-row: 2 / 3;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    overflow: hidden;
+    padding-block: 0;
+    background-color: var(--sd-colour-panel-bg--100);
+    transition: grid-template-rows 0.2s ease;
+}
+.new-collapse-box {
+    &.new-collapse-box--open {
+        grid-template-rows: auto 1fr auto;
+        .new-collapse-box__content {
+            > .new-collapse-box__content-inner {
+                animation: fadeIn 0.3s ease-in 0s 1;
+                overflow-y: auto;
+                .new-collapse-box { // Nested -- collapse-box inside a parent collapse-box
+                    &.new-collapse-box--open {
+                        .new-collapse-box__content {
+                            .new-collapse-box__content-inner {
+                                animation: fadeIn2 0.3s ease-in 0s 1;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &:focus-within {
+            outline-color: var(--sd-colour-interactive);
+        }
+    }
+    .sd-list-item {
+        border-radius: var(--b-radius--small) var(--b-radius--small) 0 0;
+
+        + .sd-list-item {
+            border-block-start: none;
+        }
+
+        .sd-list-item__border {
+            border-radius: var(--b-radius--small) 0 0 0;
+        }
+    }
+}
+.new-collapse-box__divider {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 100%;
+    background: linear-gradient(to bottom, transparent 50%, var(--collapse-box-clor-bg) 50%);
+    padding-inline: 0;
+    margin-inline: 0;
+    margin-block-start: -9px;
+    margin-block-end: 8px;
+    border-block-start: 0;
+    border-block-end: 0;
+    border-inline-start: 0;
+    border-inline-end: 0;
+    border-block-start-color: var(--sd-colour-line--light);
+    border-style: solid;
+    &::before,
+    &::after {
+        content: "";
+        position: relative;
+        inset-block-start: 50%;
+        width: 50%;
+        border-block-start: 1px solid transparent;
+        border-top-color: transparent;
+        border-top-color: inherit;
+        border-block-end: 0;
+        border-inline-start: 0;
+        border-inline-end: 0;
+        transform: translateY(50%);
+        border-style: inherit;
+    }
+    .new-collapse-box__divider-label {
+        background-color: var(--collapse-box-button-color-bg-default);
+        color: var(--collapse-box-button-color-fg-default);
+        transition: all 0.2s ease;
+    }
+    &:hover {
+        border-block-start-color: var(--sd-colour-line--medium);
+        .new-collapse-box__divider-label {
+            background-color: var(--collapse-box-button-color-bg-hover);
+            color: var(--collapse-box-button-color-fg-hover);
+            transition: all 0.2s ease;
+        }           
+    }
+}

package/app/styles/components/_subnav.scss

@@ -12,7 +12,6 @@
     align-items: center;
     color: $sd-text;
     flex-shrink: 0;
-    flex-grow: 1;
     
     .sd-check__group {
         padding: 0;

package/app/styles/design-tokens/_design-tokens-general.scss

@@ -78,10 +78,11 @@
     --sd-shadow--z4: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.2), 0 6px 16px hsla(0, 0%, 0%, 0.3), 0 0 1px hsla(0, 0%, 0%, 0.1);
 
     // DROP-SHADOW Filter
-    --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px rhsla(0, 0%, 0%, 0.12));
-    --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px rhsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
-    --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px rhsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
-    --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.12));
+    --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px hsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px hsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px hsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+    --sd-drop-shadow--none: drop-shadow(0 0 0 transparent);
 
     // FORM ELEMENTS
     // Size 
@@ -104,12 +105,25 @@
 
 [data-theme="dark-ui"],
 .dark-ui {
-    --sd-shadow-outline: hsl(214, 13%, 60%, 0.14);
+    --sd-shadow-outline: hsl(214, 13%, 60%, 0.28);
     --sd-shadow-outline--2: hsl(214, 13%, 60%, 0.1);
     --sd-shadow__dropdown: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.6), 0 3px 1px -2px hsla(0, 0%, 0%, 0.2);
     --sd-shadow__modal: 0 0 0 1px var(--sd-shadow-outline), 0 0 8px 2px hsla(0, 0%, 0%, 0.4);
     --sd-shadow__toast: 0 0 0 1px var(--sd-shadow-outline--2), 0 2px 4px hsla(0, 0%, 0%, 0.24), 0 8px 12px hsla(0, 0%, 0%, 0.26);
     --sd-shadow__menu-item--focus-inner: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20), inset 0 0 0 1px var(--sd-colour-interactive--alpha-50);
+
+    // SHADOW
+    --sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.36), 0 0 1px hsla(0, 0%, 0%, 0.2);
+    --sd-shadow--z2: 0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.36), 0 2px 6px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.2);
+    --sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.36), 0 3px 8px hsla(0, 0%, 0%, 0.48), 0 0 1px hsla(0, 0%, 0%, 0.2);
+    --sd-shadow--z4: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.4), 0 6px 16px hsla(0, 0%, 0%, 0.6), 0 0 1px hsla(0, 0%, 0%, 0.2);
+
+    // DROP-SHADOW Filter
+    --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.38)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
+    --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.38)) drop-shadow(0 2px 6px hsla(0, 0%, 0%, 0.28)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
+    --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.38)) drop-shadow(0 3px 8px hsla(0, 0%, 0%, 0.50)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
+    --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.44)) drop-shadow(0 6px 16px hsla(0, 0%, 0%, 0.64)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
+    
 }
 
 .sd-top-menu,

package/app/styles/design-tokens/_new-colors.scss

@@ -368,7 +368,11 @@
     --sd-colour-state--in-progress: var(--sd-colour-highlight);
     --sd-colour-state--done: var(--sd-colour-success);
 
-
+    // New Collapsible Box
+    --collapse-box-button-color-bg-default: hsla(var(--sd-colour-cool-grey-l--85), 1);
+    --collapse-box-button-color-bg-hover: hsla(var(--sd-colour-cool-grey-l--80), 1);
+    --collapse-box-button-color-fg-default: var(--color-text);
+    --collapse-box-button-color-fg-hover: var(--color-text);
 }
 
 
@@ -531,6 +535,12 @@
     --sd-colour-state--default: var(--color-text-lighter);
     --sd-colour-state--in-progress: var(--sd-colour-highlight);
     --sd-colour-state--done: var(--sd-colour-success);
+
+    // New Collapsible Box
+    --collapse-box-button-color-bg-default: hsla(var(--sd-colour-cool-grey-l--25), 1);
+    --collapse-box-button-color-bg-hover: hsla(var(--sd-colour-cool-grey-l--30), 1);
+    --collapse-box-button-color-fg-default: var(--color-text-light);
+    --collapse-box-button-color-fg-hover: var(--color-text);
 }
 
 

package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import {IPropsCustomHeader} from "../ToggleBox/index";
+
+interface IState {
+    isOpen: boolean;
+}
+
+export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
+    constructor(props: IPropsCustomHeader) {
+        super(props);
+        this.state = {
+            isOpen: this.props.initiallyOpen ?? false,
+        };
+    }
+
+    toggle = (): void => {
+        this.setState({isOpen: !this.state.isOpen}, () => {
+            this.props.onToggle?.(this.state.isOpen);
+        });
+    }
+
+    render() {
+        let classes = classNames('sd-shadow--z1 new-collapse-box', {
+            'new-collapse-box--open': this.state.isOpen,
+        });
+
+        return (
+            <div
+                className={classes}
+                data-test-id='toggle-box'
+            >
+                <div className='new-collapse-box__header'>
+                    <div className='new-collapse-box__header-inner'>
+                        {this.props.header}
+                    </div>
+
+                    <button
+                        className='new-collapse-box__divider'
+                        onClick={this.toggle}
+                    >
+                        <span className='label label--translucent new-collapse-box__divider-label'>
+                            {this.props.toggleButtonLabel}
+                        </span>
+                    </button>
+                </div>
+
+                <div className='new-collapse-box__content'>
+                    <div className='new-collapse-box__content-inner p-2 pt-0-5'>
+                        {this.props.children}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

package/app-typescript/components/{Togglebox.tsx → ToggleBox/SimpleToggleBox.tsx}

@@ -1,18 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import nextId from "react-id-generator";
-
-interface IProps {
-    title: string;
-    badge?: JSX.Element;
-    children: any;
-    hideUsingCSS?: boolean;
-    initiallyOpen?: boolean; // defaults to false
-    className?: string;
-    margin?: 'none' | 'small' | 'normal' | 'large';
-    onOpen?(): void;
-    onClose?(): void;
-}
+import {IPropsSimple} from "../ToggleBox/index";
 
 interface IState {
     isOpen: boolean;
@@ -24,9 +13,9 @@ interface IState {
  * @description ToggleBox used to open/close a set of details
  */
 
-export class ToggleBox extends React.PureComponent<IProps, IState> {
+export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
     htmlId = nextId();
-    constructor(props: IProps) {
+    constructor(props: IPropsSimple) {
         super(props);
         this.state = {
             isOpen: this.props.initiallyOpen ?? false,

package/app-typescript/components/ToggleBox/index.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {SimpleToggleBox} from './SimpleToggleBox';
+import {CustomHeaderToggleBox} from './CustomHeaderToggleBox';
+
+export interface IPropsSimple {
+    variant: 'simple';
+    title: string;
+    badge?: JSX.Element;
+    children: React.ReactNode;
+    hideUsingCSS?: boolean;
+    initiallyOpen?: boolean; // defaults to false
+    className?: string;
+    margin?: 'none' | 'small' | 'normal' | 'large';
+    onOpen?(): void;
+    onClose?(): void;
+}
+
+export interface IPropsCustomHeader {
+    variant: 'custom-header'; // always visible
+    header: React.ReactNode;
+    children: React.ReactNode;
+    toggleButtonLabel: string;
+    initiallyOpen?: boolean;
+    onToggle?(isOpen: boolean): void;
+}
+
+type IProps = IPropsSimple | IPropsCustomHeader;
+
+export class ToggleBox extends React.PureComponent<IProps> {
+    render() {
+        if (this.props.variant === "simple") {
+            return (
+                <SimpleToggleBox {...this.props} />
+            );
+        } else {
+            return (
+                <CustomHeaderToggleBox {...this.props} />
+            );
+        }
+    }
+}

package/app-typescript/components/TreeMenu.tsx

@@ -57,7 +57,7 @@ function nodeCanBeSelected<T>(item: IParent<T> | IChildren<T>): item is IChildre
 
 function onSelect<T>(item: ITreeMenuNode<T>) {
     if (nodeCanBeSelected(item)) {
-        return item.onSelect;
+        return item.onSelect();
     }
 
     return undefined;
@@ -420,7 +420,9 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
                                             key={i}
                                             option={option}
                                             handleTree={this.handleTree}
-                                            onClick={onSelect(option)}
+                                            onClick={() => {
+                                                onSelect(option);
+                                            }}
                                             disabledItem={disabledItem(option)}
                                             getBorderColor={this.props.getBorderColor}
                                             getBackgroundColor={this.props.getBackgroundColor}

package/app-typescript/index.ts

@@ -69,7 +69,7 @@ export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemConte
 } from './components/GridItem';
 export { toasted } from './components/Toast';
 export { Menu } from './components/Menu';
-export { ToggleBox } from './components/Togglebox';
+export { ToggleBox } from './components/ToggleBox/index';
 export { SelectGrid } from './components/SelectGrid';
 export { IconPicker } from './components/IconPicker';
 export { ThemeSelector } from './components/ThemeSelector';

package/dist/components/Alerts.tsx

@@ -142,7 +142,7 @@ export default class AlertDoc extends React.Component {
                 This will strip all margins and the border-radius from the component. Hollow style is not recommended in this case, and small size is advised.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='sd-display--flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '360px'}}>
+                        <div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '360px'}}>
                             <PanelElements.Panel open={true} side='left' size='small'>
                                 <PanelElements.PanelHeader title='Panel example' onClose={()=> false}>
                                     <Alert type='warning' icon='exclamation-sign' banner={true} size='small'>

package/dist/components/ContentDivider.tsx

@@ -125,7 +125,7 @@ export default class ContentDividerDoc extends React.Component {
                         </div>
                         <p className="docs-page__paragraph ">// With text</p>
                         <p className="docs-page__paragraph--small sd-margin-b--3">Inside a flex container (flex-direction: column;).</p>
-                        <div className='docs-page__content-row sd-display--flex'>
+                        <div className='docs-page__content-row d-flex'>
                             <div style={{width:'100%'}}>
                                 Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et
                                 magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit

package/dist/components/DragHandleDocs.tsx

@@ -23,7 +23,7 @@ export default class DragHandleDocs extends React.Component {
                             offering a wide range of size options.
                         </p>
                         <div className="docs-page__content-row">
-                            <div className='sd-display--flex sd-flex--items-start sd-gap--medium'>
+                            <div className='d-flex items-start sd-gap--medium'>
                                 <DragHandle dotsInRow='2' dotRows='5' />
                                 <DragHandle dotsInRow='2' dotRows='8' />
                                 <DragHandle dotsInRow='3' dotRows='6' />
@@ -39,7 +39,7 @@ export default class DragHandleDocs extends React.Component {
                             To be used within list items, draggable labels, and similar contexts.
                         </p>
                         <div className="docs-page__content-row">
-                            <div className='sd-display--flex sd-flex--items-start sd-gap--medium'>
+                            <div className='d-flex items-start sd-gap--medium'>
                                 <DragHandle blank={true} />
                                 <DragHandle dotsInRow='2' dotRows='10' blank={true} />
                                 <DragHandle dotsInRow='4' dotRows='10' blank={true} />

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 };