diff --git a/.gitignore b/.gitignore index c91204a49..29792e4e7 100644 --- a/.gitignore +++ b/.gitignore @@ -43,4 +43,6 @@ docs/build dist/ docs/source/assets/img docs/source/assets/js/libs/calcite-web.js -calcite-web.zip \ No newline at end of file +calcite-web.zip +docs/source/icons.json +lib/sass/calcite-web/icons/sets/ diff --git a/CHANGELOG.md b/CHANGELOG.md index 628cdd0d7..57e2e8b18 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ +## 0.2.1 + +### Changed +- tooltips use `aria-label` for tooltip text +- Modify tooltip styles +- Multi-line tooltips +- Custom `select` style + +### Removed +- `label.required` + ## 0.1.2 ### Added diff --git a/Gruntfile.js b/Gruntfile.js index 44382b769..281ca7cb5 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -23,7 +23,7 @@ module.exports = function(grunt) { 'dev': { root: 'docs/build', port: 8888, - host: 'local.arcgis.com', + host: '0.0.0.0', cache: 0, showDir : true, autoIndex: true, @@ -56,6 +56,12 @@ module.exports = function(grunt) { 'copy:doc' ] }, + icons: { + files: ['lib/img/icons/**/*.svg'], + tasks: [ + 'shell:icons' + ] + }, libsass: { files: ['lib/sass/**/*', 'docs/source/assets/css/**/*'], tasks: [ @@ -238,11 +244,17 @@ module.exports = function(grunt) { // bin scripts 'shell': { + guid: { + command: 'bin/guid.js', // Generate a unique id for a new section + }, deploy: { - command: 'node bin/deploy.js', // Create a JSON record of current documentation + command: 'bin/deploy.js', // Create a JSON record of current documentation }, release: { - command: 'bin/release.sh' // Create GitHub release that includes dist + command: 'bin/release.sh' // Create GitHub release that includes dist + }, + icons: { + command: 'bin/icons.js' // Create a sass file with all icons from icon folder } }, @@ -299,6 +311,7 @@ module.exports = function(grunt) { // Build a dist folder with all assets grunt.registerTask('prepublish', [ + 'shell:icons', 'concurrent:prepublish' ]); @@ -334,6 +347,6 @@ module.exports = function(grunt) { ]); // Default task starts up a dev environment - grunt.registerTask('default', ['dev']); + grunt.registerTask('default', ['prepublish', 'dev']); }; diff --git a/bin/deploy.js b/bin/deploy.js old mode 100644 new mode 100755 index 4834738a9..84fbc121a --- a/bin/deploy.js +++ b/bin/deploy.js @@ -1,22 +1,21 @@ +#!/usr/bin/env node // ┌───────────────┐ // │ Deploy Script │ // └───────────────┘ // Builds a json file with all site content -var fs = require('fs'); -var jf = require('jsonfile'); -var path = require('path'); -var yaml = require('js-yaml'); -var mark = require('marked'); - -var now = Date.now(); +var fs = require('fs') +var jf = require('jsonfile') +var path = require('path') +var yaml = require('js-yaml') +var mark = require('marked') +var now = Date.now() var response = { elements: [], colors: [] -}; +} function constructItem(content, meta) { - var item = { _id: content.id, name: content.title, @@ -26,55 +25,56 @@ function constructItem(content, meta) { LastModified: now } - var markdownPath = path.join('docs', 'source', meta.page_slug, '_' + item.slug + '.md'); - var markdown = fs.readFileSync(markdownPath, 'utf8'); + var markdownPath = path.join('docs', 'source', meta.page_slug, '_' + item.slug + '.md') + var markdown = fs.readFileSync(markdownPath, 'utf8') - item.description = JSON.stringify(mark(markdown)); + item.description = JSON.stringify(mark(markdown)) if (content.modifiers) { - item.modifiers = content.modifiers; - var samplePath = path.join('docs', 'source', meta.page_slug, 'sample-code', '_' + item.slug + '.html'); - var sample = fs.readFileSync(samplePath, 'utf8'); - item.sample_code = JSON.stringify(sample); + item.modifiers = content.modifiers + var samplePath = path.join('docs', 'source', meta.page_slug, 'sample-code', '_' + item.slug + '.html') + var sample = fs.readFileSync(samplePath, 'utf8') + item.sample_code = JSON.stringify(sample) } if (meta.group == 'Palette') { - response.colors.push(item); + response.colors.push(item) } else { - response.elements.push(item); + response.elements.push(item) } - } -var contents = yaml.safeLoad(fs.readFileSync('docs/source/table_of_contents.yml', 'utf8')); -var counter = 0; +var contents = yaml.safeLoad(fs.readFileSync('docs/source/table_of_contents.yml', 'utf8')) +var counter = 0 for (var key in contents) { var meta = { page: contents[key].title, page_slug: contents[key].base, page_order: counter - }; + } contents[key].navigation.forEach(function (group, index){ - meta.group = group.group; - meta.group_order = index; + meta.group = group.group + meta.group_order = index - var orderArray = []; + var orderArray = [] - for (var i = group.pages.length; i > 0; i--) { - orderArray.push(i); + for (var i = group.pages.length i > 0 i--) { + orderArray.push(i) } group.pages.forEach(function (element, i){ - meta.order = orderArray[i]; + meta.order = orderArray[i] if (element.title == 'Overview') { - meta.order == 100; + meta.order == 100 } - constructItem(element, meta); - }); - }); - counter++; + constructItem(element, meta) + }) + }) + counter++ } -jf.writeFileSync('dist/content.json', response); -jf.writeFileSync('docs/build/content.json', response); +jf.writeFileSync('dist/content.json', response) +jf.writeFileSync('docs/build/content.json', response) + +process.exit(0) diff --git a/bin/guid.js b/bin/guid.js old mode 100644 new mode 100755 index 18553fad4..09230d61d --- a/bin/guid.js +++ b/bin/guid.js @@ -1,8 +1,10 @@ -function guid(){ +#!/usr/bin/env node +function guid () { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { - var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); - return v.toString(16); - }); + var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8) + return v.toString(16) + }) } -console.log(guid()); \ No newline at end of file +console.log(guid()) +process.exit(0) diff --git a/bin/icons.js b/bin/icons.js new file mode 100755 index 000000000..584d1c486 --- /dev/null +++ b/bin/icons.js @@ -0,0 +1,39 @@ +#!/usr/bin/env node +// Builds a .scss file with all site icons +var glob = require('glob') +var fs = require('fs') +var path = require('path') +var format = require('util').format + +var sets = ['calcite', 'calcite-large', 'vecticons'] + +function comma (index, array) { + var needsComma = index !== array.length - 1 + return needsComma ? ',' : '' +} + +function formatLine (files, i) { + var icon = path.basename(files[i], '.svg') + return format('\n "%s"%s', icon, comma(i, files)) +} + +function parseFiles (setName, index) { + var files = glob.sync(format('lib/img/icons/%s/*.svg', setName)) + var sassStream = fs.createWriteStream(format('lib/sass/calcite-web/icons/sets/%s.scss', setName), 'utf8') + + dataStream.write(format('\n "%s": [', setName)) + sassStream.write(format('$%s-icons:', setName)) + + files.forEach(function (file, i) { + var line = formatLine(files, i) + dataStream.write(line) + sassStream.write(line) + }) + sassStream.end(';') + dataStream.write(format('\n ]%s', comma(index, sets))) +} + +var dataStream = fs.createWriteStream('docs/source/icons.json', 'utf8') +dataStream.write('{') +sets.forEach(parseFiles) +dataStream.end('\n}') diff --git a/docs/source/components/_form-overview.md b/docs/source/components/_form-overview.md index 4f3e7e28a..907ebdae5 100644 --- a/docs/source/components/_form-overview.md +++ b/docs/source/components/_form-overview.md @@ -2,4 +2,9 @@ The forms section provides basic styling of form elements in addition to a basic reset. -Labels for form elements should describe what the field is, while placeholder text should describe the specifics about formatting or examples for the input text. +Labels for form elements should describe what the field is, while placeholder text should describe the specifics about formatting or examples for the input text. Labels should **not** be followed by a semicolon. + +Required form fields should be labeled with two things: + +1. The `