Skip to content
This repository has been archived by the owner on Jun 12, 2024. It is now read-only.

[Assembly v1] ProductMenu #503

Merged
merged 1 commit into from
Sep 16, 2021
Merged

[Assembly v1] ProductMenu #503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 4 additions & 4 deletions src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Array [
className="dr-ui--product-menu"
>
<a
className="txt-fancy txt-l block color-blue-on-hover"
className="txt-fancy txt-l block color-blue-on-hover color-text"
href="/dr-ui/"
>
dr-ui
Expand Down Expand Up @@ -685,7 +685,7 @@ Array [
className="dr-ui--product-menu"
>
<a
className="txt-fancy txt-l block color-blue-on-hover"
className="txt-fancy txt-l block color-blue-on-hover color-text"
href="/dr-ui/"
>
dr-ui
Expand Down Expand Up @@ -1296,7 +1296,7 @@ Array [
className="dr-ui--product-menu"
>
<a
className="txt-fancy txt-l block color-blue-on-hover"
className="txt-fancy txt-l block color-blue-on-hover color-text"
href="/dr-ui/"
>
dr-ui
Expand Down Expand Up @@ -1913,7 +1913,7 @@ Array [
</div>
</div>
<a
className="txt-fancy txt-l block color-blue-on-hover"
className="txt-fancy txt-l block color-blue-on-hover color-text"
href="/dr-ui/"
>
Mapbox Tiling Service
Expand Down
10 changes: 5 additions & 5 deletions src/components/product-menu/__tests__/__snapshots__/product-menu.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`product-menu Basic renders as expected 1`] = `
className="dr-ui--product-menu"
>
<a
className="txt-fancy txt-l block color-blue-on-hover"
className="txt-fancy txt-l block color-blue-on-hover color-text"
href="/dr-ui/"
>
Mapbox product menu
Expand Down Expand Up @@ -47,7 +47,7 @@ exports[`product-menu Beta product renders as expected 1`] = `
</div>
</div>
<a
className="txt-fancy txt-l block color-blue-on-hover"
className="txt-fancy txt-l block color-blue-on-hover color-text"
href="/vision/"
>
Vision SDK for Android
Expand Down Expand Up @@ -89,7 +89,7 @@ exports[`product-menu Beta product renders as expected 2`] = `
</div>
</div>
<a
className="txt-fancy txt-l block color-blue-on-hover"
className="txt-fancy txt-l block color-blue-on-hover color-text"
href="/vision/"
>
Navigation SDK for Android
Expand Down Expand Up @@ -119,7 +119,7 @@ exports[`product-menu Fake items, but one matches this test case's location rend
className="dr-ui--product-menu"
>
<a
className="txt-fancy txt-l block color-blue-on-hover"
className="txt-fancy txt-l block color-blue-on-hover color-text"
href="/api-documentation/"
>
Items in here
Expand All @@ -132,7 +132,7 @@ exports[`product-menu Product menu with something arbitrary in it renders as exp
className="dr-ui--product-menu"
>
<a
className="txt-fancy txt-l block color-blue-on-hover"
className="txt-fancy txt-l block color-blue-on-hover color-text"
href="/api-documentation/"
>
Pizza pie
Expand Down
44 changes: 11 additions & 33 deletions src/components/product-menu/product-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,24 @@ import Tag from '../tag/tag';
import classnames from 'classnames';

class ProductMenu extends React.PureComponent {
buildTag = (item) => {
const tagProps = {
theme: item.tag,
customLabel: item.customTagProps
? item.customTagProps.customLabel
: undefined,
customTooltipText: item.customTagProps
? item.customTagProps.customTooltipText
: undefined,

customBackground: item.customTagProps
? item.customTagProps.customBackground
: undefined,
customColor: item.customTagProps
? item.customTagProps.customColor
: undefined,
customBorder: item.customTagProps
? item.customTagProps.customBorder
: undefined
};
return (
<div className="ml-neg3">
<Tag {...tagProps} small={true} />
</div>
);
};

render() {
const { props } = this;
const { tag, customTagProps, lightText, productName, homePage } =
this.props;
return (
<div className="dr-ui--product-menu">
{props.tag && this.buildTag(props)}
{tag && (
<div className="ml-neg3">
<Tag theme={tag} {...customTagProps} small={true} />
</div>
)}
<a
href={props.homePage}
href={homePage}
className={classnames('txt-fancy txt-l block', {
'color-white color-gray-light-on-hover': props.lightText,
'color-blue-on-hover': !props.lightText
'color-white color-gray-light-on-hover': lightText,
'color-blue-on-hover color-text': !lightText
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm interested in trying out color-text here! I think we can look back at this when we work on PageLayout to see if this is an improvement or distraction. This the only real change to this component (as shown in the updated snapshots), everything else is clean up.

})}
>
{props.productName}
{productName}
</a>
</div>
);
Expand Down