Skip to content

Commit

Permalink
Merge pull request #8 from fyndiq/dropdown-fixes
Browse files Browse the repository at this point in the history
Dropdown fixes and features
  • Loading branch information
thibautRe authored May 26, 2017
2 parents 6c185c2 + 2b7020f commit ff2d099
Show file tree
Hide file tree
Showing 17 changed files with 777 additions and 44 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ This git repository is a monorepo built using [Lerna](//lernajs.io). It contains
| [`fyndiq-component-price`](/packages/fyndiq-component-price) | [![npm](https://img.shields.io/npm/v/fyndiq-component-price.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-price) | Price tag component |
| [`fyndiq-component-productcard`](/packages/fyndiq-component-productcard) | [![npm](https://img.shields.io/npm/v/fyndiq-component-productcard.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-productcard) | Product card component |
| [`fyndiq-component-stars`](/packages/fyndiq-component-stars) | [![npm](https://img.shields.io/npm/v/fyndiq-component-stars.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-stars) | Stars component |
| [`fyndiq-component-tooltip`](/packages/fyndiq-component-tooltip) | [![npm](https://img.shields.io/npm/v/fyndiq-component-tooltip.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-tooltip) | Tooltip component |
| [`fyndiq-icon-arrow`](/packages/fyndiq-icon-arrow) | [![npm](https://img.shields.io/npm/v/fyndiq-icon-arrow.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-icon-arrow) | Arrow icon |
| [`fyndiq-icon-brand`](/packages/fyndiq-icon-brand) | [![npm](https://img.shields.io/npm/v/fyndiq-icon-brand.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-icon-brand) | Brand icon |
| [`fyndiq-icon-checkmark`](/packages/fyndiq-icon-checkmark) | [![npm](https://img.shields.io/npm/v/fyndiq-icon-checkmark.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-icon-checkmark) | Checkmark icon |
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"file-loader": "^0.10.1",
"jest": "^19.0.2",
"jest": "^20.0.0",
"lerna": "2.0.0-beta.38",
"react": "^15.4.2",
"react-dom": "^15.4.2",
Expand Down
22 changes: 18 additions & 4 deletions packages/fyndiq-component-dropdown/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@ import Dropdown from 'fyndiq-component-dropdown'

// Normal usage
<Dropdown button="Open dropdown">
<div>Dropdown content</div>
Dropdown content
</Dropdown>

// No arrow pointing downwards
<Dropdown button="Open dropdown" noArrow>
<div>Dropdown content</div>
Dropdown content
</Dropdown>

// Custom button
Expand All @@ -35,7 +35,17 @@ import Button from 'fyndiq-component-button'
Open Dropdown
</Button>
)}>
<div>Dropdown content</div>
Dropdown content
</Dropdown>

// Open dropdown on hover
<Dropdown button="Hover me" hoverMode>
Dropdown content
</Dropdown>

// Change the position of the dropdown
<Dropdown button="Top right" position="tr">
Dropdown content
</Dropdown>
```

Expand All @@ -49,6 +59,10 @@ The component `Dropdown` has the following customizable props:
|---|---|---|---|
| **button** | String or Component | The inside of the dropdown's button. If a String is passed, a `<Button>` will be shown. | (required) |
| **children** | Component | Content of the dropdown | (required) |
| **size** | String | Size of the button if **button** is used in String mode. For values, see [`Button`'s API](../fyndiq-component-button#API) | Button's default |
| **position** | String | Position of the dropdown, relatively to the button. One of `bl`, `bc`, `br`, `tl`, `tc`, `tr` | `bl` |
| **margin** | Number | Distance from the dropdown to the button | `5` |
| **noArrow** | boolean | If **button** is used in String mode, hides the downwards arrow | `false` |
| **noWrapperStyle** | boolean | Remove cosmetic styles for the wrapper | `false` |
| **opened** | boolean | Allows to externally control the dropdown | `false` |
| **size** | String | Size of the button if **button** is used in String mode. For values, see [`Button`'s API`](../fyndiq-component-button#API) | Button's default |
| **hoverMode** | boolean | Opens the dropdown on hover rather than on click | `false` |
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`fyndiq-component-dropdown should be closable by pressing the Escape key 1`] = `""`;

exports[`fyndiq-component-dropdown should be closed when clicking outside 1`] = `""`;

exports[`fyndiq-component-dropdown should be displayed with minimum props 1`] = `
<div
className="wrapper"
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<div
onClick={[Function]}
>
<Button
disabled={false}
horizontal={false}
onClick={[Function]}
pressed={false}
size="s"
type="normal"
>
Button
<Arrow
className=""
orientation="down"
/>
</Button>
</div>
</div>
`;

exports[`fyndiq-component-dropdown should be opened when clicked on the button 1`] = `
<div
className="
dropdownWrapper
dropdownDefault
position-bl
"
style={
Object {
"left": 0,
"top": 5,
}
}
>
Value
</div>
`;

exports[`fyndiq-component-dropdown should be opened when hovered, if in hoverMode 1`] = `
<div
className="
dropdownWrapper
dropdownDefault
position-bl
"
style={
Object {
"left": 0,
"top": 5,
}
}
>
Value
</div>
`;

exports[`fyndiq-component-dropdown should be opened when hovered, if in hoverMode 2`] = `""`;

exports[`fyndiq-component-dropdown should have a custom button 1`] = `
<div
className="wrapper"
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<div
onClick={[Function]}
>
<div>
Hello
</div>
</div>
</div>
`;

exports[`fyndiq-component-dropdown should have a custom wrapper 1`] = `
<div
className="
dropdownWrapper
position-bl
"
style={
Object {
"left": 0,
"top": 0,
}
}
>
Content
</div>
`;

exports[`fyndiq-component-dropdown should have an arrow oriented to the top if dropdown is above 1`] = `
<Arrow
className=""
orientation="up"
/>
`;

exports[`fyndiq-component-dropdown should have different dropdown positions 1`] = `
<div
className="
dropdownWrapper
dropdownDefault
position-bc
"
style={
Object {
"left": 0,
"top": 0,
}
}
>
Content
</div>
`;
Loading

0 comments on commit ff2d099

Please sign in to comment.