diff --git a/examples/svg-icon/index.js b/examples/svg-icon/index.js index c18e7606d..12d8d9925 100644 --- a/examples/svg-icon/index.js +++ b/examples/svg-icon/index.js @@ -31,45 +31,37 @@ const icons = (

Icon with no icon or children properties defined

-
-

Icon not found

- -

Icon with custom defined path

{children}
-

Disabled icon

- -
-
-

Icon color

- +

Icon not found

+
-

Star, also with className prop

- +

Add

+
-

StarBorder

- +

ArrowDownward

+

ArrowDropRight

-
-

Close

- -

ArrowUpward

-

ArrowDownward

- +

Business

+ +
+
+

Cancel

+

ChevronLeft

@@ -80,64 +72,96 @@ const icons = (
-

MoreVert

- +

Close

+
-

Cancel

- +

Create

+
-

InfoOutline

- +

Delete

+
-

Room

- +

Done

+
-

ViewList

- +

DragHandle

+
-

Delete

- +

GridOn

+
-

Visibility

- +

Group

+
-

VisibilityOff

- +

InfoOutline

+
-

Create

- +

InsertChart

+
-

DragHandle

- +

Message

+
-

GridOn

- +

MoreVert

+
-

ShowChart

- +

NotInterested

+
-

InsertChart

- +

Person

+

Public

-

Message

- +

Room

+ +
+
+

ShowChart

+ +
+
+

Disabled icon

+ +
+
+

Icon color

+ +
+
+

Star, also with className prop

+ +
+
+

StarBorder

+ +
+
+

ViewList

+ +
+
+

Visibility

+ +
+
+

VisibilityOff

+
diff --git a/src/sharing/Access.component.js b/src/sharing/Access.component.js index f74c68cf8..a4c364fb6 100644 --- a/src/sharing/Access.component.js +++ b/src/sharing/Access.component.js @@ -1,16 +1,13 @@ import PropTypes from 'prop-types'; import React from 'react'; import { compose, mapProps, getContext, withProps } from 'recompose'; -import FontIcon from 'material-ui/FontIcon'; import { config } from 'd2/lib/d2'; import IconButton from 'material-ui/IconButton'; +import SvgIcon from '../svg-icon/SvgIcon'; import PermissionPicker from './PermissionPicker.component'; -import { - accessStringToObject, - accessObjectToString, -} from './utils'; +import { accessStringToObject, accessObjectToString } from './utils'; config.i18n.strings.add('public_access'); config.i18n.strings.add('external_access'); @@ -40,20 +37,25 @@ const d2Context = { d2: PropTypes.object.isRequired, }; -const getAccessIcon = (userType) => { +const getAccessIcon = userType => { switch (userType) { - case 'user': return 'person'; - case 'userGroup': return 'group'; - case 'external': return 'public'; - case 'public': return 'business'; - default: return 'person'; + case 'user': + return 'Person'; + case 'userGroup': + return 'Group'; + case 'external': + return 'Public'; + case 'public': + return 'Business'; + default: + return 'Person'; } }; const useAccessObjectFormat = props => ({ ...props, access: accessStringToObject(props.access), - onChange: (newAccess) => { + onChange: newAccess => { props.onChange(accessObjectToString(newAccess)); }, }); @@ -69,27 +71,26 @@ export const Access = ({ disabled, }) => (
- - {getAccessIcon(accessType)} - +
{primaryText}
-
{secondaryText || ' '}
+
+ {secondaryText || ' '} +
- - {})} - >clear + > + +
); @@ -119,9 +120,13 @@ export const GroupAccess = compose( primaryText: props.groupName, accessOptions: { meta: { canView: true, canEdit: true, noAccess: false }, - data: props.dataShareable && { canView: true, canEdit: true, noAccess: true }, + data: props.dataShareable && { + canView: true, + canEdit: true, + noAccess: true, + }, }, - })), + })) )(Access); export const ExternalAccess = compose( @@ -136,13 +141,13 @@ export const ExternalAccess = compose( meta: { canEdit: false, canView: props.access }, data: { canEdit: false, canView: false }, }, - onChange: (newAccess) => { + onChange: newAccess => { props.onChange(newAccess.meta.canView); }, accessOptions: { meta: { canView: true, canEdit: false, noAccess: true }, }, - })), + })) )(Access); const constructSecondaryText = ({ canView, canEdit }) => { @@ -150,9 +155,7 @@ const constructSecondaryText = ({ canView, canEdit }) => { return 'anyone_can_find_view_and_edit'; } - return canView - ? 'anyone_can_find_and_view' - : 'no_access'; + return canView ? 'anyone_can_find_and_view' : 'no_access'; }; export const PublicAccess = compose( @@ -161,10 +164,16 @@ export const PublicAccess = compose( withProps(props => ({ accessType: 'public', primaryText: props.d2.i18n.getTranslation('public_access'), - secondaryText: props.d2.i18n.getTranslation(constructSecondaryText(props.access.meta)), + secondaryText: props.d2.i18n.getTranslation( + constructSecondaryText(props.access.meta) + ), accessOptions: { meta: { canView: true, canEdit: true, noAccess: true }, - data: props.dataShareable && { canView: true, canEdit: true, noAccess: true }, + data: props.dataShareable && { + canView: true, + canEdit: true, + noAccess: true, + }, }, - })), + })) )(Access); diff --git a/src/sharing/PermissionOption.component.js b/src/sharing/PermissionOption.component.js index 8f49a75a4..2067b5f0c 100644 --- a/src/sharing/PermissionOption.component.js +++ b/src/sharing/PermissionOption.component.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import FontIcon from 'material-ui/FontIcon'; +import SvgIcon from '../svg-icon/SvgIcon'; import MenuItem from 'material-ui/MenuItem'; class PermissionOption extends Component { @@ -15,9 +15,7 @@ class PermissionOption extends Component { - {this.props.isSelected ? 'done' : ''} - + this.props.isSelected ? : undefined } primaryText={this.props.primaryText} value={this.props.value} @@ -26,7 +24,7 @@ class PermissionOption extends Component { focusState={this.props.focusState} /> ); - } + }; } PermissionOption.propTypes = { diff --git a/src/sharing/PermissionPicker.component.js b/src/sharing/PermissionPicker.component.js index 9867e2f79..8861ee15a 100644 --- a/src/sharing/PermissionPicker.component.js +++ b/src/sharing/PermissionPicker.component.js @@ -7,6 +7,7 @@ import Divider from 'material-ui/Divider'; import Popover from 'material-ui/Popover'; import Menu from 'material-ui/Menu'; import { config } from 'd2/lib/d2'; +import SvgIcon from '../svg-icon/SvgIcon'; import PermissionOption from './PermissionOption.component'; @@ -25,14 +26,12 @@ const styles = { }, }; -const getAccessIcon = (metaAccess) => { +const getAccessIcon = metaAccess => { if (metaAccess.canEdit) { - return 'create'; + return 'Create'; } - return metaAccess.canView - ? 'remove_red_eye' - : 'not_interested'; + return metaAccess.canView ? 'Visibility' : 'NotInterested'; }; class PermissionPicker extends Component { @@ -47,36 +46,38 @@ class PermissionPicker extends Component { }; this.props.onChange(newAccess); - } + }; - openMenu = (event) => { + openMenu = event => { event.preventDefault(); this.setState({ open: true, anchor: event.currentTarget, }); - } + }; closeMenu = () => { this.setState({ open: false, }); - } + }; translate = s => this.context.d2.i18n.getTranslation(s); render = () => { const { data, meta } = this.props.access; - const { data: dataOptions, meta: metaOptions } = this.props.accessOptions; + const { + data: dataOptions, + meta: metaOptions, + } = this.props.accessOptions; return (
- {getAccessIcon(meta)} + - { dataOptions && + {dataOptions && (
- } + )}
); - } + }; } PermissionPicker.propTypes = { @@ -153,9 +167,7 @@ PermissionPicker.contextTypes = { }; const OptionHeader = ({ text }) => ( -
- {text.toUpperCase()} -
+
{text.toUpperCase()}
); OptionHeader.propTypes = { diff --git a/src/sharing/__tests__/Access.component.spec.js b/src/sharing/__tests__/Access.component.spec.js index d86808fd1..12692cd76 100644 --- a/src/sharing/__tests__/Access.component.spec.js +++ b/src/sharing/__tests__/Access.component.spec.js @@ -31,7 +31,7 @@ describe('Sharing: Access component', () => { renderComponent(accessProps); it('should render subcomponents', () => { - expect(accessComponent.find('FontIcon')).toHaveLength(1); + expect(accessComponent.find('SvgIcon')).toHaveLength(2); expect(accessComponent.find('PermissionPicker')).toHaveLength(1); expect(accessComponent.find('IconButton')).toHaveLength(1); }); diff --git a/src/sharing/__tests__/PermissionOption.component.spec.js b/src/sharing/__tests__/PermissionOption.component.spec.js new file mode 100644 index 000000000..fe63c3077 --- /dev/null +++ b/src/sharing/__tests__/PermissionOption.component.spec.js @@ -0,0 +1,72 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import MenuItem from 'material-ui/MenuItem'; +import PermissionOption from '../PermissionOption.component'; +import { getStubContext } from '../../../config/inject-theme'; + +const permissionOptionProps = { + disabled: false, + isSelected: false, + primaryText: 'Test', + value: {}, + onClick: undefined, + focusState: 'none', +}; + +describe('Sharing: PermissionOption component', () => { + let permissionOptionComponent; + + const renderComponent = (props = {}) => + shallow(, { + context: getStubContext(), + }); + + beforeEach(() => { + permissionOptionComponent = renderComponent(permissionOptionProps); + }); + + it('should not render a MenuItem when disabled prop is passed', () => { + permissionOptionComponent = renderComponent({ + ...permissionOptionProps, + disabled: true, + }); + + expect(permissionOptionComponent.find(MenuItem)).toHaveLength(0); + }); + + it('should render a MenuItem', () => { + expect(permissionOptionComponent.find(MenuItem)).toHaveLength(1); + }); + + it('should render the text according to the primaryText prop', () => { + expect(permissionOptionComponent.find(MenuItem).props().primaryText).toEqual( + permissionOptionProps.primaryText + ); + }); + + it('should set the MenuItem leftIcon prop according to the isSelected prop', () => { + expect(permissionOptionComponent.find(MenuItem).props().leftIcon).toBeUndefined(); + + permissionOptionComponent = renderComponent({ + ...permissionOptionProps, + isSelected: true, + }); + + expect(permissionOptionComponent.find(MenuItem).props().leftIcon).not.toBeUndefined(); + }); + + it('should set the value prop', () => { + expect(permissionOptionComponent.find(MenuItem).props().value).toEqual( + permissionOptionProps.value + ); + + const newValue = { somekey: 'somevalue' }; + + permissionOptionComponent = renderComponent({ + ...permissionOptionProps, + value: newValue, + }); + + expect(permissionOptionComponent.find(MenuItem).props().value).toEqual(newValue); + }); +}); diff --git a/src/sharing/__tests__/PermissionPicker.component.spec.js b/src/sharing/__tests__/PermissionPicker.component.spec.js index 8f6ab2f92..6e81b70fd 100644 --- a/src/sharing/__tests__/PermissionPicker.component.spec.js +++ b/src/sharing/__tests__/PermissionPicker.component.spec.js @@ -42,20 +42,54 @@ describe('Sharing: PermissionPicker component', () => { }, }); - expect(permissionPickerComponent.find(PermissionOption)).toHaveLength(3); + expect(permissionPickerComponent.find(PermissionOption)).toHaveLength( + 3 + ); }); it('should render six PermissionOptions if all access options are available', () => { - expect(permissionPickerComponent.find(PermissionOption)).toHaveLength(6); + expect(permissionPickerComponent.find(PermissionOption)).toHaveLength( + 6 + ); }); - it('should render the checkmark FontIcon according to the permission values', () => { - expect(permissionPickerComponent.find(PermissionOption).at(0).props().isSelected).toBe(true); - expect(permissionPickerComponent.find(PermissionOption).at(1).props().isSelected).toBe(false); - expect(permissionPickerComponent.find(PermissionOption).at(2).props().isSelected).toBe(false); - expect(permissionPickerComponent.find(PermissionOption).at(3).props().isSelected).toBe(true); - expect(permissionPickerComponent.find(PermissionOption).at(4).props().isSelected).toBe(false); - expect(permissionPickerComponent.find(PermissionOption).at(5).props().isSelected).toBe(false); + it('should render the checkmark SvgIcon according to the permission values', () => { + expect( + permissionPickerComponent + .find(PermissionOption) + .at(0) + .props().isSelected + ).toBe(true); + expect( + permissionPickerComponent + .find(PermissionOption) + .at(1) + .props().isSelected + ).toBe(false); + expect( + permissionPickerComponent + .find(PermissionOption) + .at(2) + .props().isSelected + ).toBe(false); + expect( + permissionPickerComponent + .find(PermissionOption) + .at(3) + .props().isSelected + ).toBe(true); + expect( + permissionPickerComponent + .find(PermissionOption) + .at(4) + .props().isSelected + ).toBe(false); + expect( + permissionPickerComponent + .find(PermissionOption) + .at(5) + .props().isSelected + ).toBe(false); permissionPickerComponent = renderComponent({ ...permissionPickerProps, @@ -65,11 +99,41 @@ describe('Sharing: PermissionPicker component', () => { }, }); - expect(permissionPickerComponent.find(PermissionOption).at(0).props().isSelected).toBe(false); - expect(permissionPickerComponent.find(PermissionOption).at(1).props().isSelected).toBe(false); - expect(permissionPickerComponent.find(PermissionOption).at(2).props().isSelected).toBe(true); - expect(permissionPickerComponent.find(PermissionOption).at(3).props().isSelected).toBe(false); - expect(permissionPickerComponent.find(PermissionOption).at(4).props().isSelected).toBe(false); - expect(permissionPickerComponent.find(PermissionOption).at(5).props().isSelected).toBe(true); + expect( + permissionPickerComponent + .find(PermissionOption) + .at(0) + .props().isSelected + ).toBe(false); + expect( + permissionPickerComponent + .find(PermissionOption) + .at(1) + .props().isSelected + ).toBe(false); + expect( + permissionPickerComponent + .find(PermissionOption) + .at(2) + .props().isSelected + ).toBe(true); + expect( + permissionPickerComponent + .find(PermissionOption) + .at(3) + .props().isSelected + ).toBe(false); + expect( + permissionPickerComponent + .find(PermissionOption) + .at(4) + .props().isSelected + ).toBe(false); + expect( + permissionPickerComponent + .find(PermissionOption) + .at(5) + .props().isSelected + ).toBe(true); }); }); diff --git a/src/svg-icon/SvgIcon.js b/src/svg-icon/SvgIcon.js index 29973b645..eb6913051 100644 --- a/src/svg-icon/SvgIcon.js +++ b/src/svg-icon/SvgIcon.js @@ -4,18 +4,25 @@ import Add from 'material-ui/svg-icons/content/add'; import ArrowDownward from 'material-ui/svg-icons/navigation/arrow-downward'; import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right'; import ArrowUpward from 'material-ui/svg-icons/navigation/arrow-upward'; +import Business from 'material-ui/svg-icons/communication/business'; import Cancel from 'material-ui/svg-icons/navigation/cancel'; import ChevronLeft from 'material-ui/svg-icons/navigation/chevron-left'; import ChevronRight from 'material-ui/svg-icons/navigation/chevron-right'; +import Clear from 'material-ui/svg-icons/content/clear'; import Close from 'material-ui/svg-icons/navigation/close'; import Create from 'material-ui/svg-icons/content/create'; import Delete from 'material-ui/svg-icons/action/delete'; +import Done from 'material-ui/svg-icons/action/done'; import DragHandle from 'material-ui/svg-icons/editor/drag-handle'; +import Group from 'material-ui/svg-icons/social/group'; import GridOn from 'material-ui/svg-icons/image/grid-on'; import InfoOutline from 'material-ui/svg-icons/action/info-outline'; import InsertChart from 'material-ui/svg-icons/editor/insert-chart'; import Message from 'material-ui/svg-icons/communication/message'; import MoreVert from 'material-ui/svg-icons/navigation/more-vert'; +import NotInterested from 'material-ui/svg-icons/av/not-interested'; +import Person from 'material-ui/svg-icons/social/person'; +import Public from 'material-ui/svg-icons/social/public'; import Room from 'material-ui/svg-icons/action/room'; import ShowChart from 'material-ui/svg-icons/editor/show-chart'; import Star from 'material-ui/svg-icons/toggle/star'; @@ -24,28 +31,32 @@ import ViewList from 'material-ui/svg-icons/action/view-list'; import Visibility from 'material-ui/svg-icons/action/visibility'; import VisibilityOff from 'material-ui/svg-icons/action/visibility-off'; import SentimentDissatisfied from 'material-ui/svg-icons/social/sentiment-dissatisfied'; -import Public from 'material-ui/svg-icons/social/public'; import MUISvgIcon from 'material-ui/SvgIcon'; import { grey600, grey200 } from 'material-ui/styles/colors'; - const icons = { Add, ArrowDownward, ArrowDropRight, ArrowUpward, + Business, Cancel, ChevronLeft, ChevronRight, + Clear, Close, Create, Delete, + Done, DragHandle, GridOn, + Group, InfoOutline, InsertChart, Message, MoreVert, + NotInterested, + Person, Public, Room, ShowChart,