bemto-components - npm Package Compare versions

Comparing version 1.6.2 to 1.7.0

Changelog.md

 ## Bemto-components changelog
 
+### v1.7.0 (2018-01-31)
+
+- Added way to redefine tag name from element call.
+- Added way to use function for tagnames on elements.
+- Fixed modifiers and stuff when passing a component to content of an element.
+
 ### v1.6.2 (2018-01-29)
@@ -4,0 +10,0 @@

lib/index.js

@@ -287,3 +287,4 @@ const React = require('react');
     }
-    if (item.tag === false || item.tag === '') {
+
+    if ((elemProp && (elemProp.tag === false || elemProp.tag === '')) || !(elemProp && elemProp.tag) && (item.tag === false || item.tag === '')) {
       item.omitTag = true;
@@ -307,4 +308,12 @@ }
       }
+      // TODO: we don't really need “parsedTagString”, need different naming
       const parsedTagString = parseTagString(item.tagString);
-      parsedTagString.tag = item.tag || parsedTagString.tag || 'div';
+      parsedTagString.tag = elemProp && elemProp.tag || item.tag || parsedTagString.tag || 'div';
+      if (typeof parsedTagString.tag === 'function') {
+        parsedTagString.tag = parsedTagString.tag(props);
+        if (parsedTagString.tag === false || parsedTagString.tag === '') {
+          item.omitTag = true;
+        }
+      }
+
       if (item.className) { parsedTagString.className += ' ' + item.className; }
@@ -321,7 +330,17 @@
       // Collecting options from everywhere
+      const optsItem = collectOptions(item.tagString || '', item);
+      const optsElem = typeof elemProp === 'object' && collectOptions('', elemProp) || {};
+
       const elemOptions = Object.assign(
-        collectOptions(item.tagString || '', item),
-        typeof elemProp === 'object' && collectOptions('', elemProp) || {}
+        {},
+        optsItem,
+        optsElem
       );
 
+      elemOptions.modifiers = Object.assign(
+        {},
+        optsItem.modifiers,
+        optsElem.modifiers
+      );
+
       const myProps = Object.assign({
@@ -339,3 +358,2 @@ __BemtoElem: {
       const content = (!(typeof item.content === 'string' && elemProp) && item.content) || (item.children && { children: true }) || { type: 'elemContent', name: elemName };
-
       const parents = item.parents && item.parents.slice(0) || [];
@@ -342,0 +360,0 @@ parents.push(elemName);

package.json

 {
   "name": "bemto-components",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "description": "Smart components for using parts of BEM methodology with React",
@@ -33,6 +33,7 @@ "main": "lib/index.js",
     "bemto-button": "^0.2.0",
+    "bemto-overflower": "^0.1.0",
     "jest": "^21.2.1",
     "react-docgen-annotation-resolver": "^1.0.0",
     "react-dom": "^16.1.1",
-    "react-styleguidist": "^6.0.33",
+    "react-styleguidist": "6.0.33",
     "react-test-renderer": "16.1.1",
@@ -39,0 +40,0 @@ "styled-components": "^2.2.3",

test/test.js

@@ -693,2 +693,76 @@ const React = require('react');
 
+test('block with a Helper before content with overridden tag name', () => {
+  testSnapshot(
+    bemto('.myBlock', {
+      content: [
+        {
+          elem: 'Helper'
+        },
+        {
+          elem: 'Content',
+          children: true
+        }
+      ]
+    }),
+    { __Helper: { tag: 'strong', content: 'hewwo' } },
+    'children text'
+  );
+});
+
+test('block with a Helper with function tag name', () => {
+  testSnapshot(
+    bemto('span.myBlock', {
+      content: [
+        {
+          elem: 'Helper',
+          tag: p => p.foo === 'bar' && 'strong' || 'div'
+        },
+        {
+          elem: 'Content',
+          children: true
+        }
+      ]
+    }),
+    { foo: 'bar' },
+    'children text'
+  );
+});
+
+test('block with a Helper with function tag name (fallback test)', () => {
+  testSnapshot(
+    bemto('span.myBlock', {
+      content: [
+        {
+          elem: 'Helper',
+          tag: p => p.foo === 'bar' && 'strong' || 'div'
+        },
+        {
+          elem: 'Content',
+          children: true
+        }
+      ]
+    }),
+    {},
+    'children text'
+  );
+});
+
+test('block with a Helper with function tag name, overridden at call', () => {
+  testSnapshot(
+    bemto('span.myBlock', {
+      content: [
+        {
+          elem: 'Helper'
+        },
+        {
+          elem: 'Content',
+          children: true
+        }
+      ]
+    }),
+    { foo: 'bar', __Helper: { content: 'lol', tag: p => p.foo === 'bar' && 'em' || 'div' } },
+    'children text'
+  );
+});
+
 test('block with optional before & after inside a wrapper which should render just before', () => {
@@ -1301,2 +1375,50 @@ testSnapshot(
 
+test('block with passing content to an element through props (passing proper element, with a modifier)', () => {
+  const MyBlock = bemto('.myBlock', {
+    content: [
+      {
+        elem: 'Helper',
+        _test: true
+      },
+      {
+        children: true
+      }
+    ]
+  });
+  testSnapshot(
+    MyBlock,
+    {
+      __Helper: React.createElement(bemto('span.helperContent'))
+    },
+    'children text'
+  );
+});
+
+test('block with passing content to an element through props (passing proper element, with an overridden modifier)', () => {
+  const MyBlock = bemto('.myBlock', {
+    content: [
+      {
+        elem: 'Helper',
+        _test: true
+      },
+      {
+        children: true
+      }
+    ]
+  });
+  testSnapshot(
+    MyBlock,
+    {
+      __Helper: {
+        content: React.createElement(bemto('span.helperContent')),
+        modifiers: {
+          _test2: true,
+          _test: false
+        }
+      }
+    },
+    'children text'
+  );
+});
+
 // FIXME: problem with array and keys =_= so this test gives a warning
@@ -1303,0 +1425,0 @@ /*

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1124139

1.53%

Lines of code

5521

4.39%

Worsened metrics

Dev dependency count

9

12.5%

No dependency changes