Skip to content

Settings UI: update support links to match Calypso style #6430

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 2 commits into from
Feb 21, 2017
Merged

Settings UI: update support links to match Calypso style #6430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d07615f
Settings UI: update support links to match Calypso style
eliorivero Feb 16, 2017
e9e2b4f
Settings UI: remove external icon from learn more links. Update GUI t…
eliorivero Feb 20, 2017
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
30 changes: 7 additions & 23 deletions _inc/client/components/forms/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,15 @@ import forOwn from 'lodash/forOwn';
import isEmpty from 'lodash/isEmpty';
import { translate as __ } from 'i18n-calypso';
import Button from 'components/button';
import Gridicon from 'components/gridicon';
import SelectDropdown from 'components/select-dropdown';

export const FormFieldset = React.createClass( {

displayName: 'FormFieldset',

render: function() {
return (
<fieldset { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'jp-form-fieldset' ) } >
{
this.props.support
? <div className="jp-module-settings__learn-more">
<Button borderless compact href={ this.props.support }>
<Gridicon icon="help-outline" />
<span className="screen-reader-text">{ __( 'Learn More' ) }</span>
</Button>
</div>
: ''
}
{ this.props.children }
</fieldset>
);
}
} );
export const FormFieldset = props => {
return (
<fieldset { ...omit( props, 'className' ) } className={ classnames( props.className, 'jp-form-fieldset' ) } >
{ props.children }
</fieldset>
);
};

export const FormLabel = React.createClass( {

Expand Down
7 changes: 5 additions & 2 deletions _inc/client/components/module-settings/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,11 @@
right: 17px;

.jp-form-fieldset & {
top: -12px;
right:-7px;
top: 4px;
}

.dops-info-popover {
white-space: nowrap;
}
}

Expand Down
41 changes: 24 additions & 17 deletions _inc/client/components/settings-group/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { connect } from 'react-redux';
import { translate as __ } from 'i18n-calypso';
import Card from 'components/card';
import classNames from 'classnames';
import Button from 'components/button';
import Gridicon from 'components/gridicon';
import InfoPopover from 'components/info-popover';
import ExternalLink from 'components/external-link';

/**
* Internal dependencies
Expand All @@ -17,16 +17,11 @@ import { userCanManageModules, isSitePublic } from 'state/initial-state';
import { getSitePlan } from 'state/site';

export const SettingsGroup = props => {
let module = props.module,
support = props.support
? props.support
: false,
// Disable in Dev Mode
disableInDevMode = props.disableInDevMode && props.isUnavailableInDevMode( module.module );

if ( ! support && module && '' !== module.learn_more_button ) {
support = module.learn_more_button;
}
const module = props.module,
disableInDevMode = props.disableInDevMode && props.isUnavailableInDevMode( module.module ),
support = ! props.support && module && '' !== module.learn_more_button
? module.learn_more_button
: props.support;

return (
<div className="jp-form-settings-group">
Expand All @@ -40,10 +35,14 @@ export const SettingsGroup = props => {
{
support && (
<div className="jp-module-settings__learn-more">
<Button borderless compact href={ support }>
<Gridicon icon="help-outline" />
<span className="screen-reader-text">{ __( 'Learn More' ) }</span>
</Button>
<InfoPopover screenReaderText={ __( 'Learn more' ) }>
<ExternalLink
icon={ false }
href={ support }
target="_blank">
{ __( 'Learn more' ) }
</ExternalLink>
</InfoPopover>
</div>
)
}
Expand All @@ -55,8 +54,16 @@ export const SettingsGroup = props => {
);
};

SettingsGroup.propTypes = {
support: React.PropTypes.string
};

SettingsGroup.defaultProps = {
support: ''
};

export default connect(
( state ) => {
state => {
return {
isDevMode: isDevMode( state ),
sitePlan: getSitePlan( state ),
Expand Down
18 changes: 15 additions & 3 deletions _inc/client/components/settings-group/test/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,22 @@ describe( 'SettingsGroup', () => {
learn_more_button: 'https://jetpack.com/support/protect'
};

const settingsGroup = shallow( <SettingsGroup support={ testProps.learn_more_button } /> );
const settingsGroup = shallow( <SettingsGroup support={ testProps.learn_more_button } hasChild /> );

it( 'the learn more icon is linked to the correct URL', () => {
expect( settingsGroup.find( 'Button' ).get(0).props.href ).to.be.equal( 'https://jetpack.com/support/protect' );
it( 'outputs a special CSS class when it has the hasChild property', () => {
expect( settingsGroup.find( 'Card' ).props().className ).to.contain( 'jp-form-has-child' );
} );

it( 'the learn more icon has an informational tooltip', () => {
expect( settingsGroup.find( 'InfoPopover' ) ).to.have.length( 1 );
expect( settingsGroup.find( 'ExternalLink' ).get( 0 ).props.href ).to.be.equal( 'https://jetpack.com/support/protect' );
} );

it( 'if no support link is passed directly, looks for one in the module', () => {
expect( shallow( <SettingsGroup module={ testProps } /> ).find( 'InfoPopover' ) ).to.have.length( 1 );
} );

it( 'does not have a learn more icon if there is no link or module are passed', () => {
expect( shallow( <SettingsGroup /> ).find( 'InfoPopover' ) ).to.have.length( 0 );
} );
} );
30 changes: 16 additions & 14 deletions _inc/client/discussion/comments.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,34 +83,36 @@ export const Comments = moduleSettingsForm(
</FormFieldset>
</SettingsGroup>
<SettingsGroup>
<FormFieldset support={ gravatar.learn_more_button }>
<FormFieldset>
<ModuleToggle
slug="gravatar-hovercards"
compact
activated={ this.props.getOptionValue( 'gravatar-hovercards' ) }
toggling={ this.props.isSavingAnyOption( 'gravatar-hovercards' ) }
toggleModule={ this.props.toggleModuleNow }
>
<span className="jp-form-toggle-explanation">
{
gravatar.description
}
</span>
>
<span className="jp-form-toggle-explanation">
{
gravatar.description + ' '
}
<a href={ gravatar.learn_more_button }>{ __( 'Learn more about Gravatar' ) }</a>
</span>
</ModuleToggle>
</FormFieldset>
<FormFieldset support={ markdown.learn_more_button }>
<FormFieldset>
<ModuleToggle
slug="markdown"
compact
activated={ !! this.props.getOptionValue( 'wpcom_publish_comments_with_markdown', 'markdown' ) }
toggling={ this.props.isSavingAnyOption( [ 'markdown', 'wpcom_publish_comments_with_markdown' ] ) }
toggleModule={ this.updateFormStateByMarkdown }
>
<span className="jp-form-toggle-explanation">
{
__( 'Enable Markdown use for comments' )
}
</span>
>
<span className="jp-form-toggle-explanation">
{
__( 'Enable Markdown use for comments' ) + ' '
}
<a href={ markdown.learn_more_button }>{ __( 'Learn more about Markdown' ) }</a>
</span>
</ModuleToggle>
</FormFieldset>
</SettingsGroup>
Expand Down