Label component

assets/agenda/components/AgendaItemTimeUpdater.tsx

@@ -6,6 +6,7 @@
 
 import {bem} from 'ui/utils';
 import {gettext} from 'utils';
+import {Label} from 'components/Label';
 
 class AgendaItemTimeUpdater extends React.Component<any, any> {
     static propTypes: any;
@@ -24,11 +25,11 @@
         this.updateState = this.updateState.bind(this);
     }
 
     componentWillMount() {
         this.activateTimer(this.props.item);
     }
 
     componentWillReceiveProps(nextProps: any) {
         if (get(this.props, 'item._created') !== get(nextProps, 'item._created') ||
             get(this.props, 'item._updated') !== get(nextProps, 'item._updated')) {
             this.activateTimer(nextProps.item);
@@ -108,7 +109,7 @@
 
         return(
             <div className={className}>
-                <div className="label label--blue">{this.state.timeText}</div>
+                <Label text={this.state.timeText} type='info' style='translucent' />
             </div>
         );
     }

assets/agenda/components/CoverageItemStatus.tsx

@@ -14,6 +14,7 @@
 import ActionButton from 'components/ActionButton';
 
 import {Tooltip} from 'bootstrap';
+import {Label} from 'components/Label';
 
 function getDeliveryHref(coverage: any) {
     return get(coverage, 'delivery_href');
@@ -54,7 +55,7 @@
         }
     }
 
     componentWillReceiveProps(nextProps: any) {
         this.setWireItem(nextProps);
     }
 
@@ -188,7 +189,7 @@
 
                 {isCoverageBeingUpdated(coverage) && (
                     <div className='coverage-item__row'>
-                        <span className='label label--blue'>{gettext('Update coming')}</span>
+                        <Label text={gettext('Update coming')} type='info' style='translucent' />
                     </div>
                 )}
 

assets/companies/components/EditCompany.tsx

@@ -24,6 +24,7 @@ import CompanyPermissions from './CompanyPermissions';
 import EditCompanyAPI from './EditCompanyAPI';
 import AuditInformation from 'components/AuditInformation';
 import {EditCompanyDetails} from './EditCompanyDetails';
+import {Label} from 'components/Label';
 
 interface IStateProps {
     company: ICompany;
@@ -182,9 +183,7 @@ class EditCompany extends React.Component<IProps, IState> {
                 {this.props.company.is_approved !== false ? null : (
                     <div className="list-item__preview-toolbar">
                         <div className="list-item__preview-toolbar-left">
-                            <label className="label label--orange2 label--big label--rounded">
-                                {gettext('Pending')}
-                            </label>
+                            <Label text={gettext('Pending')} type='warning' size='big' style='translucent' />
                         </div>
                         <div className="list-item__preview-toolbar-right">
                             <button

assets/company-admin/components/CompanyAdminApp.tsx

@@ -34,6 +34,7 @@ import {CompanyDetailsProductFilter} from './CompanyDetailsProductFilter';
 import {CompanyAdminProductSeatRequestModal} from './CompanyAdminProductSeatRequestModal';
 import {IUser} from 'interfaces/user';
 import {ICompanyAdminStore} from 'company-admin/reducers';
+import {Label} from 'components/Label';
 
 interface IStateProps {
     sectionId: string;
@@ -216,8 +217,9 @@ class CompanyAdminAppComponent extends React.Component<IProps, IState> {
                                 </button>
                             </div>
 
-                            {this.props.sectionId === 'users' ? <label className='label label--big label--rounded me-2'>{
-                                gettext('Users : {{total}}', {total : this.props.totalUsers})}</label> : ''}
+                            {this.props.sectionId === 'users'
+                                && <Label text={gettext('Users : {{total}}', {total : this.props.totalUsers})} size='big' style='translucent' className='me-2' />
+                            }
                             <div className="content-bar-divider" />
                             {this.props.sectionId !== 'users' ? null : (
                                 <React.Fragment>

assets/company-admin/components/CompanyUserListItem.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import {gettext, fullDate} from 'utils';
+import {Label} from 'components/Label';
 
 export function getUserStateLabelDetails(user: any) {
     if (user.is_approved && user.is_enabled && user.is_validated) {
@@ -43,14 +44,12 @@ export function CompanyUserListItem({user, onClick, selected, sections}: any) {
             <td>
                 <div className="name">
                     {user.first_name} {user.last_name}
-                    {user.user_type === 'company_admin' ?
-                        <label className="label label--restricted label--rounded label--fill">
-                            {gettext('Company Admin')}
-                        </label>
-                        : user.user_type === 'administrator' ?
-                            <label className="label label--restricted label--rounded label--fill">
-                                {gettext('Admin')}
-                            </label> : null}
+                    {user.user_type === 'company_admin'
+                        ? <Label text={gettext('Company Admin')} style='fill' />
+                        : user.user_type === 'administrator'
+                            ? <Label text={gettext('Admin')} style='fill' />
+                            : null
+                    }
                 </div>
                 <div className="email">
                     {user.email}

assets/components/Label.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    text: string;
+    type?: 'default' | 'success' | 'warning' | 'alert' | 'info' | 'highlight';
+    size?: 'small' | 'medium' | 'big';
+    style?: 'fill' | 'hollow' | 'translucent'; // defaults to 'fill'
+    className?: string;
+}
+
+export class Label extends React.PureComponent<IProps> {
+    render() {
+        const classes = classNames('label label--rounded', {
+            'label--default': !this.props.type,
+            [`label--${this.props.type}`]: this.props.type !== undefined,
+            [`label--${this.props.style}`]: this.props.style,
+            [`label--${this.props.size}`]: this.props.size,
+        }, this.props.className);
+
+        return (
+            <span className={classes}>
+                {this.props.text}
+            </span>
+        );
+    }
+}

assets/index.ts

@@ -1,6 +1,35 @@
-import {isTouchDevice} from 'utils';
+import {isTouchDevice, gettext} from 'utils';
 import 'primereact/resources/primereact.min.css';
 
 if (isTouchDevice()) {
     document.documentElement.classList.add('no-touch');
 }
+
+const element = document.getElementById('nav');
+const pinButton = document.getElementById('pin-btn');
+
+if (pinButton != null) {
+    pinButton.addEventListener('click', () => {
+        handleNavToggle();
+    });
+}
+
+if (sessionStorage.getItem('navigation-pinned')) {
+    handleNavToggle();
+}
+
+function handleNavToggle() {
+    if (element == null || pinButton == null) {
+        return null;
+    }
+
+    if (element.classList.contains('nav-block--pinned')) {
+        sessionStorage.removeItem('navigation-pinned');
+        element.classList.remove('nav-block--pinned');
+        pinButton.setAttribute('title', gettext('Expand'));
+    } else {
+        sessionStorage.setItem('navigation-pinned', 'true');
+        element.classList.add('nav-block--pinned');
+        pinButton.setAttribute('title', gettext('Collapse'));
+    }
+}

assets/search/components/Topic.tsx

@@ -6,6 +6,7 @@ import {gettext, formatDate, formatTime} from 'utils';
 import ActionButton from 'components/ActionButton';
 import {ToolTip} from 'ui/components/ToolTip';
 import {ITopic, ITopicNotificationScheduleType, IUser} from 'interfaces';
+import {Label} from 'components/Label';
 
 export interface ITopicAction {
     id: string;
@@ -92,9 +93,7 @@ export function Topic({topic, actions, users, selected, subscriptionType}: IProp
                     <div className="simple-card__column simple-card__column--align-end">
                         <span className="simple-card__notification-info">
                             <i className="icon--alert"></i>
-                            <span className="label--rounded label--alert">
-                                {subscriptionType === 'real-time' ? gettext('Real-Time') : gettext('Scheduled')}
-                            </span>
+                            <Label text={subscriptionType === 'real-time' ? gettext('Real-Time') : gettext('Scheduled')} type='alert' style='translucent' />
                         </span>
                     </div>
                 )}

assets/styles/app.scss

@@ -2,6 +2,7 @@
 @import './color-functions.scss';
 @import './custom.scss'; // Bootstrap customized
 @import './index.scss';
+@import './sidenav.scss';
 @import './article-list.scss';
 @import './icon-font.scss';
 @import './icon-font-small.scss';

assets/styles/breakpoints.scss

@@ -61,6 +61,12 @@
     }
 }
 
+@mixin large_phone {
+    @media only screen and (max-width: 768px) {
+        @content;
+    }
+}
+
 @mixin tablet {
     @media only screen and (orientation: portrait) and (min-width: 576px) and (max-width: 1439px), (orientation: landscape) and (min-width: 992px) and (max-width: 1439px) {
         @content;

assets/styles/custom-display.scss

@@ -29,6 +29,10 @@
     .d-phone-none {display: none;}
     .d-phone-block {display: block;}
 }
+@include large_phone {
+    .d-phone-none {display: none;}
+    .d-phone-block {display: block;}
+}
 
 @include tablet {
     .d-tablet-none {display: none;}

assets/styles/custom-variables.scss

@@ -126,7 +126,7 @@ $container-max-widths: (
     // Medium
     --color-neutral-300: hsl(0, 2%, 74%);
     --color-neutral-400: hsl(0, 2%, 54%);
-    --color-neutral-500: hsl(0, 2%, 40%);
+    // --color-neutral-500: hsl(0, 2%, 40%);
 
     --color-neutral-600: hsl(0, 2%, 34%);
     // Dark
@@ -142,6 +142,7 @@ $container-max-widths: (
     @include defineColorHSL(--color-highlight, 356, 72%, 46%);
     @include defineColorHSL(--color-highlight1, 268, 68%, 45%);
     @include defineColorHSL(--color-highlight2, 310, 89%, 36%);
+    @include defineColorHSL(--color-neutral-500, 0, 2%, 40%);
 
     // THEME COLORS
     @include defineColorHSL(--color-primary, 196, 100%, 34%);
@@ -403,25 +404,37 @@ $container-max-widths: (
     --sidenav-color-bg:                     var(--color-primary);
     --sidenav-color-item-bg:                transparent;
     --sidenav-color-item-fg:                hsla(0, 0%, 100%, 1);
+    --sidenav-color-item-bg--hover:         hsla(0, 0%, 0%, 0.16);
     --sidenav-color-item-bg--active:        hsla(0, 0%, 100%, 1);
     --sidenav-color-item-fg--active:        var(--color-primary);
     --sidenav-color-badge-bg:               hsla(0, 0%, 16%, 1);
     --sidenav-color-badge-bg--active:       hsla(0, 0%, 16%, 1);
     --sidenav-color-badge-fg:               hsla(0, 0%, 98%, 1);
     --sidenav-color-badge-fg--active:       hsla(0, 0%, 98%, 1);
     --sidenav-color-badge-outline--active:  var(--sidenav-color-item-bg--active);
+    --sidenav-item-size:                    var(--space--5);
+    --sidenav-item-font-size:               0.875rem;
     --sidenav-item-badge-size:              1.25rem;
     --sidenav-item-badge-font-size:         0.6875rem;
-    --sidenav-item-helper-icon-size:        1.25rem;
+    --sidenav-item-helper-icon-size:        1.125rem;
     --sidenav-item-helper-icon-fg:          var(--sidenav-color-bg);
     --sidenav-item-border-radius:           var(--border-radius--s);
     --separator-dot-size:                   3px;
     --separator-dot-color-bg:               var(--sidenav-color-item-fg);
     // Title and size options
-    --sidenav-item-title-display:           block; // set to none to hide the title
-    --sidenav-size-width:                   80px; // width of the sidenav on desktop
-    --sidenav-item-gap:                     8px; // left and right spacing between item and the bar on desktop
-    --sidenav-item-width:                   calc(var(--sidenav-size-width) - var(--sidenav-item-gap)); // width of the sidenav item on desktop
+    //--sidenav-item-title-display:           block; // set to none to hide the title
+    // --sidenav-size-width:                   56px; // width of the sidenav on desktop
+    // --sidenav-item-gap:                     8px; // left and right spacing between item and the bar on desktop
+    // --sidenav-item-width:                   calc(var(--sidenav-size-width) - var(--sidenav-item-gap)); // width of the sidenav item on desktop
+    --sidenav-item-radius:                  var(--border-radius--s);
+    --sidenav-size:                         3.5rem;
+    --sidenav-size-overlay:                 14rem;
+    --sidenav-size-pinned:                  14rem;
+    --sidenav-shadow-overlay:               4px 0 8px hsla(0, 0%, 0%, 0.24);
+    --sidenav-pin-button-color-bg-default:  hsla(0, 0%, 16%, 0.2);
+    --sidenav-pin-button-color-bg-hover:    hsla(0, 0%, 100%, 0.8);
+    --sidenav-pin-button-color-fg-default:  hsla(0, 0%, 100%, 1);
+    --sidenav-pin-button-color-fg-hover:    var(--color-primary);
 
     // COMPONENT: PROFILE MODAL
     --profile-header-height: 56px;