Skip to content

Commit

Permalink
Replace FontIcon with SvgIcon in the Sharing Component (#162)
Browse files Browse the repository at this point in the history 
This commit includes:
* Replace FontIcon with SvgIcon in sharing component, we are moving away from FontIcon
* Added tests for PermissionOption component
* Some Prettier formatting changes
  • Loading branch information
@edoardo @jenniferarnesen
edoardo authored and jenniferarnesen committed Jan 4, 2018
1 parent 600419b commit c2cac08
Show file tree
Hide file tree
Showing 8 changed files with 314 additions and 124 deletions.
120 changes: 72 additions & 48 deletions examples/svg-icon/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,45 +31,37 @@ const icons = (
<h3>Icon with no icon or children properties defined</h3>
<SvgIcon />
</div>
<div style={cardStyle}>
<h3>Icon not found</h3>
<SvgIcon icon={'DoesntExist'} />
</div>
<div style={cardStyle}>
<h3>Icon with custom defined path</h3>
<SvgIcon>{children}</SvgIcon>
</div>
<div style={cardStyle}>
<h3>Disabled icon</h3>
<SvgIcon icon={'Star'} disabled />
</div>
<div style={cardStyle}>
<h3>Icon color</h3>
<SvgIcon icon={'Star'} style={{ fill: 'red' }} />
<h3>Icon not found</h3>
<SvgIcon icon={'DoesntExist'} />
</div>
<div style={cardStyle}>
<h3>Star, also with className prop</h3>
<SvgIcon icon={'Star'} className="my-starry-icon" />
<h3>Add</h3>
<SvgIcon icon={'Add'} />
</div>
<div style={cardStyle}>
<h3>StarBorder</h3>
<SvgIcon icon={'StarBorder'} />
<h3>ArrowDownward</h3>
<SvgIcon icon={'ArrowDownward'} />
</div>
<div style={cardStyle}>
<h3>ArrowDropRight</h3>
<SvgIcon icon={'ArrowDropRight'} />
</div>
<div style={cardStyle}>
<h3>Close</h3>
<SvgIcon icon={'Close'} />
</div>
<div style={cardStyle}>
<h3>ArrowUpward</h3>
<SvgIcon icon={'ArrowUpward'} />
</div>
<div style={cardStyle}>
<h3>ArrowDownward</h3>
<SvgIcon icon={'ArrowDownward'} />
<h3>Business</h3>
<SvgIcon icon={'Business'} />
</div>
<div style={cardStyle}>
<h3>Cancel</h3>
<SvgIcon icon={'Cancel'} />
</div>
<div style={cardStyle}>
<h3>ChevronLeft</h3>
Expand All @@ -80,64 +72,96 @@ const icons = (
<SvgIcon icon={'ChevronRight'} />
</div>
<div style={cardStyle}>
<h3>MoreVert</h3>
<SvgIcon icon={'MoreVert'} />
<h3>Close</h3>
<SvgIcon icon={'Close'} />
</div>
<div style={cardStyle}>
<h3>Cancel</h3>
<SvgIcon icon={'Cancel'} />
<h3>Create</h3>
<SvgIcon icon={'Create'} />
</div>
<div style={cardStyle}>
<h3>InfoOutline</h3>
<SvgIcon icon={'InfoOutline'} />
<h3>Delete</h3>
<SvgIcon icon={'Delete'} />
</div>
<div style={cardStyle}>
<h3>Room</h3>
<SvgIcon icon={'Room'} />
<h3>Done</h3>
<SvgIcon icon={'Done'} />
</div>
<div style={cardStyle}>
<h3>ViewList</h3>
<SvgIcon icon={'ViewList'} />
<h3>DragHandle</h3>
<SvgIcon icon={'DragHandle'} />
</div>
<div style={cardStyle}>
<h3>Delete</h3>
<SvgIcon icon={'Delete'} />
<h3>GridOn</h3>
<SvgIcon icon={'GridOn'} />
</div>
<div style={cardStyle}>
<h3>Visibility</h3>
<SvgIcon icon={'Visibility'} />
<h3>Group</h3>
<SvgIcon icon={'Group'} />
</div>
<div style={cardStyle}>
<h3>VisibilityOff</h3>
<SvgIcon icon={'VisibilityOff'} />
<h3>InfoOutline</h3>
<SvgIcon icon={'InfoOutline'} />
</div>
<div style={cardStyle}>
<h3>Create</h3>
<SvgIcon icon={'Create'} />
<h3>InsertChart</h3>
<SvgIcon icon={'InsertChart'} />
</div>
<div style={cardStyle}>
<h3>DragHandle</h3>
<SvgIcon icon={'DragHandle'} />
<h3>Message</h3>
<SvgIcon icon={'Message'} />
</div>
<div style={cardStyle}>
<h3>GridOn</h3>
<SvgIcon icon={'GridOn'} />
<h3>MoreVert</h3>
<SvgIcon icon={'MoreVert'} />
</div>
<div style={cardStyle}>
<h3>ShowChart</h3>
<SvgIcon icon={'ShowChart'} />
<h3>NotInterested</h3>
<SvgIcon icon={'NotInterested'} />
</div>
<div style={cardStyle}>
<h3>InsertChart</h3>
<SvgIcon icon={'InsertChart'} />
<h3>Person</h3>
<SvgIcon icon={'Person'} />
</div>
<div style={cardStyle}>
<h3>Public</h3>
<SvgIcon icon={'Public'} />
</div>
<div style={cardStyle}>
<h3>Message</h3>
<SvgIcon icon={'Message'} />
<h3>Room</h3>
<SvgIcon icon={'Room'} />
</div>
<div style={cardStyle}>
<h3>ShowChart</h3>
<SvgIcon icon={'ShowChart'} />
</div>
<div style={cardStyle}>
<h3>Disabled icon</h3>
<SvgIcon icon={'Star'} disabled />
</div>
<div style={cardStyle}>
<h3>Icon color</h3>
<SvgIcon icon={'Star'} style={{ fill: 'red' }} />
</div>
<div style={cardStyle}>
<h3>Star, also with className prop</h3>
<SvgIcon icon={'Star'} className="my-starry-icon" />
</div>
<div style={cardStyle}>
<h3>StarBorder</h3>
<SvgIcon icon={'StarBorder'} />
</div>
<div style={cardStyle}>
<h3>ViewList</h3>
<SvgIcon icon={'ViewList'} />
</div>
<div style={cardStyle}>
<h3>Visibility</h3>
<SvgIcon icon={'Visibility'} />
</div>
<div style={cardStyle}>
<h3>VisibilityOff</h3>
<SvgIcon icon={'VisibilityOff'} />
</div>
</div>
</MuiThemeProvider>
Expand Down
69 changes: 39 additions & 30 deletions src/sharing/Access.component.js
View file
Original file line number Diff line number Diff line change
@@ -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');
Expand Down Expand Up @@ -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));
},
});
Expand All @@ -69,27 +71,26 @@ export const Access = ({
disabled,
}) => (
<div style={styles.accessView}>
<FontIcon className="material-icons">
{getAccessIcon(accessType)}
</FontIcon>
<SvgIcon icon={getAccessIcon(accessType)} />
<div style={styles.accessDescription}>
<div>{primaryText}</div>
<div style={{ color: '#818181', paddingTop: 4 }}>{secondaryText || ' '}</div>
<div style={{ color: '#818181', paddingTop: 4 }}>
{secondaryText || ' '}
</div>
</div>

<PermissionPicker
access={access}
accessOptions={accessOptions}
onChange={onChange}
disabled={disabled}
/>

<IconButton
disabled={!onRemove}
iconStyle={{ color: '#bbbbbb' }}
iconClassName="material-icons"
onClick={onRemove || (() => {})}
>clear</IconButton>
>
<SvgIcon icon="Clear" />
</IconButton>
</div>
);

Expand Down Expand Up @@ -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(
Expand All @@ -136,23 +141,21 @@ 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 }) => {
if (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(
Expand All @@ -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);
8 changes: 3 additions & 5 deletions src/sharing/PermissionOption.component.js
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -15,9 +15,7 @@ class PermissionOption extends Component {
<MenuItem
insetChildren
leftIcon={
<FontIcon className="material-icons">
{this.props.isSelected ? 'done' : ''}
</FontIcon>
this.props.isSelected ? <SvgIcon icon="Done" /> : undefined
}
primaryText={this.props.primaryText}
value={this.props.value}
Expand All @@ -26,7 +24,7 @@ class PermissionOption extends Component {
focusState={this.props.focusState}
/>
);
}
};
}

PermissionOption.propTypes = {
Expand Down
Loading

0 comments on commit c2cac08

Please sign in to comment.