Skip to content

Commit 4a90965

Browse files
layershifterlayershifter
authored
feat(Icon): update SUI to 2.3 (#2665)
1 parent 709c23a commit 4a90965

File tree

10 files changed

+721
-345
lines changed

10 files changed

+721
-345
lines changed

‎docs/app/Components/IconSearch/IconSearch.js

+130-32
Original file line numberDiff line numberDiff line change
@@ -18,31 +18,125 @@ const gridStyle = {
1818
}
1919

2020
const iconKeyToHeaderMap = {
21-
WEB_CONTENT_ICONS: 'Web Content',
22-
USER_ACTIONS_ICONS: 'User Actions',
23-
MESSAGES_ICONS: 'Messages',
24-
USERS_ICONS: 'Users',
25-
GENDER_SEXUALITY_ICONS: 'Gender & Sexuality',
26-
ACCESSIBILITY_ICONS: 'Accessibility',
27-
VIEW_ADJUSTMENT_ICONS: 'View Adjustment',
28-
LITERAL_OBJECTS_ICONS: 'Literal Objects',
29-
SHAPES_ICONS: 'Shapes',
30-
ITEM_SELECTION_ICONS: 'Item Selection',
31-
MEDIA_ICONS: 'Media',
32-
POINTERS_ICONS: 'Pointers',
33-
MOBILE_ICONS: 'Mobile',
34-
COMPUTER_ICONS: 'Computer',
35-
FILE_SYSTEM_ICONS: 'File System',
36-
TECHNOLOGIES_ICONS: 'Technologies',
37-
RATING_ICONS: 'Rating',
38-
AUDIO_ICONS: 'Audio',
39-
MAP_LOCATIONS_TRANSPORTATION_ICONS: 'Map, Locations & Transportation',
40-
TABLES_ICONS: 'Tables',
41-
TEXT_EDITOR_ICONS: 'Text Editor',
42-
CURRENCY_ICONS: 'Currency',
43-
PAYMENT_OPTIONS_ICONS: 'Payment Options',
44-
NETWORKS_AND_WEBSITE_ICONS: 'Networks And Website',
45-
ICON_ALIASES: 'Icon Aliases',
21+
ACCESSIBILITY_ICONS: {
22+
title: 'Accessibility',
23+
description: 'Icons can represent accessibility standards.',
24+
},
25+
ARROWS_ICONS: {
26+
title: 'Arrows',
27+
description: 'Icons can be used to indicate a direction.',
28+
},
29+
AUDIO_VIDEO_ICONS: {
30+
title: 'Audio & Video',
31+
description: 'Icons can be used to represent common ways to interact with audio and video.',
32+
},
33+
BUSINESS_ICONS: {
34+
title: 'Business',
35+
description: 'Icons can be used to represent business and common business actions.',
36+
},
37+
CHESS_ICONS: {
38+
title: 'Chess',
39+
description: 'Icons which represent the game chess.',
40+
},
41+
CODE_ICONS: {
42+
title: 'Code',
43+
description: 'Icons can represent programming and programming tools.',
44+
},
45+
COMMUNICATION_ICONS: {
46+
title: 'Communication',
47+
description: 'Icons which represent common ways of communication.',
48+
},
49+
COMPUTERS_ICONS: {
50+
title: 'Computers',
51+
description: 'Icons can represent computing devices, or types of content found on a computer.',
52+
},
53+
CURRENCY_ICONS: {
54+
title: 'Currency',
55+
description: 'Icons can represent units of currency.',
56+
},
57+
DATE_TIME_ICONS: {
58+
title: 'Date & Time',
59+
description: 'Icons that represent common ways of showing date and time.',
60+
},
61+
DESIGN_ICONS: {
62+
title: 'Design',
63+
description: 'Icons can represent common design related symbols or techniques.',
64+
},
65+
EDITORS_ICONS: {
66+
title: 'Editors',
67+
description: 'Icons can represent text editors and common editor actions.',
68+
},
69+
FILES_ICONS: {
70+
title: 'Files',
71+
description: 'Icons can represent elements of a computer and its file system.',
72+
},
73+
GENDERS_ICONS: {
74+
title: 'Genders',
75+
description: 'Icons can represent genders or types of sexuality.',
76+
},
77+
HANDS_ICONS: {
78+
title: 'Hands & Gestures',
79+
description: 'Icons can represent hand signals and gestures.',
80+
},
81+
HEALTH_ICONS: {
82+
title: 'Health',
83+
description: 'Icons which represent common health symbols.',
84+
},
85+
IMAGES_ICONS: {
86+
title: 'Images',
87+
description: 'Icons that represent common image symbols and actions.',
88+
},
89+
INTERFACES_ICONS: {
90+
title: 'Interfaces',
91+
description: 'Icons can represent common actions a user can take or use.',
92+
},
93+
MAPS_ICONS: {
94+
title: 'Maps',
95+
description: 'Icons can be used to represent elements on a map.',
96+
},
97+
OBJECTS_ICONS: {
98+
title: 'Objects',
99+
description: 'Icons can be used to represent common objects.',
100+
},
101+
PAYMENTS_SHOPPING_ICONS: {
102+
title: 'Payments & Shopping',
103+
description: 'Icons can represent common forms of payment and shopping actions.',
104+
},
105+
SHAPES_ICONS: {
106+
title: 'Shapes',
107+
description: 'Icons can be used to create shapes.',
108+
},
109+
SPINNERS_ICONS: {
110+
title: 'Spinners',
111+
description: 'Icons can represent loading.',
112+
},
113+
SPORTS_ICONS: {
114+
title: 'Sports',
115+
description: 'Icons which represent sports.',
116+
},
117+
STATUS_ICONS: {
118+
title: 'Status',
119+
description: 'Icons can represent different states.',
120+
},
121+
USERS_PEOPLE_ICONS: {
122+
title: 'Users & People',
123+
description: 'Icons can represent users or people.',
124+
},
125+
BRANDS_ICONS: {
126+
title: 'Brands',
127+
description: 'Icons can represent logos to common brands.',
128+
},
129+
ICON_ALIASES: {
130+
title: 'Icon Aliases',
131+
description: 'Some of icons have usefull aliases.',
132+
},
133+
DEPRECATED: {
134+
title: 'Deprecated',
135+
description: [
136+
'Icons which where removed in FontAwesome 5, but pointed them to another icon which matches or is similar for ',
137+
'compatibility reasons.',
138+
].join(''),
139+
},
46140
}
47141

48142
const similarityScore = (strA, strB) => {
@@ -104,9 +198,13 @@ export default class IconSearch extends Component {
104198
return iconKeys.map(iconKey => (
105199
<Grid key={iconKey} columns={5} doubling>
106200
<Grid.Column width={16}>
107-
<Header as='h3' textAlign='left' dividing>
108-
{iconKeyToHeaderMap[iconKey]}
109-
</Header>
201+
<Header
202+
as='h3'
203+
content={iconKeyToHeaderMap[iconKey].title}
204+
dividing
205+
subheader={iconKeyToHeaderMap[iconKey].description}
206+
textAlign='left'
207+
/>
110208
</Grid.Column>
111209
{SUI[iconKey].map(this.renderIconColumn)}
112210
</Grid>
@@ -153,10 +251,10 @@ export default class IconSearch extends Component {
153251

154252
<Message>
155253
Semantic includes a complete port of{' '}
156-
<a href='http://fontawesome.io/whats-new/' rel='noopener noreferrer' target='_blank'>Font Awesome 4.7.0</a>
157-
{' '}designed by{' '}
158-
<a href='http://www.twitter.com/davegandy' rel='noopener noreferrer'>Dave Gandy</a> for its standard icon
159-
set.
254+
<a href='https://fontawesome.com/' rel='noopener noreferrer' target='_blank'>Font Awesome 5.0.8</a>
255+
{' '}designed by the{' '}
256+
<a href='https://twitter.com/fontawesome' rel='noopener noreferrer'>FontAwesome</a> for its standard icon
257+
{' '}set.
160258
</Message>
161259

162260
<Form>

‎docs/app/Views/Theming.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,14 @@ const LayoutsExample = () => (
2525
content='Learn more about theming'
2626
labelPosition='right'
2727
href='https://semantic-ui.com/usage/theming.html'
28-
icon='external link'
28+
icon='external alternate'
2929
target='_blank'
3030
/>
3131
<Button
3232
content='Creating themes'
3333
labelPosition='right'
3434
href='http://learnsemantic.com/themes/creating.html'
35-
icon='external link'
35+
icon='external alternate'
3636
target='_blank'
3737
/>
3838

‎gulp/plugins/util/createJsIcons.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import generate from 'babel-generator'
2+
import * as t from 'babel-types'
3+
import _ from 'lodash/fp'
4+
5+
const createJsGroupExport = ([name, icons]) => {
6+
const arrayExpression = t.ArrayExpression(_.map(t.StringLiteral, icons))
7+
const variableDeclarator = t.VariableDeclarator(t.Identifier(name), arrayExpression)
8+
const variableDeclaration = t.VariableDeclaration('const', [variableDeclarator])
9+
10+
return t.ExportNamedDeclaration(variableDeclaration, [])
11+
}
12+
13+
const createJsGroupingExport = (icons) => {
14+
const names = _.filter(name => name !== 'ICON_ALIASES', _.keys(icons))
15+
16+
const arrayExpression = t.ArrayExpression(_.map(name => t.SpreadElement(t.Identifier(name)), names))
17+
const variableDeclarator = t.VariableDeclarator(t.Identifier('ICONS'), arrayExpression)
18+
const variableDeclaration = t.VariableDeclaration('const', [variableDeclarator])
19+
20+
return t.ExportNamedDeclaration(variableDeclaration, [])
21+
}
22+
23+
const createJsTotalsExport = () => {
24+
const arrayExpression = t.ArrayExpression([
25+
t.SpreadElement(t.Identifier('ICONS')),
26+
t.SpreadElement(t.Identifier('ICON_ALIASES')),
27+
])
28+
const variableDeclarator = t.VariableDeclarator(t.Identifier('ICONS_AND_ALIASES'), arrayExpression)
29+
const variableDeclaration = t.VariableDeclaration('const', [variableDeclarator])
30+
31+
return t.ExportNamedDeclaration(variableDeclaration, [])
32+
}
33+
34+
const createJsIcons = (icons) => {
35+
const ast = t.program([
36+
..._.map(createJsGroupExport, _.toPairs(icons)),
37+
createJsGroupingExport(icons),
38+
createJsTotalsExport(),
39+
])
40+
const { code } = generate(ast)
41+
42+
return code
43+
}
44+
45+
export default createJsIcons

‎gulp/plugins/util/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
export createJsIcons from './createJsIcons'
2+
export parseCssIcons from './parseCssIcons'
3+
14
export parseDefaultValue from './parseDefaultValue'
25
export parseDocBlock from './parseDocBlock'
36
export parseDocExample from './parseDocExample'

‎gulp/plugins/util/parseCssIcons.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import _ from 'lodash/fp'
2+
import css from 'css'
3+
4+
const createGroupKey = ({ comment }) => {
5+
if (comment.includes('Icons which where removed in FontAwesome 5')) return 'DEPRECATED'
6+
if (comment.includes('Aliases')) return 'ICON_ALIASES'
7+
return `${_.toUpper(_.replace(' & ', '_', _.trim(comment)))}_ICONS`
8+
}
9+
10+
const createIconName = ({ selectors }) => _.head(selectors)
11+
.replace(/i\.|icon\.|:before/g, '')
12+
.replace(/\\35 00px/, '500px')
13+
.replace(/\./g, ' ')
14+
15+
const isComment = ({ type }) => type === 'comment'
16+
17+
const isStartComment = ({ comment, type }) => type === 'comment'
18+
&& comment === '******************************\n Icons\n******************************'
19+
20+
const isEndComment = ({ comment, type }) => type === 'comment'
21+
&& comment === '******************************\n Site Overrides\n******************************'
22+
23+
const parseIcons = _.flow(
24+
_.get('stylesheet.rules'),
25+
_.dropWhile(rule => isStartComment(rule) === false),
26+
_.dropRightWhile(rule => isEndComment(rule) === false),
27+
_.slice(1, -1),
28+
_.reduce((icons, rule) => {
29+
if (isComment(rule)) {
30+
const groupKey = createGroupKey(rule)
31+
32+
return {
33+
...icons,
34+
lastKey: groupKey,
35+
[groupKey]: [],
36+
}
37+
}
38+
39+
icons[icons.lastKey].push(createIconName(rule))
40+
return icons
41+
}, {}),
42+
_.omit('lastKey'),
43+
)
44+
45+
const parseCssIcons = (bufferedContent) => {
46+
const ast = css.parse(bufferedContent.toString())
47+
48+
return parseIcons(ast)
49+
}
50+
51+
export default parseCssIcons

‎gulp/tasks/icon.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { dest, src, task } from 'gulp'
2+
import rename from 'gulp-rename'
3+
import through from 'through2'
4+
5+
import config from '../../config'
6+
import { createJsIcons, parseCssIcons } from '../plugins/util'
7+
8+
const { paths } = config
9+
const cssPath = paths.base('node_modules', 'semantic-ui-css', 'components', 'icon.css')
10+
11+
task('build:icons', () => src(cssPath)
12+
.pipe(through.obj((file, enc, cb) => {
13+
const icons = parseCssIcons(file.contents)
14+
const code = createJsIcons(icons)
15+
16+
file.contents = new Buffer(code) // eslint-disable-line no-param-reassign
17+
cb(null, file)
18+
}))
19+
.pipe(rename('icons.js'))
20+
.pipe(dest(paths.docsDist())))

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
"connect-history-api-fallback": "^1.3.0",
8686
"copy-to-clipboard": "^3.0.8",
8787
"cross-env": "^5.0.5",
88+
"css": "^2.2.1",
8889
"debug": "^3.0.1",
8990
"dirty-chai": "^2.0.1",
9091
"doctoc": "^1.3.0",
@@ -104,6 +105,7 @@
104105
"gulp-html-replace": "^1.6.2",
105106
"gulp-load-plugins": "^1.5.0",
106107
"gulp-plumber": "^1.1.0",
108+
"gulp-rename": "^1.2.2",
107109
"gulp-util": "^3.0.8",
108110
"html-webpack-plugin": "^2.30.1",
109111
"imports-loader": "^0.7.1",

0 commit comments

Comments
 (0)