Merge pull request #148 from paulcpederson/master

better tooltips + version bump to 0.2.0

.gitignore

@@ -43,4 +43,6 @@ docs/build
 dist/
 docs/source/assets/img
 docs/source/assets/js/libs/calcite-web.js
-calcite-web.zip
+calcite-web.zip
+docs/source/icons.json
+lib/sass/calcite-web/icons/sets/

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

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']);
 
 };

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)

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());
+console.log(guid())
+process.exit(0)

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}')

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 `<label>` should include a red asterisk indicating visually that the field is required.
+2. The `<input>` element should have both the `required` and `aria-required="true"` attributes.

docs/source/components/_tooltips.md

@@ -1,3 +1,3 @@
 ## Tooltips
 
-Tooltips use a `data-message` attribute to provide contextual help on hover. Tooltips can apply to any element.
+Tooltips use an `aria-label` attribute to provide contextual help on hover. Tooltips can apply to any element.

docs/source/components/sample-code/_form-overview.html

@@ -1,35 +1,35 @@
 <form action="" method="post">
 
-  <label class="required">
-    Name:
-    <input type="text" id="name" required/>
+  <label>
+    Name<span class="text-red">*</span>
+    <input type="text" id="name" required aria-required="true"/>
   </label>
 
   <label>
-    E-mail:
+    E-mail
     <input type="email"/>
   </label>
 
   <label>
-    Address:
+    Address
     <input type="text"/>
   </label>
 
   <label>
-    Card Type:
+    Card Type
     <select>
       <option value="">VISA</option>
       <option value="">Mastercard</option>
     </select>
   </label>
 
   <label>
-    Credit Card Number:
+    Credit Card Number
     <input type=text pattern="[0-9]{13,16}">
   </label>
 
   <fieldset>
-    <legend>Email Preferences:</legend>
+    <legend>Email Preferences</legend>
     <label>
       <input type="checkbox"> Weekly Newsletter
     </label>
@@ -42,7 +42,7 @@
   </fieldset>
 
   <fieldset>
-    <legend>Gender:</legend>
+    <legend>Gender</legend>
     <label>
       <input type="radio" name="gender" value="male">Male
     </label>
@@ -52,10 +52,10 @@
   </fieldset>
 
   <label>
-    Message:
+    Message
     <textarea></textarea>
   </label>
 
   <button type="submit">Submit</button>
 
-</form>
+</form>

docs/source/components/sample-code/_tooltips.html

@@ -1,3 +1,7 @@
-<div class="tooltip {{modifier}}" data-message="This is the message of the tooltip">
-  <span class="icon-help">?</span>
-</div>
+<p>
+  Tooltips can be single line: <a class="tooltip {{modifier}}" aria-label="This is the message of the tooltip">single line tooltip</a>
+</p>
+<p>
+  Tooltips can also have more than one line. Just use the <code>tooltip-multiline</code> class:
+  <span class="tooltip tooltip-multiline {{modifier}}" aria-label="This is a tooltip with a quite large message if I do say so myself. Probably too long for just one line."> multiline tooltip</span>
+</p>

docs/source/table_of_contents.yml

@@ -407,6 +407,7 @@ components:
           modifiers:
             - tooltip-left
             - tooltip-right
+            - tooltip-top
         - title: 'Tables'
           id: '21d0b59b-bb08-4aac-a486-880891246ba2'
           link: tables

lib/sass/calcite-web.scss

@@ -84,7 +84,7 @@ $include-sticky:                      true    !default;
 
 // Icons
 // Multiple sets of icons, full color, monochrome
-// @import "calcite-web/icons/icons";
+@import "calcite-web/icons/icons";
 
 // Components
 // small pieces: buttons, icons, tables...

lib/sass/calcite-web/components/_button.scss

@@ -125,7 +125,6 @@
     }
   }
 
-
 @if $include-button == true {
   .btn             { @include btn();}
   .btn-arrow       { @include btn-arrow();}
@@ -140,8 +139,5 @@
   .btn-green       { @include btn-color($green, $dark-green);}
   .btn-blue        { @include btn-color($blue, $dark-blue);}
   .btn-orange      { @include btn-color($orange, $dark-orange);}
-
-
-  .btn:disabled, .btn-disabled, button[disabled] {@include btn-disabled();}
+  .btn:disabled, .btn-disabled, button[disabled] { @include btn-disabled(); }
 }
-