@rei/cdr-list - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/cdr-list.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("CdrList",[],e):"object"==typeof exports?exports.CdrList=e():t.CdrList=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=1)}([function(t,e,n){"use strict";var r=n(4);e.a={name:"CdrList",mixins:[r.a],props:{listType:{type:String,default:"ul",validator:function(t){return["ul","ol"].indexOf(t)>=0||!1}}},computed:{baseClass:function(){return"cdr-list"}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(2);n.d(e,"CdrList",function(){return r.a})},function(t,e,n){"use strict";var r=n(0),i=n(5),o=n(6);var s=function(t){n(3)},u=Object(o.a)(r.a,i.a,i.b,!1,s,null,null);e.a=u.exports},function(t,e){},function(t,e,n){"use strict";e.a={props:{modifier:String},computed:{modifierClass:function(){var t=this.baseClass,e=this.modifier?this.modifier.split(" "):[],n=[];return this.theme||(n.push(""+t),n=n.concat(e.map(function(e){return t+"--"+e}))),n.join(" ")}}}},function(t,e,n){"use strict";n.d(e,"a",function(){return r}),n.d(e,"b",function(){return i});var r=function(){var t=this.$createElement,e=this._self._c||t;return"ul"===this.listType?e("ul",{class:this.modifierClass},[this._t("default")],2):"ol"===this.listType?e("ol",{class:this.modifierClass},[this._t("default")],2):this._e()},i=[]},function(t,e,n){"use strict";e.a=function(t,e,n,r,i,o,s,u){var f=typeof(t=t||{}).default;"object"!==f&&"function"!==f||(t=t.default);var c,a="function"==typeof t?t.options:t;e&&(a.render=e,a.staticRenderFns=n,a._compiled=!0);r&&(a.functional=!0);o&&(a._scopeId=o);s?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},a._ssrRegister=c):i&&(c=u?function(){i.call(this,this.$root.$options.shadowRoot)}:i);if(c)if(a.functional){a._injectStyles=c;var l=a.render;a.render=function(t,e){return c.call(e),l(t,e)}}else{var d=a.beforeCreate;a.beforeCreate=d?[].concat(d,c):[c]}return{exports:t,options:a}}}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("CdrList",[],e):"object"==typeof exports?exports.CdrList=e():t.CdrList=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=3)}([function(t,e,n){"use strict";var r=n(1);e.a=r.a},function(t,e,n){"use strict";var r=n(7);e.a={name:"CdrList",mixins:[r.a],props:{tag:{type:String,default:"ul",validator:function(t){return["ul","ol"].indexOf(t)>=0||!1}}},computed:{baseClass:function(){return"cdr-list"}}}},function(t,e){t.exports={"cdr-list":"cdr-list_0.2.0","cdr-list--compact":"cdr-list--compact_0.2.0","cdr-list--ordered":"cdr-list--ordered_0.2.0","cdr-list--unordered":"cdr-list--unordered_0.2.0","cdr-list--inline":"cdr-list--inline_0.2.0"}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(4);n.d(e,"CdrList",function(){return r.a})},function(t,e,n){"use strict";var r=n(5),i=n(0),s=n(8),o=n(9);var u=Object(o.a)(i.a,r.a,r.b,!1,function(t){this.$style=s.default.locals||s.default},null,null);e.a=u.exports},function(t,e,n){"use strict";var r=n(6);n.d(e,"a",function(){return r.a}),n.d(e,"b",function(){return r.b})},function(t,e,n){"use strict";n.d(e,"a",function(){return r}),n.d(e,"b",function(){return i});var r=function(){var t=this.$createElement;return(this._self._c||t)(this.tag,{tag:"component",class:this.modifierClass},[this._t("default")],2)},i=[]},function(t,e,n){"use strict";e.a={props:{modifier:String},computed:{modifierClass:function(){var t=this,e=this.baseClass,n=this.modifier?this.modifier.split(" "):[],r=[];return this.$style?(r.push(this.moduleClass(e)),r=r.concat(n.map(function(n){return t.modifyClassName(e,n)}))):(r.push(""+e),r=r.concat(n.map(function(n){return t.modifyClassName(e,n)}))),r.join(" ")}},methods:{moduleClass:function(t){return this.$style[""+t]},modifyClassName:function(t,e){return this.$style?this.moduleClass(t+"--"+e):t+"--"+e}}}},function(t,e,n){"use strict";var r=n(2),i=n.n(r);e.default=i.a},function(t,e,n){"use strict";e.a=function(t,e,n,r,i,s,o,u){var c,a="function"==typeof t?t.options:t;e&&(a.render=e,a.staticRenderFns=n,a._compiled=!0);r&&(a.functional=!0);s&&(a._scopeId="data-v-"+s);o?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},a._ssrRegister=c):i&&(c=u?function(){i.call(this,this.$root.$options.shadowRoot)}:i);if(c)if(a.functional){a._injectStyles=c;var d=a.render;a.render=function(t,e){return c.call(e),d(t,e)}}else{var f=a.beforeCreate;a.beforeCreate=f?[].concat(f,c):[c]}return{exports:t,options:a}}}])});

dist/plugin.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("CdrList",[],e):"object"==typeof exports?exports.CdrList=e():t.CdrList=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=1)}([function(t,e,n){"use strict";var o=n(4);e.a={name:"CdrList",mixins:[o.a],props:{listType:{type:String,default:"ul",validator:function(t){return["ul","ol"].indexOf(t)>=0||!1}}},computed:{baseClass:function(){return"cdr-list"}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=n(2);function i(t){t.component("cdr-list",o.a)}"undefined"!=typeof window&&window.Vue&&window.Vue.use(i),e.default=i},function(t,e,n){"use strict";var o=n(0),i=n(5),r=n(6);var s=function(t){n(3)},u=Object(r.a)(o.a,i.a,i.b,!1,s,null,null);e.a=u.exports},function(t,e){},function(t,e,n){"use strict";e.a={props:{modifier:String},computed:{modifierClass:function(){var t=this.baseClass,e=this.modifier?this.modifier.split(" "):[],n=[];return this.theme||(n.push(""+t),n=n.concat(e.map(function(e){return t+"--"+e}))),n.join(" ")}}}},function(t,e,n){"use strict";n.d(e,"a",function(){return o}),n.d(e,"b",function(){return i});var o=function(){var t=this.$createElement,e=this._self._c||t;return"ul"===this.listType?e("ul",{class:this.modifierClass},[this._t("default")],2):"ol"===this.listType?e("ol",{class:this.modifierClass},[this._t("default")],2):this._e()},i=[]},function(t,e,n){"use strict";e.a=function(t,e,n,o,i,r,s,u){var f=typeof(t=t||{}).default;"object"!==f&&"function"!==f||(t=t.default);var c,a="function"==typeof t?t.options:t;e&&(a.render=e,a.staticRenderFns=n,a._compiled=!0);o&&(a.functional=!0);r&&(a._scopeId=r);s?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},a._ssrRegister=c):i&&(c=u?function(){i.call(this,this.$root.$options.shadowRoot)}:i);if(c)if(a.functional){a._injectStyles=c;var d=a.render;a.render=function(t,e){return c.call(e),d(t,e)}}else{var l=a.beforeCreate;a.beforeCreate=l?[].concat(l,c):[c]}return{exports:t,options:a}}}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("CdrList",[],e):"object"==typeof exports?exports.CdrList=e():t.CdrList=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=3)}([function(t,e,n){"use strict";var r=n(1);e.a=r.a},function(t,e,n){"use strict";var r=n(7);e.a={name:"CdrList",mixins:[r.a],props:{tag:{type:String,default:"ul",validator:function(t){return["ul","ol"].indexOf(t)>=0||!1}}},computed:{baseClass:function(){return"cdr-list"}}}},function(t,e){t.exports={"cdr-list":"cdr-list_0.2.0","cdr-list--compact":"cdr-list--compact_0.2.0","cdr-list--ordered":"cdr-list--ordered_0.2.0","cdr-list--unordered":"cdr-list--unordered_0.2.0","cdr-list--inline":"cdr-list--inline_0.2.0"}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(4);function i(t){t.component("cdr-list",r.a)}"undefined"!=typeof window&&window.Vue&&window.Vue.use(i),e.default=i},function(t,e,n){"use strict";var r=n(5),i=n(0),o=n(8),s=n(9);var u=Object(s.a)(i.a,r.a,r.b,!1,function(t){this.$style=o.default.locals||o.default},null,null);e.a=u.exports},function(t,e,n){"use strict";var r=n(6);n.d(e,"a",function(){return r.a}),n.d(e,"b",function(){return r.b})},function(t,e,n){"use strict";n.d(e,"a",function(){return r}),n.d(e,"b",function(){return i});var r=function(){var t=this.$createElement;return(this._self._c||t)(this.tag,{tag:"component",class:this.modifierClass},[this._t("default")],2)},i=[]},function(t,e,n){"use strict";e.a={props:{modifier:String},computed:{modifierClass:function(){var t=this,e=this.baseClass,n=this.modifier?this.modifier.split(" "):[],r=[];return this.$style?(r.push(this.moduleClass(e)),r=r.concat(n.map(function(n){return t.modifyClassName(e,n)}))):(r.push(""+e),r=r.concat(n.map(function(n){return t.modifyClassName(e,n)}))),r.join(" ")}},methods:{moduleClass:function(t){return this.$style[""+t]},modifyClassName:function(t,e){return this.$style?this.moduleClass(t+"--"+e):t+"--"+e}}}},function(t,e,n){"use strict";var r=n(2),i=n.n(r);e.default=i.a},function(t,e,n){"use strict";e.a=function(t,e,n,r,i,o,s,u){var c,a="function"==typeof t?t.options:t;e&&(a.render=e,a.staticRenderFns=n,a._compiled=!0);r&&(a.functional=!0);o&&(a._scopeId="data-v-"+o);s?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},a._ssrRegister=c):i&&(c=u?function(){i.call(this,this.$root.$options.shadowRoot)}:i);if(c)if(a.functional){a._injectStyles=c;var d=a.render;a.render=function(t,e){return c.call(e),d(t,e)}}else{var f=a.beforeCreate;a.beforeCreate=f?[].concat(f,c):[c]}return{exports:t,options:a}}}])});

package.json

 {
   "name": "@rei/cdr-list",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "REI Software Engineering",
@@ -19,2 +19,5 @@ "description": "REI Cedar Style Framework - Vue Component for List",
   ],
+  "config": {
+    "vue_file": "CdrList"
+  },
   "main": "dist/cdr-list.js",
@@ -24,3 +27,4 @@ "style": "dist/cdr-list.css",
     "prepublishOnly": "npm run build && pkg-ok",
-    "build": "node build/build.js"
+    "build": "node build/build.js",
+    "build:docs": "node build/docs-build.js"
   },
@@ -27,0 +31,0 @@ "peerDependencies": {

README.md

@@ -1,7 +0,92 @@
-# <span class="display-name">CdrList</span>
+## Usage
 
-### <span class="modifiers">Modifiers</span>
+ By default the `cdr-list` component renders as an unordered and undecorated "bare" list.
+To use an ordered list pass `ol` to the tag property.
+ ```
+  <cdr-list tag="ol">
+    <li>..</li>
+  </cdr-list>
+```
+Note that the tag itself does not determine display.
 
-{unstyled, bullet, disc, numbered, menu, compact, circle, inline}
+### Variants
+ In addition to our bare list the following modifiers are provided which accommodate our standard text list options.
+* unordered
+* ordered
+* compact
+* inline
 
-Note: type doesn't affect the modifier.
+#### Unordered
+The unordered modifier adds a bullet decorator to child list items and a `en-dash` decorator to grand child list items. this variant can be used on both `ul` or `ol` list types.
+```
+  <cdr-list modifier="unordered">
+```
+
+#### ordered
+The ordered modifier adds a numeric decorator to child list items and a `en-dash` decorator to grand child list items. this variant can be used on both `ul` or `ol` list types.
+```
+  <cdr-list
+    tag="ol"
+    modifier="ordered"
+  >
+```
+
+#### Compact
+The compact modifier reduces the vertical space between list items for non inline list variants. For inline variants the compact modifier reduces the horizontal space between list items.
+```
+  <cdr-list modifier="compact unordered">
+```
+
+#### Inline
+The inline modifier is intended for generic or unordered list variants. In ether case this can be combined with compact to adjust the spacing of inline list variants.
+```
+    <cdr-list modifier="inline compact unordered">
+```
+
+
+
+## Accessibility
+The `cdr-list` component has decoupled the semantic tags `ul` and `ol` from the visual presentation provided by our modifiers. 
+
+This section is focused on sematic implementations of list. 
+
+**Note** that it is perfectly valid to render a semantic ordered list `ol` as a visually non styled or bulleted list using our modifiers.
+```
+  <cdr-list tag="ol">
+```
+
+Use different types of `cdr-list` to group information according to its nature to provide orientation for users.
+
+Unordered lists are used when the order of the items is not relevant. By default the `cdr-list` component will use the `ul` tag.
+
+Individual list items can contain a variety of HTML elements, including paragraphs, headings, form elements, and other (nested) lists.
+
+### Unordered list
+The unordered list consists of one `<ul>` element and multiple list item `<li>` elements.
+
+### Ordered list
+The ordered list consists of one `<ol>` element and multiple list item `<li>` elements.
+
+### Nested lists
+Every `cdr-list` can be nested into another list. Assistive technology can easily inform users about the number of steps.
+```
+  <cdr-list>
+    <li> Unordered list item text
+      <cdr-list tag="ol">
+        <li>Ordered list item text</li>
+      </cdr-list>
+    </li>
+  </cdr-list>
+
+```
+
+## Installation
+
+Placing the component into a your application is as simple as importing it:
+```
+npm i @rei/cdr-list
+```
+
+## Contributing
+### Request an an enhancement
+Join us on Slack at [#design-systems](https://rei.slack.com/messages/CA58YCGN4).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12321

increased by49.29%

Number of lines in readme file

92

increased by1050%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes