Skip to content

Commit

Permalink
Merge pull request #4024 from mozilla/homepage-update-4005
Browse files Browse the repository at this point in the history 
chore: Update homepage content
  • Loading branch information
@tofumatt
tofumatt committed Dec 4, 2017
2 parents ff08298 + b46fb9c commit 87a4416
Show file tree
Hide file tree
Showing 8 changed files with 382 additions and 140 deletions.
103 changes: 61 additions & 42 deletions src/amo/components/Home/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import { fetchHomeAddons } from 'amo/reducers/home';
import {
ADDON_TYPE_EXTENSION,
ADDON_TYPE_THEME,
SEARCH_SORT_TRENDING,
SEARCH_SORT_POPULAR,
SEARCH_SORT_TOP_RATED,
VIEW_CONTEXT_HOME,
} from 'core/constants';
import { withErrorHandler } from 'core/errorHandler';
Expand All @@ -23,10 +24,10 @@ import Icon from 'ui/components/Icon';
import './styles.scss';


export const FIRST_COLLECTION_SLUG = 'privacy-matters';
export const FIRST_COLLECTION_SLUG = 'be-more-productive';
export const FIRST_COLLECTION_USER = 'mozilla';

export const SECOND_COLLECTION_SLUG = 'change-up-your-tabs';
export const SECOND_COLLECTION_SLUG = 'privacy-matters';
export const SECOND_COLLECTION_USER = 'mozilla';

export class HomeBase extends React.Component {
Expand All @@ -35,10 +36,11 @@ export class HomeBase extends React.Component {
errorHandler: PropTypes.object.isRequired,
firstCollection: PropTypes.array.isRequired,
secondCollection: PropTypes.array.isRequired,
featuredThemes: PropTypes.array.isRequired,
featuredExtensions: PropTypes.array.isRequired,
i18n: PropTypes.object.isRequired,
popularExtensions: PropTypes.array.isRequired,
resultsLoaded: PropTypes.bool.isRequired,
upAndComingExtensions: PropTypes.array.isRequired,
topRatedThemes: PropTypes.array.isRequired,
}

componentWillMount() {
Expand Down Expand Up @@ -160,10 +162,11 @@ export class HomeBase extends React.Component {
errorHandler,
firstCollection,
secondCollection,
featuredThemes,
featuredExtensions,
i18n,
popularExtensions,
resultsLoaded,
upAndComingExtensions,
topRatedThemes,
} = this.props;

// translators: The ending ellipsis alludes to a row of icons for each type
Expand Down Expand Up @@ -199,42 +202,72 @@ export class HomeBase extends React.Component {
</Card>

<LandingAddonsCard
addons={firstCollection}
className="Home-FeaturedCollection"
header={i18n.gettext('Top privacy extensions')}
footerText={i18n.gettext('See more privacy extensions')}
footerLink={{ pathname:
`/collections/${FIRST_COLLECTION_USER}/${FIRST_COLLECTION_SLUG}/`,
addons={featuredExtensions}
className="Home-FeaturedExtensions"
header={i18n.gettext('Featured extensions')}
footerText={i18n.gettext('See more featured extensions')}
footerLink={{
pathname: '/search/',
query: {
addonType: ADDON_TYPE_EXTENSION,
featured: true,
},
}}
loading={resultsLoaded === false}
/>

<LandingAddonsCard
addons={secondCollection}
className="Home-FeaturedCollection"
header={i18n.gettext('Change up your tabs')}
footerText={i18n.gettext('See more tab extensions')}
footerLink={{ pathname:
`/collections/${SECOND_COLLECTION_USER}/${SECOND_COLLECTION_SLUG}/`,
addons={popularExtensions}
className="Home-PopularExtensions"
header={i18n.gettext('Popular extensions')}
footerText={i18n.gettext('See more popular extensions')}
footerLink={{
pathname: '/search/',
query: {
addonType: ADDON_TYPE_EXTENSION,
sort: SEARCH_SORT_POPULAR,
},
}}
loading={resultsLoaded === false}
/>

<LandingAddonsCard
addons={upAndComingExtensions}
className="Home-UpAndComingExtensions"
header={i18n.gettext('Trending extensions')}
footerText={i18n.gettext('See more trending extensions')}
addons={topRatedThemes}
className="Home-TopRatedThemes"
header={i18n.gettext('Top-rated Themes')}
footerText={i18n.gettext('See more highly rated Themes')}
footerLink={{
pathname: '/search/',
query: {
addonType: ADDON_TYPE_EXTENSION,
sort: SEARCH_SORT_TRENDING,
addonType: ADDON_TYPE_THEME,
sort: SEARCH_SORT_TOP_RATED,
},
}}
loading={resultsLoaded === false}
/>

<LandingAddonsCard
addons={firstCollection}
className="Home-FeaturedCollection"
header={i18n.gettext('Productivity tools')}
footerText={i18n.gettext('See more productivity tools')}
footerLink={{ pathname:
`/collections/${FIRST_COLLECTION_USER}/${FIRST_COLLECTION_SLUG}/`,
}}
loading={resultsLoaded === false}
/>

<LandingAddonsCard
addons={secondCollection}
className="Home-FeaturedCollection"
header={i18n.gettext('Privacy protection')}
footerText={i18n.gettext('See more add-ons that protect your privacy')}
footerLink={{ pathname:
`/collections/${SECOND_COLLECTION_USER}/${SECOND_COLLECTION_SLUG}/`,
}}
loading={resultsLoaded === false}
/>

<Card
className="Home-SubjectShelf Home-CuratedThemes"
header={themesHeader}
Expand All @@ -247,21 +280,6 @@ export class HomeBase extends React.Component {

{this.renderCuratedThemes()}
</Card>

<LandingAddonsCard
addons={featuredThemes}
className="Home-FeaturedThemes"
header={i18n.gettext('Featured themes')}
footerText={i18n.gettext('See more featured themes')}
footerLink={{
pathname: '/search/',
query: {
addonType: ADDON_TYPE_THEME,
featured: true,
},
}}
loading={resultsLoaded === false}
/>
</div>
);
}
Expand All @@ -271,9 +289,10 @@ export function mapStateToProps(state) {
return {
firstCollection: state.home.firstCollection,
secondCollection: state.home.secondCollection,
featuredThemes: state.home.featuredThemes,
featuredExtensions: state.home.featuredExtensions,
popularExtensions: state.home.popularExtensions,
resultsLoaded: state.home.resultsLoaded,
upAndComingExtensions: state.home.upAndComingExtensions,
topRatedThemes: state.home.topRatedThemes,
};
}

Expand Down
79 changes: 56 additions & 23 deletions src/amo/components/HomeHeroBanner/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@
import React from 'react';
import { compose } from 'redux';

import { ADDON_TYPE_EXTENSION } from 'core/constants';
import translate from 'core/i18n/translate';
import Hero from 'ui/components/Hero';
import HeroSection from 'ui/components/HeroSection';
import { convertFiltersToQueryParams } from 'core/searchUtils';
import type { I18nType } from 'core/types/i18n';

import './styles.scss';
Expand All @@ -24,47 +22,82 @@ export class HomeHeroBannerBase extends React.Component<Props> {
(
<HeroSection
key="featured-extensions"
linkTo={{
pathname: '/search/',
query: convertFiltersToQueryParams({
addonType: ADDON_TYPE_EXTENSION,
featured: true,
}),
}}
styleName="Home-featured-extensions"
linkTo="/addon/s3google-translator/"
styleName="Home-s3-translator"
>
<h3>{i18n.gettext('Featured extensions')}</h3>
<h3>
{i18n.gettext(
// translators: This is the name of an add-on.
'S3.Translator'
)}
</h3>

<p>{i18n.gettext('Excellent extensions for all situations')}</p>
<p>{i18n.gettext(`Translate a word, phrase, even an entire page.
Supports 100+ languages.`)}</p>
</HeroSection>
),
(
<HeroSection
key="youtube-high-definition"
linkTo="/addon/youtube-high-definition/"
styleName="Home-youtube-high-definition"
key="featured-extensions"
linkTo="/addon/groupspeeddial/"
styleName="Home-groupspeeddial"
>
<h3>{i18n.gettext('Group Speed Dial')}</h3>

<p>{i18n.gettext(`Visual bookmarks for your favorite places on the
web.`)}</p>
</HeroSection>
),
(
<HeroSection
key="featured-extensions"
linkTo="/addon/search_by_image/"
styleName="Home-search_by_image"
>
<h3>{i18n.gettext('YouTube High Definition')}</h3>
<h3>{i18n.gettext('Search by Image')}</h3>

<p>
{i18n.gettext(`Play videos in HD, turn off annotations, change
player size & more`)}
{i18n.gettext('Reverse image search using various search engines.')}
</p>
</HeroSection>
),
(
<HeroSection
key="productivity"
linkTo="/collections/mozilla/be-more-productive/"
styleName="Home-productivity"
key="featured-extensions"
linkTo="/addon/fireshot/"
styleName="Home-fireshot"
>
<h3>{i18n.gettext('Productivity extensions')}</h3>
<h3>{i18n.gettext('FireShot')}</h3>

<p>
{i18n.gettext(`Tools for making the Web work harder for you`)}
{i18n.gettext('Capture full-page screenshots.')}
</p>
</HeroSection>
),
(
<HeroSection
key="featured-extensions"
linkTo="/addon/video-downloadhelper/"
styleName="Home-video-downloadhelper"
>
<h3>{i18n.gettext('Video DownloadHelper')}</h3>

<p>{i18n.gettext(`Easily download video from hundreds of popular
websites.`)}</p>
</HeroSection>
),
(
<HeroSection
key="featured-extensions"
linkTo="/addon/decentraleyes/"
styleName="Home-decentraleyes"
>
<h3>{i18n.gettext('Decentraleyes')}</h3>

<p>{i18n.gettext(`Tracking protection against third-party sites
aiming to mark your every online move.`)}</p>
</HeroSection>
),
(
<HeroSection
key="lastpass"
Expand Down

0 comments on commit 87a4416

Please sign in to comment.