diff options
Diffstat (limited to 'browser/components/newtab/content-src/components/MoreRecommendations')
2 files changed, 45 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/MoreRecommendations/MoreRecommendations.jsx b/browser/components/newtab/content-src/components/MoreRecommendations/MoreRecommendations.jsx new file mode 100644 index 0000000000..f2c332e5bd --- /dev/null +++ b/browser/components/newtab/content-src/components/MoreRecommendations/MoreRecommendations.jsx @@ -0,0 +1,21 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import React from "react"; + +export class MoreRecommendations extends React.PureComponent { + render() { + const { read_more_endpoint } = this.props; + if (read_more_endpoint) { + return ( + <a + className="more-recommendations" + href={read_more_endpoint} + data-l10n-id="newtab-pocket-more-recommendations" + /> + ); + } + return null; + } +} diff --git a/browser/components/newtab/content-src/components/MoreRecommendations/_MoreRecommendations.scss b/browser/components/newtab/content-src/components/MoreRecommendations/_MoreRecommendations.scss new file mode 100644 index 0000000000..12a66b7c11 --- /dev/null +++ b/browser/components/newtab/content-src/components/MoreRecommendations/_MoreRecommendations.scss @@ -0,0 +1,24 @@ +@use 'sass:math'; + +.more-recommendations { + display: flex; + align-items: center; + white-space: nowrap; + line-height: math.div(16, 13); // (16 / 13) -> 16px computed + + &::after { + background: url('chrome://global/skin/icons/arrow-right-12.svg') no-repeat center center; + content: ''; + -moz-context-properties: fill; + display: inline-block; + fill: var(--newtab-primary-action-background); + height: 16px; + margin-inline-start: 5px; + vertical-align: top; + width: 12px; + } + + &:dir(rtl)::after { + background-image: url('chrome://global/skin/icons/arrow-left-12.svg'); + } +} |