feat(Icon): mark icons that should be rotated in rtl for teams theme

CHANGELOG.md

@@ -20,6 +20,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Fix layout of `Accordion` panel's title @kuzhelov ([#780](https://github.com/stardust-ui/react/pull/780))
 
+### Features
+- Add mechanism for marking icons that should rotate in rtl in teams theme; marked icons: `send`, `bullets`, `leave`, `number-list`, `outdent`, `redo`, `undo`, `send` @mnajdova ([#788](https://github.com/stardust-ui/react/pull/788))
+
 <!--------------------------------[ v0.19.0 ]------------------------------- -->
 ## [v0.19.0](https://github.com/stardust-ui/react/tree/v0.19.0) (2019-01-28)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.18.0...v0.19.0)

docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx

@@ -4,29 +4,29 @@ import { Icon, Label } from '@stardust-ui/react'
 const IconExampleSpace = () => (
   <div>
     <p>
-      <Label content="Default" />
+      <Label>Default</Label>
       <Icon name="call-video" />
-      <Label content="Default" />
+      <Label>Default</Label>
     </p>
     <p>
-      <Label content="Before" />
+      <Label>Before</Label>
       <Icon name="call-video" xSpacing="before" />
-      <Label content="Before" />
+      <Label>Before</Label>
     </p>
     <p>
-      <Label content="After" />
+      <Label>After</Label>
       <Icon name="call-video" xSpacing="after" />
-      <Label content="After" />
+      <Label>After</Label>
     </p>
     <p>
-      <Label content="Both" />
+      <Label>Both</Label>
       <Icon name="call-video" xSpacing="both" />
-      <Label content="Both" />
+      <Label>Both</Label>
     </p>
     <p>
-      <Label content="None" />
+      <Label>None</Label>
       <Icon name="call-video" xSpacing="none" />
-      <Label content="None" />
+      <Label>None</Label>
     </p>
   </div>
 )

src/themes/teams/components/Icon/iconStyles.ts

@@ -122,9 +122,11 @@ const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
       ...((bordered || v.borderColor || circular) &&
         getBorderedStyles(circular, v.borderColor || getIconColor(color, v))),
 
-      ...(rtl && {
-        transform: `scaleX(-1) rotate(${-1 * rotate}deg)`,
-      }),
+      ...(rtl &&
+        !isFontBased &&
+        iconSpec.rotateInRtl && {
+          transform: `scaleX(-1) rotate(${-1 * rotate}deg)`,
+        }),
 
       ...(!rtl && {
         transform: `rotate(${rotate}deg)`,

src/themes/teams/components/Icon/svg/icons/bullets.tsx

@@ -21,4 +21,5 @@ export default {
     </svg>
   ),
   styles: {},
+  rotateInRtl: true,
 } as TeamsSvgIconSpec

src/themes/teams/components/Icon/svg/icons/indent.tsx

@@ -32,4 +32,5 @@ export default {
     </svg>
   ),
   styles: {},
+  rotateInRtl: true,
 } as TeamsProcessedSvgIconSpec

src/themes/teams/components/Icon/svg/icons/leave.tsx

@@ -15,4 +15,5 @@ export default {
     </svg>
   ),
   styles: {},
+  rotateInRtl: true,
 } as TeamsSvgIconSpec

src/themes/teams/components/Icon/svg/icons/numberList.tsx

@@ -17,4 +17,5 @@ export default {
     </svg>
   ),
   styles: {},
+  rotateInRtl: true,
 } as TeamsProcessedSvgIconSpec

src/themes/teams/components/Icon/svg/icons/outdent.tsx

@@ -33,4 +33,5 @@ export default {
     </svg>
   ),
   styles: {},
+  rotateInRtl: true,
 } as TeamsProcessedSvgIconSpec

src/themes/teams/components/Icon/svg/icons/redo.tsx

@@ -24,4 +24,5 @@ export default {
     </svg>
   ),
   styles: {},
+  rotateInRtl: true,
 } as TeamsProcessedSvgIconSpec

src/themes/teams/components/Icon/svg/icons/send.tsx

@@ -17,4 +17,5 @@ export default {
     </svg>
   ),
   styles: {},
+  rotateInRtl: true,
 } as TeamsSvgIconSpec

src/themes/teams/components/Icon/svg/icons/undo.tsx

@@ -28,4 +28,5 @@ export default {
     </svg>
   ),
   styles: {},
+  rotateInRtl: true,
 } as TeamsProcessedSvgIconSpec

src/themes/teams/components/Icon/svg/index.ts

@@ -1,12 +1,12 @@
-import svgIconsAndStyles from './icons'
-import { SvgIconSpecWithStyles, TeamsSvgIconSpec } from './types'
+import svgIconsAndMetaData from './icons'
+import { SvgIconSpecWithMetaData, TeamsSvgIconSpec } from './types'
 
 export const getStyle = partName => {
   return args => {
     const { props } = args
 
-    const maybeIconSpec = svgIconsAndStyles[props.name]
-    const maybeIconStyles = maybeIconSpec && (maybeIconSpec as SvgIconSpecWithStyles).styles
+    const maybeIconSpec = svgIconsAndMetaData[props.name]
+    const maybeIconStyles = maybeIconSpec && (maybeIconSpec as SvgIconSpecWithMetaData).styles
 
     if (maybeIconStyles && maybeIconStyles[partName]) {
       return maybeIconStyles[partName](args)
@@ -16,4 +16,4 @@ export const getStyle = partName => {
   }
 }
 
-export default svgIconsAndStyles as { [iconName: string]: TeamsSvgIconSpec }
+export default svgIconsAndMetaData as { [iconName: string]: TeamsSvgIconSpec }

src/themes/teams/components/Icon/svg/types.d.ts

@@ -2,15 +2,16 @@ import { SvgIconSpec, ComponentSlotStyleFunction } from '../../../../types'
 import { ObjectOf } from '../../../../../../types/utils'
 import { IconProps } from '../../../../../components/Icon/Icon'
 
-type SvgIconSpecWithStyles = {
+type SvgIconSpecWithMetaData = {
   icon: SvgIconSpec
   styles: ObjectOf<ComponentSlotStyleFunction<IconProps, any>>
+  rotateInRtl?: boolean
 }
 
-export type TeamsSvgIconSpec = SvgIconSpec | SvgIconSpecWithStyles
+export type TeamsSvgIconSpec = SvgIconSpec | SvgIconSpecWithMetaData
 
 // TEMPORARY, till the moment when all necessary Teams icons will be moved
 // to this Stardust theme
-export type TeamsProcessedSvgIconSpec = SvgIconSpecWithStyles & {
+export type TeamsProcessedSvgIconSpec = SvgIconSpecWithMetaData & {
   exportedAs?: string
 }

src/themes/teams/index.ts

@@ -9,28 +9,33 @@ import * as componentStyles from './componentStyles'
 import fontFaces from './fontFaces'
 import staticStyles from './staticStyles'
 
-import { default as svgIconsAndStyles } from './components/Icon/svg'
+import { default as svgIconsAndMetaData } from './components/Icon/svg'
 import { default as fontIcons } from './components/Icon/font'
 
-import { TeamsSvgIconSpec, SvgIconSpecWithStyles } from './components/Icon/svg/types'
+import { TeamsSvgIconSpec, SvgIconSpecWithMetaData } from './components/Icon/svg/types'
 
-const declareSvg = (svgIcon: SvgIconSpec): ThemeIconSpec => ({
+const declareSvg = (svgIcon: SvgIconSpec, rotateInRtl: boolean): ThemeIconSpec => ({
   isSvg: true,
   icon: svgIcon,
+  rotateInRtl,
 })
 
 const declareFontBased = (fontIcon: FontIconSpec): ThemeIconSpec => ({ icon: fontIcon })
 
-const icons: ThemeIcons = Object.keys(svgIconsAndStyles as {
+const icons: ThemeIcons = Object.keys(svgIconsAndMetaData as {
   [iconName: string]: TeamsSvgIconSpec
 }).reduce<ThemeIcons>((accIcons, iconName) => {
-  const iconAndMaybeStyles = svgIconsAndStyles[iconName]
+  const iconAndMaybeMetaData = svgIconsAndMetaData[iconName]
 
-  const icon: SvgIconSpec = (iconAndMaybeStyles as any).styles
-    ? (iconAndMaybeStyles as SvgIconSpecWithStyles).icon
-    : (iconAndMaybeStyles as SvgIconSpec)
+  const icon: SvgIconSpec = (iconAndMaybeMetaData as any).styles
+    ? (iconAndMaybeMetaData as SvgIconSpecWithMetaData).icon
+    : (iconAndMaybeMetaData as SvgIconSpec)
 
-  return { ...accIcons, ...{ [iconName]: declareSvg(icon) } }
+  const rotateInRtl = (iconAndMaybeMetaData as any).rotateInRtl
+    ? (iconAndMaybeMetaData as any).rotateInRtl
+    : false
+
+  return { ...accIcons, ...{ [iconName]: declareSvg(icon, rotateInRtl) } }
 }, {})
 
 Object.keys(fontIcons).forEach(iconName => {

src/themes/teams/withProcessedIcons.ts

@@ -1,29 +1,38 @@
 import { ThemeInput, ThemeIcons, ThemeIconSpec, SvgIconSpec } from '../types'
 
 import { default as svgIconsAndStyles } from './components/Icon/svg/ProcessedIcons'
-import { TeamsProcessedSvgIconSpec, SvgIconSpecWithStyles } from './components/Icon/svg/types'
+import { TeamsProcessedSvgIconSpec, SvgIconSpecWithMetaData } from './components/Icon/svg/types'
 
 type ThemeProcessedIconSpec = ThemeIconSpec &
   { [K in keyof TeamsProcessedSvgIconSpec]?: TeamsProcessedSvgIconSpec[K] }
 
-const declareSvg = (svgIcon: SvgIconSpec, exportedAs?: string): ThemeProcessedIconSpec => ({
+const declareSvg = (
+  svgIcon: SvgIconSpec,
+  rotateInRtl,
+  exportedAs?: string,
+): ThemeProcessedIconSpec => ({
   isSvg: true,
   icon: svgIcon,
+  rotateInRtl,
   exportedAs,
 })
 
 const processedIcons: ThemeIcons = Object.keys(svgIconsAndStyles as {
   [iconName: string]: TeamsProcessedSvgIconSpec
 }).reduce<ThemeIcons>((accIcons, iconName) => {
-  const iconAndMaybeStyles = svgIconsAndStyles[iconName]
+  const iconAndMaybeMetaData = svgIconsAndStyles[iconName]
 
-  const icon: SvgIconSpec = (iconAndMaybeStyles as any).styles
-    ? (iconAndMaybeStyles as SvgIconSpecWithStyles).icon
-    : (iconAndMaybeStyles as SvgIconSpec)
+  const icon: SvgIconSpec = (iconAndMaybeMetaData as any).styles
+    ? (iconAndMaybeMetaData as SvgIconSpecWithMetaData).icon
+    : (iconAndMaybeMetaData as SvgIconSpec)
+
+  const rotateInRtl = (iconAndMaybeMetaData as any).rotateInRtl
+    ? (iconAndMaybeMetaData as any).rotateInRtl
+    : false
 
   return {
     ...accIcons,
-    ...{ [iconName]: declareSvg(icon, (iconAndMaybeStyles as any).exportedAs) },
+    ...{ [iconName]: declareSvg(icon, rotateInRtl, (iconAndMaybeMetaData as any).exportedAs) },
   }
 }, {})
 

src/themes/types.ts

@@ -489,6 +489,7 @@ export type FontIconSpec = ObjectOrFunc<{
 export type ThemeIconSpec = {
   isSvg?: boolean
   icon: FontIconSpec | SvgIconSpec
+  rotateInRtl?: boolean
 }
 
 export type ThemeIcons = { [iconName: string]: ThemeIconSpec }