Skip to content

add iconName to Dropdown #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 22, 2019
Merged

add iconName to Dropdown #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2b2f1de
add iconName to Dropdown
Feb 20, 2019
168241c
Use icon specific components
Feb 21, 2019
f5878d4
Bump DS version
xkxd Feb 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/build/1.3620de2a.js → docs/build/1.2c24619d.js
View file
Open in desktop

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions docs/build/bundle.fcca4649.js → docs/build/bundle.18e6f24b.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.fcca4649.js"></script></body></html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.18e6f24b.js"></script></body></html>
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@
"test:watch": "yarn test --watchAll --notify"
},
"dependencies": {
"classnames": "^2.2.6",
"date-fns": "^1.29.0",
"design-system": "git://github.com/Wikia/design-system.git#19.2.0",
"prop-types": "^15.6.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
Expand All @@ -56,10 +58,8 @@
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4",
"classnames": "^2.2.6",
"concurrently": "^4.1.0",
"coveralls": "^3.0.2",
"design-system": "git://github.com/Wikia/design-system.git#IW-1589",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"enzyme-redux": "^0.2.1",
Expand Down
7 changes: 7 additions & 0 deletions source/components/Dropdown/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@ Defaults:
</Dropdown>
```

Dropdown using dropdown-tiny chevron:
```js
<Dropdown toggle="Toggle dropdown" iconName="dropdown-tiny">
<p style={{padding: '12px'}}>I am a text inside dropdown!</p>
</Dropdown>
```

Nested dropdown:

```js
Expand Down
70 changes: 21 additions & 49 deletions source/components/Dropdown/__snapshots__/index.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,9 @@ exports[`Dropdown level2 renders correctly with default values 1`] = `
<span>
Toggle
</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown-chevron"
/>
</div>
<div
className="wds-dropdown__content wds-is-not-scrollable wds-dropdown-level-2__content"
Expand All @@ -44,13 +40,9 @@ exports[`Dropdown level2 renders correctly with href set 1`] = `
<span>
Toggle
</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown-chevron"
/>
</div>
<div
className="wds-dropdown__content wds-is-not-scrollable wds-dropdown-level-2__content"
Expand All @@ -73,13 +65,9 @@ exports[`Dropdown level2 renders correctly with isActive set 1`] = `
<span>
Toggle
</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown-chevron"
/>
</div>
<div
className="wds-dropdown__content wds-is-not-scrollable wds-dropdown-level-2__content"
Expand All @@ -102,13 +90,9 @@ exports[`Dropdown level2 renders correctly with isStickedToParent set 1`] = `
<span>
Toggle
</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown-chevron"
/>
</div>
<div
className="wds-dropdown__content wds-is-not-scrollable wds-dropdown-level-2__content"
Expand All @@ -131,13 +115,9 @@ exports[`Dropdown renders correctly with DropdownToggle and children 1`] = `
<span>
Toggle
</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown__toggle-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown__toggle-chevron"
/>
</div>
<div
className="wds-dropdown__content wds-is-not-scrollable"
Expand All @@ -164,13 +144,9 @@ exports[`Dropdown renders correctly with DropdownToggle, toggleIconName and chil
<span>
Toggle
</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown__toggle-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown__toggle-chevron"
/>
</div>
<div
className="wds-dropdown__content wds-is-not-scrollable"
Expand All @@ -197,13 +173,9 @@ exports[`Dropdown renders correctly with default values 1`] = `
<span>
Toggle
</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown__toggle-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown__toggle-chevron"
/>
</div>
<div
className="wds-dropdown__content wds-is-not-scrollable"
Expand Down
95 changes: 39 additions & 56 deletions source/components/Dropdown/components/DropdownToggle/__snapshots__/index.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,9 @@ exports[`DropdownToggle renders correctly when shouldNotWrap is set 1`] = `
<span>

</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown-chevron"
/>
</div>
`;

Expand All @@ -28,13 +24,9 @@ exports[`DropdownToggle renders correctly with Text inside 1`] = `
<span>
My toggle content
</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown__toggle-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown__toggle-chevron"
/>
</div>
`;

Expand All @@ -58,13 +50,9 @@ exports[`DropdownToggle renders correctly with a function passed as toggle 1`] =
>
<div>
My toggle content
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown__toggle-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown__toggle-chevron"
/>
</div>
</div>
`;
Expand All @@ -79,13 +67,9 @@ exports[`DropdownToggle renders correctly with additional attrs 1`] = `
<span>

</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown-chevron"
/>
</div>
`;

Expand All @@ -98,13 +82,9 @@ exports[`DropdownToggle renders correctly with additional classNames 1`] = `
<span>

</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown-chevron"
/>
</div>
`;

Expand All @@ -117,13 +97,9 @@ exports[`DropdownToggle renders correctly with default values 1`] = `
<span>

</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown__toggle-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown__toggle-chevron"
/>
</div>
`;

Expand All @@ -136,13 +112,24 @@ exports[`DropdownToggle renders correctly with default values for level 2 1`] =
<span>

</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown-chevron"
/>
</div>
`;

exports[`DropdownToggle renders correctly with dropdown-tiny icon 1`] = `
<div
className="wds-dropdown__toggle"
onClick={[Function]}
role="button"
>
<span>

</span>
<div
className="wds-icon wds-icon-tiny wds-dropdown__toggle-chevron"
/>
</div>
`;

Expand All @@ -156,12 +143,8 @@ exports[`DropdownToggle renders correctly with href passed in attrs 1`] = `
<span>
My toggle content
</span>
<svg
className="wds-icon wds-icon wds-icon-tiny wds-dropdown__toggle-chevron wds-icon-tiny"
>
<use
xlinkHref="#wds-icons-menu-control-tiny"
/>
</svg>
<div
className="wds-icon wds-icon-tiny wds-dropdown__toggle-chevron"
/>
</a>
`;
30 changes: 23 additions & 7 deletions source/components/Dropdown/components/DropdownToggle/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,26 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

// eslint-disable-next-line
import Icon from '../../../Icon';
import IconDropdownTiny from '../../../../icons/IconDropdownTiny';
import IconMenuControlTiny from '../../../../icons/IconMenuControlTiny';

const getToggleIcon = (iconName, isLevel2) => {
const iconClassName = isLevel2
? 'wds-dropdown-chevron'
: 'wds-dropdown__toggle-chevron';

return iconName === 'dropdown-tiny'
? <IconDropdownTiny className={`wds-icon wds-icon-tiny ${iconClassName}`} />
: <IconMenuControlTiny className={`wds-icon wds-icon-tiny ${iconClassName}`} />;
};

/**
* Basic DropdownToggle component
*/
class DropdownToggle extends React.Component {
getToggleContentComponent() {
const { toggleContent, isLevel2 } = this.props;
const iconClassName = isLevel2
? 'wds-dropdown-chevron'
: 'wds-dropdown__toggle-chevron';
const icon = <Icon name="menu-control-tiny" className={`wds-icon wds-icon-tiny ${iconClassName}`} />;
const { toggleContent, iconName, isLevel2 } = this.props;
const icon = getToggleIcon(iconName, isLevel2);
let toggleContentComponent;

if (typeof toggleContent === 'function') {
Expand Down Expand Up @@ -74,6 +81,15 @@ DropdownToggle.propTypes = {
* HTML classes
*/
className: PropTypes.string,

/**
* The icon to use for the dropdown chevron
*/
iconName: PropTypes.oneOf([
'dropdown-tiny',
'menu-control-tiny',
]).isRequired,

/**
* Is it a nested dropdown
*/
Expand Down
Loading