superdesk-ui-framework 3.1.5 → 3.1.6

package/examples/pages/design-patterns/Index.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+import { ReactNav, PatternsDefault } from '../../js/react';
+import { Dropdown } from '../../../app-typescript/index';
+
+import {
+    Switch,
+    Route,
+} from "react-router-dom";
+
+import { ThreePaneLayoutPattern } from './ThreePaneLayoutPattern';
+
+const pages = {
+    basicComponents: {
+        name: 'Layout',
+        items: {
+            'three-pane-layout': {
+                name: 'Three Pane Layout',
+            },
+            // 'icon-buttons': {
+            //     name: 'Icon Buttons'
+            // },
+            // 'button-groups': {
+            //     name: 'Button Group & Divider'
+            // },
+        }
+    },
+}
+interface IProps {
+    theme?: string;
+}
+interface IState {
+    theme: 'dark-ui' | 'light-ui' | string;
+}
+class DesignPatternsDoc 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 (
+            <React.Fragment>
+                <ReactNav pages={pages} base="design-patterns" />
+                <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="/design-patterns/three-pane-layout" component={ThreePaneLayoutPattern} />
+                        <Route path="/" component={PatternsDefault} />
+                    </Switch>
+                </main>
+            </React.Fragment>
+        )
+    }
+}
+
+export { DesignPatternsDoc };

package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx

@@ -0,0 +1,362 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { Prop, PropsList } from '../../../app-typescript';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Icon, IconButton, Checkbox, GridList, Badge, Divider, BoxedList, BoxedListItem, EmptyState, Tooltip, Heading, Container, Label } from '../../../app-typescript/index';
+import * as Layout from '../../../app-typescript/components/Layouts';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+interface IState {
+    theme: 'dark' | 'light' | string;
+    itemType: string;
+    dropDownState: string;
+    itemSelected1: boolean;
+    itemSelected2: boolean;
+    itemSelected3: boolean;
+    value1: boolean;
+    leftPanelOpen: boolean;
+    rightPanelOpen: boolean;
+}
+
+
+class ThreePaneLayoutPattern extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            theme: 'light',
+            itemType: 'itemtype01',
+            dropDownState: '',
+            itemSelected1: false,
+            itemSelected2: false,
+            itemSelected3: false,
+            value1: false,
+            leftPanelOpen: false,
+            rightPanelOpen: false,
+        }
+    }
+
+    changeStatus(item: any, status: string) {
+        if (item.status.includes(status)) {
+            item.status.splice(item.status.indexOf(status), 1);
+        } else {
+            item.status.push(status);
+        }
+    }
+
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Three Pane Layout</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <PageLayout
+                        header={(
+                            ...
+                        )}
+                        leftPanelOpen={true}
+                        leftPanel={(
+                            ...
+                        )}
+                        rightPanelOpen={false}
+                        rightPanel={(
+                            ...
+                        )}
+                        main={(
+                            ...
+                        )}
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph"></p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div style={{height: 600,}} className='sd-border--light'>
+                            <Layout.PageLayout
+                                header={(
+                                    <SubNav zIndex={2}>
+                                        <ButtonGroup align="inline">
+                                            <Tooltip text='Click to toggle left panel' flow='right'>
+                                                <NavButton 
+                                                    type='darker'
+                                                    icon='filter-large'
+                                                    onClick={() => this.setState({'leftPanelOpen': !this.state.leftPanelOpen})}
+                                                />
+                                            </Tooltip>
+                                        </ButtonGroup>
+                                        <Heading type='h3' className='ms-2'>Layout example</Heading>
+                                        <ButtonGroup align='end'>
+                                            <NavButton 
+                                                icon='dots-vertical'
+                                                onClick={()=> false}
+                                            />
+                                        </ButtonGroup>
+                                    </SubNav>
+                                )}
+                                leftPanelOpen={this.state.leftPanelOpen}
+                                leftPanel={(
+                                    <Layout.Panel
+                                        side='left'
+                                        background='grey'
+                                        open={this.state.leftPanelOpen}
+                                        size='x-small'
+                                    >
+                                        <Layout.PanelHeader
+                                            title='Left Panel title'
+                                            onClose={() => this.setState({'leftPanelOpen': false})}
+                                        />
+                                        <Layout.PanelContent>
+                                            <EmptyState
+                                                title={'No content yet'} 
+                                                description={'Please come later.'} 
+                                                size='small' 
+                                                illustration="1"
+                                            />
+                                        </Layout.PanelContent>
+                                    </Layout.Panel>
+                                )}
+                                rightPanelOpen={this.state.rightPanelOpen}
+                                rightPanel={(
+                                    <Layout.Panel
+                                        side='right'
+                                        open={this.state.rightPanelOpen}
+                                        size='x-small'
+                                    >
+                                        <Layout.PanelHeader
+                                            title='Right Panel title'
+                                            onClose={() => this.setState({'rightPanelOpen': false})}
+                                        />
+                                        <Layout.PanelContent>
+                                            <Layout.PanelContentBlock>
+                                                <p className='mb-2'>
+                                                    Preview of the items in the main panel would go here.
+                                                </p>
+                                                <p>
+                                                    Maecenas sed diam eget risus varius blandit sit amet non magna.
+                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                                                </p>
+                                            </Layout.PanelContentBlock>
+                                        </Layout.PanelContent>
+                                    </Layout.Panel>
+                                )}
+                                main={(
+                                    <BoxedList>
+                                        <BoxedListItem
+                                            alignVertical='center'
+                                            clickable={true}
+                                            density='compact'
+                                            selected={this.state.rightPanelOpen}
+                                            onClick={() => this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
+                                            actions={(
+                                                <IconButton
+                                                    icon="dots-vertical"
+                                                    size='small'
+                                                    ariaValue="More actions"
+                                                    onClick={()=> false}
+                                                />
+                                            )}
+                                        >
+                                            <Container gap='small' >
+                                                <Label style='translucent' text='Published' type='success' />
+                                                <span>Click to open the right panel</span>
+                                            </Container>
+                                        </BoxedListItem>
+                                        <BoxedListItem
+                                            alignVertical='center'
+                                            clickable={true}
+                                            density='compact'
+                                            selected={false}
+                                            onClick={()=> false}
+                                            actions={(
+                                                <IconButton
+                                                    icon="dots-vertical"
+                                                    size='small'
+                                                    ariaValue="More actions"
+                                                    onClick={()=> false}
+                                                />
+                                            )}
+                                        >
+                                            <Container gap='small' >
+                                                <Label style='translucent' text='In progress' type='warning' />
+                                                <span>Parturient pellentesque aenean commodo</span>
+                                            </Container>
+                                        </BoxedListItem>
+                                        <BoxedListItem
+                                            alignVertical='center'
+                                            clickable={true}
+                                            density='compact'
+                                            selected={false}
+                                            onClick={()=> false}
+                                            actions={(
+                                                <IconButton
+                                                    icon="dots-vertical"
+                                                    size='small'
+                                                    ariaValue="More actions"
+                                                    onClick={()=> false}
+                                                />
+                                            )}
+                                        >
+                                            <Container gap='small' >
+                                                <Label style='translucent' text='Canceled' type='alert' />
+                                                <span>Lorem fringilla malesuada cursus</span>
+                                            </Container>
+                                        </BoxedListItem>
+                                    </BoxedList>
+                                )}
+                            />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <Layout.PageLayout
+                            header={(
+                                <SubNav zIndex={2}>
+                                    <ButtonGroup align="inline">
+                                        <Tooltip text='Click to toggle left panel' flow='right'>
+                                            <NavButton 
+                                                type='darker'
+                                                icon='filter-large'
+                                                onClick={() => this.setState({'leftPanelOpen': !this.state.leftPanelOpen})}
+                                            />
+                                        </Tooltip>
+                                    </ButtonGroup>
+                                    <Heading type='h3' className='ms-2'>Layout example</Heading>
+                                    <ButtonGroup align='end'>
+                                        <NavButton 
+                                            icon='dots-vertical'
+                                            onClick={()=> false}
+                                        />
+                                    </ButtonGroup>
+                                </SubNav>
+                            )}
+                            leftPanelOpen={this.state.leftPanelOpen}
+                            leftPanel={(
+                                <Layout.Panel
+                                    side='left'
+                                    background='grey'
+                                    open={this.state.leftPanelOpen}
+                                    size='x-small'
+                                >
+                                    <Layout.PanelHeader
+                                        title='Left Panel title'
+                                        onClose={() => this.setState({'leftPanelOpen': false})}
+                                    />
+                                    <Layout.PanelContent>
+                                        <EmptyState
+                                            title={'No content yet'} 
+                                            description={'Please come later.'} 
+                                            size='small' 
+                                            illustration="1"
+                                        />
+                                    </Layout.PanelContent>
+                                </Layout.Panel>
+                            )}
+                            rightPanelOpen={this.state.rightPanelOpen}
+                            rightPanel={(
+                                <Layout.Panel
+                                    side='right'
+                                    open={this.state.rightPanelOpen}
+                                    size='x-small'
+                                >
+                                    <Layout.PanelHeader
+                                        title='Right Panel title'
+                                        onClose={() => this.setState({'rightPanelOpen': false})}
+                                    />
+                                    <Layout.PanelContent>
+                                        <Layout.PanelContentBlock>
+                                            <p className='mb-2'>
+                                                Preview of the items in the main panel would go here.
+                                            </p>
+                                            <p>
+                                                Maecenas sed diam eget risus varius blandit sit amet non magna.
+                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                                            </p>
+                                        </Layout.PanelContentBlock>
+                                    </Layout.PanelContent>
+                                </Layout.Panel>
+                            )}
+                            main={(
+                                <BoxedList>
+                                    <BoxedListItem
+                                        alignVertical='center'
+                                        clickable={true}
+                                        density='compact'
+                                        selected={this.state.rightPanelOpen}
+                                        onClick={() => this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
+                                        actions={(
+                                            <IconButton
+                                                icon="dots-vertical"
+                                                size='small'
+                                                ariaValue="More actions"
+                                                onClick={()=> false}
+                                            />
+                                        )}
+                                    >
+                                        <Container gap='small' >
+                                            <Label style='translucent' text='Published' type='success' />
+                                            <span>Click to open the right panel</span>
+                                        </Container>
+                                    </BoxedListItem>
+                                    <BoxedListItem
+                                        alignVertical='center'
+                                        clickable={true}
+                                        density='compact'
+                                        selected={false}
+                                        onClick={()=> false}
+                                        actions={(
+                                            <IconButton
+                                                icon="dots-vertical"
+                                                size='small'
+                                                ariaValue="More actions"
+                                                onClick={()=> false}
+                                            />
+                                        )}
+                                    >
+                                        <Container gap='small' >
+                                            <Label style='translucent' text='In progress' type='warning' />
+                                            <span>Parturient pellentesque aenean commodo</span>
+                                        </Container>
+                                    </BoxedListItem>
+                                    <BoxedListItem
+                                        alignVertical='center'
+                                        clickable={true}
+                                        density='compact'
+                                        selected={false}
+                                        onClick={()=> false}
+                                        actions={(
+                                            <IconButton
+                                                icon="dots-vertical"
+                                                size='small'
+                                                ariaValue="More actions"
+                                                onClick={()=> false}
+                                            />
+                                        )}
+                                    >
+                                        <Container gap='small' >
+                                            <Label style='translucent' text='Canceled' type='alert' />
+                                            <span>Lorem fringilla malesuada cursus</span>
+                                        </Container>
+                                    </BoxedListItem>
+                                </BoxedList>
+                            )}
+                        />   
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+
+                {/* <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='size' isRequired={false} type='x-small | small | medium | large' default='small' description='Specifies the size of the items in the grid. '/>
+                    <Prop name='gap' isRequired={false} type='small | medium | large | x-large' default='small' description='Defines the gap between the items inside the Grid list. '/>
+                    <Prop name='margin' isRequired={false} type='0 | 1 | 2 | 3' default='3' description='Defines the margin around the Grid list. The values are based on multipliers of the the $sd-base-increment (equal to 8px). Setting the value to 3 results in a margin of 24px.'/>
+                </PropsList> */}
+
+            </section>
+        )
+    }
+}
+
+export { ThreePaneLayoutPattern };

package/{dist/react.html → examples/pages/design-patterns.html}

@@ -3,9 +3,9 @@
     <h1 class="docs-page__h1">Superdesk UI</h1>
     <ul class="docs-page__header-nav">
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
-        <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
+        <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
     <button class="docs-page__header-button" aria-label="Change theme" aria-haspopup="menu" aria-expanded="false">
@@ -13,5 +13,4 @@
     </button>
 </header>
 
-
-<doc-react class="sd-wrap-helper"></doc-react>
+<doc-design-patterns class="sd-wrap-helper"></doc-react>

package/examples/pages/design.html

@@ -3,9 +3,9 @@
     <h1 class="docs-page__h1">Superdesk UI</h1>
     <ul class="docs-page__header-nav">
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
-        <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
+        <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
 </header>
@@ -15,8 +15,8 @@
         <li ng-repeat="group in design">
             <span class="docs-page__nav-title">{{group.name}}</span>
             <ul class="docs-page__nav--sub-level">
-                <li class="docs-page__nav-item" ng-repeat="(name, item) in group.items"
-                    ng-class="{'docs-page__nav-item--active': isActive(name)}"><a href="#/design/{{name}}">{{item.name}}</a>
+                <li class="docs-page__nav-item" ng-repeat="(name, item) in group.items">
+                    <a ng-class="{'docs-page__nav-item--active': isActive(name)}" href="#/design/{{name}}">{{item.name}}</a>
                 </li>
             </ul>
         </li>

package/examples/pages/main.html

@@ -3,9 +3,9 @@
     <h1 class="docs-page__h1">Superdesk UI</h1>
     <ul class="docs-page__header-nav">
         <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
-        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
+        <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
         <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
     </ul>
 </header>
@@ -20,42 +20,44 @@
     <div class="docs-page__container docs-page__container--medium">
         <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-4">
 
-            <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/design">
+            <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/components">
                 <div class="sd-card__header sd-card__header--with-thumb sd-card__header--blank">
                     <div class="sd-card__thumbnail sd-padding-x--1">
-                        <img src="/illustration--design.svg" alt="Design guidelines">
+                        <img src="/illustration--react.svg" alt="React">
                     </div>
                 </div>
                 <div class="sd-card__content">
-                    <h4 class="sd-card__content-heading sd-text__serif sd-text__center docs-page__color--primary">Design guidelines</h4>
-                    <p class="docs-page__paragraph--light sd-text__center">What to do and what not while creating user interfaces in Superdesk.</p>
+                    <h4 class="sd-card__content-heading sd-text__serif sd-text-align--center docs-page__color--primary">Components</h4>
+                    <p class="docs-page__paragraph--light sd-text-align--center">Superdesk UI components in React.</p> 
                 </div>
             </a>
 
-            <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/components">
+            <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/design-patterns">
                 <div class="sd-card__header sd-card__header--with-thumb sd-card__header--blank">
                     <div class="sd-card__thumbnail sd-padding-x--1">
                         <img src="/illustration--components.svg" alt="Superdesk UI Components">
                     </div>
                 </div>
                 <div class="sd-card__content sd-padding-x--1">
-                    <h4 class="sd-card__content-heading sd-text__serif sd-text__center docs-page__color--primary">Components</h4>
-                    <p class="docs-page__paragraph--light sd-text__center">Superdesk HTML/CSS and Angular UI components.</p>
+                    <h4 class="sd-card__content-heading sd-text__serif sd-text-align--center docs-page__color--primary">Design Patterns</h4>
+                    <p class="docs-page__paragraph--light sd-text-align--center">Examples of reusable solutions for common UI patterns in Superdesk.</p>
                 </div>
             </a>
 
-            <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/react">
+            <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/design">
                 <div class="sd-card__header sd-card__header--with-thumb sd-card__header--blank">
                     <div class="sd-card__thumbnail sd-padding-x--1">
-                        <img src="/illustration--react.svg" alt="React">
+                        <img src="/illustration--design.svg" alt="Design guidelines">
                     </div>
                 </div>
                 <div class="sd-card__content">
-                    <h4 class="sd-card__content-heading sd-text__serif sd-text__center docs-page__color--primary">React</h4>
-                    <p class="docs-page__paragraph--light sd-text__center">React UI components. Still in early stages, but will hopefully grow quickly.</p> 
+                    <h4 class="sd-card__content-heading sd-text__serif sd-text-align--center docs-page__color--primary">Design guidelines</h4>
+                    <p class="docs-page__paragraph--light sd-text-align--center">What to do and what not while creating user interfaces in Superdesk.</p>
                 </div>
             </a>
 
+
+
             <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/playgrounds">
                 <div class="sd-card__header sd-card__header--with-thumb sd-card__header--blank">
                     <div class="sd-card__thumbnail sd-padding-x--1">
@@ -63,8 +65,8 @@
                     </div>
                 </div>
                 <div class="sd-card__content">
-                    <h4 class="sd-card__content-heading sd-text__serif sd-text__center docs-page__color--primary">Playground</h4>
-                    <p class="docs-page__paragraph--light sd-text__center">Examples and drafts for more complex modules and full-page layouts.</p>
+                    <h4 class="sd-card__content-heading sd-text__serif sd-text-align--center docs-page__color--primary">Playground</h4>
+                    <p class="docs-page__paragraph--light sd-text-align--center">Examples, full-page layouts and design drafts.</p>
                 </div>
             </a>
 

package/examples/pages/playgrounds/boxed-list.html

@@ -70,7 +70,7 @@
                         </div>
                         <div class="boxed-list__item-content">
                             <div class="boxed-list__item-content-row">
-                                <span class="sd-text__strong sd-overflow-ellipsis">Pellentesque ornare lacinia</span>
+                                <span class="sd-text--bold sd-overflow-ellipsis">Pellentesque ornare lacinia</span>
                                 <span class="label label--success ml-auto">success</span>
                             </div>
                             <div class="boxed-list__item-content-row">
@@ -85,7 +85,7 @@
                         </div>
                         <div class="boxed-list__item-content">
                             <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                                <span class="sd-text__strong sd-overflow-ellipsis">Max Mustermann</span>
+                                <span class="sd-text--bold sd-overflow-ellipsis">Max Mustermann</span>
                                 <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.04.2019</time>
                             </div>
                             <div class="boxed-list__item-content-row">
@@ -102,7 +102,7 @@
                         </div>
                         <div class="boxed-list__item-content">
                             <div class="boxed-list__item-content-row">
-                                <span class="sd-text__strong-s">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.</span>
+                                <span class="sd-text--bold-s">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.</span>
                             </div>
                         </div>
                         <div class="boxed-list__static-actions">
@@ -115,7 +115,7 @@
                         </div>
                         <div class="boxed-list__item-content">
                             <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                                <span class="sd-text__strong sd-overflow-ellipsis">Jane Doe</span>
+                                <span class="sd-text--bold sd-overflow-ellipsis">Jane Doe</span>
                                 <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.04.2019</time>
                             </div>
                             <div class="boxed-list__item-content-row">
@@ -133,14 +133,14 @@
                                 <span class="ml-auto">by Jane Doe</span>
                             </div>
                             <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                                <span class="sd-text__strong sd-overflow-ellipsis">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean eu leo quam.</span>
+                                <span class="sd-text--bold sd-overflow-ellipsis">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean eu leo quam.</span>
                             </div>
                             <div class="boxed-list__item-content-row">
-                                <span><span class="sd-text__italic">desk:</span> National</span> <span class="ml-auto"><span class="sd-text__italic">stage:</span> Working</span>
+                                <span><span class="sd-text--italic">desk:</span> National</span> <span class="ml-auto"><span class="sd-text--italic">stage:</span> Working</span>
                             </div>
                         </div>
                         <div class="boxed-list__item-footer">
-                            <span class="sd-text__italic sd-padding-r--1">version: 25</span> <span class="label label--yellow2 label--hollow">in progress</span> <button class="btn btn--small btn--hollow ml-auto">revert</button>
+                            <span class="sd-text--italic sd-padding-r--1">version: 25</span> <span class="label label--yellow2 label--hollow">in progress</span> <button class="btn btn--small btn--hollow ml-auto">revert</button>
                         </div>
 
                     </li>