evokit-list - npm Package Compare versions

Comparing version 3.0.0-alpha.1 to 3.0.0-alpha.2

package.json

 {
   "name": "evokit-list",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "<List>",
@@ -23,5 +23,5 @@ "main": "index.js",
   "peerDependencies": {
-    "evokit": "^3.0.0"
+    "evokit": ">=3.0.0"
   },
-  "gitHead": "c32c3bb3b580a7012d39818cc8a0a424a6621f19"
+  "gitHead": "2d0aee5134cf14e08aa8ee9e32494c06fbeb46b6"
 }

README.md

@@ -1,5 +0,10 @@
-[create_theme]: base/theme
+[evokit]: /packages/evokit/
+[css-variable]: //caniuse.com/#feat=css-variables
+[css-variable-usage]: //w3schools.com/css/css3_variables.asp
+[html-tag-ul]: //www.w3schools.com/tags/tag_ul.asp
+[html-tag-li]: //www.w3schools.com/tags/tag_li.asp
+[postcss]: //postcss.org
+[postcss-preset-env]: //preset-env.cssdb.org
 
-[list]: #list
-[listitem]: #listitem
+[create_theme]: docs/base/theme
 
@@ -13,11 +18,23 @@ [list-indent]: #list-indent
 
-Список
+[![](https://img.shields.io/npm/v/evokit-list.svg)](https://www.npmjs.com/package/evokit-list)
 
+Used to create list. Contains two elements `<List>` and `<List.Item>`.
+
 ---
 
-## Usage
+#### Install
 
-- [List][list]
-- [List.Item][listitem]
+> Peer dependencies [evokit]
 
+```bash
+npm install evokit-list --save
+```
+
+#### Usage
+
+> The styles use [css-variable] and will work in all modern browsers. If you need to support more old browsers such as Interner Explorer 11 or lower, use a tool [postcss] with [postcss-preset-env] for transforming css into something most browsers can understand.
+
+- `<List>` has a default html tag [ul][html-tag-ul]
+- `<List.Item>` has a default html tag [li][html-tag-li]
+
 ```jsx
@@ -29,3 +46,3 @@ import { List } from 'evokit-list';
     <List.Item>
-        content
+        ...
     </List.Item>
@@ -36,138 +53,87 @@ </List>
 
----
+[![Edit list-usage](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/listusage-ycfx4?fontsize=14 ':include :type=iframe width=100% height=500px')
 
-## List
+#### Props
 
 | Props | Values | Description |
 |-------|--------|-------------|
-| [list-indent]  | `none` `xxs` `xs` `s` `m` `l` `xl` `xxl` | Отступы между элементами |
-| [list-style]   | `dash` `decimal` `disc` | Тип маркера |
-| [list-color]   | `${themeName}` - [Create Theme][create_theme] | Цвет маркера |
-| [list-divider] | `${themeName}` - [Create Theme][create_theme] | Разделитель между элементами |
+| [list-indent]  | `none` `xxs` `xs` `s` `m` `l` `xl` `xxl` | Indentation between elements |
+| [list-style]   | `dash` `decimal` `disc` | Marker type |
+| [list-color]   | `{THEME_NAME}` | Marker color - [Create Theme][create_theme] |
+| [list-divider] | `{THEME_NAME}` | Color separator between elements - [Create Theme][create_theme] |
 
-### `list-indent`
+#### Customize
 
-- `none` - Расстояние между элементами `0px`
-- `xxs, xs, s, m, l, xl, xxl` - Каждое последующее значение больше предыдущего на 5px, `xxs=5px`, `xs=10px`, `s=15px` и т.д.
+> This set of css variables is default, if you want to override one or more value, please use the rules [css-variable-usage], define them below the css import.
 
-```jsx
-<List list-indent='...'></List>
+```css
+:root {
+    /* prop 'list-indent' */
+    --ek-list-indent-xxs: 5px;
+    --ek-list-indent-xs: 10px;
+    --ek-list-indent-s: 15px;
+    --ek-list-indent-m: 20px;
+    --ek-list-indent-l: 25px;
+    --ek-list-indent-xl: 30px;
+    --ek-list-indent-xxl: 35px;
+}
 ```
 
+---
+
+##### `list-indent`
+
+- `none` - no indent, value: `0px`
+- `xxs` - css variable `--ek-list-indent-xxs`, default value: `5px`
+- `xs` - css variable `--ek-list-indent-xs`, default value: `10px`
+- `s` - css variable `--ek-list-indent-s`, default value: `15px`
+- `m` - css variable `--ek-list-indent-m`, default value: `20px`
+- `l` - css variable `--ek-list-indent-l`, default value: `25px`
+- `xl` - css variable `--ek-list-indent-xl`, default value: `30px`
+- `xxl` - css variable `--ek-list-indent-xxl`, default value: `35px`
+
 ```jsx
-/*react*/
-<script>
-const { List, Example } = EvoKit;
-
-export default class ExampleList extends React.Component {
-    render() {
-        return (
-            <Example values={['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl']}>
-                {(value) => (
-                    <List list-indent={value}>
-                        {[1, 2, 3].map((key) => (
-                            <List.Item>
-                                <Example.Box>
-                                    item {key}
-                                </Example.Box>
-                            </List.Item>
-                        ))}
-                    </List>
-                )}
-            </Example>
-        )
-    }
-}
-</script>
+<List list-indent='xxl'>
+    <List.Item>
+        ...
+    </List.Item>
+</List>
 ```
 
-### `list-style`
+##### `list-style`
 
-- `dash` - Маркер в виде прочерка (—)
-- `decimal` - Арабские числа (1, 2, 3, 4,...).
-- `disc` - Маркер в виде точки (•)
+- `dash` - Dash marker (—)
+- `decimal` - Arabic numbers (1, 2, 3, 4,...).
+- `disc` - Dotted markerи (•)
 
 ```jsx
-<List list-indent='...'></List>
+<List list-style='decimal'>
+    <List.Item>
+        ...
+    </List.Item>
+</List>
 ```
 
-```jsx
-/*react*/
-<script>
-const { List, Example } = EvoKit;
+##### `list-color`
 
-export default class ExampleList extends React.Component {
-    render() {
-        return (
-            <Example values={['dash', 'decimal', 'disc']}>
-                {(value) => (
-                    <List list-style={value}>
-                        {[1, 2, 3].map((key) => (
-                            <List.Item>
-                                item {key}
-                            </List.Item>
-                        ))}
-                    </List>
-                )}
-            </Example>
-        )
-    }
-}
-</script>
-```
+> Set the text color depending on the [created theme][create_theme], used `text color` value.
 
-### `list-color`
-
 ```jsx
-/*react*/
-<script>
-const { List, Example } = EvoKit;
-
-export default class ExampleList extends React.Component {
-    render() {
-        return (
-            <Example values={['success', 'info', 'warning', 'danger']}>
-                {(value) => (
-                    <List list-style='disc' list-color={value}>
-                        {[1, 2, 3].map((key) => (
-                            <List.Item>
-                                item {key}
-                            </List.Item>
-                        ))}
-                    </List>
-                )}
-            </Example>
-        )
-    }
-}
-</script>
+<List list-color={THEME_NAME}>
+    <List.Item>
+        ...
+    </List.Item>
+</List>
 ```
 
-### `list-divider`
+##### `list-divider`
 
+> Set the border color depending on the [created theme][create_theme], used `border color` value.
+
 ```jsx
-/*react*/
-<script>
-const { List, Example } = EvoKit;
-
-export default class ExampleList extends React.Component {
-    render() {
-        return (
-            <Example values={['success', 'info', 'warning', 'danger']}>
-                {(value) => (
-                    <List list-indent='m' list-divider={value}>
-                        {[1, 2, 3].map((key) => (
-                            <List.Item>
-                                <Example.Box>
-                                    item {key}
-                                </Example.Box>
-                            </List.Item>
-                        ))}
-                    </List>
-                )}
-            </Example>
-        )
-    }
-}
-</script>
+<List list-divider={THEME_NAME}>
+    <List.Item>
+        ...
+    </List.Item>
+</List>
 ```

No alert changes

Improved metrics

Total package byte prevSize

45830

increased by0.24%

Number of package files

11

increased by10%

Lines of code

893

increased by1.71%

Worsened metrics

Number of lines in readme file

137

decreased by-19.88%

No dependency changes