feat(Icon): update SUI to 2.3

docs/app/Components/IconSearch/IconSearch.js

@@ -18,31 +18,125 @@ const gridStyle = {
 }
 
 const iconKeyToHeaderMap = {
-  WEB_CONTENT_ICONS: 'Web Content',
-  USER_ACTIONS_ICONS: 'User Actions',
-  MESSAGES_ICONS: 'Messages',
-  USERS_ICONS: 'Users',
-  GENDER_SEXUALITY_ICONS: 'Gender & Sexuality',
-  ACCESSIBILITY_ICONS: 'Accessibility',
-  VIEW_ADJUSTMENT_ICONS: 'View Adjustment',
-  LITERAL_OBJECTS_ICONS: 'Literal Objects',
-  SHAPES_ICONS: 'Shapes',
-  ITEM_SELECTION_ICONS: 'Item Selection',
-  MEDIA_ICONS: 'Media',
-  POINTERS_ICONS: 'Pointers',
-  MOBILE_ICONS: 'Mobile',
-  COMPUTER_ICONS: 'Computer',
-  FILE_SYSTEM_ICONS: 'File System',
-  TECHNOLOGIES_ICONS: 'Technologies',
-  RATING_ICONS: 'Rating',
-  AUDIO_ICONS: 'Audio',
-  MAP_LOCATIONS_TRANSPORTATION_ICONS: 'Map, Locations & Transportation',
-  TABLES_ICONS: 'Tables',
-  TEXT_EDITOR_ICONS: 'Text Editor',
-  CURRENCY_ICONS: 'Currency',
-  PAYMENT_OPTIONS_ICONS: 'Payment Options',
-  NETWORKS_AND_WEBSITE_ICONS: 'Networks And Website',
-  ICON_ALIASES: 'Icon Aliases',
+  ACCESSIBILITY_ICONS: {
+    title: 'Accessibility',
+    description: 'Icons can represent accessibility standards.',
+  },
+  ARROWS_ICONS: {
+    title: 'Arrows',
+    description: 'Icons can be used to indicate a direction.',
+  },
+  AUDIO_VIDEO_ICONS: {
+    title: 'Audio & Video',
+    description: 'Icons can be used to represent common ways to interact with audio and video.',
+  },
+  BUSINESS_ICONS: {
+    title: 'Business',
+    description: 'Icons can be used to represent business and common business actions.',
+  },
+  CHESS_ICONS: {
+    title: 'Chess',
+    description: 'Icons which represent the game chess.',
+  },
+  CODE_ICONS: {
+    title: 'Code',
+    description: 'Icons can represent programming and programming tools.',
+  },
+  COMMUNICATION_ICONS: {
+    title: 'Communication',
+    description: 'Icons which represent common ways of communication.',
+  },
+  COMPUTERS_ICONS: {
+    title: 'Computers',
+    description: 'Icons can represent computing devices, or types of content found on a computer.',
+  },
+  CURRENCY_ICONS: {
+    title: 'Currency',
+    description: 'Icons can represent units of currency.',
+  },
+  DATE_TIME_ICONS: {
+    title: 'Date & Time',
+    description: 'Icons that represent common ways of showing date and time.',
+  },
+  DESIGN_ICONS: {
+    title: 'Design',
+    description: 'Icons can represent common design related symbols or techniques.',
+  },
+  EDITORS_ICONS: {
+    title: 'Editors',
+    description: 'Icons can represent text editors and common editor actions.',
+  },
+  FILES_ICONS: {
+    title: 'Files',
+    description: 'Icons can represent elements of a computer and its file system.',
+  },
+  GENDERS_ICONS: {
+    title: 'Genders',
+    description: 'Icons can represent genders or types of sexuality.',
+  },
+  HANDS_ICONS: {
+    title: 'Hands & Gestures',
+    description: 'Icons can represent hand signals and gestures.',
+  },
+  HEALTH_ICONS: {
+    title: 'Health',
+    description: 'Icons which represent common health symbols.',
+  },
+  IMAGES_ICONS: {
+    title: 'Images',
+    description: 'Icons that represent common image symbols and actions.',
+  },
+  INTERFACES_ICONS: {
+    title: 'Interfaces',
+    description: 'Icons can represent common actions a user can take or use.',
+  },
+  MAPS_ICONS: {
+    title: 'Maps',
+    description: 'Icons can be used to represent elements on a map.',
+  },
+  OBJECTS_ICONS: {
+    title: 'Objects',
+    description: 'Icons can be used to represent common objects.',
+  },
+  PAYMENTS_SHOPPING_ICONS: {
+    title: 'Payments & Shopping',
+    description: 'Icons can represent common forms of payment and shopping actions.',
+  },
+  SHAPES_ICONS: {
+    title: 'Shapes',
+    description: 'Icons can be used to create shapes.',
+  },
+  SPINNERS_ICONS: {
+    title: 'Spinners',
+    description: 'Icons can represent loading.',
+  },
+  SPORTS_ICONS: {
+    title: 'Sports',
+    description: 'Icons which represent sports.',
+  },
+  STATUS_ICONS: {
+    title: 'Status',
+    description: 'Icons can represent different states.',
+  },
+  USERS_PEOPLE_ICONS: {
+    title: 'Users & People',
+    description: 'Icons can represent users or people.',
+  },
+  BRANDS_ICONS: {
+    title: 'Brands',
+    description: 'Icons can represent logos to common brands.',
+  },
+  ICON_ALIASES: {
+    title: 'Icon Aliases',
+    description: 'Some of icons have usefull aliases.',
+  },
+  DEPRECATED: {
+    title: 'Deprecated',
+    description: [
+      'Icons which where removed in FontAwesome 5, but pointed them to another icon which matches or is similar for ',
+      'compatibility reasons.',
+    ].join(''),
+  },
 }
 
 const similarityScore = (strA, strB) => {
@@ -104,9 +198,13 @@ export default class IconSearch extends Component {
       return iconKeys.map(iconKey => (
         <Grid key={iconKey} columns={5} doubling>
           <Grid.Column width={16}>
-            <Header as='h3' textAlign='left' dividing>
-              {iconKeyToHeaderMap[iconKey]}
-            </Header>
+            <Header
+              as='h3'
+              content={iconKeyToHeaderMap[iconKey].title}
+              dividing
+              subheader={iconKeyToHeaderMap[iconKey].description}
+              textAlign='left'
+            />
           </Grid.Column>
           {SUI[iconKey].map(this.renderIconColumn)}
         </Grid>
@@ -153,10 +251,10 @@ export default class IconSearch extends Component {
 
           <Message>
             Semantic includes a complete port of{' '}
-            <a href='http://fontawesome.io/whats-new/' rel='noopener noreferrer' target='_blank'>Font Awesome 4.7.0</a>
-            {' '}designed by{' '}
-            <a href='http://www.twitter.com/davegandy' rel='noopener noreferrer'>Dave Gandy</a> for its standard icon
-            set.
+            <a href='https://fontawesome.com/' rel='noopener noreferrer' target='_blank'>Font Awesome 5.0.8</a>
+            {' '}designed by the{' '}
+            <a href='https://twitter.com/fontawesome' rel='noopener noreferrer'>FontAwesome</a> for its standard icon
+            {' '}set.
           </Message>
 
           <Form>

docs/app/Views/Theming.js

@@ -25,14 +25,14 @@ const LayoutsExample = () => (
         content='Learn more about theming'
         labelPosition='right'
         href='https://semantic-ui.com/usage/theming.html'
-        icon='external link'
+        icon='external alternate'
         target='_blank'
       />
       <Button
         content='Creating themes'
         labelPosition='right'
         href='http://learnsemantic.com/themes/creating.html'
-        icon='external link'
+        icon='external alternate'
         target='_blank'
       />
 

gulp/plugins/util/createJsIcons.js

@@ -0,0 +1,45 @@
+import generate from 'babel-generator'
+import * as t from 'babel-types'
+import _ from 'lodash/fp'
+
+const createJsGroupExport = ([name, icons]) => {
+  const arrayExpression = t.ArrayExpression(_.map(t.StringLiteral, icons))
+  const variableDeclarator = t.VariableDeclarator(t.Identifier(name), arrayExpression)
+  const variableDeclaration = t.VariableDeclaration('const', [variableDeclarator])
+
+  return t.ExportNamedDeclaration(variableDeclaration, [])
+}
+
+const createJsGroupingExport = (icons) => {
+  const names = _.filter(name => name !== 'ICON_ALIASES', _.keys(icons))
+
+  const arrayExpression = t.ArrayExpression(_.map(name => t.SpreadElement(t.Identifier(name)), names))
+  const variableDeclarator = t.VariableDeclarator(t.Identifier('ICONS'), arrayExpression)
+  const variableDeclaration = t.VariableDeclaration('const', [variableDeclarator])
+
+  return t.ExportNamedDeclaration(variableDeclaration, [])
+}
+
+const createJsTotalsExport = () => {
+  const arrayExpression = t.ArrayExpression([
+    t.SpreadElement(t.Identifier('ICONS')),
+    t.SpreadElement(t.Identifier('ICON_ALIASES')),
+  ])
+  const variableDeclarator = t.VariableDeclarator(t.Identifier('ICONS_AND_ALIASES'), arrayExpression)
+  const variableDeclaration = t.VariableDeclaration('const', [variableDeclarator])
+
+  return t.ExportNamedDeclaration(variableDeclaration, [])
+}
+
+const createJsIcons = (icons) => {
+  const ast = t.program([
+    ..._.map(createJsGroupExport, _.toPairs(icons)),
+    createJsGroupingExport(icons),
+    createJsTotalsExport(),
+  ])
+  const { code } = generate(ast)
+
+  return code
+}
+
+export default createJsIcons

gulp/plugins/util/index.js

@@ -1,3 +1,6 @@
+export createJsIcons from './createJsIcons'
+export parseCssIcons from './parseCssIcons'
+
 export parseDefaultValue from './parseDefaultValue'
 export parseDocBlock from './parseDocBlock'
 export parseDocExample from './parseDocExample'

gulp/plugins/util/parseCssIcons.js

@@ -0,0 +1,51 @@
+import _ from 'lodash/fp'
+import css from 'css'
+
+const createGroupKey = ({ comment }) => {
+  if (comment.includes('Icons which where removed in FontAwesome 5')) return 'DEPRECATED'
+  if (comment.includes('Aliases')) return 'ICON_ALIASES'
+  return `${_.toUpper(_.replace(' & ', '_', _.trim(comment)))}_ICONS`
+}
+
+const createIconName = ({ selectors }) => _.head(selectors)
+  .replace(/i\.|icon\.|:before/g, '')
+  .replace(/\\35 00px/, '500px')
+  .replace(/\./g, ' ')
+
+const isComment = ({ type }) => type === 'comment'
+
+const isStartComment = ({ comment, type }) => type === 'comment'
+  && comment === '******************************\n            Icons\n******************************'
+
+const isEndComment = ({ comment, type }) => type === 'comment'
+  && comment === '******************************\n         Site Overrides\n******************************'
+
+const parseIcons = _.flow(
+  _.get('stylesheet.rules'),
+  _.dropWhile(rule => isStartComment(rule) === false),
+  _.dropRightWhile(rule => isEndComment(rule) === false),
+  _.slice(1, -1),
+  _.reduce((icons, rule) => {
+    if (isComment(rule)) {
+      const groupKey = createGroupKey(rule)
+
+      return {
+        ...icons,
+        lastKey: groupKey,
+        [groupKey]: [],
+      }
+    }
+
+    icons[icons.lastKey].push(createIconName(rule))
+    return icons
+  }, {}),
+  _.omit('lastKey'),
+)
+
+const parseCssIcons = (bufferedContent) => {
+  const ast = css.parse(bufferedContent.toString())
+
+  return parseIcons(ast)
+}
+
+export default parseCssIcons

gulp/tasks/icon.js

@@ -0,0 +1,20 @@
+import { dest, src, task } from 'gulp'
+import rename from 'gulp-rename'
+import through from 'through2'
+
+import config from '../../config'
+import { createJsIcons, parseCssIcons } from '../plugins/util'
+
+const { paths } = config
+const cssPath = paths.base('node_modules', 'semantic-ui-css', 'components', 'icon.css')
+
+task('build:icons', () => src(cssPath)
+  .pipe(through.obj((file, enc, cb) => {
+    const icons = parseCssIcons(file.contents)
+    const code = createJsIcons(icons)
+
+    file.contents = new Buffer(code) // eslint-disable-line no-param-reassign
+    cb(null, file)
+  }))
+  .pipe(rename('icons.js'))
+  .pipe(dest(paths.docsDist())))

package.json

@@ -85,6 +85,7 @@
     "connect-history-api-fallback": "^1.3.0",
     "copy-to-clipboard": "^3.0.8",
     "cross-env": "^5.0.5",
+    "css": "^2.2.1",
     "debug": "^3.0.1",
     "dirty-chai": "^2.0.1",
     "doctoc": "^1.3.0",
@@ -104,6 +105,7 @@
     "gulp-html-replace": "^1.6.2",
     "gulp-load-plugins": "^1.5.0",
     "gulp-plumber": "^1.1.0",
+    "gulp-rename": "^1.2.2",
     "gulp-util": "^3.0.8",
     "html-webpack-plugin": "^2.30.1",
     "imports-loader": "^0.7.1",