@crave/farmblocks-dropdown - npm Package Compare versions

Comparing version 0.2.0-alpha.37f958b0 to 0.2.0-alpha.3c3d2f95

CHANGELOG.md

@@ -6,8 +6,14 @@ # Change Log
 
-<a name="0.2.0-alpha.37f958b0"></a>
-# 0.2.0-alpha.37f958b0 (2018-01-16)
+<a name="0.2.0-alpha.3c3d2f95"></a>
+# 0.2.0-alpha.3c3d2f95 (2018-01-17)
 
 
+### Bug Fixes
+
+* **color:** fix dropdown items color ([435841b](https://github.com/CraveFood/farmblocks/commit/435841b))
+
+
 ### Features
 
-* **dropdown:** initial dropdown component ([f188829](https://github.com/CraveFood/farmblocks/commit/f188829))
+* **dropdown:** add width property to dropdown to set custom menu width ([df99091](https://github.com/CraveFood/farmblocks/commit/df99091))
+* **dropdown:** initial dropdown component ([b1b8848](https://github.com/CraveFood/farmblocks/commit/b1b8848))

lib/components/Dropdown.js

@@ -54,3 +54,7 @@ "use strict";
           _DropdownMenuWrapper2.default,
-          { align: props.align, zIndex: props.zIndex },
+          {
+            align: props.align,
+            zIndex: props.zIndex,
+            width: props.width
+          },
           React.createElement(
@@ -80,5 +84,6 @@ "ul",
   align: _propTypes2.default.oneOf(["left", "right"]),
-  zIndex: _propTypes2.default.number
+  zIndex: _propTypes2.default.number,
+  width: _propTypes2.default.string
 };
 
 exports.default = Dropdown;

lib/styledComponents/DropdownItemWrapper.js

@@ -7,3 +7,3 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n\n  transition: all ease 0.2s;\n\n  :hover {\n    background: ", ";\n    color: white;\n  }\n\n  border-bottom: solid 1px ", ";\n\n  &:first-child {\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:last-child {\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n\n  > div {\n    padding: 14px;\n  }\n"], ["\n  cursor: pointer;\n\n  transition: all ease 0.2s;\n\n  :hover {\n    background: ", ";\n    color: white;\n  }\n\n  border-bottom: solid 1px ", ";\n\n  &:first-child {\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:last-child {\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n\n  > div {\n    padding: 14px;\n  }\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n\n  transition: all ease 0.2s;\n\n  color: ", ";\n\n  :hover {\n    background: ", ";\n    color: white;\n  }\n\n  border-bottom: solid 1px ", ";\n\n  &:first-child {\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:last-child {\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n\n  > div {\n    padding: 14px;\n  }\n"], ["\n  cursor: pointer;\n\n  transition: all ease 0.2s;\n\n  color: ", ";\n\n  :hover {\n    background: ", ";\n    color: white;\n  }\n\n  border-bottom: solid 1px ", ";\n\n  &:first-child {\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:last-child {\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n\n  > div {\n    padding: 14px;\n  }\n"]);
 
@@ -22,5 +22,5 @@ var _styledComponents = require("styled-components");
 
-var DropdownItemWrapper = _styledComponents2.default.li(_templateObject, _farmblocksTheme.colors.INDIGO_MILK_CAP, _farmblocksTheme.colors.GREY_16, borderRadius, borderRadius, borderRadius, borderRadius);
+var DropdownItemWrapper = _styledComponents2.default.li(_templateObject, _farmblocksTheme.colors.OYSTER, _farmblocksTheme.colors.INDIGO_MILK_CAP, _farmblocksTheme.colors.GREY_16, borderRadius, borderRadius, borderRadius, borderRadius);
 
 DropdownItemWrapper.displayName = "DropdownItemWrapper";
 exports.default = DropdownItemWrapper;

lib/styledComponents/DropdownMenuWrapper.js

@@ -7,3 +7,3 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  margin-top: 16px;\n  min-width: 100%;\n\n  border: solid 1px ", ";\n  border-radius: 4px;\n  box-shadow: 0 4px 4px 0 ", ";\n\n  background: white;\n\n  position: absolute;\n  right: ", ";\n\n  z-index: ", ";\n\n  > ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  margin-top: 16px;\n  min-width: 100%;\n\n  border: solid 1px ", ";\n  border-radius: 4px;\n  box-shadow: 0 4px 4px 0 ", ";\n\n  background: white;\n\n  position: absolute;\n  right: ", ";\n\n  z-index: ", ";\n\n  > ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  margin-top: 16px;\n  min-width: 100%;\n  width: ", ";\n\n  border: solid 1px ", ";\n  border-radius: 4px;\n  box-shadow: 0 4px 4px 0 ", ";\n\n  background: white;\n\n  position: absolute;\n  right: ", ";\n\n  z-index: ", ";\n\n  > ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  margin-top: 16px;\n  min-width: 100%;\n  width: ", ";\n\n  border: solid 1px ", ";\n  border-radius: 4px;\n  box-shadow: 0 4px 4px 0 ", ";\n\n  background: white;\n\n  position: absolute;\n  right: ", ";\n\n  z-index: ", ";\n\n  > ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"]);
 
@@ -20,3 +20,5 @@ var _styledComponents = require("styled-components");
 
-var DropdownMenuWrapper = _styledComponents2.default.div(_templateObject, _farmblocksTheme.colors.GREY_16, _farmblocksTheme.colors.GREY_16, function (props) {
+var DropdownMenuWrapper = _styledComponents2.default.div(_templateObject, function (props) {
+  return props.width;
+}, _farmblocksTheme.colors.GREY_16, _farmblocksTheme.colors.GREY_16, function (props) {
   return props.align === "right" && 0;
@@ -23,0 +25,0 @@ }, function (props) {

package.json

 {
   "name": "@crave/farmblocks-dropdown",
-  "version": "0.2.0-alpha.37f958b0",
+  "version": "0.2.0-alpha.3c3d2f95",
   "description": "",
@@ -36,6 +36,6 @@ "author": "Crave Food Services and AUTHORS",
   "dependencies": {
-    "@crave/farmblocks-button": "^1.4.0-alpha.37f958b0",
-    "@crave/farmblocks-theme": "^1.5.0-alpha.37f958b0",
+    "@crave/farmblocks-button": "^1.4.0-alpha.3c3d2f95",
+    "@crave/farmblocks-theme": "^1.5.0-alpha.3c3d2f95",
     "react-aria-menubutton": "^5.1.1"
   }
 }

README.md

@@ -1,7 +0,5 @@
-
-
 # Farmblocks Dropdown
 
+Simple dropdown component. See [examples](https://cravefood.github.io/farmblocks/index.html?selectedKind=Dropdown) on storybook
 
-
 ## Installation
@@ -13,4 +11,54 @@
 
+## Usage
+
+```
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import {Dropdown, DropdownItem} from '@crave/farmblocks-dropdown';
+
+class App extends Component {
+  render() {
+    return (
+      <Dropdown text='Select fruit'
+                align='left'
+                handleSelection={(value, event) => console.log('handle selection', value)}>
+        <DropdownItem value={1}>Banana</DropdownItem>
+        <DropdownItem value={2}>Apple</DropdownItem>
+        <DropdownItem value={3}>Apple</DropdownItem>
+      </Dropdown>
+    );
+  }
+}
+
+render(<App />, document.getElementById('root'));
+```
+
+This code will render:
+
+![image](https://user-images.githubusercontent.com/17936244/35000319-3a1b4d12-facb-11e7-9f2a-1b3024772f0f.png)
+
+![image](https://user-images.githubusercontent.com/17936244/35000359-5cff49e6-facb-11e7-864f-b4abdb32e639.png)
+
+## API
+
+### Dropdown
+
+| Property        | Description                                                                                              | Type                     | Required | Default     |
+| --------------- | -------------------------------------------------------------------------------------------------------- | ------------------------ | -------- | ----------- |
+| children        | Pass children of DropdownItem instances                                                                  | node                     | x        |             |
+| text            | The dropdown label. Renders only the icon if this property is empty                                      | string                   |          | ''          |
+| handleSelection | Function to handle selection of a DropdownItem. The first argument is the value, the second is the event | function                 |          | () => false |
+| align           | Align of dropdown items container                                                                        | oneof(['left', 'right']) |          | left        |
+| zIndex          | z-index passed to the dropdown items container                                                           | number                   |          |             |
+
+### DropdownItem
+
+| Property | Description                                                                                                            | Type             | Required | Default |
+| -------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------- | -------- | ------- |
+| children | content to be rendered as the item text                                                                                | node             |          |         |
+| text     | This property is rendered as children of the item component. If passed, it suppress the children property              | string           |          |         |
+| value    | Option value. This property will be passed as the first argument on `handleSelection` property from Dropdown component | string or number |          |         |
+
 ## License
 
 MIT

No alert changes

Improved metrics

Total package byte prevSize

14774

increased by33.03%

Lines of code

160

increased by5.26%

Number of lines in readme file

64

increased by300%

Dependency changes

• Updated@crave/farmblocks-button@^1.4.0-alpha.3c3d2f95

• Updated@crave/farmblocks-theme@^1.5.0-alpha.3c3d2f95