Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

feat(Icons): Adding chevron down, download, email, search, star icon #955

Merged
merged 9 commits into from
Feb 26, 2019
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
- Add `open`, `defaultOpen` and `onOpenChange` props for `Dropdown` component (controlled mode) @Bugaa92 ([#900](https://github.com/stardust-ui/react/pull/900))
- Add `accessibility` prop to all components that supports it @layershifter ([#927](https://github.com/stardust-ui/react/pull/927))
- Export `FocusZone` types @sophieH29 ([#943](https://github.com/stardust-ui/react/pull/943/))
- Export `chevron-down`, `download`, `search`, `email` and `star` SVG icons to the Teams Theme @pajindal([#955](https://github.com/stardust-ui/react/pull/955))

### Fixes
- Display correctly images in portrait mode inside `Avatar` @layershifter ([#899](https://github.com/stardust-ui/react/pull/899))
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,5 @@ export default {
</svg>
),
styles: {},
exportedAs: 'chevron-down',
} as TeamsProcessedSvgIconSpec
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,5 @@ export default {
</svg>
),
styles: {},
exportedAs: 'download',
} as TeamsProcessedSvgIconSpec
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,5 @@ export default {
</svg>
),
styles: {},
exportedAs: 'email',
} as TeamsProcessedSvgIconSpec
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,5 @@ export default {
</svg>
),
styles: {},
exportedAs: 'search',
} as TeamsProcessedSvgIconSpec
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,5 @@ export default {
</svg>
),
styles: {},
exportedAs: 'star',
} as TeamsProcessedSvgIconSpec
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as React from 'react'
import cx from 'classnames'
import { TeamsProcessedSvgIconSpec } from '../types'
import { teamsIconClassNames } from '../teamsIconClassNames'

export default {
icon: ({ classes }) => (
<svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
<g>
<path
className={cx(teamsIconClassNames.outline, classes.outlinePart)}
d="M16.38 20.85l7-7a.485.485 0 0 0 0-.7.485.485 0 0 0-.7 0l-6.65 6.64-6.65-6.64a.485.485 0 0 0-.7 0 .485.485 0 0 0 0 .7l7 7c.1.1.21.15.35.15.14 0 .25-.05.35-.15z"
/>
<path
className={cx(teamsIconClassNames.filled, classes.filledPart)}
d="M16.74 21.21l7-7c.19-.19.29-.43.29-.71 0-.14-.03-.26-.08-.38-.06-.12-.13-.23-.22-.32s-.2-.17-.32-.22a.995.995 0 0 0-.38-.08c-.13 0-.26.02-.39.07a.85.85 0 0 0-.32.21l-6.29 6.3-6.29-6.3a.988.988 0 0 0-.32-.21 1.036 1.036 0 0 0-.77.01c-.12.06-.23.13-.32.22s-.17.2-.22.32c-.05.12-.08.24-.08.38 0 .28.1.52.29.71l7 7c.19.19.43.29.71.29.28 0 .52-.1.71-.29z"
/>
</g>
</svg>
),
styles: {},
} as TeamsProcessedSvgIconSpec
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as React from 'react'
import cx from 'classnames'
import { TeamsProcessedSvgIconSpec } from '../types'
import { teamsIconClassNames } from '../teamsIconClassNames'

export default {
icon: ({ classes }) => (
<svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
<g>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's no harm in leaving it, but the g isn't necessary

<path
className={cx(teamsIconClassNames.outline, classes.outlinePart)}
d="M20.1 16.6L17 19.8V9.5c0-.8-1-.8-1 0v10.3l-3.1-3.1c-.5-.5-1.2.2-.7.7l4 4c.2.2.6.1.7 0l4-4c.5-.7-.4-1.3-.8-.8zM21 24h-9c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h9c.3 0 .5.2.5.5s-.2.5-.5.5z"
/>
<path
className={cx(teamsIconClassNames.filled, classes.filledPart)}
d="M21 23h-9c-.28 0-.5.22-.5.5s.22.5.5.5h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-5.21-1.29c.2.2.45.29.71.29s.51-.1.71-.29l4-4a.996.996 0 1 0-1.41-1.41l-2.29 2.29V9.5c0-.55-.45-1-1-1s-1 .45-1 1v9.09l-2.29-2.29a.996.996 0 1 0-1.41 1.41l3.98 4z"
/>
</g>
</svg>
),
styles: {},
} as TeamsProcessedSvgIconSpec
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react'
import cx from 'classnames'
import { TeamsProcessedSvgIconSpec } from '../types'
import { teamsIconClassNames } from '../teamsIconClassNames'

export default {
icon: ({ classes }) => (
<svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
<g>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's no harm in leaving it, but the g isn't necessary

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same for all other svg files

<path
className={cx(teamsIconClassNames.outline, classes.outlinePart)}
d="M22.5 11h-13c-.8 0-1.5.7-1.5 1.5v6.3c0 .7.5 1.3 1.1 1.5 1.9.4 4.5.7 6.9.7s5-.3 6.9-.7c.7-.2 1.1-.8 1.1-1.5v-6.3c0-.8-.7-1.5-1.5-1.5zm-13 1h13c.3 0 .5.2.5.5v.2l-6.7 4c-.2.1-.4.1-.6 0l-6.7-4v-.2c0-.3.2-.5.5-.5zm13.1 7.3c-1.8.4-4.3.7-6.6.7s-4.8-.3-6.6-.7c-.2-.1-.4-.3-.4-.5v-4.9l6.2 3.7c.2.2.5.2.8.2.3 0 .6-.1.8-.2l6.2-3.7v4.9c0 .2-.2.4-.4.5z"
/>
<path
className={cx(teamsIconClassNames.filled, classes.filledPart)}
d="M15.711 16.72a.51.51 0 0 0 .56.012l7.702-4.503A1.5 1.5 0 0 0 22.5 11h-13a1.5 1.5 0 0 0-1.473 1.23l7.684 4.49z"
/>
<path
className={cx(teamsIconClassNames.filled, classes.filledPart)}
d="M16.793 17.584c-.235.151-.51.228-.788.228-.282 0-.567-.08-.816-.239L8 13.371v5.423c0 .69.472 1.29 1.15 1.46 1.847.46 4.472.746 6.85.746s5.003-.286 6.851-.747A1.506 1.506 0 0 0 24 18.793v-5.421l-7.207 4.212z"
/>
</g>
</svg>
),
styles: {},
} as TeamsProcessedSvgIconSpec
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,12 @@ import callVideo from './callVideo'
import callVideoOff from './callVideoOff'
import canvasAddPage from './canvasAddPage'
import chat from './chat'
import chevronDown from './chevronDown'
import close from './close'
import codeSnippet from './codeSnippet'
import download from './download'
import edit from './edit'
import email from './email'
import emoji from './emoji'
import error from './error'
import fontColor from './fontColor'
Expand Down Expand Up @@ -54,7 +57,9 @@ import redo from './redo'
import removeFormat from './removeFormat'
import reply from './reply'
import retry from './retry'
import search from './search'
import send from './send'
import star from './star'
import sticker from './sticker'
import strike from './strike'
import table from './table'
Expand Down Expand Up @@ -89,9 +94,12 @@ export default {
'call-recording': callRecording,
'canvas-add-page': canvasAddPage,
chat,
'chevron-down': chevronDown,
close,
'code-snippet': codeSnippet,
download,
edit,
email,
emoji,
error,
format,
Expand Down Expand Up @@ -126,7 +134,9 @@ export default {
'remove-format': removeFormat,
reply,
retry,
search,
send,
star,
sticker,
strike,
table,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
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}>
alinais marked this conversation as resolved.
Show resolved Hide resolved
<path d="M22.9 22.2l-4.4-4.4c.8-.9 1.3-2.1 1.3-3.4 0-3-2.4-5.4-5.4-5.4-3 0-5.4 2.4-5.4 5.4 0 3 2.4 5.4 5.4 5.4 1.3 0 2.5-.5 3.4-1.3l4.4 4.4c.1.1.2.1.3.1.1 0 .2 0 .3-.1.2-.2.2-.5.1-.7zm-13-7.8c0-2.4 2-4.4 4.4-4.4s4.4 2 4.4 4.4-2 4.4-4.4 4.4-4.4-2-4.4-4.4z" />
</svg>
),
styles: {},
} as TeamsProcessedSvgIconSpec
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as React from 'react'
import cx from 'classnames'
import { TeamsProcessedSvgIconSpec } from '../types'
import { teamsIconClassNames } from '../teamsIconClassNames'

export default {
icon: ({ classes }) => (
<svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
<g>
<path
className={cx(teamsIconClassNames.outline, classes.outlinePart)}
d="M16.5 9.2c.2.1.3.2.4.4l1.7 3.5 3.8.6c.2 0 .4.1.6.3.2.2.2.4.2.7 0 .3-.1.5-.3.7L20.2 18l.6 3.8v.2c0 .3-.1.5-.3.7-.1.1-.2.2-.3.2s-.2.1-.3.1c-.2 0-.3 0-.5-.1L16 21.1l-3.4 1.8c-.1.1-.3.1-.5.1-.3 0-.5-.1-.7-.3-.2-.2-.3-.4-.3-.7v-.1-.1l.6-3.8L9 15.3c-.2-.2-.3-.4-.3-.7 0-.2.1-.5.2-.7.2-.2.4-.3.6-.3l3.8-.6L15 9.5c.1-.2.2-.3.4-.4s.4-.1.6-.1c.2 0 .4.1.5.2zm-2.2 4.3c-.1.1-.2.3-.3.4-.1.1-.3.2-.4.2l-3.8.6 2.8 2.7c.1.1.2.2.2.3.1.1.1.3.1.4v.2l-.8 3.7 3.4-1.8c.2-.1.3-.1.5-.1s.3 0 .5.1l3.4 1.8-.6-3.8V18c0-.1 0-.3.1-.4.1-.1.1-.2.2-.3l2.8-2.7-3.9-.6c-.2 0-.3-.1-.4-.2-.1-.1-.2-.2-.3-.4L16 10l-1.7 3.5z"
/>
<path
className={cx(teamsIconClassNames.filled, classes.filledPart)}
d="M16.605 8.175c.188.116.33.27.425.461l1.962 3.969 4.38.645c.275.036.508.164.7.385.191.227.286.478.286.752 0 .311-.116.583-.349.816l-3.171 3.09.743 4.363c.013.048.018.08.018.099v.098c0 .305-.113.57-.34.798a1.216 1.216 0 0 1-.377.255 1.065 1.065 0 0 1-.958-.04L16 21.806l-3.924 2.06a1.07 1.07 0 0 1-.528.134 1.06 1.06 0 0 1-.798-.35 1.059 1.059 0 0 1-.35-.797v-.098c0-.018.006-.05.019-.099l.743-4.363-3.171-3.09a1.117 1.117 0 0 1-.35-.816c0-.274.096-.525.287-.752.192-.22.425-.35.7-.385l4.38-.645 1.962-3.969c.095-.19.237-.345.425-.461a1.129 1.129 0 0 1 1.21 0z"
/>
</g>
</svg>
),
styles: {},
} as TeamsProcessedSvgIconSpec