evokit-flex - npm Package Compare versions

Comparing version 3.0.0-alpha.2 to 3.1.0-alpha.0

CHANGELOG.md

@@ -0,4 +1,8 @@
+[README]: /packages/evokit-flex/README.md
+
+
 # EvoKit - Flex
 
 [![](https://img.shields.io/npm/v/evokit-flex.svg)](https://www.npmjs.com/package/evokit-flex)
+[![](https://img.shields.io/badge/page-README-42b983)][README]
 
@@ -9,2 +13,15 @@ ---
 
+### 3.0.0-alpha.3 (not published)
+
+- Remove value `block` for prop `flex-display`
+- Added new props:
+    - `flex-item-display`
+    - `flex-item-order`
+
+### 3.0.0-alpha.2
+
+- Added `FlexItem`
+- New props
+- Update docs
+
 ### 3.0.0-alpha.1
@@ -11,0 +28,0 @@

index.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("evokit")):"function"==typeof define&&define.amd?define(["evokit"],t):"object"==typeof exports?exports.EvoKitFlex=t(require("evokit")):e.EvoKitFlex=t(e.EvoKit)}(this,function(e){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(t,r){t.exports=e},function(e,t,r){"use strict";r.r(t),r.d(t,"Flex",function(){return o}),r.d(t,"FlexItem",function(){return i});var n=r(0),o=Object(n.createBlock)("div","flex",["display","content","items","direction","wrap"]),i=Object(n.createBlock)("div","flex__item",["align","order"]);o.Item=i}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("evokit")):"function"==typeof define&&define.amd?define(["evokit"],t):"object"==typeof exports?exports.EvoKitFlex=t(require("evokit")):e.EvoKitFlex=t(e.EvoKit)}(this,function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";n.r(t),n.d(t,"Flex",function(){return o}),n.d(t,"FlexItem",function(){return i});var r=n(0),o=Object(r.createBlock)("div","flex",["direction","display","items","wrap",["content",["content-align","content-justify"]]]),i=Object(r.createBlock)("div","flex__item",["align","display","order"]);o.Item=i}])});

package.json

 {
   "name": "evokit-flex",
-  "version": "3.0.0-alpha.2",
-  "description": "The Flex block has an essential role in building layouts",
+  "version": "3.1.0-alpha.0",
+  "description": "The block for building flexible layouts",
   "main": "index.js",
   "scripts": {
+    "test": "jest --colors",
     "build": "webpack --colors",
@@ -31,5 +32,5 @@ "watch": "webpack --colors --progress --watch",
   "peerDependencies": {
-    "evokit": ">=3.0.0"
+    "evokit": ">=3.1.0"
   },
-  "gitHead": "d1c4ad55ef28efb1002b9258abdf4cc2a6f87261"
+  "gitHead": "18972238ffc45b8928c743c209c111b7a7053f43"
 }

README.md

 [evokit]: /packages/evokit/
+[CHANGELOG]: /packages/evokit-flex/CHANGELOG.md
 
-[react]: //www.npmjs.com/package/react
-[prop-types]: //www.npmjs.com/package/prop-types
 [css-variable-usage]: //w3schools.com/css/css3_variables.asp
@@ -12,28 +11,30 @@ [html-all-tags]: //www.w3schools.com/tags/default.asp
 
-[flex-tag]: #flex-tag
-
-[flex-display]: #flex-display
-[flex-align-content]: #flex-align-content
-[flex-align-items]: #flex-align-items
 [flex-align-self]: #flex-align-self
-[flex-justify-content]: #flex-justify-content
 [flex-direction]: #flex-direction
+[flex-display]: #flex-display
+[flex-item-align]: #flex-item-align
+[flex-item-display]: #flex-item-display
+[flex-item-order]: #flex-item-order
+[flex-item-tag]: #flex-item-tag
+[flex-tag]: #flex-tag
 [flex-wrap]: #flex-wrap
+[flex-items]: #flex-items
+[flex-content]: #flex-content
 
-[base-props]: #base-props
-[main-props]: #main-props
-
 # EvoKit - Flex
 
 [![](https://img.shields.io/npm/v/evokit-flex.svg)](https://www.npmjs.com/package/evokit-flex)
+[![](https://img.shields.io/badge/page-CHANGELOG-42b983)][CHANGELOG]
 
-The Flex block has an essential role in building layouts
+<!--
+[![npm peer dependency version](https://img.shields.io/npm/dependency-version/evokit-flex/peer/evokit)](https://www.npmjs.com/package/evokit)
+-->
 
+The block for building flexible layouts. Contains two elements `<Flex>` and `<FlexItem>`
+
 ---
 
-!> THE ALPHA VERSION OF THE PACKAGE IS RECOMMENDED FOR REFERENCE ONLY. DO NOT USE IN PRODUCTION!
-
 ## Install
 
-> Peer dependencies [react], [prop-types], [evokit]. More about [install][installation]
+> Peer dependencies [evokit]. More about [install][installation]
 
@@ -46,12 +47,14 @@ ```bash
 
-> More about [usage][quik-start]
+> More about [usage][quik-start]. You can also use `<Flex.Item>` instead of `<FlexItem>`
 
 ```jsx
+import React from 'react';
 import { Flex, FlexItem } from 'evokit-flex';
 import 'evokit-flex/style.css';
 
-<Flex>
-    <FlexItem>...</FlexItem> // some <Flex.Item>...<Flex.Item>
-</Flex>
-
+const App = () => (
+    <Flex flex-content='center'>
+        <FlexItem>...</FlexItem>
+    </Flex>
+);
 ```
@@ -63,20 +66,24 @@
 
-### [Base][base-props]
+### `<Flex />`
 
-| Prop name     | Default value | Possible value             | Description |
-|---------------|---------------|----------------------------|-------------|
-| [flex-tag]    | `div`         | [html tags][html-all-tags] | HTML tag    |
-| flex-item-tag | `div`         | [html tags][html-all-tags] | HTML tag    |
+| Prop name          | Default value    | Possible value | Description |
+|--------------------|------------------|----------------|-------------|
+| [flex-content] `*` | `start`    | `start` `end` `center` `between` `around` `stretch` | Space between flex lines on the cross axis |
+| [flex-direction]   | `row`      | `row` `row-reverse` `column` `column-reverse` | Direction of all items |
+| [flex-display]     | `flex`     | `flex` `flex-inline` `none` | Display type |
+| [flex-items]       | `start`    | `start` `end` `center` `baseline` `stretch` | Alignment of all items on the cross axis |
+| [flex-tag]         | `div`      | [HTML tags][html-all-tags] | HTML tag    |
+| [flex-wrap]        | `wrap`     | `nowrap` `wrap` `wrap-reverse` | Wrap rules |
 
-### [Main][main-props]
+### `<FlexItem />`
 
-| Prop name        | Default value    | Possible value | Description |
-|------------------|------------------|----------------|-------------|
-| [flex-display]         | `flex`     | `flex` `flex-inline` `block` `none` | Display type |
-| flex-content           | `start`    | `start` `end` `center` `between` `around` `stretch` | Space between flex lines on the cross axis |
-| flex-items             | `start`    | `start` `end` `center` `baseline` `stretch` | Alignment of all items on the cross axis |
-| [flex-direction]       | `row`      | `row` `row-reverse` `column` `column-reverse` | Direction of all items |
-| [flex-wrap]            | `wrap`   | `nowrap` `wrap` `wrap-reverse` | Wrap rules |
-| flex-item-align        | `start`    | `start` `end` `center` `baseline` `stretch` | Alignment item on the cross axis |
+| Prop name           | Default value    | Possible value | Description |
+|---------------------|------------------|----------------|-------------|
+| [flex-item-align]   | `start`  | `start` `end` `center` `baseline` `stretch` | Alignment item on the cross axis |
+| [flex-item-display] | `block`  | `block` `none` | Display type |
+| [flex-item-order]   | `0`      | `0` `1` `2` `3` `4` `5` `6` `7` `8` `9` `10` | Set the order |
+| [flex-item-tag]     | `div`    | [HTML tags][html-all-tags] | HTML tag    |
 
+> `*` — prop has advanced params
+
 ## Customize
@@ -96,11 +103,8 @@
 
-[![Edit flex-usage](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/flex-usage-d85tn?fontsize=14 ':include :type=iframe width=100% height=500px')
+[![Edit flex-usage](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/flex-usage-d85tn?fontsize=14&runonclick=0 ':include :type=iframe width=100% height=500px')
 
 ---
 
+## `flex-tag`
 
-## Base props
-
-### `flex-tag`
-
 Default value `div`
@@ -114,9 +118,22 @@
 
+## `flex-display`
 
-## Main props
+```jsx
+<Flex flex-display='flex-inline'>
+    ...
+</Flex>
+```
 
-### `flex-display`
+## `flex-items`
 
+- `start` - The cross-start margin edges of the flex items are flushed with the cross-start edge of the line
+- `end` - The cross-end margin edges of the flex items are flushed with the cross-end edge of the line
+- `center` - The flex items' margin boxes are centered within the line on the cross-axis
+- `baseline` - All flex items are aligned such that their flex container baselines align
+- `stretch` - Flex items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints
+
+![flex-items](_media/flex-items.svg)
+
 ```jsx
-<Flex flex-display='flex-inline'>
+<Flex flex-items='center'>
     ...
@@ -126,4 +143,15 @@ </Flex>
 
-### `flex-align-content`
+## `flex-content`
 
+**Advanced props**
+
+1. `flex-content-align`
+2. `flex-content-justify`
+
+**Multi values** _(set value separated by a space)_
+
+- `flex-content="{1} {2}"`
+
+**List of values**
+
 - `start` - Lines are packed toward the start of the flex container
@@ -136,6 +164,17 @@ - `end` - Lines are packed toward the end of the flex container
 
-![align-content](_media/align-content.svg)
+| flex-content | flex-content-align | flex-content-justify |
+|------------- |--------------------|----------------------|
+| ![align-content](_media/align-content.svg) | ![align-content](_media/align-content.svg) | ![justify-content](_media/justify-content.svg) |
 
+## `flex-direction`
+
+- `row` - The flex container’s main axis has the same orientation as the inline axis of the current writing mode
+- `row-reverse` - Same as row, except the main-start and main-end directions are swapped
+- `column` - The flex container’s main axis has the same orientation as the block axis of the current writing mode
+- `column-reverse` - Same as column, except the main-start and main-end directions are swapped
+
+![direction](_media/direction.svg)
+
 ```jsx
-<Flex flex-align-content='center'>
+<Flex flex-direction='column'>
     ...
@@ -145,14 +184,12 @@ </Flex>
 
-### `flex-align-items`
+## `flex-wrap`
 
-- `start` - The cross-start margin edges of the flex items are flushed with the cross-start edge of the line
-- `end` - The cross-end margin edges of the flex items are flushed with the cross-end edge of the line
-- `center` - The flex items' margin boxes are centered within the line on the cross-axis
-- `baseline` - All flex items are aligned such that their flex container baselines align
-- `stretch` - Flex items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints
+- `nowrap` - The flex container is single-line
+- `wrap` - The flex container is multi-line
+- `wrap-reverse` - Same as wrap, except the directions are swapped
 
-![align-items](_media/align-items.svg)
+![wrap](_media/wrap.svg)
 
 ```jsx
-<Flex flex-align-items='center'>
+<Flex flex-wrap='wrap'>
     ...
@@ -162,4 +199,16 @@ </Flex>
 
-### `flex-align-self`
+## `flex-item-tag`
 
+Default value `div`
+
+```jsx
+<Flex>
+    <FlexItem flex-item-tag='div'>
+        ...
+    </FlexItem>
+</Flex>
+```
+
+## `flex-item-align`
+
 - `start` - The cross-start margin edges of the flex item are flushed with the cross-start edge of the line
@@ -174,3 +223,3 @@ - `end` - The cross-end margin edges of the flex item are flushed with the cross-end edge of the line
 ```jsx
-<Flex flex-align-self='center'>
+<Flex flex-item-align='center'>
     ...
@@ -180,45 +229,25 @@ </Flex>
 
-### `flex-justify-content`
+## `flex-item-display`
 
-- `start` - Flex items are packed toward the start of the line
-- `end` - Flex items are packed toward the end of the line
-- `center` - Flex items are packed toward the center of the line
-- `between` - Flex items are evenly distributed in the line
-- `around` - Flex items are evenly distributed in the line, with half-size spaces on either end
+- `block` - shown as blocky (default)
+- `none` - remove block from document
 
-![justify-content](_media/justify-content.svg)
-
 ```jsx
-<Flex flex-justify-content='center'>
-    ...
+<Flex>
+    <FlexItem flex-item-display='none'>
+        ...
+    </FlexItem>
 </Flex>
 ```
 
-### `flex-direction`
+## `flex-item-order`
 
-- `row` - The flex container’s main axis has the same orientation as the inline axis of the current writing mode
-- `row-reverse` - Same as row, except the main-start and main-end directions are swapped
-- `column` - The flex container’s main axis has the same orientation as the block axis of the current writing mode
-- `column-reverse` - Same as column, except the main-start and main-end directions are swapped
+- `0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10` - only affects the visual order
 
-![direction](_media/direction.svg)
-
 ```jsx
-<Flex flex-direction='column'>
-    ...
+<Flex>
+    <FlexItem flex-item-order='2'>
+        ...
+    </FlexItem>
 </Flex>
 ```
-
-### `flex-wrap`
-
-- `nowrap` - The flex container is single-line
-- `wrap` - The flex container is multi-line
-- `wrap-reverse` - Same as wrap, except the directions are swapped
-
-![wrap](_media/wrap.svg)
-
-```jsx
-<Flex flex-wrap='wrap'>
-    ...
-</Flex>
-```

No alert changes

Improved metrics

Total package byte prevSize

57536

increased by9.96%

Lines of code

1028

increased by25.37%

Number of lines in readme file

243

increased by13.55%

No dependency changes