New: Key Value card and UI tweaks

src/components/ContentPreview/DetailsSidebar.js

@@ -21,22 +21,23 @@ type Props = {
 /* eslint-disable jsx-a11y/label-has-for */
 const DetailsSidebar = ({ file, getPreviewer, getLocalizedMessage }: Props) =>
     <SidebarContent title={getLocalizedMessage('buik.preview.sidebar.details.title')}>
-        <div className='bcpr-sidebar-details-description'>
-            <label>
-                <span>
-                    {getLocalizedMessage('buik.preview.sidebar.details.description')}
-                </span>
-                <textarea
-                    readOnly
-                    placeholder={getLocalizedMessage('buik.preview.sidebar.details.description.placeholder')}
-                    defaultValue={file.description}
-                />
-            </label>
-        </div>
-        <SidebarSection title={getLocalizedMessage('buik.preview.sidebar.details.properties')}>
+        <SidebarSkills metadata={file.metadata} getPreviewer={getPreviewer} getLocalizedMessage={getLocalizedMessage} />
+        <SidebarSection isOpen={false} title={getLocalizedMessage('buik.preview.sidebar.details.properties')}>
             <FileProperties file={file} getLocalizedMessage={getLocalizedMessage} />
         </SidebarSection>
-        <SidebarSkills metadata={file.metadata} getPreviewer={getPreviewer} getLocalizedMessage={getLocalizedMessage} />
     </SidebarContent>;
 
 export default DetailsSidebar;
+
+// <div className='bcpr-sidebar-details-description'>
+// <label>
+//     <span>
+//         {getLocalizedMessage('buik.preview.sidebar.details.description')}
+//     </span>
+//     <textarea
+//         readOnly
+//         placeholder={getLocalizedMessage('buik.preview.sidebar.details.description.placeholder')}
+//         defaultValue={file.description}
+//     />
+// </label>
+// </div>

src/components/ContentPreview/SidebarContent.scss

@@ -5,7 +5,7 @@
     position: relative; // So that the scroll wrapper is absolute
 
     .bcpr-sidebar-title {
-        border-bottom: 1px solid $off-white;
+        // border-bottom: 1px solid $off-white;
         line-height: 30px;
         margin: 15px 20px;
     }

src/components/ContentPreview/SidebarSection.js

@@ -7,7 +7,8 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import { PlainButton } from '../Button';
-import IconCross from '../icons/IconCross';
+import IconAddCircle from '../icons/IconAddCircle';
+import IconSubtractCircle from '../icons/IconSubtractCircle';
 import './SidebarSection.scss';
 
 type Props = {
@@ -32,7 +33,7 @@ class SidebarSection extends PureComponent<DefaultProps, Props, State> {
 
     static defaultProps = {
         className: '',
-        isOpen: false
+        isOpen: true
     };
 
     /**
@@ -72,14 +73,6 @@ class SidebarSection extends PureComponent<DefaultProps, Props, State> {
         const { isOpen }: State = this.state;
         const { children, className, title }: Props = this.props;
 
-        const titleClassName = classNames(
-            'bcpr-sidebar-toggle',
-            {
-                'bcpr-sidebar-toggle-cross': isOpen
-            },
-            className
-        );
-
         const sectionClassName = classNames(
             'bcpr-sidebar-section',
             {
@@ -94,7 +87,7 @@ class SidebarSection extends PureComponent<DefaultProps, Props, State> {
                     <span className='bcpr-sidebar-section-title-text'>
                         {title}
                     </span>
-                    <IconCross color='#b5b5b5' width={11} height={11} className={titleClassName} />
+                    {isOpen ? <IconSubtractCircle width={14} height={14} /> : <IconAddCircle width={14} height={14} />}
                 </PlainButton>
                 {isOpen &&
                     <div className='bcpr-sidebar-section-content'>

src/components/ContentPreview/SidebarSection.scss

@@ -35,12 +35,3 @@
         }
     }
 }
-
-.bcpr-sidebar-toggle {
-    transform: rotateZ(-45deg);
-    transition: transform .3s;
-
-    .bcpr-sidebar-section-open & {
-        transform: rotateZ(0deg);
-    }
-}

src/components/ContentPreview/SidebarSkills.js

@@ -9,6 +9,7 @@ import SidebarSection from './SidebarSection';
 import Keywords from '../Keywords';
 import Transcript from '../Transcript';
 import Timelines from '../Timeline';
+import Keyvalues from '../Keyvalues';
 import type { SkillData, MetadataType } from '../../flowTypes';
 
 type Props = {
@@ -22,6 +23,8 @@ function getCard(skill: SkillData, getPreviewer: Function) {
     switch (skills_data_type) {
         case 'keyword':
             return <Keywords skill={skill} getPreviewer={getPreviewer} />;
+        case 'keyvalue':
+            return <Keyvalues skill={skill} />;
         case 'timeline':
             return <Timelines skill={skill} getPreviewer={getPreviewer} />;
         case 'transcript':
@@ -74,6 +77,8 @@ const SidebarSkills = ({ metadata, getPreviewer, getLocalizedMessage }: Props) =
             {skills.map(
                 (skill: SkillData, index) =>
                     /* eslint-disable react/no-array-index-key */
+                    Array.isArray(skill.entries) &&
+                    skill.entries.length > 0 &&
                     <SidebarSection
                         key={index}
                         title={

src/components/Keyvalues/Keyvalues.js

@@ -0,0 +1,35 @@
+/**
+ * @flow
+ * @file File Key Values Skill Data component
+ * @author Box
+ */
+
+import React from 'react';
+import type { SkillData, SkillDataEntry } from '../../flowTypes';
+import './Keyvalues.scss';
+
+type Props = {
+    skill: SkillData
+};
+
+const Keyvalues = ({ skill: { entries } }: Props) =>
+    <div className='buik-keyvalues'>
+        {Array.isArray(entries) &&
+            entries.map(
+                ({ label, text }: SkillDataEntry, index) =>
+                    !!label &&
+                    !!text &&
+                    /* eslint-disable react/no-array-index-key */
+                    <dl className='buik-keyvalue' key={index}>
+                        <dt>
+                            {label}
+                        </dt>
+                        <dd>
+                            {text}
+                        </dd>
+                    </dl>
+                /* eslint-enable react/no-array-index-key */
+            )}
+    </div>;
+
+export default Keyvalues;

src/components/Keyvalues/Keyvalues.scss

@@ -0,0 +1,5 @@
+@import '../variables';
+
+.buik .buik-keyvalue {
+    margin: 0 0 20px;
+}

src/components/Keyvalues/index.js

@@ -0,0 +1 @@
+export default from './Keyvalues';

src/components/Keywords/Keyword.js

@@ -12,12 +12,16 @@ import './Keyword.scss';
 
 type Props = {
     keyword: SkillDataEntry,
+    isSelected: boolean,
     onClick: Function
 };
 
-const Keyword = ({ keyword, onClick }: Props) =>
+const Keyword = ({ keyword, onClick, isSelected }: Props) =>
     <span className='buik-file-keyword'>
-        <PlainButton className='buik-file-keyword-word' onClick={() => onClick(keyword)}>
+        <PlainButton
+            className={`buik-file-keyword-word ${isSelected ? 'buik-file-keyword-selected' : ''}`}
+            onClick={() => onClick(keyword)}
+        >
             {keyword.text}
         </PlainButton>
     </span>;

src/components/Keywords/Keyword.scss

@@ -33,7 +33,8 @@
 
         &:focus,
         &:active,
-        &:hover {
+        &:hover,
+        &.buik-file-keyword-selected {
             background-color: $blue;
             border-color: $blue;
             color: $white;

src/components/Keywords/Keywords.js

@@ -35,7 +35,12 @@ class FileKeywords extends PureComponent<void, Props, State> {
                 {entries.map(
                     (entry: SkillDataEntry, index) =>
                         /* eslint-disable react/no-array-index-key */
-                        <FileKeyword key={index} keyword={entry} onClick={this.onClick} />
+                        <FileKeyword
+                            key={index}
+                            keyword={entry}
+                            isSelected={keyword === entry}
+                            onClick={this.onClick}
+                        />
                     /* eslint-enable react/no-array-index-key */
                 )}
                 {!!keyword &&

src/components/Timeline/Line.js

@@ -26,8 +26,8 @@ const Line = ({ type, start, end = 0, duration, color = '#777', getPreviewer }:
         return null;
     }
     const barLength = type === 'image' ? LENGTH_IMAGE_ITEMLINE : LENGTH_TEXT_ITEMLINE;
-    const startPercent = start * barLength / duration;
-    const endPercent = Math.max(startPercent + 5, end * barLength / duration);
+    const startPercent = Math.round(start * barLength / duration);
+    const endPercent = Math.round(Math.max(startPercent + 9, end * barLength / duration));
     const styles = {
         backgroundColor: color,
         left: `${startPercent}px`,
@@ -36,7 +36,7 @@ const Line = ({ type, start, end = 0, duration, color = '#777', getPreviewer }:
     const onClick = () => {
         const viewer = getPreviewer ? getPreviewer() : null;
         if (viewer && viewer.isLoaded() && !viewer.isDestroyed() && typeof viewer.play === 'function') {
-            viewer.play(start, end);
+            viewer.play(start);
         }
     };
     return <PlainButton className='buik-timeline-time' style={styles} onClick={onClick} />;

src/components/Timeline/Line.scss

@@ -1,8 +1,9 @@
 @import '../variables';
 
 .buik-btn.buik-btn-plain.buik-timeline-time {
+    border-radius: 9px;
     cursor: pointer;
-    height: 6px;
+    height: 9px;
     opacity: .5;
     position: absolute;
 

src/components/Timeline/Timeline.scss

@@ -7,13 +7,14 @@
 
 .buik-timeline-wrapper {
     flex: 1;
+    height: 9px;
     position: relative;
 }
 
 .buik-timeline-line {
     background-color: $off-white;
     border-radius: 2px;
-    height: 6px;
+    height: 9px;
     position: absolute;
 }
 

src/components/Transcript/Transcript.js

@@ -57,15 +57,14 @@ const Transcript = ({ skill: { entries }, getPreviewer }: Props) =>
             >
                 <Column
                     dataKey='appears'
-                    className='buik-transcript-time-column'
-                    width={45}
+                    width={50}
                     flexShrink={0}
                     cellRenderer={({ cellData }): string =>
                         isValidStartTime(cellData) ? formatTime(cellData[0].start) : '--'}
                 />
                 <Column
                     dataKey='text'
-                    width={245}
+                    width={240}
                     flexGrow={1}
                     cellRenderer={({ dataKey, parent, rowIndex, cellData }) =>
                         <CellMeasurer cache={cache} columnIndex={0} key={dataKey} parent={parent} rowIndex={rowIndex}>

src/components/Transcript/Transcript.scss

@@ -9,6 +9,14 @@
         cursor: pointer;
         outline: none;
 
+        .ReactVirtualized__Table__row {
+            align-items: flex-start;
+
+            .ReactVirtualized__Table__rowColumn:first-of-type {
+                margin: 0;
+            }
+        }
+
         .ReactVirtualized__Table__row:focus,
         .ReactVirtualized__Table__row:active {
             background-color: $lighter-light-blue;
@@ -18,11 +26,6 @@
 }
 
 .buik-transcript-column {
-    padding: 5px 15px 5px 0;
-    white-space: normal;
-    width: 210px;
-}
-
-.buik-transcript-time-column {
-    text-align: center;
+    padding: 0 0 20px;
+    width: 220px;
 }

src/components/icons/IconAddCircle.js

@@ -0,0 +1,19 @@
+/**
+ * @flow
+ * @file Icon
+ * @author Box
+ */
+
+import React from 'react';
+import type { IconType } from '../../flowTypes';
+
+const IconAddCircle = ({ color = '#777', className = '', width = 24, height = 24 }: IconType) =>
+    <svg width={width} height={height} role='img' viewBox='0 0 24 24' className={className}>
+        <path
+            fill={color}
+            fillRule='evenodd'
+            d='M12.5 23C18.85 23 24 17.85 24 11.5S18.85 0 12.5 0 1 5.15 1 11.5 6.15 23 12.5 23zm0-1C18.3 22 23 17.3 23 11.5S18.3 1 12.5 1 2 5.7 2 11.5 6.7 22 12.5 22zM6 12v-1h6V5h1v6h6v1h-6v6h-1v-6H6z'
+        />
+    </svg>;
+
+export default IconAddCircle;

src/components/icons/IconSubtractCircle.js

@@ -0,0 +1,19 @@
+/**
+ * @flow
+ * @file Icon
+ * @author Box
+ */
+
+import React from 'react';
+import type { IconType } from '../../flowTypes';
+
+const IconSubtractCircle = ({ color = '#777', className = '', width = 24, height = 24 }: IconType) =>
+    <svg width={width} height={height} role='img' viewBox='0 0 24 24' className={className}>
+        <path
+            fill={color}
+            fillRule='evenodd'
+            d='M5.5 12.5v-1h13v1h-13zM12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11zm0-1c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z'
+        />
+    </svg>;
+
+export default IconSubtractCircle;

src/flowTypes.js

@@ -267,6 +267,7 @@ export type TimeSlice = {
 export type SkillDataEntry = {
     type?: SkillDataEntryType,
     text?: string,
+    label?: string,
     url?: string,
     appears?: TimeSlice[]
 };

test/preview.html

@@ -22,7 +22,7 @@
             window.onload = function() {
                 const { ContentExplorer } = Box;
                 const explorer = new ContentExplorer();
-                explorer.show('0', 'u1gw30e5EbzjgiuuLGLJZwN7E4fBqt6e', {
+                explorer.show('0', '6meCdbq8wMEHEECDRBbqwWFQij2SSfyf', {
                     hasPreviewSidebar: true
                 });
             }