feat(Icons): Added icon for add-page and also added missing icon sizes (#601)

* Adding icon and more sizes

* Moving add page from processed to exported

* Adding sizeModifier for large size in teams theme

* Addressing code comments

* simplify changes

* simplify changes

* adjust changelog entry

Author: priyankar205

CHANGELOG.md

@@ -44,6 +44,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Label Processed Teams icons moved to Stardust theme @kuzhelov ([#574](https://github.com/stardust-ui/react/pull/574))
 - Add `Dropdown` component @silviuavram ([#422](https://github.com/stardust-ui/react/pull/422))
 - Export `call-recording` SVG icon @Bugaa92 ([#585](https://github.com/stardust-ui/react/pull/585))
+- Export `canvas-add-page` SVG icon @priyankar205 ([#601](https://github.com/stardust-ui/react/pull/601))
+- Add `sizeModifier` variable (with `x` and `xx` values) to `Icon`'s Teams theme styles @priyankar205 ([#601](https://github.com/stardust-ui/react/pull/601))
 
 ### Documentation
 - Add `prettier` support throughout the docs @levithomason  ([#568](https://github.com/stardust-ui/react/pull/568))

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

@@ -24,23 +24,24 @@ const getDefaultFontIcon = (iconName: string) => {
 }
 
 const getFontStyles = (
-  size: string,
+  size: number,
   iconName: string,
   themeIcon?: ResultOf<FontIconSpec>,
 ): ICSSInJSStyle => {
   const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName)
+  const sizeInRems = pxToRem(size)
 
   return {
     fontFamily,
-    fontSize: getSize(size),
+    fontSize: sizeInRems,
     lineHeight: 1,
     textAlign: 'center',
 
     '::before': {
       content,
       display: 'block',
-      width: getSize(size),
-      height: getSize(size),
+      width: sizeInRems,
+      height: sizeInRems,
     },
   }
 }
@@ -71,7 +72,19 @@ const getPaddedStyle = (): ICSSInJSStyle => ({
   padding: pxToRem(4),
 })
 
-const getSize = size => pxToRem(sizes.get(size))
+const getIconSize = (size, sizeModifier): number => {
+  if (!sizeModifier) {
+    return sizes.get(size)
+  }
+  const modifiedSizes = {
+    large: {
+      x: 24,
+      xx: 28,
+    },
+  }
+
+  return modifiedSizes[size] && modifiedSizes[size][sizeModifier]
+}
 
 const getIconColor = color => color || 'currentColor'
 
@@ -91,8 +104,7 @@ const iconStyles: ComponentSlotStylesInput<IconProps, any> = {
       speak: 'none',
       verticalAlign: 'middle',
 
-      ...(isFontBased &&
-        getFontStyles(size, name, callable(iconSpec && (iconSpec.icon as FontIconSpec))())),
+      ...(isFontBased && getFontStyles(getIconSize(size, v.sizeModifier), name)),
 
       ...(isFontBased && {
         color: getIconColor(v.color),
@@ -128,10 +140,12 @@ const iconStyles: ComponentSlotStylesInput<IconProps, any> = {
   },
 
   svg: ({ props: { size, disabled }, variables: v }): ICSSInJSStyle => {
+    const iconSizeInRems = pxToRem(getIconSize(size, v.sizeModifier))
+
     return {
       display: 'block',
-      width: getSize(size),
-      height: getSize(size),
+      width: iconSizeInRems,
+      height: iconSizeInRems,
       fill: getIconColor(v.color),
 
       ...(disabled && {

src/themes/teams/components/Icon/svg/ProcessedIcons/icons-canvas-addpage.tsx

@@ -18,4 +18,5 @@ export default {
     </svg>
   ),
   styles: {},
+  exportedAs: 'canvas-add-page',
 } as TeamsProcessedSvgIconSpec

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

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { TeamsProcessedSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
+      <g>
+        <g className={classes.outlinePart}>
+          <path d="M11.5 23a.5.5 0 0 1-.5-.5V14h3.986V9.003c.005 0 .01-.003.014-.003h5.5a.5.5 0 0 1 .5.5V18h1V9.5c0-.827-.673-1.5-1.5-1.5H15c-.4 0-.777.156-1.083.463l-3.478 3.968A1.49 1.49 0 0 0 10 13.49V22.5c0 .827.673 1.5 1.5 1.5H17v-1h-5.5zm2.486-13.1V13H11.27l2.717-3.1z" />
+          <path d="M23 21h-2v-2h-1v2h-2v1h2v2h1v-2h2z" />
+        </g>
+        <g className={classes.filledPart}>
+          <path d="M23 21h-2v-2h-1v2h-2v1h2v2h1v-2h2z" />
+          <path d="M16.5 21.5c0-2.206 1.794-4 4-4 .531 0 1.036.109 1.5.297V9.5c0-.827-.673-1.5-1.5-1.5H15l-.014.001V14H10v8.5c0 .827.673 1.5 1.5 1.5h5.903a3.96 3.96 0 0 1-.903-2.5z" />
+          <path d="M13.986 13V8.405c-.022.021-.047.036-.069.058l-3.478 3.968a1.486 1.486 0 0 0-.35.569h3.897z" />
+        </g>
+      </g>
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec

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

@@ -12,6 +12,7 @@ import callEnd from './callEnd'
 import callRecording from './callRecording'
 import callVideo from './callVideo'
 import callVideoOff from './callVideoOff'
+import canvasAddPage from './canvasAddPage'
 import edit from './edit'
 import error from './error'
 import fontColor from './fontColor'
@@ -50,6 +51,7 @@ export default {
   'call-control-present-new': callControlPresentNew,
   'call-control-stop-presenting-new': callControlStopPresentingNew,
   'call-recording': callRecording,
+  'canvas-add-page': canvasAddPage,
   edit,
   error,
   format,