From 5567d30afa99158707642b52a6a5c244bdbf85a6 Mon Sep 17 00:00:00 2001
From: Miroslav Stastny <mistastn@microsoft.com>
Date: Mon, 15 Oct 2018 20:48:11 -0700
Subject: [PATCH] poc(Button): display svg icon path on button hover

---
 .../ButtonExampleToolbarButton.shorthand.tsx  | 24 +++++++++++
 .../components/Button/Usage/index.tsx         |  5 +++
 .../teams/components/Icon/iconStyles.ts       |  3 ++
 .../teams/components/Icon/iconVariables.ts    |  4 +-
 .../teams/components/Icon/svg/icons/bold.tsx  | 43 +++++++++++++++++++
 .../teams/components/Icon/svg/icons/index.ts  |  2 +
 6 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/examples/components/Button/Usage/ButtonExampleToolbarButton.shorthand.tsx
 create mode 100644 src/themes/teams/components/Icon/svg/icons/bold.tsx

diff --git a/docs/src/examples/components/Button/Usage/ButtonExampleToolbarButton.shorthand.tsx b/docs/src/examples/components/Button/Usage/ButtonExampleToolbarButton.shorthand.tsx
new file mode 100644
index 0000000000..d3b5402a84
--- /dev/null
+++ b/docs/src/examples/components/Button/Usage/ButtonExampleToolbarButton.shorthand.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { Button } from '@stardust-ui/react'
+
+const ButtonExampleToolbarButton = () => (
+  <Button
+    icon={{
+      name: 'bold',
+      size: 'big',
+    }}
+    iconOnly
+    text
+    styles={{
+      '&:hover .ui-icon__filled': {
+        display: 'block',
+      },
+    }}
+    variables={siteVariables => ({
+      textColor: siteVariables.gray02,
+      textColorHover: siteVariables.brand06, // or just brand?
+    })}
+  />
+)
+
+export default ButtonExampleToolbarButton
diff --git a/docs/src/examples/components/Button/Usage/index.tsx b/docs/src/examples/components/Button/Usage/index.tsx
index 9485fe95c6..b9a121e956 100644
--- a/docs/src/examples/components/Button/Usage/index.tsx
+++ b/docs/src/examples/components/Button/Usage/index.tsx
@@ -9,6 +9,11 @@ const Usage = () => (
       description="A button used in cards is a &quot;tinted&quot; version of a default button."
       examplePath="components/Button/Usage/ButtonUsageExample"
     />
+    <ComponentExample
+      title="Toolbar button"
+      description="Icon paths change on hover"
+      examplePath="components/Button/Usage/ButtonExampleToolbarButton"
+    />
   </ExampleSection>
 )
 
diff --git a/src/themes/teams/components/Icon/iconStyles.ts b/src/themes/teams/components/Icon/iconStyles.ts
index f8a7f0c03b..225a20b913 100644
--- a/src/themes/teams/components/Icon/iconStyles.ts
+++ b/src/themes/teams/components/Icon/iconStyles.ts
@@ -125,6 +125,9 @@ const iconStyles: IComponentPartStylesInput<IIconProps, any> = {
   /* additional SVG styles for different paths could be added/used in the same way */
   path: getSvgStyle('path'),
   secondaryPath: getSvgStyle('secondaryPath'),
+
+  unfilled: getSvgStyle('unfilled'),
+  filled: getSvgStyle('filled'),
 }
 
 export default iconStyles
diff --git a/src/themes/teams/components/Icon/iconVariables.ts b/src/themes/teams/components/Icon/iconVariables.ts
index f222c2534e..798d29174a 100644
--- a/src/themes/teams/components/Icon/iconVariables.ts
+++ b/src/themes/teams/components/Icon/iconVariables.ts
@@ -1,7 +1,7 @@
 import { pxToRem } from '../../../../lib'
 
 export interface IconVariables {
-  [key: string]: string | number | undefined
+  [key: string]: string | number | boolean | undefined
 
   color?: string
   backgroundColor?: string
@@ -9,6 +9,7 @@ export interface IconVariables {
   horizontalSpace: string
   margin: string
   secondaryColor: string
+  filled?: boolean
 }
 
 export default (): IconVariables => ({
@@ -20,4 +21,5 @@ export default (): IconVariables => ({
   horizontalSpace: pxToRem(10),
   margin: '0 0.25em 0 0',
   secondaryColor: 'white',
+  filled: undefined,
 })
diff --git a/src/themes/teams/components/Icon/svg/icons/bold.tsx b/src/themes/teams/components/Icon/svg/icons/bold.tsx
new file mode 100644
index 0000000000..f2368b55c6
--- /dev/null
+++ b/src/themes/teams/components/Icon/svg/icons/bold.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react'
+import * as cx from 'classnames'
+import { TeamsSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg viewBox="0 0 32 32" role="presentation" className={classes.svg}>
+      <g className="icons-default-fill">
+        <path
+          className={cx('ui-icon__unfilled', classes.unfilled)}
+          d="M11,23V9h5.1c1.6,0,2.8,0.3,3.6,0.9c0.8,0.6,1.3,1.4,1.3,2.4c0,0.8-0.3,1.4-0.8,2c-0.5,0.6-1.2,1-2,1.2v0
+             c1,0.1,1.8,0.5,2.4,1.1c0.6,0.6,0.9,1.4,0.9,2.2c0,1.3-0.5,2.3-1.4,3.1C19.2,22.6,18,23,16.4,23H11z M14,11.3v3.3h1.4
+             c0.7,0,1.2-0.2,1.5-0.5c0.4-0.3,0.6-0.8,0.6-1.3c0-1-0.8-1.5-2.3-1.5H14z M14,17v3.7h1.7c0.7,0,1.3-0.2,1.7-0.5
+             c0.4-0.3,0.6-0.8,0.6-1.4c0-0.6-0.2-1-0.6-1.3c-0.4-0.3-1-0.5-1.7-0.5H14z"
+        />
+        <path
+          className={cx('ui-icon__filled', classes.filled)}
+          d="M16.4,23.5h-5.9v-15h5.6c1.7,0,3,0.3,3.9,1c1,0.7,1.5,1.7,1.5,2.8c0,0.8-0.3,1.6-0.9,2.3c-0.2,0.3-0.5,0.6-0.9,0.8
+	           c0.5,0.2,0.9,0.5,1.2,0.9c0.7,0.7,1,1.6,1,2.6c0,1.4-0.5,2.5-1.6,3.5C19.4,23.1,18,23.5,16.4,23.5z M11.5,22.5h4.9
+	           c1.4,0,2.5-0.3,3.4-1c0.8-0.7,1.2-1.6,1.2-2.7c0-0.7-0.3-1.4-0.8-1.8c-0.5-0.6-1.3-0.9-2.1-1l-2.9-0.3l2.8-0.7
+	           c0.7-0.2,1.3-0.5,1.7-1c0.5-0.6,0.7-1.1,0.7-1.7c0-0.8-0.4-1.5-1.1-2c-0.7-0.5-1.8-0.8-3.3-0.8h-4.6V22.5z M15.7,21.2h-2.2v-4.7h2.2
+	           c0.8,0,1.5,0.2,2,0.6c0.5,0.4,0.8,1,0.8,1.7c0,0.8-0.3,1.4-0.8,1.8C17.2,21,16.5,21.2,15.7,21.2z M14.5,20.2h1.2
+	           c0.6,0,1.1-0.1,1.4-0.4c0.3-0.2,0.4-0.7,0.4-1c0-0.4-0.1-0.7-0.4-0.9c-0.3-0.3-0.9-0.4-1.4-0.4h-1.2V20.2z M15.4,15.1h-1.9v-4.3h1.7
+	           c2.4,0,2.8,1.3,2.8,2c0,0.7-0.3,1.3-0.8,1.7C17,14.7,16.4,15.1,15.4,15.1z M14.5,14.1h0.9c0.5,0,0.9-0.1,1.1-0.4
+	           c0.3-0.2,0.5-0.6,0.5-0.9c0-0.3,0-1-1.8-1h-0.7V14.1z
+	           M16.4,23.5h-5.9v-15h5.6c1.7,0,3,0.3,3.9,1c1,0.7,1.5,1.7,1.5,2.8c0,0.8-0.3,1.6-0.9,2.3c-0.2,0.3-0.5,0.6-0.9,0.8
+	           c0.5,0.2,0.9,0.5,1.2,0.9c0.7,0.7,1,1.6,1,2.6c0,1.4-0.5,2.5-1.6,3.5C19.4,23.1,18,23.5,16.4,23.5z M14.5,20.2h1.2
+	           c0.6,0,1.1-0.1,1.4-0.4c0.3-0.2,0.4-0.7,0.4-1c0-0.4-0.1-0.7-0.4-0.9c-0.3-0.3-0.9-0.4-1.4-0.4h-1.2V20.2z M14.5,14.1h0.9
+	           c0.5,0,0.9-0.1,1.1-0.4c0.3-0.2,0.5-0.6,0.5-0.9c0-0.3,0-1-1.8-1h-0.7V14.1z"
+        />
+      </g>
+    </svg>
+  ),
+  styles: {
+    svg: () => ({
+      color: 'inherit',
+      fill: 'currentColor',
+    }),
+    filled: ({ variables }) => ({
+      ...(!variables.filled && { display: 'none' }),
+    }),
+  },
+} as TeamsSvgIconSpec
diff --git a/src/themes/teams/components/Icon/svg/icons/index.ts b/src/themes/teams/components/Icon/svg/icons/index.ts
index da52583cbd..1e0e9e43e6 100644
--- a/src/themes/teams/components/Icon/svg/icons/index.ts
+++ b/src/themes/teams/components/Icon/svg/icons/index.ts
@@ -1,5 +1,6 @@
 import { TeamsSvgIconSpec } from '../types'
 
+import bold from './bold'
 import call from './call'
 import callEnd from './callEnd'
 import callVideo from './callIncomingVideo'
@@ -14,6 +15,7 @@ import umbrella from './umbrella'
 import teams from './teams'
 
 export default {
+  bold,
   call,
   'call-end': callEnd,
   'call-video': callVideo,