Skip to content
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

Jump to bottom

[User Input] Admin settings design #6332

Merged
merged 5 commits into from
Jan 10, 2023
Merged

[User Input] Admin settings design #6332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a6303df
Update settings section title.
nfmohit Dec 15, 2022
4eb24fa
Update settings section sub-heading.
nfmohit Dec 15, 2022
3b4d687
Update `UserInputPreview` to conditionally hide header.
nfmohit Dec 15, 2022
9f178b9
Do not display `UserInputPreview` header in Admin Settings.
nfmohit Dec 15, 2022
073a786
Update user input settings styles to match Figma.
nfmohit Dec 15, 2022
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
21 changes: 11 additions & 10 deletions assets/js/components/settings/SettingsAdmin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,26 +83,27 @@ export default function SettingsAdmin() {
<Cell size={ 12 }>
{ isUserInputCompleted && (
<Layout
title={ __( 'Your site goals', 'google-site-kit' ) }
title={ __( 'Key metrics', 'google-site-kit' ) }
header
rounded
>
<div className="googlesitekit-settings-module googlesitekit-settings-module--active googlesitekit-settings-user-input">
<Grid>
<Row>
<Cell size={ 12 }>
<p>
<strong>
{ __(
'Based on your responses, Site Kit will show you metrics and suggestions that are specific to your site to help you achieve your goals',
'google-site-kit'
) }
</strong>
<p className="googlesitekit-settings-user-input__heading">
{ __(
'Edit your answers for more personalized metrics:',
'google-site-kit'
) }
</p>
</Cell>
</Row>

<UserInputPreview goTo={ goTo } noFooter />
<UserInputPreview
goTo={ goTo }
noHeader
noFooter
/>
</Grid>
</div>
</Layout>
Expand Down
11 changes: 7 additions & 4 deletions assets/js/components/user-input/UserInputPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ import { getErrorMessageForAnswer } from './util/validation';
const { useSelect } = Data;

export default function UserInputPreview( props ) {
const { noFooter, goBack, submitChanges, error } = props;
const { noFooter, goBack, submitChanges, error, noHeader } = props;
const previewContainer = useRef();
const settings = useSelect( ( select ) =>
select( CORE_USER ).getUserInputSettings()
Expand Down Expand Up @@ -119,9 +119,11 @@ export default function UserInputPreview( props ) {
ref={ previewContainer }
>
<div className="googlesitekit-user-input__preview-contents">
<p className="googlesitekit-user-input__preview-subheader">
{ __( 'Review your answers', 'google-site-kit' ) }
</p>
{ ! noHeader && (
<p className="googlesitekit-user-input__preview-subheader">
{ __( 'Review your answers', 'google-site-kit' ) }
</p>
) }
<UserInputPreviewGroup
slug={ USER_INPUT_QUESTIONS_PURPOSE }
title={ __(
Expand Down Expand Up @@ -201,4 +203,5 @@ UserInputPreview.propTypes = {
goBack: PropTypes.func,
redirectURL: PropTypes.string,
errors: PropTypes.object,
noHeader: PropTypes.bool,
};
14 changes: 8 additions & 6 deletions assets/sass/components/settings/_googlesitekit-settings-user-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,16 @@

.googlesitekit-settings-user-input {

.googlesitekit-user-input__preview {
margin-left: 0;
margin-right: 0;
padding: 0;
.googlesitekit-settings-user-input__heading {
border-bottom: 1px solid $c-utility-divider;
color: $c-surfaces-on-background;
font-size: $fs-body-sm;
line-height: $lh-body-sm;
padding-bottom: 12px;
}

p {
margin-top: 0;
.googlesitekit-user-input__preview-contents {
padding: 0;
}
}
}