box-ui-elements 16.1.0-beta.9 → 17.0.0

package/src/styles/typography.stories.scss

@@ -0,0 +1,60 @@
+@import './base';
+
+.typography {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    margin-top: 25px;
+
+    .weights {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 20px;
+        color: $black;
+    }
+
+    .weights .preview {
+        font-size: 72px;
+        line-height: 72px;
+    }
+
+    .weights .regular {
+        margin-right: 15px;
+    }
+
+    .weights .bold .preview {
+        font-weight: bold;
+        font-family: 'Lato', sans-serif;
+    }
+
+    .font-container,
+    .headings-container {
+        width: 33%;
+    }
+
+    .heading {
+        display: flex;
+        align-items: center;
+        line-height: 32px;
+    }
+
+    label {
+        margin-right: 10px;
+        color: $bdl-watermelon-red;
+    }
+
+    .form-font-container label {
+        display: inline-block;
+        width: 80px;
+        line-height: 30px;
+    }
+
+    .form-font-container .body,
+    .form-font-container .input-text {
+        font-size: 14px;
+    }
+
+    .form-font-container .input-label {
+        font-size: 13px;
+    }
+}

package/src/styles/typography.stories.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import './typography.stories.scss';
+
+export const lato = () => (
+    <div className="typography">
+        <div className="heading">
+            <h1>Lato 2.0</h1>
+        </div>
+        <div className="weights">
+            <div className="regular">
+                <div className="preview">Aa</div>
+                <div className="weight">Regular</div>
+            </div>
+            <div className="bold">
+                <div className="preview">Aa</div>
+                <div className="weight">Bold</div>
+            </div>
+        </div>
+    </div>
+);
+
+export const heading = () => (
+    <div className="typography">
+        <div className="heading">
+            <label>H1</label>
+            <h1>Project Symphony</h1>
+        </div>
+        <div className="heading">
+            <label>H2</label>
+            <h2>Project Symphony</h2>
+        </div>
+        <div className="heading">
+            <label>H3</label>
+            <h3>Project Symphony</h3>
+        </div>
+        <div className="heading">
+            <label>H4</label>
+            <h4>Project Symphony</h4>
+        </div>
+        <div className="heading">
+            <label>H5</label>
+            <h5>Project Symphony</h5>
+        </div>
+        <div className="heading">
+            <label>H6</label>
+            <h6>Project Symphony</h6>
+        </div>
+    </div>
+);
+
+export const text = () => (
+    <div className="typography">
+        <div>
+            <label>BODY</label>
+            <span className="body">Project Symphony</span>
+        </div>
+        <div>
+            <label>INPUT LABEL</label>
+            <span className="input-label">Project Symphony</span>
+        </div>
+        <div>
+            <label>INPUT TEXT</label>
+            <span className="input-text">Project Symphony</span>
+        </div>
+    </div>
+);
+
+export default {
+    title: 'Theming|Typography',
+};

package/src/styles/variables.js

@@ -16,7 +16,7 @@ export const bdlBoxBlue05 = "#f2f7fd"; // bdl-box-blue-05
 export const bdlBoxBlue02 = "#fafcfe"; // bdl-box-blue-02
 export const bdlGray = "#222"; // bdl-gray
 export const bdlGray80 = "#4e4e4e"; // bdl-gray-80
-export const bdlGray62 = "#767676"; // bdl-gray-62
+export const bdlGray65 = "#6f6f6f"; // bdl-gray-65
 export const bdlGray50 = "#909090"; // bdl-gray-50
 export const bdlGray40 = "#a7a7a7"; // bdl-gray-40
 export const bdlGray30 = "#bcbcbc"; // bdl-gray-30
@@ -82,7 +82,7 @@ export const bdlLineHeight = "20px"; // bdl-line-height
 export const bdlFontSize = "13px"; // bdl-fontSize
 export const bdlFontSizeMinimum = "11px"; // bdl-fontSize-minimum
 export const bdlFontSizeDejaBlue = "14px"; // bdl-fontSize--dejaBlue
-export const avatarColors = ["#0061d5","#003c84","#767676","#222","#4826c2","#9f3fed"]; // avatar-colors
+export const avatarColors = ["#0061d5","#003c84","#6f6f6f","#222","#4826c2","#9f3fed"]; // avatar-colors
 export const modalDialogZIndex = "160"; // modal-dialog-z-index
 export const menuZIndex = "170"; // menu-z-index
 export const submenuZIndex = "171"; // submenu-z-index

package/src/styles/variables.json

@@ -13,7 +13,7 @@
     "bdl-box-blue-02": "#fafcfe",
     "bdl-gray": "#222",
     "bdl-gray-80": "#4e4e4e",
-    "bdl-gray-62": "#767676",
+    "bdl-gray-65": "#6f6f6f",
     "bdl-gray-50": "#909090",
     "bdl-gray-40": "#a7a7a7",
     "bdl-gray-30": "#bcbcbc",
@@ -79,7 +79,7 @@
     "bdl-fontSize": "13px",
     "bdl-fontSize-minimum": "11px",
     "bdl-fontSize--dejaBlue": "14px",
-    "avatar-colors": ["#0061d5", "#003c84", "#767676", "#222", "#4826c2", "#9f3fed"],
+    "avatar-colors": ["#0061d5", "#003c84", "#6f6f6f", "#222", "#4826c2", "#9f3fed"],
     "modal-dialog-z-index": "160",
     "menu-z-index": "170",
     "submenu-z-index": "171",

package/src/styles/variables.ts

@@ -13,7 +13,7 @@ export const bdlBoxBlue05 = '#f2f7fd'; // bdl-box-blue-05
 export const bdlBoxBlue02 = '#fafcfe'; // bdl-box-blue-02
 export const bdlGray = '#222'; // bdl-gray
 export const bdlGray80 = '#4e4e4e'; // bdl-gray-80
-export const bdlGray62 = '#767676'; // bdl-gray-62
+export const bdlGray65 = '#6f6f6f'; // bdl-gray-65
 export const bdlGray50 = '#909090'; // bdl-gray-50
 export const bdlGray40 = '#a7a7a7'; // bdl-gray-40
 export const bdlGray30 = '#bcbcbc'; // bdl-gray-30
@@ -79,7 +79,7 @@ export const bdlLineHeight = '20px'; // bdl-line-height
 export const bdlFontSize = '13px'; // bdl-fontSize
 export const bdlFontSizeMinimum = '11px'; // bdl-fontSize-minimum
 export const bdlFontSizeDejaBlue = '14px'; // bdl-fontSize--dejaBlue
-export const avatarColors = ['#0061d5', '#003c84', '#767676', '#222', '#4826c2', '#9f3fed']; // avatar-colors
+export const avatarColors = ['#0061d5', '#003c84', '#6f6f6f', '#222', '#4826c2', '#9f3fed']; // avatar-colors
 export const modalDialogZIndex = '160'; // modal-dialog-z-index
 export const menuZIndex = '170'; // menu-z-index
 export const submenuZIndex = '171'; // submenu-z-index

package/src/utils/__tests__/__snapshots__/createTheme.test.js.snap

@@ -79,10 +79,10 @@ Object {
     "backgroundHover": "#f5f5f5",
     "border": "#e8e8e8",
     "buttonBackground": "#222",
-    "buttonBackgroundActive": "#767676",
+    "buttonBackgroundActive": "#6f6f6f",
     "buttonBackgroundHover": "#4e4e4e",
     "buttonBorder": "#222",
-    "buttonBorderActive": "#767676",
+    "buttonBorderActive": "#6f6f6f",
     "buttonBorderHover": "#4e4e4e",
     "buttonForeground": "#fff",
     "foreground": "#000",
@@ -171,10 +171,10 @@ Object {
     "backgroundHover": "#fff3f5",
     "border": "#e8e8e8",
     "buttonBackground": "#222",
-    "buttonBackgroundActive": "#767676",
+    "buttonBackgroundActive": "#6f6f6f",
     "buttonBackgroundHover": "#4e4e4e",
     "buttonBorder": "#222",
-    "buttonBorderActive": "#767676",
+    "buttonBorderActive": "#6f6f6f",
     "buttonBorderHover": "#4e4e4e",
     "buttonForeground": "#fff",
     "foreground": "#000",

package/src/utils/createTheme.js

@@ -174,10 +174,10 @@ function createTheme(colorKey: string) {
         buttonForeground: exceedsLightThreshold ? vars.white : foreground,
         buttonBackground: exceedsLightThreshold ? vars.bdlGray : colorKeyHex,
         buttonBackgroundHover: exceedsLightThreshold ? vars.bdlGray80 : hoverHex,
-        buttonBackgroundActive: exceedsLightThreshold ? vars.bdlGray62 : activeHex,
+        buttonBackgroundActive: exceedsLightThreshold ? vars.bdlGray65 : activeHex,
         buttonBorder: exceedsLightThreshold ? vars.bdlGray : colorKeyHex,
         buttonBorderHover: exceedsLightThreshold ? vars.bdlGray80 : hoverHex,
-        buttonBorderActive: exceedsLightThreshold ? vars.bdlGray62 : activeHex,
+        buttonBorderActive: exceedsLightThreshold ? vars.bdlGray65 : activeHex,
 
         // ProgressBar overrides
         progressBarBackground: exceedsLightThreshold ? vars.bdlGray50 : hoverHex,

package/es/elements/common/sub-header/Sort.scss

@@ -1,8 +0,0 @@
-.be-sort-selected {
-    display: flex;
-    flex: 0 0 26px;
-}
-
-.be-menu-sort.aria-menu .menu-item {
-    padding-right: 45px;
-}

package/es/elements/content-sidebar/activity-feed/task-new/_mixins.scss

@@ -1,10 +0,0 @@
-@import '../../../common/variables';
-
-@mixin avatar-badge-icon {
-    position: absolute;
-    right: -2px;
-    bottom: -2px;
-    background: $white;
-    border: 1px solid $white;
-    border-radius: 50%;
-}

package/es/features/content-explorer/item-types.js

@@ -1,6 +0,0 @@
-export default {
-  FILE: 'file',
-  FOLDER: 'folder',
-  BOOKMARK: 'web_link'
-};
-//# sourceMappingURL=item-types.js.map

package/es/features/content-explorer/item-types.js.flow

@@ -1,5 +0,0 @@
-export default {
-    FILE: 'file',
-    FOLDER: 'folder',
-    BOOKMARK: 'web_link',
-};

package/es/features/content-explorer/item-types.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/features/content-explorer/item-types.js"],"names":["FILE","FOLDER","BOOKMARK"],"mappings":"AAAA,eAAe;AACXA,EAAAA,IAAI,EAAE,MADK;AAEXC,EAAAA,MAAM,EAAE,QAFG;AAGXC,EAAAA,QAAQ,EAAE;AAHC,CAAf","sourcesContent":["export default {\n    FILE: 'file',\n    FOLDER: 'folder',\n    BOOKMARK: 'web_link',\n};\n"],"file":"item-types.js"}

package/src/components/inline-error/README.md

@@ -1,10 +0,0 @@
-### Examples
-
-An alias for `<InlineNotice type="error">`
-
-**Basic**
-```
-    <InlineError title='Something bad happened'>
-        Username is required
-    </InlineError>
-```

package/src/components/inline-notice/README.md

@@ -1,57 +0,0 @@
-### Description
-
-Static div displaying a message to the user.
-
-### Examples
-
-**Without `title` pop**
-
-```
-<div style={ { width: '50%' } }>
-    <InlineNotice type="warning">
-        This is a <strong>warning</strong> notice. You might want to pay attention to this.
-    </InlineNotice>
-
-    <InlineNotice type="error">
-        This is an <strong>error</strong> notice. You really want to pay attention to this.
-    </InlineNotice>
-
-    <InlineNotice type="success">
-        This is a <strong>success</strong> notice. You ought to feel really good about this.
-    </InlineNotice>
-
-    <InlineNotice type="info">
-        This is an <strong>info</strong> notice. You should get some context from this.
-    </InlineNotice>
-
-    <InlineNotice type="generic">
-        This is an <strong>generic</strong> notice. You'll just want to see this.
-    </InlineNotice>
-</div>
-```
-
-**With `title` prop**
-
-```
-<div style={ { width: '50%' } }>
-    <InlineNotice type="warning" title="Warning Title">
-        This is a warning notice. You might want to pay attention to this.
-    </InlineNotice>
-    
-    <InlineNotice type="error" title="Error Title">
-        This is an error notice. You really want to pay attention to this.
-    </InlineNotice>
-
-     <InlineNotice type="success" title="Success Title">
-        This is a success notice. You ought to feel really good about this.
-    </InlineNotice>
-
-    <InlineNotice type="info" title="Info Title">
-        This is an info notice. You should get some context from this.
-    </InlineNotice>
-
-    <InlineNotice type="generic" title="Generic Title">
-        This is a generic notice. You'll just want to notice this.
-    </InlineNotice>
-</div>
-```

package/src/components/nav-sidebar/README.md

@@ -1,57 +0,0 @@
-### Examples
-
-#### Using `NavList`
-```
-const NavList = require('./NavList').default;
-
-<NavSidebar data-resin-component="leftnav">
-    <NavList>
-        <Link>Item 1-1</Link>
-        <Link>Item 1-2</Link>
-    </NavList>
-    <NavList heading="Item 2">
-        <Link>Item 2-1</Link>
-        <Link>Item 2-2</Link>
-        <Link>Item 2-3</Link>
-    </NavList>
-</NavSidebar>
-
-```
-
-#### Using `NavListCollapsible`
-```
-const NavList = require('./NavList').default;
-const NavListCollapseHeader = require('./NavListCollapseHeader').default;
-
-const handleOnToggle = (ev) => {
-    setState((prevState) => {
-        prevState.collapsed = !prevState.collapsed;
-        return prevState;
-    });
-};
-
-initialState = {
-    collapsed: true
-};
-
-<NavSidebar data-resin-component="leftnav">
-    <NavList
-        heading={
-            <NavListCollapseHeader onToggleCollapse={ handleOnToggle }>
-                Collapse or Expand
-            </NavListCollapseHeader>
-        }
-        className="is-collapsible example-collapsible"
-        collapsed={state.collapsed}
-    >
-        <Link>Item 1-1</Link>
-        <Link>Item 1-2</Link>
-    </NavList>
-    <NavList heading="Item 2">
-        <Link>Item 2-1</Link>
-        <Link>Item 2-2</Link>
-        <Link>Item 2-3</Link>
-    </NavList>
-</NavSidebar>
-
-```

package/src/components/pill-cloud/README.md

@@ -1,39 +0,0 @@
-### Examples
-```
-
-const pills = [
-    { value: 0, displayText: 'Box' },
-    { value: 1, displayText: 'Fox' },
-    { value: 2, displayText: 'Socks' },
-    { value: 3, displayText: 'Flocks' },
-    { value: 4, displayText: 'Chalks' },
-    { value: 5, displayText: 'Locks' },
-    { value: 6, displayText: 'long pill, very very long pill, so long that it breaks css boundaries' },
-    { value: 7, displayText: 'Rocks' },
-    { value: 8, displayText: 'Crocs' },
-    { value: 9, displayText: 'Mox' },
-    { value: 10, displayText: 'Stalks' },
-    { value: 11, displayText: 'Clocks' },
-    { value: 12, displayText: 'Lox' },
-    { value: 13, displayText: 'Blocks' },
-    { value: 14, displayText: 'Ox' },
-    { value: 15, displayText: 'another long pill, very very long pill, so long that it breaks css boundaries' },
-];
-
-initialState = {
-    selectedItem: pills[5],
-};
-
-const handleSelect = pillOption => {
-    setState({
-        selectedItem:pillOption,
-    });
-};
-
-<div>
-    <PillCloud onSelect={handleSelect} options={pills} selectedOptions={[state.selectedItem]} buttonProps={{ 'data-button-type': 'pill-btn'}} />
-    <div id="pill-cloud-output">
-        {state.selectedItem.displayText}
-    </div>
-</div>
-```

package/src/components/time/README.md

@@ -1,58 +0,0 @@
-### Examples
-**Relative timestamps**
-```
-const msInADay = 24*60*60*1000;
-const oneHourInMs = 60*60*1000;
-<div>
-    <div>
-        <ReadableTime
-            timestamp={Date.now() - oneHourInMs + 30*60*1000}
-            relativeThreshold={oneHourInMs}
-        />
-    </div>
-    <div>
-        <ReadableTime
-            timestamp={Date.now() - 2 * oneHourInMs}
-            relativeThreshold={oneHourInMs}
-        />
-    </div>
-    <div>
-        <ReadableTime
-            timestamp={Date.now() - msInADay}
-            relativeThreshold={oneHourInMs}
-        />
-    </div>
-</div>
-```
-
-**Date without time**
-```
-const msInADay = 24*60*60*1000;
-const oneHourInMs = 60*60*1000;
-<ReadableTime
-    timestamp={Date.now() - 7 * msInADay}
-    relativeThreshold={oneHourInMs}
-/>
-```
-
-**Date with time**
-```
-const msInADay = 24*60*60*1000;
-const oneHourInMs = 60*60*1000;
-<ReadableTime
-    timestamp={Date.now() - 7 * msInADay}
-    relativeThreshold={oneHourInMs}
-    alwaysShowTime={true}
-/>
-```
-
-**Date in the future when not allowed**
-```
-const msInADay = 24*60*60*1000;
-const oneHourInMs = 60*60*1000;
-<ReadableTime
-    timestamp={Date.now() + 7 * msInADay}
-    relativeThreshold={oneHourInMs}
-    allowFutureTimestamps={false}
-/>
-```

package/src/elements/common/sub-header/Sort.scss

@@ -1,8 +0,0 @@
-.be-sort-selected {
-    display: flex;
-    flex: 0 0 26px;
-}
-
-.be-menu-sort.aria-menu .menu-item {
-    padding-right: 45px;
-}

package/src/elements/content-sidebar/activity-feed/task-new/_mixins.scss

@@ -1,10 +0,0 @@
-@import '../../../common/variables';
-
-@mixin avatar-badge-icon {
-    position: absolute;
-    right: -2px;
-    bottom: -2px;
-    background: $white;
-    border: 1px solid $white;
-    border-radius: 50%;
-}

package/src/features/content-explorer/item-types.js

@@ -1,5 +0,0 @@
-export default {
-    FILE: 'file',
-    FOLDER: 'folder',
-    BOOKMARK: 'web_link',
-};