diff --git a/.travis.yml b/.travis.yml index 8af81502..1920a512 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,4 @@ language: node_js +sudo: false node_js: - - "0.12" \ No newline at end of file + - "0.12" diff --git a/README.md b/README.md index 9cbb1f59..3e81922c 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,8 @@ # ractive-foundation [![Build Status](https://travis-ci.org/ractive-foundation/ractive-foundation.svg?branch=master)](https://travis-ci.org/ractive-foundation/ractive-foundation) - [![Code Quality](https://www.codacy.com/project/badge/abe39910d64144fc9219964f3652dbda)](https://www.codacy.com/app/pv-shum/ractive-foundation) - [![bitHound Score](https://www.bithound.io/github/ractive-foundation/ractive-foundation/badges/score.svg)](https://www.bithound.io/github/ractive-foundation/ractive-foundation/master) - -[![Dependencies Status](https://david-dm.org/tractive-foundatio/ractive-foundation.svg)](https://david-dm.org/ractive-foundation/ractive-foundation.svg) - +[![Dependencies Status](https://david-dm.org/tractive-foundatio/ractive-foundation.svg)](https://david-dm.org/ractive-foundation/ractive-foundation) [![Join the chat at https://gitter.im/themacclesoft/ractive-foundation](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/themacclesoft/ractive-foundation?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) ## Overview @@ -108,3 +104,55 @@ is basically the same as: Like ``` + +## Accessibility (a11y) + +ractive-foundation uses [a11y](http://addyosmani.github.io/a11y/) with gulp for automated accessibility testing. + +Example uses: + +``` +# Build and audit entire component list +gulp a11y + +# Skip the build process, just audit +gulp a11y-only + +# Single component with all its use cases +gulp a11y --component=ux-button +gulp a11y -c ux-button +gulp a11y-only --component=ux-button + +# Run only a single use case +gulp a11y --component ux-button --usecase ClickMe +gulp a11y -c ux-button -u ClickMe +gulp a11y-only --component=ux-button --usecase=ClickMe +``` + +Example usage (failure): + +``` +$ gulp a11y-only -c ux-button -u BuyNow +[17:59:54] Using gulpfile ~/dev/projects/ractive-foundation/gulpfile.js +[17:59:54] Starting 'a11y-connect'... +[17:59:55] Finished 'a11y-connect' after 139 ms +[17:59:55] Starting 'a11y-only'... +[17:59:55] Server started http://localhost:8089 +[17:59:56] a11y FAIL http://localhost:8089/testRunner.html#!/component/ux-button/use-case/BuyNow + +*** Begin accessibility audit results *** +An accessibility audit found +Warnings: +Warning: AX_COLOR_01 (Text elements should have a reasonable contrast ratio) failed on the following element: +#childComponent > .button +See https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_color_01 for more information. + +Warning: AX_FOCUS_03 (Avoid positive integer values for tabIndex) failed on the following element: +#childComponent > .button +See https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_03 for more information. + + +*** End accessibility audit results *** + +[17:59:56] 'a11y-only' errored after 1.37 s One or more a11y tests failed, see log. +``` \ No newline at end of file diff --git a/TODO.md b/TODO.md new file mode 100644 index 00000000..d4cb97af --- /dev/null +++ b/TODO.md @@ -0,0 +1,61 @@ +# Foundation elements still to be created + +## Structure +* Media Queries +* Visibility +* Grid +* Block Grid +* Interchange Responsive Content JS +* Utility Classes +* Javascript Utilities +* Right-to-Left Support + +## Navigation +* ~~Off-canvas JS~~ +* ~~Top Bar JS~~ +* ~~Icon Bar~~ +* ~~Side Nav~~ +* Magellan Sticky Nav JS (#198) +* _Sub Nav_ (#102) +* _Breadcrumbs_ (#132) +* _Pagination_ (#134) + +## Media +* ~~Orbit Slider JS~~ +* ~~Thumbnails~~ (#182) +* Clearing Lightbox JS (#199) +* Flex Video (#200) + +## Forms +* Forms (#201) +* Switches (#136) +* Range Sliders JS (#141) +* Abide Validation JS (#202) + +## Buttons +* ~~Buttons~~ +* Button Groups (#203) +* Split Buttons JS (#204) +* Dropdown Buttons JS (#205) + +## Typography +* Type (#207) +* Inline Lists (#208) +* Labels (#151) +* Keystrokes (#209) + +## Callouts & Prompts +* Reveal Modal JS (#210) +* ~~Alerts JS~~ +* ~~Panels~~ +* Tooltips JS (#211) +* Joyride JS (#212) + +## Content +* Dropdowns JS (#213) +* ~~Pricing Tables~~ (#214) +* Progress Bars (#215) +* Tables (#216) +* ~~Accordion JS~~ +* ~~Tabs JS~~ +* Equalizer JS (#125) diff --git a/bin/versionCheck.js b/bin/versionCheck.js index 40d0dbf8..e86cc981 100644 --- a/bin/versionCheck.js +++ b/bin/versionCheck.js @@ -1,6 +1,7 @@ const MINIMUM_VERSION = '0.12.0'; var compareVersions = function (installed, required) { + installed = installed.replace(/^v/, ''); var a = installed.split('.'); var b = required.split('.'); diff --git a/dist/css/components.css b/dist/css/components.css index 4fb34731..9583fa6c 100644 --- a/dist/css/components.css +++ b/dist/css/components.css @@ -6,6 +6,7 @@ + .ux-orbit .orbit-container { height: 100%; position: relative; @@ -69,3 +70,4 @@ + diff --git a/dist/css/hljs-cdn-release/build/styles/github.min.css b/dist/css/hljs-cdn-release/build/styles/github.min.css new file mode 100644 index 00000000..4da53471 --- /dev/null +++ b/dist/css/hljs-cdn-release/build/styles/github.min.css @@ -0,0 +1 @@ +.hljs{display:block;overflow-x:auto;padding:0.5em;color:#333;background:#f8f8f8;-webkit-text-size-adjust:none}.hljs-comment,.diff .hljs-header,.hljs-javadoc{color:#998;font-style:italic}.hljs-keyword,.css .rule .hljs-keyword,.hljs-winutils,.nginx .hljs-title,.hljs-subst,.hljs-request,.hljs-status{color:#333;font-weight:bold}.hljs-number,.hljs-hexcolor,.ruby .hljs-constant{color:#008080}.hljs-string,.hljs-tag .hljs-value,.hljs-phpdoc,.hljs-dartdoc,.tex .hljs-formula{color:#d14}.hljs-title,.hljs-id,.scss .hljs-preprocessor{color:#900;font-weight:bold}.hljs-list .hljs-keyword,.hljs-subst{font-weight:normal}.hljs-class .hljs-title,.hljs-type,.vhdl .hljs-literal,.tex .hljs-command{color:#458;font-weight:bold}.hljs-tag,.hljs-tag .hljs-title,.hljs-rules .hljs-property,.django .hljs-tag .hljs-keyword{color:#000080;font-weight:normal}.hljs-attribute,.hljs-variable,.lisp .hljs-body{color:#008080}.hljs-regexp{color:#009926}.hljs-symbol,.ruby .hljs-symbol .hljs-string,.lisp .hljs-keyword,.clojure .hljs-keyword,.scheme .hljs-keyword,.tex .hljs-special,.hljs-prompt{color:#990073}.hljs-built_in{color:#0086b3}.hljs-preprocessor,.hljs-pragma,.hljs-pi,.hljs-doctype,.hljs-shebang,.hljs-cdata{color:#999;font-weight:bold}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.diff .hljs-change{background:#0086b3}.hljs-chunk{color:#aaa} \ No newline at end of file diff --git a/dist/manifest-rf.json b/dist/manifest-rf.json index b7f23468..cb283f27 100644 --- a/dist/manifest-rf.json +++ b/dist/manifest-rf.json @@ -1 +1 @@ -[{"componentName":"ux-accordion","readme":"> Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.\n\nSee [Foundation's accordion.html docs](http://foundation.zurb.com/docs/components/accordion.html) for details.\n\nFeatures:\n\n* (TODO) Distributed accordion groups\n* (TODO) Accessibility\n* (TODO) Callbacks (fire RactiveJS semantic event)","manifest":{"data":{"items":"Array of items - see ux-accordionitem."},"events":{}},"useCases":[{"title":"Default - Three Accordions","isDataModel":true,"data":{"items":[{"title":"Accordion item 1","content":"Accordion 1: Lorem ipsum dolor"},{"title":"Accordion item 2","content":"Accordion 2: Lorem ipsum dolor"},{"title":"Accordion item 3","content":"Accordion 3: Lorem ipsum dolor"}]}}]},{"componentName":"ux-alert","readme":"> Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.\n\nRead [Foundation's alert](http://foundation.zurb.com/docs/components/alert_boxes.html) docs for more details.","manifest":{"data":{"text":"The text to display on the alert","class":"[success warning info alert secondary] [round radius]"},"category":"Callouts & Prompts"},"useCases":[{"title":"Alert round class","isDataModel":true,"data":{"text":"This is an alert - alert that is rounded.","class":"alert round"}},{"title":"Info radius class","isDataModel":true,"data":{"text":"This is an info alert with a radius.","class":"info radius"}},{"title":"Secondary class","isDataModel":true,"data":{"text":"This is a secondary alert.","class":"secondary"}},{"title":"Default","isDataModel":true,"data":{"text":"This is a standard alert."}},{"title":"Success radius class","isDataModel":true,"data":{"text":"This is a success alert with a radius.","class":"success radius"}},{"title":"Warning round class","isDataModel":true,"data":{"text":"This is a warning alert that is rounded.","class":"warning round"}}]},{"componentName":"ux-button","readme":"\n> This renders a button\n","manifest":{"data":{"text":"The text to display on the button","url":"The link to follow when the button is clicked"},"events":{"onclick":"Event to fire when button is clicked"}},"useCases":[{"title":"Buy Now Button","data":{"text":"Buy Now","role":"button","ariaLabel":"somelabel","tabindex":10,"onclick":"BuyBuyBuy"}},{"title":"Click Me Button","data":{"text":"ClickMe","onclick":"WasClicked"}}]},{"componentName":"ux-iconbar","readme":"An Icon Bar provides a menu to quickly navigate an app.\nUse the Icon Bar horizontally or vertically,\nwith the labels below the icons or to the right. Have it your way.","manifest":{"data":{"class":"CSS class.","items":"List of child items"},"category":"navigation"},"useCases":[{"title":"Default iconbar","isDataModel":true,"data":{"class":"","items":[{"href":"/","src":"images/fi-home.svg","label":"Home"},{"href":"/path/to/blah","src":"images/fi-bookmark.svg","label":"Bookmark"},{"src":"images/fi-info.svg","label":"Info","class":"disabled"},{"src":"images/fi-mail.svg","label":"Mail"},{"src":"images/fi-like.svg","label":"Like"}]}},{"title":"Label right","isDataModel":true,"data":{"class":"label-right","items":[{"href":"/","src":"images/fi-home.svg","label":"Home"},{"href":"/path/to/blah","src":"images/fi-bookmark.svg","label":"Bookmark"},{"src":"images/fi-info.svg","label":"Info","class":"disabled"},{"src":"images/fi-mail.svg","label":"Mail"},{"src":"images/fi-like.svg","label":"Like"}]}}]},{"componentName":"ux-label","readme":"> Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a label that notes when something was updated.\n\nRead [Foundation's label](http://foundation.zurb.com/docs/components/labels.html) docs for more details.","manifest":{"data":{"text":"The text to display on the label","class":"[success warning info alert secondary] [round radius] label"},"category":"typography"},"useCases":[{"title":"info class","isDataModel":true,"data":{"text":"Info","class":"info"}},{"title":"secondary radius class","isDataModel":true,"data":{"text":"Secondary Radius","class":"radius secondary"}},{"title":"Default class","isDataModel":true,"data":{"text":"Default","class":""}},{"title":"alert round class","isDataModel":true,"data":{"text":"Round Alert","class":"alert round"}},{"title":"success class","isDataModel":true,"data":{"text":"Success","class":"success"}},{"title":"warning class","isDataModel":true,"data":{"text":"Warning","class":"warning"}}]},{"componentName":"ux-off-canvas","readme":"> Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy.\n\nRead [Foundation's offcanvas.html](http://foundation.zurb.com/docs/components/offcanvas.html) docs for more details.\n","manifest":{"data":{"title":"The text to display on the ux-off-canvas component","expandedState":"left, right or empty string","leftItems":"Array of nav items for the LHS","rightItems":"Array of nav items for the RHS","mainContent":"HTML string with component's contents."},"events":{},"category":"navigation"},"useCases":[{"title":"data-driven example","isDataModel":true,"data":{"title":"UX Off Canvas Data Demo","expandedState":"","leftItems":[{"label":"Learn More"},{"label":"Home","href":"."},{"label":"интернационализация","href":"."},{"label":"Data","href":"data.html"},{"label":"Demo","href":"demo.html"},{"label":"External Links"},{"label":"Foundation docs","href":"http://foundation.zurb.com/docs/"},{"label":"RactiveJS docs","href":"http://docs.ractivejs.org/latest/get-started","target":"_blank"}],"rightItems":[{"label":"Asimov's Works"},{"label":"Recommended order","href":"http://scifi.stackexchange.com/questions/39669/what-is-the-correct-order-for-reading-material-of-isaac-asimov"}],"mainContent":"

Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.

"}}]},{"componentName":"ux-orbit","readme":"> ux-orbit Documentation\n","manifest":{"data":{"text":"The text to display on the ux-orbit component","url":"The link to follow when the component is clicked"},"events":{"onclick":"Event to fire when component is clicked"},"category":"media"},"useCases":[{"title":"Data driven use case","isDataModel":true,"data":{"items":[{"imagesrc":"http://placekitten.com/g/1500/500","link":".","imagealt":"Slide 1","caption":"Caption One","active":true},{"imagesrc":"http://placekitten.com/1500/500","imagealt":"Slide 2","link":".","caption":"Caption Two","active":false},{"content":"","active":false}]}}]},{"componentName":"ux-panel","readme":"> A panel is a simple, helpful Foundation component that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them, or add emphasis to a section. The width is controlled by the grid columns you put them inside.\n\nSee [Foundation's panels.html](http://foundation.zurb.com/docs/components/panels.html) for details.\n\nExample markup:\n\n```html\n\n Lorem ipsum dolor sit amet...\n\n```","manifest":{"data":{"text":"The text to display on the button"},"events":{}},"useCases":[{"title":"Default panel","data":{"text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}}]},{"componentName":"ux-progress","readme":"> ux-progress Documentation\n","manifest":{"data":{"class":"round, success, alert, secondary","value":"0-100"},"events":{},"category":"content"},"useCases":[{"title":"default","isDataModel":true,"data":{"class":"","value":50}},{"title":"success round","isDataModel":true,"data":{"class":"success round","value":78}},{"title":"alert round","isDataModel":true,"data":{"class":"alert round","value":99}},{"title":"no data","isDataModel":true,"data":{}}]},{"componentName":"ux-sidenav","readme":"> Side nav, like you see on the Foundation docs, is a great way to provide navigation for your entire site, or for sections of an individual page.\n\nRead [Foundation's sidenav.html](http://foundation.zurb.com/docs/components/sidenav.html) docs for more details.\n\nExample markup:\n\n```html\n\n Link 1\n Link 2\n \n Link 3\n Link 4\n\n```\n","manifest":{"data":{"title":"For accessibility - define the title of this navigation element.","items":"Array of objects - see use case for example."},"events":{},"category":"navigation"},"useCases":[{"title":"Data driven use case","isDataModel":true,"data":{"title":"Sidenav demo navigation","items":[{"isHeading":true,"label":"Test Heading"},{"active":true,"label":"Link 1","href":"/path/to/link1"},{"label":"Link 2","href":"/path/to/link2"},{"isDivider":true},{"label":"Link 3","href":"/path/to/link3"},{"label":"Link 4","href":"/path/to/link4"}]}}]},{"componentName":"ux-tabarea","readme":"> Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.\n\nRead [Foundation tabs.html](http://foundation.zurb.com/docs/components/tabs.html) page for details.\n\nMarkup example:\n\n```html\n\n\n \n Tab One\n Tab Two\n Tab Three\n \n\n \n \n First tab content\n \n \n Second tab content\n \n \n Third tab content\n \n \n\n\n```","manifest":{"data":{"items":"Array of item data for both ux-tablink and ux-tabpane."},"events":{}},"useCases":[{"title":"Simple tabs demo","isDataModel":true,"data":{"items":[{"id":"structure","active":true,"title":"Structure","content":"Here be structure. Blah blah blah."},{"id":"buttons","active":false,"title":"Buttons","content":"

Buttons content - here be buttons

PrimarySecondary"}]}}]},{"componentName":"ux-top-bar","readme":"> The Foundation Top Bar gives you a great way to display a complex navigation bar on small, medium or large screens.\n\nRead [Foundation's topbar.html](http://foundation.zurb.com/docs/components/topbar.html) docs for more details.\n\nNOTE: Not complete functionality.\n\nExample markup:\n\n```html\n\n \n
  • Right Button Active
    • \n
  • Right Button
    • \n     \n \n
  • Left Button
    • \n     \n    \n```\n","manifest":{"data":{"class":"Class for the top bar wrapper","issticky":"Activate sticky mode","title":"Leading text to display on the ux-off-canvas component","href":"Link for your title","menulabel":"Label for the menu button","leftitems":"Array of nav items for the left hand side of the top bar","rightitems":"Array of nav items for the right hand side of the top bar","dataoptions":"Array of options like as outlined in Foundation top bar documentation (dropdown_autoclose, is_hover, etc.)"},"events":{},"category":"navigation"},"useCases":[{"title":"data-driven example - contain-to-grid mode","isDataModel":true,"data":{"class":"contain-to-grid","title":"Test Title","menulabel":"Menu","dataoptions":"","leftitems":[{"label":"Left Button","href":"#"}],"rightitems":[{"label":"Right Button Active","href":"#r1","active":true},{"label":"Right nesting","href":"#r2","items":[{"label":"First link in dropdown","href":"#r21"},{"label":"Second link with items","items":[{"label":"nested item 1","href":"#r221"},{"label":"nested item 2","href":"#r222"},{"label":"nested item 3","href":"#r223"}]},{"label":"Active link in dropdown","href":"#r23","active":true}]}]}},{"title":"data-driven example - sticky top bar","isDataModel":true,"data":{"class":"contain-to-grid","issticky":true,"title":"","href":".","menulabel":"Menu","dataoptions":"","leftitems":[{"label":"Responsive Web","href":".","items":[{"label":"TV","href":"."},{"label":"Mobile Apps","href":"."}]}],"rightitems":[{"label":"Overview","href":"/pages","active":true},{"label":"Style","href":"/pages/web-responsive/style"},{"label":"UI Components","href":"/pages/web-responsive/style"},{"label":"Layout","href":"/pages/web-responsive/layout"},{"label":"Resources","href":"/pages/web-responsive/resources"}]}}]}] \ No newline at end of file +[{"componentName":"ux-accordion","readme":"> Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.\n\nSee [Foundation's accordion.html docs](http://foundation.zurb.com/docs/components/accordion.html) for details.\n\nFeatures:\n\n* (TODO) Distributed accordion groups\n* (TODO) Accessibility\n* (TODO) Callbacks (fire RactiveJS semantic event)","manifest":{"data":{"items":"Array of items - see ux-accordionitem."},"events":{},"category":"content"},"useCases":[{"title":"Default - Three Accordions","isDataModel":true,"data":{"items":[{"title":"Accordion item 1","content":"Accordion 1: Lorem ipsum dolor"},{"title":"Accordion item 2","content":"Accordion 2: Lorem ipsum dolor"},{"title":"Accordion item 3","content":"Accordion 3: Lorem ipsum dolor"}]}}]},{"componentName":"ux-alert","readme":"> Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.\n\nRead [Foundation's alert](http://foundation.zurb.com/docs/components/alert_boxes.html) docs for more details.","manifest":{"data":{"text":"The text to display on the alert","class":"[success warning info alert secondary] [round radius]"},"category":"callouts & prompts"},"useCases":[{"title":"Alert round class","isDataModel":true,"data":{"text":"This is an alert - alert that is rounded.","class":"alert round"}},{"title":"Info radius class","isDataModel":true,"data":{"text":"This is an info alert with a radius.","class":"info radius"}},{"title":"Secondary class","isDataModel":true,"data":{"text":"This is a secondary alert.","class":"secondary"}},{"title":"Default","isDataModel":true,"data":{"text":"This is a standard alert."}},{"title":"Success radius class","isDataModel":true,"data":{"text":"This is a success alert with a radius.","class":"success radius"}},{"title":"Warning round class","isDataModel":true,"data":{"text":"This is a warning alert that is rounded.","class":"warning round"}}]},{"componentName":"ux-button","readme":"\n> This renders a button\n","manifest":{"data":{"text":"The text to display on the button","url":"The link to follow when the button is clicked"},"events":{"onclick":"Event to fire when button is clicked"},"category":"buttons"},"useCases":[{"title":"Buy Now Button","data":{"text":"Buy Now","role":"button","ariaLabel":"somelabel","tabindex":10,"onclick":"BuyBuyBuy"}},{"title":"Click Me Button","data":{"text":"ClickMe","onclick":"WasClicked"}}]},{"componentName":"ux-iconbar","readme":"An Icon Bar provides a menu to quickly navigate an app.\nUse the Icon Bar horizontally or vertically,\nwith the labels below the icons or to the right. Have it your way.","manifest":{"data":{"class":"CSS class.","items":"List of child items"},"category":"navigation"},"useCases":[{"title":"Default iconbar","isDataModel":true,"data":{"class":"","items":[{"href":"/","src":"images/fi-home.svg","label":"Home"},{"href":"/path/to/blah","src":"images/fi-bookmark.svg","label":"Bookmark"},{"src":"images/fi-info.svg","label":"Info","class":"disabled"},{"src":"images/fi-mail.svg","label":"Mail"},{"src":"images/fi-like.svg","label":"Like"}]}},{"title":"Label right","isDataModel":true,"data":{"class":"label-right","items":[{"href":"/","src":"images/fi-home.svg","label":"Home"},{"href":"/path/to/blah","src":"images/fi-bookmark.svg","label":"Bookmark"},{"src":"images/fi-info.svg","label":"Info","class":"disabled"},{"src":"images/fi-mail.svg","label":"Mail"},{"src":"images/fi-like.svg","label":"Like"}]}}]},{"componentName":"ux-keystrokes","readme":"> If you have keyboard affordances, you might need to explain them to users. For example, to close your browser window hit Ctrl + W. (Don't actually type that now - there are more docs to read.) Keystroke is a simple character affordance tool.\n\nRead [Foundation's keystrokes](http://foundation.zurb.com/docs/components/keystrokes.html) docs for more details.","manifest":{"data":{"text":"The text to display on the ux-keystrokes component"},"category":"typography"},"useCases":[{"title":"Use case with custom attributes","isDataModel":true,"data":{"text":"Cmd"}},{"title":"Data driven use case","isDataModel":true,"data":{"text":"Ctrl"}}]},{"componentName":"ux-label","readme":"> Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a label that notes when something was updated.\n\nRead [Foundation's label](http://foundation.zurb.com/docs/components/labels.html) docs for more details.","manifest":{"data":{"text":"The text to display on the label","class":"[success warning info alert secondary] [round radius] label"},"category":"typography"},"useCases":[{"title":"info class","isDataModel":true,"data":{"text":"Info","class":"info"}},{"title":"secondary radius class","isDataModel":true,"data":{"text":"Secondary Radius","class":"radius secondary"}},{"title":"Default class","isDataModel":true,"data":{"text":"Default","class":""}},{"title":"alert round class","isDataModel":true,"data":{"text":"Round Alert","class":"alert round"}},{"title":"success class","isDataModel":true,"data":{"text":"Success","class":"success"}},{"title":"warning class","isDataModel":true,"data":{"text":"Warning","class":"warning"}}]},{"componentName":"ux-off-canvas","readme":"> Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy.\n\nRead [Foundation's offcanvas.html](http://foundation.zurb.com/docs/components/offcanvas.html) docs for more details.\n","manifest":{"data":{"title":"The text to display on the ux-off-canvas component","expandedState":"left, right or empty string","leftItems":"Array of nav items for the LHS","rightItems":"Array of nav items for the RHS","mainContent":"HTML string with component's contents."},"events":{},"category":"navigation"},"useCases":[{"title":"data-driven example","isDataModel":true,"data":{"title":"UX Off Canvas Data Demo","expandedState":"","leftItems":[{"label":"Learn More"},{"label":"Home","href":"."},{"label":"интернационализация","href":"."},{"label":"Data","href":"data.html"},{"label":"Demo","href":"demo.html"},{"label":"External Links"},{"label":"Foundation docs","href":"http://foundation.zurb.com/docs/"},{"label":"RactiveJS docs","href":"http://docs.ractivejs.org/latest/get-started","target":"_blank"}],"rightItems":[{"label":"Asimov's Works"},{"label":"Recommended order","href":"http://scifi.stackexchange.com/questions/39669/what-is-the-correct-order-for-reading-material-of-isaac-asimov"}],"mainContent":"

    Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.

    Lorem ipsum dolor.

    Lorem ipsum dolor.

    Lorem ipsum dolor.

    Lorem ipsum dolor.

    "}}]},{"componentName":"ux-orbit","readme":"> ux-orbit Documentation\n","manifest":{"data":{"text":"The text to display on the ux-orbit component","url":"The link to follow when the component is clicked"},"events":{"onclick":"Event to fire when component is clicked"},"category":"media"},"useCases":[{"title":"Data driven use case","isDataModel":true,"data":{"currentPage":2,"items":[{"imagesrc":"http://placekitten.com/g/1500/500","link":".","imagealt":"Slide 1","caption":"Caption One"},{"imagesrc":"http://placekitten.com/1500/500","imagealt":"Slide 2","link":".","caption":"Caption Two"},{"caption":"Caption Three"}]}}]},{"componentName":"ux-panel","readme":"> A panel is a simple, helpful Foundation component that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them, or add emphasis to a section. The width is controlled by the grid columns you put them inside.\n\nSee [Foundation's panels.html](http://foundation.zurb.com/docs/components/panels.html) for details.\n\nExample markup:\n\n```html\n\n Lorem ipsum dolor sit amet...\n\n```","manifest":{"data":{"text":"The text to display on the button"},"events":{},"category":"callouts & prompts"},"useCases":[{"title":"Default panel","data":{"text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}}]},{"componentName":"ux-progress","readme":"> ux-progress Documentation\n","manifest":{"data":{"class":"round, success, alert, secondary","value":"0-100"},"events":{},"category":"content"},"useCases":[{"title":"default","isDataModel":true,"data":{"class":"","value":50}},{"title":"success round","isDataModel":true,"data":{"class":"success round","value":78}},{"title":"alert round","isDataModel":true,"data":{"class":"alert round","value":99}},{"title":"no data","isDataModel":true,"data":{}}]},{"componentName":"ux-sidenav","readme":"> Side nav, like you see on the Foundation docs, is a great way to provide navigation for your entire site, or for sections of an individual page.\n\nRead [Foundation's sidenav.html](http://foundation.zurb.com/docs/components/sidenav.html) docs for more details.\n\nExample markup:\n\n```html\n\n Link 1\n Link 2\n \n Link 3\n Link 4\n\n```\n","manifest":{"data":{"title":"For accessibility - define the title of this navigation element.","items":"Array of objects - see use case for example."},"events":{},"category":"navigation"},"useCases":[{"title":"Data driven use case","isDataModel":true,"data":{"title":"Sidenav demo navigation","items":[{"isHeading":true,"label":"Test Heading"},{"active":true,"label":"Link 1","href":"/path/to/link1"},{"label":"Link 2","href":"/path/to/link2"},{"isDivider":true},{"label":"Link 3","href":"/path/to/link3"},{"label":"Link 4","href":"/path/to/link4"}]}}]},{"componentName":"ux-tabarea","readme":"> Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.\n\nRead [Foundation tabs.html](http://foundation.zurb.com/docs/components/tabs.html) page for details.\n\nMarkup example:\n\n```html\n\n\n \n Tab One\n Tab Two\n Tab Three\n \n\n \n \n First tab content\n \n \n Second tab content\n \n \n Third tab content\n \n \n\n\n```","manifest":{"data":{"items":"Array of item data for both ux-tablink and ux-tabpane."},"events":{},"category":"content"},"useCases":[{"title":"Simple tabs demo","isDataModel":true,"data":{"items":[{"id":"structure","active":true,"title":"Structure","content":"Here be structure. Blah blah blah."},{"id":"buttons","active":false,"title":"Buttons","content":"

    Buttons content - here be buttons

    PrimarySecondary"}]}}]},{"componentName":"ux-thumbnail","readme":"> ux-thumbnail Documentation\n","manifest":{"data":{"src":"The source url for the thumbnail image","href":"The link location for clicking on the image"},"events":{"onclick":"Thrown when the image is clicked on"},"category":"media"},"useCases":[{"title":"Data driven use case","isDataModel":true,"data":{"src":"http://placekitten.com/g/1500/500","href":"#"}}]},{"componentName":"ux-top-bar","readme":"> The Foundation Top Bar gives you a great way to display a complex navigation bar on small, medium or large screens.\n\nRead [Foundation's topbar.html](http://foundation.zurb.com/docs/components/topbar.html) docs for more details.\n\nNOTE: Not complete functionality.\n\nExample markup:\n\n```html\n\n \n
  • Right Button Active
    • \n
  • Right Button
    • \n     \n \n
  • Left Button
    • \n     \n    \n```\n","manifest":{"data":{"class":"Class for the top bar wrapper","issticky":"Activate sticky mode","title":"Leading text to display on the ux-off-canvas component","href":"Link for your title","menulabel":"Label for the menu button","leftitems":"Array of nav items for the left hand side of the top bar","rightitems":"Array of nav items for the right hand side of the top bar","dataoptions":"Array of options like as outlined in Foundation top bar documentation (dropdown_autoclose, is_hover, etc.)"},"events":{},"category":"navigation"},"useCases":[{"title":"data-driven example - contain-to-grid mode","isDataModel":true,"data":{"class":"contain-to-grid","title":"Test Title","menulabel":"Menu","dataoptions":"","leftitems":[{"label":"Left Button","href":"#"}],"rightitems":[{"label":"Right Button Active","href":"#r1","active":true},{"label":"Right nesting","href":"#r2","items":[{"label":"First link in dropdown","href":"#r21"},{"label":"Second link with items","items":[{"label":"nested item 1","href":"#r221"},{"label":"nested item 2","href":"#r222"},{"label":"nested item 3","href":"#r223"}]},{"label":"Active link in dropdown","href":"#r23","active":true}]}]}},{"title":"data-driven example - sticky top bar","isDataModel":true,"data":{"class":"contain-to-grid","issticky":true,"title":"","href":".","menulabel":"Menu","dataoptions":"","leftitems":[{"label":"Responsive Web","href":".","items":[{"label":"TV","href":"."},{"label":"Mobile Apps","href":"."}]}],"rightitems":[{"label":"Overview","href":"/pages","active":true},{"label":"Style","href":"/pages/web-responsive/style"},{"label":"UI Components","href":"/pages/web-responsive/style"},{"label":"Layout","href":"/pages/web-responsive/layout"},{"label":"Resources","href":"/pages/web-responsive/resources"}]}}]}] \ No newline at end of file diff --git a/dist/ractivef.js b/dist/ractivef.js index b1d6af6e..f27c6775 100644 --- a/dist/ractivef.js +++ b/dist/ractivef.js @@ -1,6 +1,6 @@ /** * ractive-foundation - Ractive components for Foundation 5 - * @version 0.3.0 + * @version 0.5.0 * @link https://github.com/ractive-foundation/ractive-foundation * @license MIT */ @@ -115,7 +115,7 @@ Ractive.defaults.templates = {}; Ractive.defaults.templates['ux-accordion'] = {"v":3,"t":[{"t":7,"e":"ul","a":{"id":[{"t":2,"r":"guid"}],"class":["accordion ",{"t":2,"r":"class"}],"data-accordion":0},"f":[{"t":4,"f":[{"t":4,"f":[{"t":7,"e":"ux-accordionitem","a":{"datamodel":[{"t":3,"r":"."}]}}],"n":52,"r":"items"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":8,"r":"content"}],"r":"isDataModel"}]}]}; Ractive.defaults.templates['ux-accordionitem'] = {"v":3,"t":[{"t":7,"e":"li","a":{"id":[{"t":2,"r":"guid"}],"class":["accordion-navigation ",{"t":2,"r":"class"}," ",{"t":4,"f":["active"],"n":50,"r":"active"}]},"f":[{"t":4,"f":[{"t":7,"e":"ux-anchor","f":[{"t":2,"r":"title"}]}," ",{"t":7,"e":"ux-content","f":[{"t":3,"r":"content"}]}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":16}],"r":"isDataModel"}]}]}; -Ractive.defaults.templates['ux-alert'] = {"v":3,"t":[{"t":7,"e":"div","a":{"data-alert":0,"class":["alert-box ",{"t":2,"r":"class"}]},"f":[{"t":4,"f":[{"t":3,"r":"text"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":16}],"r":"isDataModel"}," ",{"t":7,"e":"a","a":{"href":"#","class":"close"},"v":{"tap":"closeClicked"},"f":["×"]}]}]}; +Ractive.defaults.templates['ux-alert'] = {"v":3,"t":[{"t":7,"e":"div","a":{"data-alert":0,"class":["alert-box ",{"t":2,"r":"class"}],"aria-live":"assertive","role":"alertdialog"},"f":[{"t":4,"f":[{"t":3,"r":"text"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":16}],"r":"isDataModel"}," ",{"t":7,"e":"button","a":{"class":"close","aria-label":"Close Alert"},"v":{"tap":"closeClicked"},"f":["×"]}]}]}; Ractive.defaults.templates['ux-anchor'] = {"v":3,"t":[{"t":7,"e":"a","a":{"id":[{"t":2,"r":"guid"}],"href":[{"t":2,"r":"href"}]},"m":[{"t":4,"f":["target=\"",{"t":2,"r":"target"},"\""],"n":50,"r":"target"},{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"n":50,"r":"class"}],"v":{"tap":"anchorClicked"},"f":[{"t":4,"f":[{"t":3,"r":"content"}],"n":50,"r":".isDataModel"},{"t":4,"n":51,"f":[{"t":16}],"r":".isDataModel"}]}]}; Ractive.defaults.templates['ux-button'] = {"v":3,"t":[{"t":7,"e":"a","a":{"class":["button ",{"t":2,"r":"class"}]},"m":[{"t":4,"f":["href=\"",{"t":2,"r":"href"},"\""],"r":"href"},{"t":4,"f":[" role=\"",{"t":2,"r":"role"},"\""],"r":"role"},{"t":4,"f":[" aria-label=\"",{"t":2,"r":"ariaLabel"},"\""],"r":"ariaLabel"},{"t":4,"f":[" tabindex=\"",{"t":2,"r":"tabindex"},"\""],"r":"tabindex"}],"v":{"tap":{"m":"clickHandler","a":{"r":[],"s":"[]"}}},"f":[{"t":4,"f":[{"t":2,"r":"text"}],"n":50,"r":"text"},{"t":4,"n":51,"f":[{"t":8,"r":"content"}],"r":"text"}]}]}; Ractive.defaults.templates['ux-col'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":[{"t":2,"r":"class"}," columns"]},"f":[{"t":16}]}]}; @@ -123,22 +123,24 @@ Ractive.defaults.templates['ux-content'] = {"v":3,"t":[{"t":7,"e":"div","a":{"id Ractive.defaults.templates['ux-header'] = {"v":3,"t":[{"t":4,"f":[{"t":7,"e":"h1","m":[{"t":4,"f":["id=\"",{"t":2,"r":"id"},"\""],"r":"id"},{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"r":"class"}],"f":[{"t":16}]}],"n":50,"x":{"r":["level"],"s":"_0==1"}}," ",{"t":4,"f":[{"t":7,"e":"h2","m":[{"t":4,"f":["id=\"",{"t":2,"r":"id"},"\""],"r":"id"},{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"r":"class"}],"f":[{"t":16}]}],"n":50,"x":{"r":["level"],"s":"_0==2"}}," ",{"t":4,"f":[{"t":7,"e":"h3","m":[{"t":4,"f":["id=\"",{"t":2,"r":"id"},"\""],"r":"id"},{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"r":"class"}],"f":[{"t":16}]}],"n":50,"x":{"r":["level"],"s":"_0==3"}}," ",{"t":4,"f":[{"t":7,"e":"h4","m":[{"t":4,"f":["id=\"",{"t":2,"r":"id"},"\""],"r":"id"},{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"r":"class"}],"f":[{"t":16}]}],"n":50,"x":{"r":["level"],"s":"_0==4"}}," ",{"t":4,"f":[{"t":7,"e":"h5","m":[{"t":4,"f":["id=\"",{"t":2,"r":"id"},"\""],"r":"id"},{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"r":"class"}],"f":[{"t":16}]}],"n":50,"x":{"r":["level"],"s":"_0==5"}}," ",{"t":4,"f":[{"t":7,"e":"h6","m":[{"t":4,"f":["id=\"",{"t":2,"r":"id"},"\""],"r":"id"},{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"r":"class"}],"f":[{"t":16}]}],"n":50,"x":{"r":["level"],"s":"_0==6"}}]}; Ractive.defaults.templates['ux-iconbar'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["icon-bar ",{"t":2,"r":"upNumClass"}," ",{"t":2,"r":"class"}],"role":"navigation"},"f":[{"t":4,"f":[{"t":4,"f":[{"t":7,"e":"ux-iconbaritem","a":{"datamodel":[{"t":2,"x":{"r":["getItemData","."],"s":"_0(_1)"}}]}}],"r":"items"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":8,"r":"content"}],"r":"isDataModel"}]}]}; Ractive.defaults.templates['ux-iconbaritem'] = {"v":3,"t":[{"t":7,"e":"a","a":{"href":[{"t":2,"r":"href"}],"class":["item ",{"t":2,"r":"class"}],"tabindex":"0","role":"button"},"m":[{"t":4,"f":["aria-labelledby=\"",{"t":2,"r":"guid"},"\""],"n":50,"x":{"r":["labels"],"s":"_0!==false"}},{"t":4,"f":["aria-label=",{"t":2,"r":"arialabel"}],"n":50,"r":"arialabel"}],"f":[{"t":4,"f":[{"t":7,"e":"img","a":{"src":[{"t":2,"r":"src"}]}}],"n":50,"r":"src"}," ",{"t":4,"f":[{"t":7,"e":"label","a":{"id":[{"t":2,"r":"guid"}]},"f":[{"t":4,"f":[{"t":3,"r":"label"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":16}],"r":"isDataModel"}]}],"n":50,"x":{"r":["labels"],"s":"_0!==false"}}]}]}; +Ractive.defaults.templates['ux-keystrokes'] = {"v":3,"t":[{"t":7,"e":"kbd","f":[{"t":4,"f":[{"t":2,"r":"text"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":16}],"r":"isDataModel"}]}]}; Ractive.defaults.templates['ux-label'] = {"v":3,"t":[{"t":7,"e":"span","a":{"class":[{"t":2,"r":"class"}," label"]},"f":[{"t":4,"f":[{"t":2,"r":"text"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":16}],"r":"isDataModel"}]}]}; Ractive.defaults.templates['ux-li'] = {"v":3,"t":[{"t":7,"e":"li","m":[{"t":4,"f":["class=\"",{"t":2,"r":"class"},"\""],"n":50,"r":"class"},{"t":4,"f":["role=\"",{"t":2,"r":"role"},"\""],"n":50,"r":"role"}],"f":[{"t":16}]}]}; Ractive.defaults.templates['ux-off-canvas'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["off-canvas-wrap ",{"t":2,"r":"getExpandedClass"}," ",{"t":2,"r":"class"}],"data-offcanvas":0},"f":[{"t":7,"e":"div","a":{"class":"inner-wrap"},"f":[{"t":7,"e":"nav","a":{"class":"tab-bar"},"f":[{"t":4,"f":[{"t":7,"e":"section","a":{"class":"left-small"},"f":[{"t":7,"e":"a","a":{"class":"left-off-canvas-toggle menu-icon","aria-expanded":[{"t":2,"x":{"r":["expandedState"],"s":"_0==\"left\"?\"true\":\"false\""}}]},"v":{"tap":{"n":"updateMenu","a":"left"}},"f":[{"t":7,"e":"span"}]}]}],"n":50,"r":"leftItems"}," ",{"t":7,"e":"section","a":{"class":"middle tab-bar-section"},"f":[{"t":7,"e":"h1","a":{"class":"title"},"f":[{"t":2,"r":"title"}]}]}," ",{"t":4,"f":[{"t":7,"e":"section","a":{"class":"right-small"},"f":[{"t":7,"e":"a","a":{"class":"left-off-canvas-toggle menu-icon","aria-expanded":[{"t":2,"x":{"r":["expandedState"],"s":"_0==\"right\"?\"true\":\"false\""}}]},"v":{"tap":{"n":"updateMenu","a":"right"}},"f":[{"t":7,"e":"span"}]}]}],"n":50,"r":"rightItems"}]}," ",{"t":4,"f":[{"t":7,"e":"aside","a":{"class":"left-off-canvas-menu"},"f":[{"t":7,"e":"ux-off-canvas-list","a":{"items":[{"t":2,"r":"leftItems"}]}}]}],"n":50,"r":"leftItems"}," ",{"t":4,"f":[{"t":7,"e":"aside","a":{"class":"right-off-canvas-menu"},"f":[{"t":7,"e":"ux-off-canvas-list","a":{"items":[{"t":2,"r":"rightItems"}]}}]}],"n":50,"r":"rightItems"}," ",{"t":7,"e":"section","a":{"class":"main-section"},"f":[{"t":4,"f":[{"t":3,"r":"mainContent"}],"n":50,"r":"mainContent"},{"t":4,"n":51,"f":[{"t":16}],"r":"mainContent"}]}," ",{"t":7,"e":"a","a":{"class":"exit-off-canvas"},"v":{"tap":"updateMenu"}}]}]}]}; Ractive.defaults.templates['ux-off-canvas-list'] = {"v":3,"t":[{"t":7,"e":"ul","a":{"class":["off-canvas-list ",{"t":2,"r":"class"}]},"f":[{"t":4,"f":[{"t":7,"e":"li","f":[{"t":4,"f":[{"t":7,"e":"a","a":{"href":[{"t":2,"r":"./href"}]},"m":[{"t":4,"f":["target=\"",{"t":2,"r":"./target"},"\""],"n":50,"r":"./target"}],"f":[{"t":3,"r":"./label"}]}],"n":50,"r":"./href"},{"t":4,"n":51,"f":[{"t":7,"e":"label","f":[{"t":3,"r":"./label"}]}],"r":"./href"}]}],"n":52,"r":"./items"}]}]}; -Ractive.defaults.templates['ux-orbit'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["ux-orbit ",{"t":2,"r":"class"}]},"f":[{"t":7,"e":"div","a":{"class":["orbit-container ",{"t":2,"r":"currentPageCssClass"}]},"f":[{"t":7,"e":"ul","a":{"class":"pageContainer example-orbit orbit-slides-container"},"f":[{"t":4,"f":[{"t":4,"f":[{"t":7,"e":"li","a":{"class":["orbit-slides-slide ",{"t":4,"f":["active"],"r":"active"}]},"v":{"swipeleft":"nextPage","swiperight":"prevPage"},"f":[{"t":7,"e":"img","a":{"src":[{"t":2,"r":"imagesrc"}],"alt":[{"t":2,"r":"imagealt"}]}}," ",{"t":7,"e":"div","a":{"class":"orbit-caption"},"f":[{"t":2,"r":"caption"}]}]}],"r":"items"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":8,"r":"content"}],"r":"isDataModel"}," ",{"t":4,"f":[{"t":7,"e":"li","a":{"class":"orbit-slides-slide"},"f":[{"t":7,"e":"h2","f":["No slides found"]}]}],"x":{"r":["slidesTotal"],"s":"_0==0"}}]}," ",{"t":4,"f":[{"t":7,"e":"a","a":{"class":"orbit-prev"},"v":{"tap":"prevPage"},"f":["Prev ",{"t":7,"e":"span"}]}," ",{"t":7,"e":"a","a":{"class":"orbit-next"},"v":{"tap":"nextPage"},"f":["Next ",{"t":7,"e":"span"}]}],"n":50,"r":"navigation_arrows"}," ",{"t":4,"f":[{"t":7,"e":"div","a":{"class":"orbit-slide-number"},"f":[{"t":7,"e":"span","f":[{"t":2,"r":"currentPage"}]}," of ",{"t":7,"e":"span","f":[{"t":2,"r":"slidesTotal"}]}]}],"n":50,"r":"slide_number"}]}," ",{"t":4,"f":[{"t":7,"e":"ol","a":{"class":"orbit-bullets"},"f":[{"t":4,"f":[{"t":7,"e":"li","a":{"data-orbit-slide-number":[{"t":2,"r":"i"}],"class":[{"t":4,"f":["active"],"r":"active"}]},"f":[]}],"i":"i","r":"items"}]}],"n":50,"r":"bullets"}]}]}; +Ractive.defaults.templates['ux-orbit'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["ux-orbit ",{"t":2,"r":"class"}]},"f":[{"t":7,"e":"div","a":{"class":["orbit-container ",{"t":2,"r":"currentPageCssClass"}]},"f":[{"t":7,"e":"ul","a":{"class":"pageContainer example-orbit orbit-slides-container"},"f":[{"t":4,"f":[{"t":4,"f":[{"t":7,"e":"li","a":{"class":["orbit-slides-slide ",{"t":4,"f":["active"],"n":50,"x":{"r":["i","currentPage"],"s":"_0+1===_1"}}]},"v":{"swipeleft":"nextPage","swiperight":"prevPage"},"f":[{"t":7,"e":"img","a":{"src":[{"t":2,"r":"imagesrc"}],"alt":[{"t":2,"r":"imagealt"}]}}," ",{"t":7,"e":"div","a":{"class":"orbit-caption"},"f":[{"t":2,"r":"caption"}]}]}],"i":"i","r":"items"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":8,"r":"content"}],"r":"isDataModel"}," ",{"t":4,"f":[{"t":7,"e":"li","a":{"class":"orbit-slides-slide"},"f":[{"t":7,"e":"h2","f":["No slides found"]}]}],"x":{"r":["slidesTotal"],"s":"_0==0"}}]}," ",{"t":4,"f":[{"t":7,"e":"a","a":{"class":"orbit-prev"},"v":{"tap":"prevPage"},"f":["Prev ",{"t":7,"e":"span"}]}," ",{"t":7,"e":"a","a":{"class":"orbit-next"},"v":{"tap":"nextPage"},"f":["Next ",{"t":7,"e":"span"}]}],"n":50,"r":"navigation_arrows"}," ",{"t":4,"f":[{"t":7,"e":"div","a":{"class":"orbit-slide-number"},"f":[{"t":7,"e":"span","f":[{"t":2,"r":"currentPage"}]}," of ",{"t":7,"e":"span","f":[{"t":2,"r":"slidesTotal"}]}]}],"n":50,"r":"slide_number"}]}," ",{"t":4,"f":[{"t":7,"e":"ol","a":{"class":"orbit-bullets"},"f":[{"t":4,"f":[{"t":7,"e":"li","a":{"data-orbit-slide-number":[{"t":2,"r":"i"}],"class":[{"t":4,"f":["active"],"n":50,"x":{"r":["i","currentPage"],"s":"_0+1===_1"}}]},"f":[]}],"i":"i","r":"items"}]}],"n":50,"r":"bullets"}]}]}; Ractive.defaults.templates['ux-page-swipe'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["ux-page-swipe ",{"t":2,"r":"isOnPage"}," ",{"t":2,"r":"class"}]},"f":[{"t":7,"e":"div","a":{"class":"pageContainer "},"f":[{"t":8,"r":"content"}]}]}]}; Ractive.defaults.templates['ux-panel'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["panel ",{"t":2,"r":"class"}]},"f":[{"t":4,"f":[{"t":2,"r":"text"}],"n":50,"r":"text"},{"t":4,"n":51,"f":[{"t":16}],"r":"text"}]}]}; Ractive.defaults.templates['ux-pricingtable'] = {"v":3,"t":[{"t":7,"e":"ul","a":{"class":["pricing-table ",{"t":2,"r":"class"}]},"f":[{"t":8,"r":"content"}," ",{"t":7,"e":"li","a":{"class":"cta-button"},"f":[{"t":4,"f":[{"t":7,"e":"a","a":{"class":"button disabled","href":"#"},"v":{"tap":"buyNow"},"f":["Coming Soon"]}],"n":50,"x":{"r":["status"],"s":"_0==\"comingsoon\""}}," ",{"t":4,"f":[{"t":7,"e":"a","a":{"class":"button","href":[{"t":2,"r":"href"}]},"v":{"tap":"buyNow"},"f":["Buy Now"]}],"n":50,"x":{"r":["status"],"s":"!_0"}}]}]}]}; Ractive.defaults.templates['ux-progress'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["progress ",{"t":2,"r":"class"}]},"f":[{"t":7,"e":"span","a":{"class":"meter","style":[{"t":2,"r":"meterStyle"}]}}]}]}; Ractive.defaults.templates['ux-row'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["row ",{"t":2,"r":"class"}]},"f":[{"t":16}]}]}; -Ractive.defaults.templates['ux-sidenav'] = {"v":3,"t":[{"t":7,"e":"ul","a":{"class":["side-nav ",{"t":2,"r":"class"}],"role":"navigation"},"m":[{"t":4,"f":["title=\"",{"t":2,"r":"title"},"\""],"r":"title"}],"f":[{"t":4,"f":[{"t":4,"f":[{"t":4,"f":[{"t":7,"e":"ux-li","a":{"class":"heading"},"f":[{"t":2,"r":".label"}]}],"r":"isHeading"}," ",{"t":4,"f":[{"t":7,"e":"ux-li","a":{"class":"divider"}}],"r":"isDivider"}," ",{"t":4,"f":[{"t":7,"e":"ux-li","a":{"class":[{"t":4,"f":["active"],"r":"active"}],"role":"menuitem"},"f":[{"t":7,"e":"a","a":{"href":[{"t":2,"r":".href"}]},"f":[{"t":2,"r":".label"}]}]}],"r":"href"}],"n":52,"r":"items"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":16}],"r":"isDataModel"}]}]}; +Ractive.defaults.templates['ux-sidenav'] = {"v":3,"t":[{"t":7,"e":"ul","a":{"class":["side-nav ",{"t":2,"r":"class"}],"role":"menu"},"m":[{"t":4,"f":["title=\"",{"t":2,"r":"title"},"\""],"r":"title"}],"f":[{"t":4,"f":[{"t":4,"f":[{"t":4,"f":[{"t":7,"e":"ux-li","a":{"class":"heading"},"f":[{"t":2,"r":".label"}]}],"r":"isHeading"}," ",{"t":4,"f":[{"t":7,"e":"ux-li","a":{"class":"divider"}}],"r":"isDivider"}," ",{"t":4,"f":[{"t":7,"e":"ux-li","a":{"class":[{"t":4,"f":["active"],"r":"active"}],"role":"menuitem"},"f":[{"t":7,"e":"a","a":{"href":[{"t":2,"r":".href"}]},"f":[{"t":2,"r":".label"}]}]}],"r":"href"}],"n":52,"r":"items"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":16}],"r":"isDataModel"}]}]}; Ractive.defaults.templates['ux-tabarea'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["tabs-area ",{"t":2,"r":"class"}]},"f":[{"t":4,"f":[{"t":7,"e":"ux-tablinks","a":{"items":[{"t":2,"r":"items"}]},"f":[{"t":4,"f":[{"t":7,"e":"ux-tablink","a":{"id":[{"t":2,"r":".id"}],"active":[{"t":2,"r":".active"}]},"f":[{"t":2,"r":".title"}]}],"n":52,"r":"items"}]}," ",{"t":7,"e":"ux-tabpanes","a":{"items":[{"t":2,"r":"items"}]},"f":[{"t":4,"f":[{"t":7,"e":"ux-tabpane","f":[{"t":3,"r":".content"}]}],"n":52,"r":"items"}]}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":8,"r":"content"}],"r":"isDataModel"}]}]}; Ractive.defaults.templates['ux-tablink'] = {"v":3,"t":[{"t":7,"e":"li","a":{"class":["tab-title ",{"t":2,"r":".class"}," ",{"t":4,"f":["active"],"n":50,"r":".active"}],"role":"presentational"},"f":[{"t":7,"e":"a","a":{"href":["#",{"t":2,"r":".id"}]},"v":{"tap":"changeTab"},"f":[{"t":16}]}]}]}; Ractive.defaults.templates['ux-tablinks'] = {"v":3,"t":[{"t":7,"e":"ul","a":{"class":["tabs ",{"t":4,"f":["vertical"],"r":"vertical"}," ",{"t":2,"r":"class"}],"role":"tablist"},"f":[{"t":8,"r":"content"}]}]}; Ractive.defaults.templates['ux-tabpane'] = {"v":3,"t":[{"t":7,"e":"section","a":{"class":["content ",{"t":2,"r":"class"}," ",{"t":4,"f":["active"],"n":50,"r":"active"},{"t":4,"n":51,"f":["hide"],"r":"active"}],"role":"tabpanel","aria-hidden":[{"t":4,"f":["false"],"n":50,"r":"active"},{"t":4,"n":51,"f":["true"],"r":"active"}]},"f":[{"t":16}]}]}; Ractive.defaults.templates['ux-tabpanes'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["tabs-content ",{"t":2,"r":"class"}]},"f":[{"t":8,"r":"content"}]}]}; +Ractive.defaults.templates['ux-thumbnail'] = {"v":3,"t":[{"t":7,"e":"a","a":{"class":"th","role":"button","aria-label":"Thumbnail","href":[{"t":2,"r":"href"}]},"f":[{"t":7,"e":"img","a":{"aria-hidden":"true","src":[{"t":2,"r":"src"}]}}]}]}; Ractive.defaults.templates['ux-top-bar'] = {"v":3,"t":[{"t":7,"e":"div","a":{"class":["ux-top-bar ",{"t":4,"f":["fixed"],"n":50,"r":"isfixed"}," ",{"t":2,"r":"class"}]},"f":[{"t":7,"e":"nav","a":{"class":["top-bar ",{"t":4,"f":["expanded"],"n":50,"r":"isexpanded"}],"data-top-bar":0,"role":"navigation","data-options":[{"t":2,"r":"dataoptions"}]},"f":[{"t":7,"e":"ul","a":{"class":"title-area"},"f":[{"t":7,"e":"li","a":{"class":"name"},"f":[{"t":7,"e":"h1","f":[{"t":7,"e":"a","a":{"href":[{"t":2,"r":"href"}]},"f":[{"t":2,"r":"title"}]}]}]}," ",{"t":7,"e":"li","a":{"class":"toggle-topbar menu-icon"},"f":[{"t":7,"e":"a","a":{"href":"#"},"v":{"tap":"toggleMenu"},"f":[{"t":7,"e":"span","f":[{"t":2,"r":"menulabel"}]}]}]}]}," ",{"t":7,"e":"section","a":{"class":"top-bar-section"},"f":[{"t":4,"f":[{"t":4,"f":[{"t":7,"e":"ux-top-bar-items","a":{"class":"right","items":[{"t":2,"r":"rightitems"}]}}],"n":50,"r":"rightitems"}," ",{"t":4,"f":[{"t":7,"e":"ux-top-bar-items","a":{"class":"left","items":[{"t":2,"r":"leftitems"}]}}],"n":50,"r":"leftitems"}],"n":50,"r":"isDataModel"},{"t":4,"n":51,"f":[{"t":8,"r":"content"}],"r":"isDataModel"}]}]}]}]}; Ractive.defaults.templates['ux-top-bar-items'] = {"v":3,"t":[{"t":7,"e":"ul","a":{"class":["ux-top-bar-items ",{"t":2,"r":"class"}]},"f":[{"t":4,"f":[{"t":4,"f":[" ",{"t":7,"e":"li","a":{"class":[{"t":2,"x":{"r":["getTopBarItemCssClass","."],"s":"_0(_1)"}}]},"f":[{"t":7,"e":"a","a":{"href":[{"t":2,"r":"./href"}]},"f":[{"t":3,"r":"./label"}]}," ",{"t":4,"f":[" ",{"t":7,"e":"ux-top-bar-items","a":{"class":"dropdown","items":[{"t":2,"r":"./items"}]}}],"n":50,"r":"./items"}]}],"n":52,"r":"items"}],"n":50,"r":"items"},{"t":4,"n":51,"f":[{"t":8,"r":"content"}],"r":"items"}]}]}; Ractive.components['ux-accordion'] = Ractive.extend({ @@ -374,6 +376,11 @@ Ractive.components['ux-iconbaritem'] = Ractive.extend({ }); +Ractive.components['ux-keystrokes'] = Ractive.extend({ + isolated: true, + template: Ractive.defaults.templates['ux-keystrokes'] +}); + Ractive.components['ux-label'] = Ractive.extend({ isolated: true, template: Ractive.defaults.templates['ux-label'] @@ -456,9 +463,10 @@ Ractive.components['ux-orbit'] = Ractive.extend({ oninit: function () { this.on('nextPage', function (e) { - var nextPage = this.get('currentPage') + 1; - // FIXME Quick hack for bounds. - nextPage = nextPage > 5 ? 5 : nextPage; + var nextPage = this.get('currentPage') + 1, + slideTotal = this.get('slidesTotal'); + + nextPage = nextPage > slideTotal ? slideTotal : nextPage; this.set('currentPage', nextPage); return false; }); @@ -631,6 +639,10 @@ Ractive.components['ux-tabpanes'] = Ractive.extend({ isolated: true }); +Ractive.components['ux-thumbnail'] = Ractive.extend({ + template: Ractive.defaults.templates['ux-thumbnail'] +}); + Ractive.components['ux-top-bar'] = Ractive.extend({ template: Ractive.defaults.templates['ux-top-bar'], diff --git a/gulpfile.js b/gulpfile.js index cb0b127b..8e1d1139 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -21,18 +21,38 @@ var gulp = require('gulp'), renderDocumentation = require('./tasks/renderDocumentation'), concatManifests = require('./tasks/concatManifests'), gulpWing = require('./tasks/gulpWing'), - jshintFailReporter = require('./tasks/jshintFailReporter'); + jshintFailReporter = require('./tasks/jshintFailReporter'), + rfA11y = require('./tasks/rfA11y'); var pkg = require('./package.json'); +const DEV_SERVER_PORT = 9080; +const TEST_SERVER_PORT = 8088; +const A11Y_SERVER_PORT = 8089; + gulp.task('connect', function () { plugins.connect.server({ root: 'public', livereload: true, - port: 9080 + port: DEV_SERVER_PORT }); }); +gulp.task('test-connect', function () { + plugins.connect.server({ + root: 'public', + port: TEST_SERVER_PORT + }); +}); + +gulp.task('a11y-connect', function (callback) { + plugins.connect.server({ + root: 'public', + port: A11Y_SERVER_PORT + }); + callback(); +}); + gulp.task('html', function () { return gulp.src('./public/*.html') .pipe(plugins.connect.reload()); @@ -274,7 +294,7 @@ gulp.task('watch', function () { 'src/*.html', 'src/pages/*.html', 'src/blank-pages/*.html', - 'src/**.*.json', + 'src/**/*.json', 'src/**/*.hbs', 'src/**/*.md', 'src/**/*.js', @@ -287,12 +307,23 @@ gulp.task('watch', function () { }); -gulp.task('test', ['version-check', 'build'], function (callback) { +gulp.task('a11y-only', [ 'a11y-connect' ], function (callback) { - plugins.connect.server({ - root: 'public', - port: 8088 - }); + rfA11y.auditComponents({ port: A11Y_SERVER_PORT }) + .then(function () { + callback(); + process.exit(0); + }) + .catch(function (error) { + callback(new Error(error)); + process.exit(1); + }); + +}); + +// Run the test suite alone, without re-building the project. Useful for rapid test debugging. +// See 'test' for the full build and test task. +gulp.task('test-only', [ 'test-connect' ], function (callback) { var selServer = seleniumServer(); @@ -353,6 +384,17 @@ gulp.task('test', ['version-check', 'build'], function (callback) { }); }); }).catch(gutil.log); + +}); + +// Build and test the project. Default choice. Used by npm test. +gulp.task('test', function (callback) { + runSequence([ 'version-check', 'build' ], 'test-only', callback); +}); + +// Currently a11y not part of standard build/test process. +gulp.task('a11y', function (callback) { + runSequence([ 'version-check', 'build' ], 'a11y-only', callback); }); gulp.task('jshint', function (callback) { diff --git a/package.json b/package.json index ced37602..968d328a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ractive-foundation", - "version": "0.3.0", + "version": "0.5.0", "description": "Ractive components for Foundation 5", "main": "dist/ractivef.js", "scripts": { @@ -18,10 +18,11 @@ }, "homepage": "https://github.com/ractive-foundation/ractive-foundation", "devDependencies": { + "a11y": "^0.3.3", "del": "~1.1.1", "find": "~0.1.7", "foundation-sites": "git+https://github.com/zurb/bower-foundation.git#5.5.2", - "gulp": "~3.8.11", + "gulp": "~3.9.0", "gulp-concat": "~2.5.2", "gulp-connect": "~2.2.0", "gulp-copy": "0.0.2", diff --git a/src/component-page.html b/src/component-page.html index 8d150f66..c41b0ca5 100644 --- a/src/component-page.html +++ b/src/component-page.html @@ -1,8 +1,6 @@ - - - - + + {{component.componentName}} @@ -47,4 +45,9 @@
    + + + + +     \ No newline at end of file diff --git a/src/components.html b/src/components.html index dfaf576a..bd15cceb 100644 --- a/src/components.html +++ b/src/components.html @@ -1,13 +1,14 @@ - - - - + Component Documentation

    Use the sidenav to view documentation for each component.

     +     + + +     \ No newline at end of file diff --git a/src/components/ux-accordion/README.md b/src/components/ux-accordion/README.md index 13f7ef6f..83e9f0d0 100644 --- a/src/components/ux-accordion/README.md +++ b/src/components/ux-accordion/README.md @@ -6,4 +6,5 @@ Features: * (TODO) Distributed accordion groups * (TODO) Accessibility -* (TODO) Callbacks (fire RactiveJS semantic event) \ No newline at end of file +* (TODO) Callbacks (fire RactiveJS semantic event) + diff --git a/src/components/ux-accordion/manifest.json b/src/components/ux-accordion/manifest.json index 0ba928fc..baed9048 100644 --- a/src/components/ux-accordion/manifest.json +++ b/src/components/ux-accordion/manifest.json @@ -3,5 +3,6 @@ "items": "Array of items - see ux-accordionitem." }, "events": { - } + }, + "category": "content" } \ No newline at end of file diff --git a/src/components/ux-alert/README.md b/src/components/ux-alert/README.md index 7bf3d0bd..32f55d91 100644 --- a/src/components/ux-alert/README.md +++ b/src/components/ux-alert/README.md @@ -1,3 +1,4 @@ > Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in. -Read [Foundation's alert](http://foundation.zurb.com/docs/components/alert_boxes.html) docs for more details. \ No newline at end of file +Read [Foundation's alert](http://foundation.zurb.com/docs/components/alert_boxes.html) docs for more details. + diff --git a/src/components/ux-alert/manifest.json b/src/components/ux-alert/manifest.json index c7a60a2c..46f42f3a 100644 --- a/src/components/ux-alert/manifest.json +++ b/src/components/ux-alert/manifest.json @@ -3,5 +3,5 @@ "text": "The text to display on the alert", "class": "[success warning info alert secondary] [round radius]" }, - "category": "Callouts & Prompts" + "category": "callouts & prompts" } \ No newline at end of file diff --git a/src/components/ux-alert/ux-alert.hbs b/src/components/ux-alert/ux-alert.hbs index febfd593..184d4f56 100644 --- a/src/components/ux-alert/ux-alert.hbs +++ b/src/components/ux-alert/ux-alert.hbs @@ -1,8 +1,8 @@ -
    +
    {{#if isDataModel}} {{{text}}} {{else}} {{yield}} {{/if}} - × +
    \ No newline at end of file diff --git a/src/components/ux-alert/ux-alert.steps.js b/src/components/ux-alert/ux-alert.steps.js index 1a080a78..be7f5f5b 100644 --- a/src/components/ux-alert/ux-alert.steps.js +++ b/src/components/ux-alert/ux-alert.steps.js @@ -2,9 +2,8 @@ module.exports = function () { // Load standard world object to be 'this' in steps. this.World = require('../../world').World; - require('../../support/steps').call(this); - + this.Before(function (callback) { this.component = {}; this.component.container = '#childComponent'; diff --git a/src/components/ux-button/README.md b/src/components/ux-button/README.md index 1d85106e..ebf189bb 100644 --- a/src/components/ux-button/README.md +++ b/src/components/ux-button/README.md @@ -1,2 +1,4 @@ - > This renders a button + +Read [Foundation's button](http://foundation.zurb.com/docs/components/button.html) docs for more details. + diff --git a/src/components/ux-button/manifest.json b/src/components/ux-button/manifest.json index 73840237..f2ec8e74 100644 --- a/src/components/ux-button/manifest.json +++ b/src/components/ux-button/manifest.json @@ -5,5 +5,6 @@ }, "events": { "onclick": "Event to fire when button is clicked" - } + }, + "category": "buttons" } \ No newline at end of file diff --git a/src/components/ux-button/ux-button.steps.js b/src/components/ux-button/ux-button.steps.js index 7f24cf80..ec3d4289 100644 --- a/src/components/ux-button/ux-button.steps.js +++ b/src/components/ux-button/ux-button.steps.js @@ -2,6 +2,7 @@ module.exports = function () { // Load standard world object to be 'this' in steps. this.World = require('../../world').World; + require('../../support/steps').call(this); // Semantic mappings onto css selectors etc. var component = { container: '#childComponent' }; @@ -15,11 +16,6 @@ module.exports = function () { } }; - this.Given(/^I have loaded component "([^"]*)" with use case "([^"]*)"$/, - function (componentName, useCase, callback) { - this.client.loadComponentWithUseCase(componentName, useCase, callback); - }); - this.Then(/^the element "([^"]*)" should be displayed$/, function (semanticName, callback) { var self = this; diff --git a/src/components/ux-iconbar/README.md b/src/components/ux-iconbar/README.md index d39d3a2c..05676193 100644 --- a/src/components/ux-iconbar/README.md +++ b/src/components/ux-iconbar/README.md @@ -1,3 +1,6 @@ An Icon Bar provides a menu to quickly navigate an app. Use the Icon Bar horizontally or vertically, -with the labels below the icons or to the right. Have it your way. \ No newline at end of file +with the labels below the icons or to the right. Have it your way. + +Read [Foundation's iconbar](http://foundation.zurb.com/docs/components/iconbar.html) docs for more details. + diff --git a/src/components/ux-keystrokes/README.md b/src/components/ux-keystrokes/README.md new file mode 100644 index 00000000..edbdd8e0 --- /dev/null +++ b/src/components/ux-keystrokes/README.md @@ -0,0 +1,3 @@ +> If you have keyboard affordances, you might need to explain them to users. For example, to close your browser window hit Ctrl + W. (Don't actually type that now - there are more docs to read.) Keystroke is a simple character affordance tool. + +Read [Foundation's keystrokes](http://foundation.zurb.com/docs/components/keystrokes.html) docs for more details. \ No newline at end of file diff --git a/src/components/ux-keystrokes/manifest.json b/src/components/ux-keystrokes/manifest.json new file mode 100644 index 00000000..b9b3ed0f --- /dev/null +++ b/src/components/ux-keystrokes/manifest.json @@ -0,0 +1,6 @@ +{ + "data": { + "text": "The text to display on the ux-keystrokes component" + }, + "category": "typography" +} \ No newline at end of file diff --git a/src/components/ux-keystrokes/use-cases/customAtributes.json b/src/components/ux-keystrokes/use-cases/customAtributes.json new file mode 100644 index 00000000..72182a46 --- /dev/null +++ b/src/components/ux-keystrokes/use-cases/customAtributes.json @@ -0,0 +1,7 @@ +{ + "title": "Use case with custom attributes", + "isDataModel": true, + "data": { + "text": "Cmd" + } +} \ No newline at end of file diff --git a/src/components/ux-keystrokes/use-cases/dataDriven.json b/src/components/ux-keystrokes/use-cases/dataDriven.json new file mode 100644 index 00000000..633626c2 --- /dev/null +++ b/src/components/ux-keystrokes/use-cases/dataDriven.json @@ -0,0 +1,7 @@ +{ + "title": "Data driven use case", + "isDataModel": true, + "data": { + "text": "Ctrl" + } +} \ No newline at end of file diff --git a/src/components/ux-keystrokes/ux-keystrokes.hbs b/src/components/ux-keystrokes/ux-keystrokes.hbs new file mode 100644 index 00000000..1888ac28 --- /dev/null +++ b/src/components/ux-keystrokes/ux-keystrokes.hbs @@ -0,0 +1,7 @@ + + {{#if isDataModel}} + {{text}} + {{else}} + {{yield}} + {{/if}} + \ No newline at end of file diff --git a/src/components/ux-keystrokes/ux-keystrokes.js b/src/components/ux-keystrokes/ux-keystrokes.js new file mode 100644 index 00000000..d306e128 --- /dev/null +++ b/src/components/ux-keystrokes/ux-keystrokes.js @@ -0,0 +1,4 @@ +Ractive.extend({ + isolated: true, + template: Ractive.defaults.templates['ux-keystrokes'] +}); diff --git a/src/components/ux-keystrokes/ux-keystrokes.scss b/src/components/ux-keystrokes/ux-keystrokes.scss new file mode 100644 index 00000000..2cd4d5bc --- /dev/null +++ b/src/components/ux-keystrokes/ux-keystrokes.scss @@ -0,0 +1,3 @@ +.ux-keystrokes { + // TODO Component styling goes here. +} \ No newline at end of file diff --git a/src/components/ux-label/README.md b/src/components/ux-label/README.md index dc57beb7..50b7aab1 100644 --- a/src/components/ux-label/README.md +++ b/src/components/ux-label/README.md @@ -1,3 +1,4 @@ > Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a label that notes when something was updated. -Read [Foundation's label](http://foundation.zurb.com/docs/components/labels.html) docs for more details. \ No newline at end of file +Read [Foundation's label](http://foundation.zurb.com/docs/components/labels.html) docs for more details. + diff --git a/src/components/ux-label/ux-label.steps.js b/src/components/ux-label/ux-label.steps.js index 5b938ed6..367aa8d3 100644 --- a/src/components/ux-label/ux-label.steps.js +++ b/src/components/ux-label/ux-label.steps.js @@ -2,6 +2,7 @@ module.exports = function () { // Load standard world object to be 'this' in steps. this.World = require('../../world').World; + require('../../support/steps').call(this); this.Before(function (callback) { this.component = {}; @@ -10,9 +11,4 @@ module.exports = function () { callback(); }); - this.Given(/^I have loaded component "([^"]*)" with use case "([^"]*)"$/, - function (componentName, useCase, callback) { - this.client.loadComponentWithUseCase(componentName, useCase, callback); - }); - }; diff --git a/src/components/ux-off-canvas/README.md b/src/components/ux-off-canvas/README.md index 60793550..f7c76152 100644 --- a/src/components/ux-off-canvas/README.md +++ b/src/components/ux-off-canvas/README.md @@ -1,3 +1,4 @@ > Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy. Read [Foundation's offcanvas.html](http://foundation.zurb.com/docs/components/offcanvas.html) docs for more details. + diff --git a/src/components/ux-off-canvas/ux-off-canvas.steps.js b/src/components/ux-off-canvas/ux-off-canvas.steps.js index 5b938ed6..367aa8d3 100644 --- a/src/components/ux-off-canvas/ux-off-canvas.steps.js +++ b/src/components/ux-off-canvas/ux-off-canvas.steps.js @@ -2,6 +2,7 @@ module.exports = function () { // Load standard world object to be 'this' in steps. this.World = require('../../world').World; + require('../../support/steps').call(this); this.Before(function (callback) { this.component = {}; @@ -10,9 +11,4 @@ module.exports = function () { callback(); }); - this.Given(/^I have loaded component "([^"]*)" with use case "([^"]*)"$/, - function (componentName, useCase, callback) { - this.client.loadComponentWithUseCase(componentName, useCase, callback); - }); - }; diff --git a/src/components/ux-orbit/README.md b/src/components/ux-orbit/README.md index 9027de69..6d9855e2 100644 --- a/src/components/ux-orbit/README.md +++ b/src/components/ux-orbit/README.md @@ -1 +1,4 @@ > ux-orbit Documentation + +Read [Foundation's orbit](http://foundation.zurb.com/docs/components/orbit.html) docs for more details. + diff --git a/src/components/ux-orbit/use-cases/dataDriven.json b/src/components/ux-orbit/use-cases/dataDriven.json index ddbfa2d9..68b0e3bc 100644 --- a/src/components/ux-orbit/use-cases/dataDriven.json +++ b/src/components/ux-orbit/use-cases/dataDriven.json @@ -2,25 +2,23 @@ "title": "Data driven use case", "isDataModel": true, "data": { + "currentPage": 2, "items": [ { "imagesrc": "http://placekitten.com/g/1500/500", "link": ".", "imagealt": "Slide 1", - "caption": "Caption One", - "active": true + "caption": "Caption One" }, { "imagesrc": "http://placekitten.com/1500/500", "imagealt": "Slide 2", "link": ".", - "caption": "Caption Two", - "active": false + "caption": "Caption Two" }, { - "content": "", - "active": false + "caption": "Caption Three" } ] } -} \ No newline at end of file +} diff --git a/src/components/ux-orbit/ux-orbit.feature b/src/components/ux-orbit/ux-orbit.feature index 7ad5d230..a22b5cf1 100644 --- a/src/components/ux-orbit/ux-orbit.feature +++ b/src/components/ux-orbit/ux-orbit.feature @@ -1,4 +1,5 @@ Feature: ux-orbit test suite - Scenario: Loading ux-orbit - Given I have loaded component "ux-orbit" with use case "UseCase" + Scenario: Loading ux-orbit + Given I have loaded component "ux-orbit" with use case "dataDriven" + Then there should be 3 of the element "slides" diff --git a/src/components/ux-orbit/ux-orbit.hbs b/src/components/ux-orbit/ux-orbit.hbs index 6cf9e1ac..bf6dd378 100644 --- a/src/components/ux-orbit/ux-orbit.hbs +++ b/src/components/ux-orbit/ux-orbit.hbs @@ -2,8 +2,8 @@
    diff --git a/tasks/gulpWingFiles/wingComponent.scss b/tasks/gulpWingFiles/wingComponent.scss index 5a7505ce..0558ec03 100644 --- a/tasks/gulpWingFiles/wingComponent.scss +++ b/tasks/gulpWingFiles/wingComponent.scss @@ -1,3 +1,3 @@ .wingComponent { - // TODO Component styling goes here. -} \ No newline at end of file + // TODO wingComponent styling goes here. +} diff --git a/tasks/gulpWingFiles/wingComponent.steps.js b/tasks/gulpWingFiles/wingComponent.steps.js index 5b938ed6..5030f4d8 100644 --- a/tasks/gulpWingFiles/wingComponent.steps.js +++ b/tasks/gulpWingFiles/wingComponent.steps.js @@ -2,17 +2,19 @@ module.exports = function () { // Load standard world object to be 'this' in steps. this.World = require('../../world').World; + require('../../support/steps').call(this); + + // Load shared library of step definitions. Use these first! + require('../../support/steps').call(this); this.Before(function (callback) { + this.component = {}; - this.component.container = '#childComponent '; + this.component.container = '.wingComponent '; + this.component.dummy = this.component.container + 'h2'; callback(); - }); - this.Given(/^I have loaded component "([^"]*)" with use case "([^"]*)"$/, - function (componentName, useCase, callback) { - this.client.loadComponentWithUseCase(componentName, useCase, callback); }); }; diff --git a/tasks/rfA11y.js b/tasks/rfA11y.js new file mode 100644 index 00000000..6294e5a0 --- /dev/null +++ b/tasks/rfA11y.js @@ -0,0 +1,72 @@ +var args = require('yargs').argv, + _ = require('lodash-compat'), + glob = require('simple-glob'), + nodePath = require('path'), + Q = require('q'), + gutil = require('gulp-util'), + a11y = require('a11y'); + +module.exports.auditComponents = function (options) { + + // Command line overrides + var component = args.component || args.c || '*'; + var usecase = args.usecase || args.u || '*' + + // Pass port in, else default. + var port = options && options.port || '8089'; + + // Create test harness URLs from all use cases in the repo. + var urls = _(glob('./src/components/' + component + '/use-cases/' + usecase + '.json')) + .map(function (useCase) { + var parsed = nodePath.parse(useCase); + var arr = parsed.dir.split(nodePath.sep); + return [ + 'http://localhost:' + port + '/testRunner.html#!/component', + arr[3], + 'use-case', + parsed.name + ].join('/'); + }) + .value(); + + var promises = _.map(urls, function (url) { + + // gutil.log('Running a11y for url', url); + + return Q.Promise(function (resolve, reject) { + a11y(url, function (err, reports) { + + if (err) { + reject(err); + } + + var failures = reports.audit && _.where(reports.audit, { result: 'FAIL' }); + + if (failures && failures.length > 0) { + gutil.log(gutil.colors.red('a11y FAIL ' + url) +'\n\n' + reports.report + '\n'); + reject('a11y FAIL on one or more urls, see log'); + } else { + gutil.log(gutil.colors.green('a11y PASS ' + url)); + resolve('a11y PASS ' + url); + } + + }); + }); + + }); + + // Wrap the a11y work up using a deferred promise, for a cleaner API. + var result = Q.defer(); + + // Only pass gulp task if ALL tests pass. + Q.allSettled(promises).then(function (results) { + var rejected = _.where(results, { state: 'rejected' }); + if (rejected && rejected.length > 0) { + result.reject('One or more a11y tests failed, see log.'); + } + result.resolve(); + }); + + return result.promise; + +}; \ No newline at end of file