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

package/src/features/unified-share-modal/flowTypes.js

@@ -140,6 +140,7 @@ export type trackingPropsType = {
         ftuxConfirmButtonProps?: Object,
         modalProps?: Object,
         onLoad?: Function,
+        onLoadSharedLink?: Function,
     },
     removeLinkConfirmModalTracking: {
         cancelButtonProps?: Object,
@@ -286,11 +287,11 @@ type SharedLinkSectionTypes = {
     onCopySuccess?: () => void,
     /** Handler function that gets called whenever the user dismisses a tooltip on the given component identifier */
     onDismissTooltip?: (componentIdentifier: tooltipComponentIdentifierType) => void,
-    /** Handler function for clicks on the settings icon. If not provided, the settings icon won't be rendered. */
+    /** Handler function for clicks on the settings button. If not provided, the settings button won't be rendered. */
     onSettingsClick?: Function,
     /** Shared link data */
     sharedLink: sharedLinkType,
-    /** Shows a callout tooltip next gear icon with info about what can be customized */
+    /** Shows a callout tooltip next to settings button with info about what can be customized */
     showSharedLinkSettingsCallout?: boolean,
     /** Mapping of components to the content that should be rendered in their tooltips */
     tooltips?: { [componentIdentifier: tooltipComponentIdentifierType]: React.Node },
@@ -318,6 +319,12 @@ type EmailFormTypes = {
     sendSharedLinkError: React.Node,
 };
 
+type AdvancedContentInsightsUSProps = {
+    isAdvancedContentInsightsChecked?: boolean,
+    /** Handler function that gets called whenever the Advanced Content Insights toggle changes */
+    onAdvancedContentInsightsToggle?: Function,
+};
+
 export type USMConfig = {
     /** Whether the "Email Shared Link" button and form should be rendered in the USM/USF */
     showEmailSharedLinkForm: boolean,
@@ -327,6 +334,7 @@ export type USMConfig = {
 
 // Prop types shared by both the Unified Share Modal and the Unified Share Form
 type BaseUnifiedShareProps = CollaboratorAvatarsTypes &
+    AdvancedContentInsightsUSProps &
     EmailFormTypes &
     CollabRestrictionsTypes &
     InviteSectionTypes &

package/src/features/unified-share-modal/messages.js

@@ -118,11 +118,6 @@ const messages = defineMessages({
         description: 'Accessible label for shared link input field',
         id: 'boxui.share.sharedLinkURLLabel',
     },
-    settingsButtonLabel: {
-        defaultMessage: 'Open shared link settings popup',
-        description: 'Accessible label for button that loads share settings popup',
-        id: 'boxui.unifiedShare.settingsButtonLabel',
-    },
     linkShareOff: {
         defaultMessage: 'Create shared link',
         description: 'Call to action text for allowing the user to create a new shared link',
@@ -540,6 +535,23 @@ const messages = defineMessages({
             'Text to show when the number of contact email addresses displayed on a tooltip exceeds the maximum amount that can be displayed',
         id: 'boxui.unifiedShare.contactEmailsTooltipText',
     },
+    expiresMessage: {
+        defaultMessage: 'Expires',
+        description: 'Label for tooltips or other components that display expiration icons',
+        id: 'boxui.unifiedShare.expiresMessage',
+    },
+    setLevelOfCollabAccess: {
+        defaultMessage: 'Set the level of {collaboratorAccess} and increase security through one of our paid plans.',
+        description:
+            'Used in a dialog box that urges the user to upgrade. The collaboratorAccess variable is replaced with the words "collaborator access" from the string with the id boxui.unifiedShare.collabAccess',
+        id: 'boxui.unifiedShare.levelOfCollabAccess',
+    },
+    collabAccess: {
+        defaultMessage: 'collaborator access',
+        description:
+            'Used in a dialog box that urges the user to upgrade. This is substituted into the middle of the sentence in the string with id boxui.unifiedShare.levelOfCollabAccess',
+        id: 'boxui.unifiedShare.collabAccess',
+    },
 });
 
 export default messages;

package/src/features/virtualized-table/VirtualizedTable.scss

@@ -8,7 +8,7 @@
     }
 
     .ReactVirtualized__Table__headerColumn {
-        color: $bdl-gray-62;
+        color: $bdl-gray-65;
         font-weight: normal;
         text-transform: none;
     }

package/src/features/virtualized-table/__tests__/__snapshots__/BaseVirtualizedTable.test.js.snap

@@ -5,6 +5,7 @@ exports[`features/virtualized-table/BaseVirtualizedTable should successfully ren
   className="bdl-VirtualizedTable className"
   disableHeader={false}
   estimatedRowSize={30}
+  gridContainerRole=""
   headerHeight={39}
   headerRowRenderer={[Function]}
   headerStyle={Object {}}
@@ -35,6 +36,7 @@ exports[`features/virtualized-table/BaseVirtualizedTable should successfully ren
     flexGrow={0}
     flexShrink={1}
     headerRenderer={[Function]}
+    headerRole="columnheader"
     label="Name"
     role="gridcell"
     style={Object {}}
@@ -48,6 +50,7 @@ exports[`features/virtualized-table/BaseVirtualizedTable should successfully ren
     flexGrow={0}
     flexShrink={1}
     headerRenderer={[Function]}
+    headerRole="columnheader"
     label="Description"
     role="gridcell"
     style={Object {}}

package/src/features/virtualized-table/__tests__/__snapshots__/DraggableVirtualizedTable.test.js.snap

@@ -34,6 +34,7 @@ exports[`features/virtualized-table/DraggableVirtualizedTable should render a Dr
       flexShrink={1}
       headerClassName="bdl-DraggableVirtualizedTable-dragHandleColumn"
       headerRenderer={[Function]}
+      headerRole="columnheader"
       role="gridcell"
       style={Object {}}
       width={24}
@@ -46,6 +47,7 @@ exports[`features/virtualized-table/DraggableVirtualizedTable should render a Dr
       flexGrow={0}
       flexShrink={1}
       headerRenderer={[Function]}
+      headerRole="columnheader"
       label="Name"
       role="gridcell"
       style={Object {}}
@@ -59,6 +61,7 @@ exports[`features/virtualized-table/DraggableVirtualizedTable should render a Dr
       flexGrow={0}
       flexShrink={1}
       headerRenderer={[Function]}
+      headerRole="columnheader"
       label="Description"
       role="gridcell"
       style={Object {}}

package/src/features/virtualized-table/__tests__/__snapshots__/VirtualizedTable.test.js.snap

@@ -35,6 +35,7 @@ exports[`features/virtualized-table/VirtualizedTable should successfully render
     flexGrow={0}
     flexShrink={1}
     headerRenderer={[Function]}
+    headerRole="columnheader"
     label="Name"
     role="gridcell"
     style={Object {}}
@@ -48,6 +49,7 @@ exports[`features/virtualized-table/VirtualizedTable should successfully render
     flexGrow={0}
     flexShrink={1}
     headerRenderer={[Function]}
+    headerRole="columnheader"
     label="Description"
     role="gridcell"
     style={Object {}}
@@ -86,6 +88,7 @@ exports[`features/virtualized-table/VirtualizedTable should successfully render
   className="bdl-VirtualizedTable"
   disableHeader={false}
   estimatedRowSize={30}
+  gridContainerRole=""
   headerHeight={39}
   headerRowRenderer={[Function]}
   headerStyle={Object {}}
@@ -118,6 +121,7 @@ exports[`features/virtualized-table/VirtualizedTable should successfully render
     flexGrow={0}
     flexShrink={1}
     headerRenderer={[Function]}
+    headerRole="columnheader"
     label="Name"
     role="gridcell"
     style={Object {}}
@@ -131,6 +135,7 @@ exports[`features/virtualized-table/VirtualizedTable should successfully render
     flexGrow={0}
     flexShrink={1}
     headerRenderer={[Function]}
+    headerRole="columnheader"
     label="Description"
     role="gridcell"
     style={Object {}}
@@ -156,6 +161,7 @@ exports[`features/virtualized-table/VirtualizedTable should successfully render
   className="bdl-VirtualizedTable"
   disableHeader={false}
   estimatedRowSize={30}
+  gridContainerRole=""
   headerHeight={39}
   headerRowRenderer={[Function]}
   headerStyle={Object {}}
@@ -186,6 +192,7 @@ exports[`features/virtualized-table/VirtualizedTable should successfully render
     flexGrow={0}
     flexShrink={1}
     headerRenderer={[Function]}
+    headerRole="columnheader"
     label="Name"
     role="gridcell"
     style={Object {}}
@@ -199,6 +206,7 @@ exports[`features/virtualized-table/VirtualizedTable should successfully render
     flexGrow={0}
     flexShrink={1}
     headerRenderer={[Function]}
+    headerRole="columnheader"
     label="Description"
     role="gridcell"
     style={Object {}}

package/src/features/virtualized-table-renderers/_mixins.scss

@@ -8,7 +8,7 @@
 }
 
 @mixin isExternal {
-    color: $bdl-gray-62;
+    color: $bdl-gray-65;
     font-style: italic;
 }
 

package/src/icons/badges/MetadataDefaultBadge.js.flow

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { bdlGray62 } from '../../styles/variables';
+import { bdlGray65 } from '../../styles/variables';
 import AccessibleSVG from '../accessible-svg';
 
 type Props = {
@@ -20,10 +20,10 @@ const MetadataDefaultBadge = ({ className = '', height = 16, title, width = 16 }
         width={width}
     >
         <g fill="none" fillRule="evenodd">
-            <circle cx="8" cy="8" fill="none" r="7.5" stroke={bdlGray62} />
+            <circle cx="8" cy="8" fill="none" r="7.5" stroke={bdlGray65} />
             <path
                 d="M5.126 10.545a.57.57 0 0 1-.693.437.603.603 0 0 1-.416-.728l1.143-4.8c.122-.513.772-.62 1.039-.172L8 8.308l1.801-3.026c.267-.449.917-.34 1.039.173l1.143 4.8a.603.603 0 0 1-.416.727.57.57 0 0 1-.693-.437l-.817-3.43-1.572 2.643a.557.557 0 0 1-.97 0L5.943 7.116l-.817 3.43z"
-                fill={bdlGray62}
+                fill={bdlGray65}
             />
         </g>
     </AccessibleSVG>

package/src/icons/badges/MetadataDefaultBadge.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { bdlGray62 } from '../../styles/variables';
+import { bdlGray65 } from '../../styles/variables';
 import AccessibleSVG from '../accessible-svg';
 
 import { TwoTonedIcon } from '../iconTypes';
@@ -13,10 +13,10 @@ const MetadataDefaultBadge = ({ className = '', height = 16, title, width = 16 }
         width={width}
     >
         <g fill="none" fillRule="evenodd">
-            <circle cx="8" cy="8" fill="none" r="7.5" stroke={bdlGray62} />
+            <circle cx="8" cy="8" fill="none" r="7.5" stroke={bdlGray65} />
             <path
                 d="M5.126 10.545a.57.57 0 0 1-.693.437.603.603 0 0 1-.416-.728l1.143-4.8c.122-.513.772-.62 1.039-.172L8 8.308l1.801-3.026c.267-.449.917-.34 1.039.173l1.143 4.8a.603.603 0 0 1-.416.727.57.57 0 0 1-.693-.437l-.817-3.43-1.572 2.643a.557.557 0 0 1-.97 0L5.943 7.116l-.817 3.43z"
-                fill={bdlGray62}
+                fill={bdlGray65}
             />
         </g>
     </AccessibleSVG>

package/src/icons/badges/__tests__/__snapshots__/MetadataDefaultBadge.test.tsx.snap

@@ -16,11 +16,11 @@ exports[`icons/badges/MetadataDefaultBadge should correctly render icon with spe
       cy="8"
       fill="none"
       r="7.5"
-      stroke="#767676"
+      stroke="#6f6f6f"
     />
     <path
       d="M5.126 10.545a.57.57 0 0 1-.693.437.603.603 0 0 1-.416-.728l1.143-4.8c.122-.513.772-.62 1.039-.172L8 8.308l1.801-3.026c.267-.449.917-.34 1.039.173l1.143 4.8a.603.603 0 0 1-.416.727.57.57 0 0 1-.693-.437l-.817-3.43-1.572 2.643a.557.557 0 0 1-.97 0L5.943 7.116l-.817 3.43z"
-      fill="#767676"
+      fill="#6f6f6f"
     />
   </g>
 </AccessibleSVG>

package/src/icons/general/IconAnyTask.js.flow

@@ -2,11 +2,11 @@
 import * as React from 'react';
 
 import AccessibleSVG from '../accessible-svg';
-import { bdlGray62 } from '../../styles/variables';
+import { bdlGray65 } from '../../styles/variables';
 
 import type { Icon } from '../flowTypes';
 
-const IconAnyTask = ({ className = '', color = bdlGray62, height = 32, title, width = 32 }: Icon) => (
+const IconAnyTask = ({ className = '', color = bdlGray65, height = 32, title, width = 32 }: Icon) => (
     <AccessibleSVG className={className} height={height} title={title} viewBox="0 0 32 32" width={width}>
         <g fill={color} fillRule="nonzero">
             <path d="M28.7484364 16.4549424c0 1.0039348.7442362 1.8177849 1.6622981 1.8177849.9180618 0 1.662298-.8138501 1.662298-1.8177849V5.54823284c0-1.47292747-1.5180216-2.33430191-2.6193324-1.48629378L26.960253 5.9818905c-.7506441.57799516-.9306825 1.71198921-.402127 2.5328466.4995837.7758637 1.4533974.99427836 2.1903104.52782657v7.41237873zM13.1639416 17.5454545c4.0166164 0 7.2727273-3.2561109 7.2727273-7.2727272C20.4366689 6.25611091 17.180558 3 13.1639416 3c-4.01661637 0-7.27272728 3.25611091-7.27272728 7.2727273 0 4.0166163 3.25611091 7.2727272 7.27272728 7.2727272zm0-3.6363636c-2.0083082 0-3.63636365-1.6280554-3.63636365-3.6363636 0-2.00830821 1.62805545-3.63636366 3.63636365-3.63636366s3.6363636 1.62805545 3.6363636 3.63636366c0 2.0083082-1.6280554 3.6363636-3.6363636 3.6363636zM26.0799741 26.82097c-2.6627973-4.6162045-7.5876175-7.459488-12.9167671-7.4573363-5.33091328-.0023936-10.25839928 2.8441776-12.9201858 7.4647912-.50123987.8701058-.20221498 1.9818011.66789077 2.4830409.87010576.5012399 1.98180104.202215 2.48304091-.6678907 2.01238031-3.4933049 5.73768893-5.6453874 9.76917202-5.6435766 4.0305283-.0016279 7.7538215 2.147969 9.766966 5.6379405.5017421.8698163 1.6136099 1.1681993 2.4834261.6664571.8698162-.5017421 1.1681992-1.6136098.6664571-2.4834261z" />

package/src/icons/general/IconAnyTask.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
 import AccessibleSVG from '../accessible-svg';
-import { bdlGray62 } from '../../styles/variables';
+import { bdlGray65 } from '../../styles/variables';
 
 import { Icon } from '../iconTypes';
 
-const IconAnyTask = ({ className = '', color = bdlGray62, height = 32, title, width = 32 }: Icon) => (
+const IconAnyTask = ({ className = '', color = bdlGray65, height = 32, title, width = 32 }: Icon) => (
     <AccessibleSVG className={className} height={height} title={title} viewBox="0 0 32 32" width={width}>
         <g fill={color} fillRule="nonzero">
             <path d="M28.7484364 16.4549424c0 1.0039348.7442362 1.8177849 1.6622981 1.8177849.9180618 0 1.662298-.8138501 1.662298-1.8177849V5.54823284c0-1.47292747-1.5180216-2.33430191-2.6193324-1.48629378L26.960253 5.9818905c-.7506441.57799516-.9306825 1.71198921-.402127 2.5328466.4995837.7758637 1.4533974.99427836 2.1903104.52782657v7.41237873zM13.1639416 17.5454545c4.0166164 0 7.2727273-3.2561109 7.2727273-7.2727272C20.4366689 6.25611091 17.180558 3 13.1639416 3c-4.01661637 0-7.27272728 3.25611091-7.27272728 7.2727273 0 4.0166163 3.25611091 7.2727272 7.27272728 7.2727272zm0-3.6363636c-2.0083082 0-3.63636365-1.6280554-3.63636365-3.6363636 0-2.00830821 1.62805545-3.63636366 3.63636365-3.63636366s3.6363636 1.62805545 3.6363636 3.63636366c0 2.0083082-1.6280554 3.6363636-3.6363636 3.6363636zM26.0799741 26.82097c-2.6627973-4.6162045-7.5876175-7.459488-12.9167671-7.4573363-5.33091328-.0023936-10.25839928 2.8441776-12.9201858 7.4647912-.50123987.8701058-.20221498 1.9818011.66789077 2.4830409.87010576.5012399 1.98180104.202215 2.48304091-.6678907 2.01238031-3.4933049 5.73768893-5.6453874 9.76917202-5.6435766 4.0305283-.0016279 7.7538215 2.147969 9.766966 5.6379405.5017421.8698163 1.6136099 1.1681993 2.4834261.6664571.8698162-.5017421 1.1681992-1.6136098.6664571-2.4834261z" />

package/src/icons/general/IconEdit.js.flow

@@ -2,10 +2,11 @@
 import * as React from 'react';
 
 import AccessibleSVG from '../accessible-svg';
+import { bdlGray65 } from '../../styles/variables';
 
 import type { Icon } from '../flowTypes';
 
-const IconEdit = ({ className = '', color = '#999', height = 14, title, width = 14 }: Icon) => (
+const IconEdit = ({ className = '', color = bdlGray65, height = 14, title, width = 14 }: Icon) => (
     <AccessibleSVG className={`icon-edit ${className}`} height={height} title={title} viewBox="0 0 14 14" width={width}>
         <path
             className="fill-color"

package/src/icons/general/IconEdit.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 
 import AccessibleSVG from '../accessible-svg';
+import { bdlGray65 } from '../../styles/variables';
 
 import { Icon } from '../iconTypes';
 
-const IconEdit = ({ className = '', color = '#767676', height = 14, title, width = 14 }: Icon) => (
+const IconEdit = ({ className = '', color = bdlGray65, height = 14, title, width = 14 }: Icon) => (
     <AccessibleSVG className={`icon-edit ${className}`} height={height} title={title} viewBox="0 0 14 14" width={width}>
         <path
             className="fill-color"

package/src/icons/general/__tests__/__snapshots__/IconAnyTask.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`icons/general/IconAnyTask should correctly render default icon 1`] = `
   width={32}
 >
   <g
-    fill="#767676"
+    fill="#6f6f6f"
     fillRule="nonzero"
   >
     <path

package/src/icons/general/__tests__/__snapshots__/IconEdit.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`icons/general/IconEdit should correctly render default icon 1`] = `
   <path
     className="fill-color"
     d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-    fill="#767676"
+    fill="#6f6f6f"
   />
 </AccessibleSVG>
 `;
@@ -26,7 +26,7 @@ exports[`icons/general/IconEdit should correctly render icon with specified prop
   <path
     className="fill-color"
     d="M3.21 7.89l6.47-6.48a2 2 0 0 1 2.88 2.78h-.05L6 10.72 3.21 7.89zM2.24 9l2.83 2.83L1.67 13c-.52.18-.79-.1-.62-.61z"
-    fill="#767676"
+    fill="#6f6f6f"
   />
 </AccessibleSVG>
 `;

package/src/icons/metadata-view/IconMetadataView.js.flow

@@ -2,6 +2,7 @@
 import * as React from 'react';
 
 import AccessibleSVG from '../accessible-svg';
+import { bdlGray65 } from '../../styles/variables';
 
 type Props = {
     className?: string,
@@ -22,7 +23,7 @@ const IconMetadataView = ({ className = '', height = 16, title, width = 16 }: Pr
         <g fill="none" fillRule="evenodd">
             <path
                 d="M8.83 9a2.995 2.995 0 0 0 0-2H15a1 1 0 0 1 0 2H8.83zM3.17 9H1a1 1 0 0 1 0-2h2.17a2.995 2.995 0 0 0 0 2zm10.66-6a2.995 2.995 0 0 0 0-2H15a1 1 0 0 1 0 2h-1.17zM8.17 3H1a1 1 0 1 1 0-2h7.17a2.995 2.995 0 0 0 0 2zM9 2a2 2 0 1 1 4 0 2 2 0 0 1-4 0zM4 8a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"
-                fill="#767676"
+                fill={bdlGray65}
                 fillRule="nonzero"
             />
         </g>

package/src/icons/metadata-view/IconMetadataView.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 import AccessibleSVG from '../accessible-svg';
+import { bdlGray65 } from '../../styles/variables';
+
 import { TwoTonedIcon } from '../iconTypes';
 
 const IconMetadataView = ({ className = '', height = 16, title, width = 16 }: TwoTonedIcon) => (
@@ -14,7 +16,7 @@ const IconMetadataView = ({ className = '', height = 16, title, width = 16 }: Tw
         <g fill="none" fillRule="evenodd">
             <path
                 d="M8.83 9a2.995 2.995 0 0 0 0-2H15a1 1 0 0 1 0 2H8.83zM3.17 9H1a1 1 0 0 1 0-2h2.17a2.995 2.995 0 0 0 0 2zm10.66-6a2.995 2.995 0 0 0 0-2H15a1 1 0 0 1 0 2h-1.17zM8.17 3H1a1 1 0 1 1 0-2h7.17a2.995 2.995 0 0 0 0 2zM9 2a2 2 0 1 1 4 0 2 2 0 0 1-4 0zM4 8a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"
-                fill="#767676"
+                fill={bdlGray65}
                 fillRule="nonzero"
             />
         </g>

package/src/icons/metadata-view/__tests__/__snapshots__/IconMetadataView.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`icons/metadata-view/IconMetadataView should correctly render icon with
   >
     <path
       d="M8.83 9a2.995 2.995 0 0 0 0-2H15a1 1 0 0 1 0 2H8.83zM3.17 9H1a1 1 0 0 1 0-2h2.17a2.995 2.995 0 0 0 0 2zm10.66-6a2.995 2.995 0 0 0 0-2H15a1 1 0 0 1 0 2h-1.17zM8.17 3H1a1 1 0 1 1 0-2h7.17a2.995 2.995 0 0 0 0 2zM9 2a2 2 0 1 1 4 0 2 2 0 0 1-4 0zM4 8a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"
-      fill="#767676"
+      fill="#6f6f6f"
       fillRule="nonzero"
     />
   </g>

package/src/icons/two-toned/IconAnnotation.js.flow

@@ -0,0 +1,27 @@
+// @flow
+import * as React from 'react';
+
+import { bdlYellorange, white } from '../../styles/variables';
+import AccessibleSVG from '../accessible-svg';
+import type { TwoTonedIcon } from '../flowTypes';
+
+const IconAnnotation = ({ className = '', height = 24, title, width = 24 }: TwoTonedIcon) => (
+    <AccessibleSVG
+        className={`bdl-IconAnnotation ${className}`}
+        height={height}
+        title={title}
+        viewBox="0 0 32 32"
+        width={width}
+    >
+        <g fillRule="nonzero" fill="none">
+            <circle className="background-color" fill={bdlYellorange} cx="16.162" cy="16.162" r="16" />
+            <path
+                d="M8.8 14.31c0 5.272 4.8 7.19 7.2 7.19v1.798a1.088 1.088 0 0 0 1.8.838c2.16-1.917 5.4-5.512 5.4-9.826 0-2.518-2.4-6.71-7.2-6.71-4.2 0-7.2 3.595-7.2 6.71Z"
+                className="foreground-color"
+                fill={white}
+            />
+        </g>
+    </AccessibleSVG>
+);
+
+export default IconAnnotation;

package/src/icons/two-toned/IconAnnotation.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { bdlYellorange, white } from '../../styles/variables';
+import { TwoTonedIcon } from '../iconTypes';
+import AccessibleSVG from '../accessible-svg';
+
+const IconAnnotation = ({ className = '', height = 24, title, width = 24 }: TwoTonedIcon) => (
+    <AccessibleSVG
+        className={`bdl-IconAnnotation ${className}`}
+        height={height}
+        title={title}
+        viewBox="0 0 32 32"
+        width={width}
+    >
+        <g fillRule="nonzero" fill="none">
+            <circle className="background-color" fill={bdlYellorange} cx="16.162" cy="16.162" r="16" />
+            <path
+                d="M8.8 14.31c0 5.272 4.8 7.19 7.2 7.19v1.798a1.088 1.088 0 0 0 1.8.838c2.16-1.917 5.4-5.512 5.4-9.826 0-2.518-2.4-6.71-7.2-6.71-4.2 0-7.2 3.595-7.2 6.71Z"
+                className="foreground-color"
+                fill={white}
+            />
+        </g>
+    </AccessibleSVG>
+);
+
+export default IconAnnotation;

package/src/icons/two-toned/_IconAnnotation.mixins.scss

@@ -0,0 +1,9 @@
+@mixin icon-annotation-style-override($foregroundColor, $backgroundColor) {
+    .foreground-color {
+        fill: $foregroundColor;
+    }
+
+    .background-color {
+        fill: $backgroundColor;
+    }
+}

package/src/icons/two-toned/__tests__/IconAnnotation.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import IconAnnotation from '../IconAnnotation';
+
+describe('icons/general/IconAnnotation', () => {
+    const getWrapper = (props = {}) => shallow(<IconAnnotation {...props} />);
+
+    test('should correctly render default icon', () => {
+        const wrapper = getWrapper();
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should correctly render icon with specified width and height', () => {
+        const width = 16;
+        const height = 17;
+        const wrapper = shallow(<IconAnnotation height={height} width={width} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('width')).toEqual(width);
+        expect(wrapper.find('AccessibleSVG').prop('height')).toEqual(height);
+    });
+
+    test('should correctly render icon with title', () => {
+        const title = 'annotation-icon';
+        const wrapper = shallow(<IconAnnotation title={title} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('title')).toEqual(title);
+    });
+});

package/src/icons/two-toned/__tests__/__snapshots__/IconAnnotation.test.tsx.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`icons/general/IconAnnotation should correctly render default icon 1`] = `
+<AccessibleSVG
+  className="bdl-IconAnnotation "
+  height={24}
+  viewBox="0 0 32 32"
+  width={24}
+>
+  <g
+    fill="none"
+    fillRule="nonzero"
+  >
+    <circle
+      className="background-color"
+      cx="16.162"
+      cy="16.162"
+      fill="#f5b31b"
+      r="16"
+    />
+    <path
+      className="foreground-color"
+      d="M8.8 14.31c0 5.272 4.8 7.19 7.2 7.19v1.798a1.088 1.088 0 0 0 1.8.838c2.16-1.917 5.4-5.512 5.4-9.826 0-2.518-2.4-6.71-7.2-6.71-4.2 0-7.2 3.595-7.2 6.71Z"
+      fill="#fff"
+    />
+  </g>
+</AccessibleSVG>
+`;

package/src/styles/_deprecated.scss

@@ -13,6 +13,7 @@ $hover-blue-border: #d9e3e9 !default;
 $selected-blue-background: #ecf4fc !default;
 $selected-blue-border: #bfd4df !default;
 $bdl-secondary-blue: $bdl-dark-blue !default;
+$bdl-gray-62: #767676 !default;
 $bdl-neutral-01: $bdl-gray !default;
 $bdl-neutral-02: $bdl-gray-62 !default;
 $bdl-neutral-03: $bdl-gray-50 !default;

package/src/styles/_inputs.scss

@@ -5,17 +5,16 @@
     color: $bdl-gray;
     border: 1px solid $bdl-gray-20;
     border-radius: $bdl-border-radius-size-med;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1);
     transition: border-color linear .15s, box-shadow linear .1s;
     -webkit-font-smoothing: antialiased;
 }
 
 @mixin box-inputs-hover {
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .1);
 }
 
 @mixin box-inputs-focus {
     border: 1px solid $primary-color;
     outline: 0;
-    box-shadow: none;
 }

package/src/styles/colors.md

@@ -2,7 +2,7 @@ Colors choices should meet [WCAG 2.0 AA guidelines](https://www.w3.org/TR/UNDERS
 
 | Role       | Min Contrast Ratio | Lightest Gray in Palette\* |
 | ---------- | ------------------ | -------------------------- |
-| Text       | 4.5:1              | `bdl-gray-62`              |
+| Text       | 4.5:1              | `bdl-gray-65`              |
 | Icons      | 3:1                | `bdl-gray-50`              |
 | Large Text | 3:1                | `bdl-gray-50`              |
 

package/src/styles/common/_buttons.scss

@@ -56,7 +56,7 @@
 
         .bdl-btn-icon {
             // Icon without text:
-            margin: ($bdl-btn-height - $bdl-btn-icon-size) / 2 - $bdl-btn-border-width;
+            margin: ($bdl-btn-height - $bdl-btn-icon-size) * .5 - $bdl-btn-border-width;
 
             // Icon with text:
             & + .btn-content {
@@ -71,7 +71,7 @@
             height: $bdl-btn-height-large;
 
             .bdl-btn-icon {
-                margin: ($bdl-btn-height-large - $bdl-btn-icon-size) / 2 - $bdl-btn-border-width;
+                margin: ($bdl-btn-height-large - $bdl-btn-icon-size) * .5 - $bdl-btn-border-width;
             }
         }
     }

package/src/styles/common/_forms.scss

@@ -47,6 +47,8 @@ textarea:focus {
     @include box-inputs-focus;
 }
 
+// NOTE: This does not work because vendor prefixes cannot be combined. Need
+// to work with the design team to update the color or remove this ruleset.
 input::-webkit-input-placeholder,
 input::-moz-placeholder,
 input:-ms-input-placeholder {

package/src/styles/common/_links.scss

@@ -88,7 +88,7 @@ a svg {
 // Also see nav-sidebar.scss before merging
 .link {
     overflow: hidden;
-    color: $bdl-gray-62;
+    color: $bdl-gray-65;
     line-height: 1.5em;
     white-space: nowrap;
     text-decoration: none;

package/src/styles/constants/_colors.scss

@@ -19,7 +19,7 @@ $bdl-box-blue-02: #fafcfe !default;
 // Box/Primary Grays
 $bdl-gray: #222 !default;
 $bdl-gray-80: #4e4e4e !default;
-$bdl-gray-62: #767676 !default;
+$bdl-gray-65: #6f6f6f !default;
 $bdl-gray-50: #909090 !default;
 $bdl-gray-40: #a7a7a7 !default;
 $bdl-gray-30: #bcbcbc !default;

package/src/styles/constants/_themes.scss

@@ -1 +1 @@
-$avatar-colors: $bdl-box-blue, $bdl-dark-blue, $bdl-gray-62, $bdl-gray, $bdl-grimace, $bdl-purple-rain;
+$avatar-colors: $bdl-box-blue, $bdl-dark-blue, $bdl-gray-65, $bdl-gray, $bdl-grimace, $bdl-purple-rain;