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

Commit 3b5c3c3

Browse files
kuzhelovkuzhelov
authored
feat(Icons): mark Processed Icons moved to Teams theme (#574)
* introduce necessary logic, mark moved icons * introduce filtering logic * address review comments * update changelog
1 parent 96e4a2a commit 3b5c3c3

File tree

300 files changed

+738
-639
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

300 files changed

+738
-639
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
3030

3131
### Features
3232
- `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491))
33+
- Label Processed Teams icons moved to Stardust theme @kuzhelov ([#574](https://github.com/stardust-ui/react/pull/574))
3334

3435
### Documentation
3536
- Add `prettier` support throughout the docs @levithomason ([#568](https://github.com/stardust-ui/react/pull/568))

‎docs/src/prototypes/IconViewer/index.tsx

+89-42
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,46 @@
11
import * as React from 'react'
22
import { Provider, Grid, Divider, Header, Icon } from '@stardust-ui/react'
33
import themeWithProcessedIcons from 'src/themes/teams/withProcessedIcons'
4+
import { TeamsProcessedSvgIconSpec } from 'src/themes/teams/components/Icon/svg/types'
5+
6+
import { Menu, Segment } from 'semantic-ui-react'
47

58
const cellStyles = {
69
margin: '10px 0',
710
}
811

912
const processedIconsNamePrefix = 'processedIcons_'
1013

14+
const renderStardustIconName = (icon, isOutline = false) => {
15+
const maybeExportedAs = (icon as any).exportedAs
16+
return (
17+
maybeExportedAs && (
18+
<code style={{ color: 'red' }}>
19+
=> {maybeExportedAs} {isOutline && 'outline'}
20+
</code>
21+
)
22+
)
23+
}
24+
1125
class IconViewerExample extends React.Component<any, {}> {
26+
private readonly iconFilters = {
27+
All: () => true,
28+
Exported: (icon: TeamsProcessedSvgIconSpec) => icon.exportedAs,
29+
'Not Exported': (icon: TeamsProcessedSvgIconSpec) => !icon.exportedAs,
30+
}
31+
32+
state = {
33+
filter: 'All',
34+
}
35+
36+
applyCurrentFilter(icon) {
37+
const currentFilter = this.iconFilters[this.state.filter]
38+
return currentFilter(icon)
39+
}
40+
1241
render() {
1342
return (
14-
<div style={{ margin: '20px' }}>
43+
<Segment styles={{ padding: '30px' }}>
1544
<Header
1645
as="h3"
1746
content="Teams Icons"
@@ -21,49 +50,67 @@ class IconViewerExample extends React.Component<any, {}> {
2150
styles: { fontSize: '16px' },
2251
}}
2352
/>
24-
<Provider theme={themeWithProcessedIcons}>
25-
<Provider.Consumer
26-
render={theme => (
27-
<div>
28-
<div>
29-
<Divider>
30-
<Header as="h3" content="Regular" />
31-
</Divider>
32-
<Grid columns={4} style={{ textAlign: 'center' }}>
33-
{Object.keys(theme.icons)
34-
.filter(name => name.startsWith(processedIconsNamePrefix))
35-
.sort()
36-
.map(name => (
37-
<div key={name} style={cellStyles}>
38-
<Icon name={name} />
39-
<br />
40-
<code>{name.replace(processedIconsNamePrefix, '')}</code>
41-
</div>
42-
))}
43-
</Grid>
44-
</div>
53+
54+
<div style={{ marginTop: '15px' }}>
55+
<Menu tabular style={{ margin: '15px 0' }}>
56+
{Object.keys(this.iconFilters).map(filterName => (
57+
<Menu.Item
58+
key={filterName}
59+
name={filterName}
60+
active={this.state.filter === filterName}
61+
onClick={() => this.setState({ filter: filterName })}
62+
/>
63+
))}
64+
</Menu>
65+
66+
<Provider theme={themeWithProcessedIcons}>
67+
<Provider.Consumer
68+
render={theme => (
4569
<div>
46-
<Divider>
47-
<Header as="h3" content="Outline" />
48-
</Divider>
49-
<Grid columns={4} style={{ textAlign: 'center' }}>
50-
{Object.keys(theme.icons)
51-
.filter(name => name.startsWith(processedIconsNamePrefix))
52-
.sort()
53-
.map(name => (
54-
<div key={`${name}-outline`} style={cellStyles}>
55-
<Icon name={name} variables={{ outline: true }} />
56-
<br />
57-
<code>{name.replace(processedIconsNamePrefix, '')} outline</code>
58-
</div>
59-
))}
60-
</Grid>
70+
<div>
71+
<Header as="h3" content="Regular" textAlign="center" />
72+
<Grid columns={4} style={{ textAlign: 'center' }}>
73+
{Object.keys(theme.icons)
74+
.filter(name => name.startsWith(processedIconsNamePrefix))
75+
.filter(name => this.applyCurrentFilter(theme.icons[name]))
76+
.sort()
77+
.map(name => (
78+
<div key={name} style={cellStyles}>
79+
<Icon name={name} />
80+
<br />
81+
<code>{name.replace(processedIconsNamePrefix, '')}</code>
82+
<br />
83+
{renderStardustIconName(theme.icons[name])}
84+
</div>
85+
))}
86+
</Grid>
87+
</div>
88+
<div>
89+
<Divider>
90+
<Header as="h3" content="Outline" textAlign="center" />
91+
</Divider>
92+
<Grid columns={4} style={{ textAlign: 'center' }}>
93+
{Object.keys(theme.icons)
94+
.filter(name => name.startsWith(processedIconsNamePrefix))
95+
.filter(name => this.applyCurrentFilter(theme.icons[name]))
96+
.sort()
97+
.map(name => (
98+
<div key={`${name}-outline`} style={cellStyles}>
99+
<Icon name={name} variables={{ outline: true }} />
100+
<br />
101+
<code>{name.replace(processedIconsNamePrefix, '')} outline</code>
102+
<br />
103+
{renderStardustIconName(theme.icons[name], /* isOutline */ true)}
104+
</div>
105+
))}
106+
</Grid>
107+
</div>
61108
</div>
62-
</div>
63-
)}
64-
/>
65-
</Provider>
66-
</div>
109+
)}
110+
/>
111+
</Provider>
112+
</div>
113+
</Segment>
67114
)
68115
}
69116
}

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-accept.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -17,4 +17,4 @@ export default {
1717
</svg>
1818
),
1919
styles: {},
20-
} as TeamsSvgIconSpec
20+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-add-participant.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -15,4 +15,5 @@ export default {
1515
</svg>
1616
),
1717
styles: {},
18-
} as TeamsSvgIconSpec
18+
exportedAs: 'participant-add',
19+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-add.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -17,4 +17,5 @@ export default {
1717
</svg>
1818
),
1919
styles: {},
20-
} as TeamsSvgIconSpec
20+
exportedAs: 'add',
21+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-analytics.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -15,4 +15,4 @@ export default {
1515
</svg>
1616
),
1717
styles: {},
18-
} as TeamsSvgIconSpec
18+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-apps.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -17,4 +17,4 @@ export default {
1717
</svg>
1818
),
1919
styles: {},
20-
} as TeamsSvgIconSpec
20+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-archive.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -15,4 +15,4 @@ export default {
1515
</svg>
1616
),
1717
styles: {},
18-
} as TeamsSvgIconSpec
18+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-arrow-down.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -8,4 +8,4 @@ export default {
88
</svg>
99
),
1010
styles: {},
11-
} as TeamsSvgIconSpec
11+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-arrow-left.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -8,4 +8,4 @@ export default {
88
</svg>
99
),
1010
styles: {},
11-
} as TeamsSvgIconSpec
11+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-arrow-right.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -8,4 +8,4 @@ export default {
88
</svg>
99
),
1010
styles: {},
11-
} as TeamsSvgIconSpec
11+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-arrow-up-small.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -15,4 +15,4 @@ export default {
1515
</svg>
1616
),
1717
styles: {},
18-
} as TeamsSvgIconSpec
18+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-arrow-up.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -8,4 +8,4 @@ export default {
88
</svg>
99
),
1010
styles: {},
11-
} as TeamsSvgIconSpec
11+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-assignments.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -15,4 +15,4 @@ export default {
1515
</svg>
1616
),
1717
styles: {},
18-
} as TeamsSvgIconSpec
18+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-attachment.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -15,4 +15,4 @@ export default {
1515
</svg>
1616
),
1717
styles: {},
18-
} as TeamsSvgIconSpec
18+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-audio.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -8,4 +8,4 @@ export default {
88
</svg>
99
),
1010
styles: {},
11-
} as TeamsSvgIconSpec
11+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-backspace.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -17,4 +17,4 @@ export default {
1717
</svg>
1818
),
1919
styles: {},
20-
} as TeamsSvgIconSpec
20+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-badge-add.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -19,4 +19,4 @@ export default {
1919
</svg>
2020
),
2121
styles: {},
22-
} as TeamsSvgIconSpec
22+
} as TeamsProcessedSvgIconSpec

‎src/themes/teams/components/Icon/svg/ProcessedIcons/icons-badge.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { TeamsSvgIconSpec } from '../types'
2+
import { TeamsProcessedSvgIconSpec } from '../types'
33

44
export default {
55
icon: ({ classes }) => (
@@ -18,4 +18,4 @@ export default {
1818
</svg>
1919
),
2020
styles: {},
21-
} as TeamsSvgIconSpec
21+
} as TeamsProcessedSvgIconSpec

0 commit comments

Comments
 (0)