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

[docs] adds feedback component #8507

Merged
merged 5 commits into from
Jul 22, 2019
Merged

[docs] adds feedback component #8507

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ecb4840
[docs] add feedback component
Jul 10, 2019
380377f
Merge branch 'publisher-production' into feedback
Jul 18, 2019
190b86d
Update dr-ui
Jul 18, 2019
b658b08
eslint
Jul 18, 2019
b0e7593
update dr-ui, fixes https://github.com/mapbox/dr-ui/issues/157
Jul 19, 2019
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
29 changes: 28 additions & 1 deletion docs/components/api-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import {highlightJavascript} from '../components/prism_highlight.js';
import docs from '../components/api.json'; // eslint-disable-line import/no-unresolved
import ApiItemMember from './api-item-member';
import IconText from '@mapbox/mr-ui/icon-text';

import Feedback from '@mapbox/dr-ui/feedback';
import constants from '../constants';

const linkerStack = new LinkerStack({})
.namespaceResolver(docs, (namespace) => {
Expand All @@ -18,6 +19,21 @@ const formatters = createFormatters(linkerStack.link);

class ApiItem extends React.Component {

constructor(props) {
super(props);
this.state = {
userName: undefined
};
}

componentDidMount() {
MapboxPageShell.afterUserCheck(() => {
this.setState({ userName: MapboxPageShell.getUser() ?
MapboxPageShell.getUser().id :
undefined});
});
}

md = (ast, inline) => {
if (inline && ast && ast.children.length && ast.children[0].type === 'paragraph') {
ast = {
Expand Down Expand Up @@ -161,6 +177,17 @@ class ApiItem extends React.Component {
<div className='py6 mt12 txt-m txt-bold'>Related</div>
<ul>{section.sees.map((see, i) => <li key={i}>{this.md(see, true)}</li>)}</ul>
</div>}

<div className="mt18">
<Feedback
site="Mapbox GL JS"
section={section.name}
type={`section on ${section.name}`}
location={this.props.location}
userName={this.state.userName}
webhook={constants.FORWARD_EVENT_WEBHOOK}
/>
</div>
</section>
);
}
Expand Down
18 changes: 16 additions & 2 deletions docs/components/example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import Prism from 'prismjs';
import supported from '@mapbox/mapbox-gl-supported';
import Icon from '@mapbox/mr-ui/icon';
import CodeSnippet from '@mapbox/mr-ui/code-snippet';
import Feedback from '@mapbox/dr-ui/feedback';
import constants from '../constants';

const highlightTheme = require('raw-loader!@mapbox/dr-ui/css/prism.css'); // eslint-disable-line import/no-commonjs

Expand All @@ -15,7 +17,8 @@ export default function (html) {
super(props);
this.state = {
filter: '',
token: undefined
token: undefined,
userName: undefined
};
}

Expand Down Expand Up @@ -101,6 +104,15 @@ ${html}
</div>
</div>
</div>
<div className="mt18">
<Feedback
site="Mapbox GL JS"
type="example"
location={this.props.location}
userName={this.state.userName}
webhook={constants.FORWARD_EVENT_WEBHOOK}
/>
</div>
</PageShell>
);
}
Expand All @@ -113,7 +125,9 @@ ${html}
doc.close();

MapboxPageShell.afterUserCheck(() => {
this.setState({token: MapboxPageShell.getUserPublicAccessToken()});
this.setState({token: MapboxPageShell.getUserPublicAccessToken(), userName: MapboxPageShell.getUser() ?
MapboxPageShell.getUser().id :
undefined});
});
}

Expand Down
27 changes: 27 additions & 0 deletions docs/components/markdown-page-shell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,26 @@
import React from 'react';
import PageShell from './page_shell';
import Feedback from '@mapbox/dr-ui/feedback';
import constants from '../constants';

class MarkdownPageshell extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: undefined
};
}

componentDidMount() {
MapboxPageShell.afterUserCheck(() => {
// fetches username so we can identify them in segment
this.setState({
userName: MapboxPageShell.getUser() ?
MapboxPageShell.getUser().id :
undefined
});
});
}
render() {
const { frontMatter, location } = this.props;
const meta = this.props.meta || {};
Expand All @@ -22,6 +41,14 @@ class MarkdownPageshell extends React.Component {
<div className="prose">
{this.props.children}
</div>
<div className="mt18">
<Feedback
site="Mapbox GL JS"
location={this.props.location}
userName={this.state.userName}
webhook={constants.FORWARD_EVENT_WEBHOOK}
/>
</div>
</PageShell>
);
}
Expand Down
6 changes: 6 additions & 0 deletions docs/constants.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"FORWARD_EVENT_WEBHOOK": {
"staging": "https://fbtme2z025.execute-api.us-east-1.amazonaws.com/hookshot/webhook",
"production": "https://2n40g6lyc9.execute-api.us-east-1.amazonaws.com/hookshot/webhook"
}
}
2 changes: 1 addition & 1 deletion docs/pages/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export default class extends React.Component {
<div className='api-section'>
{docs.map((doc, i) => doc.kind === 'note' ?
<Note key={i} {...doc}/> :
<ApiItem key={i} {...doc}/>)}
<ApiItem location={this.props.location} key={i} {...doc}/>)}
</div>
</div>
</PageShell>
Expand Down
50 changes: 39 additions & 11 deletions docs/pages/style-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {highlightJavascript, highlightJSON} from '../components/prism_highlight'
import entries from 'object.entries';
import ref from '../../src/style-spec/reference/latest';
import Icon from '@mapbox/mr-ui/icon';
import Feedback from '@mapbox/dr-ui/feedback';
import constants from '../constants';

const meta = {
title: 'Style Specification',
Expand Down Expand Up @@ -68,19 +70,44 @@ function renderParams(params, maxLength) {
}

class SectionH2 extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: undefined
};
}

componentDidMount() {
MapboxPageShell.afterUserCheck(() => {
this.setState({ userName: MapboxPageShell.getUser() ?
MapboxPageShell.getUser().id :
undefined});
});
}
render() {
const {props} = this;
return (
<div className='style-spec-section-h2'>
<a id={props.id} className='anchor'/>
<h2><a className='unprose' href={`#${props.id}`} title={`link to ${props.title}`}>{props.title}</a></h2>
{this.props.children}
<div className="mt18">
<Feedback
site="Style Specification"
section={props.title}
type={`section on ${props.title}`}
location={this.props.location}
userName={this.state.userName}
webhook={constants.FORWARD_EVENT_WEBHOOK}
/>
</div>
</div>
);
}
}

class SectionH3 extends React.Component {

render() {
const {props} = this;
return (
Expand Down Expand Up @@ -233,6 +260,7 @@ class Item extends React.Component {
}

export default class extends React.Component {

render() {
return (
<PageShell meta={meta}>
Expand All @@ -255,7 +283,7 @@ export default class extends React.Component {
<p>For platform-appropriate documentation of style-related features, developers using the Mapbox Maps SDK for iOS should consult the <a href='https://docs.mapbox.com/ios/maps/overview/'>iOS SDK API reference</a>, and developers using the Mapbox Maps SDK for macOS should consult the <a href='https://mapbox.github.io/mapbox-gl-native/macos/'>macOS SDK API reference</a>.</p>
</div>

<SectionH2 id='root' title='Root Properties'>
<SectionH2 location={this.props.location} id='root' title='Root Properties'>
<p>Root level properties of a Mapbox style specify the map's layers, tile sources and other
resources, and default values for the initial camera position when not specified
elsewhere.</p>
Expand All @@ -276,7 +304,7 @@ export default class extends React.Component {
</InnerSection>
</SectionH2>

<SectionH2 id='light' title='Light'>
<SectionH2 location={this.props.location} id='light' title='Light'>
<p>
A style's <code>light</code> property provides global light source for that style.
</p>
Expand All @@ -288,7 +316,7 @@ export default class extends React.Component {
</InnerSection>
</SectionH2>

<SectionH2 id='sources' title='Sources'>
<SectionH2 location={this.props.location} id='sources' title='Sources'>
<p>
Sources supply data to be shown on the map. The type of source is specified by the
<code>"type"</code> property, and must be one of {sourceTypes.map((t, i) => <var key={i}>{t}</var>).reduce((prev, curr) => [prev, ', ', curr])}.
Expand Down Expand Up @@ -562,7 +590,7 @@ export default class extends React.Component {
</InnerSection>
</SectionH2>

<SectionH2 id='sprite' title='Sprite'>
<SectionH2 location={this.props.location} id='sprite' title='Sprite'>
<p>
A style's <code>sprite</code> property supplies a URL template for loading small images to use in
rendering <code>background-pattern</code>, <code>fill-pattern</code>, <code>line-pattern</code>,
Expand Down Expand Up @@ -619,7 +647,7 @@ export default class extends React.Component {
</p>
</SectionH2>

<SectionH2 id='glyphs' title='Glyphs'>
<SectionH2 location={this.props.location} id='glyphs' title='Glyphs'>
<p>
A style's <code>glyphs</code> property provides a URL template for loading signed-distance-field glyph sets in PBF format.
</p>
Expand All @@ -644,7 +672,7 @@ export default class extends React.Component {
</ul>
</SectionH2>

<SectionH2 id='transition' title='Transition'>
<SectionH2 location={this.props.location} id='transition' title='Transition'>
<p>
A <code>transition</code> property controls timing for the interpolation between a transitionable style
property's previous value and new value. A style's <a href='#root-transition' title='link to root-transition'>
Expand All @@ -660,7 +688,7 @@ export default class extends React.Component {
</InnerSection>
</SectionH2>

<SectionH2 id='layers' title='Layers'>
<SectionH2 location={this.props.location} id='layers' title='Layers'>
<p>
A style's <code>layers</code> property lists all of the layers available in that style. The type of
layer is specified by the <code>"type"</code> property, and must be one of {layerTypes.map((t, i) => <var key={i}>{t}</var>).reduce((prev, curr) => [prev, ', ', curr])}.
Expand Down Expand Up @@ -701,7 +729,7 @@ export default class extends React.Component {
</InnerSection>
</SectionH2>

<SectionH2 id='types' title='Types'>
<SectionH2 location={this.props.location} id='types' title='Types'>
<p>A Mapbox style contains values of various types, most commonly as values for the style properties of a layer.</p>
<SectionH3 id='types-color' title='Color'>
<p>
Expand Down Expand Up @@ -765,7 +793,7 @@ export default class extends React.Component {
</SectionH3>
</SectionH2>

<SectionH2 id='expressions' title='Expressions'>
<SectionH2 location={this.props.location} id='expressions' title='Expressions'>
<p>The value for any <a href="#layout-property">layout property</a>, <a
href="#paint-property">paint property</a>, or <a href="#layer-filter">filter</a> may be
specified as an <em>expression</em>. An expression defines a formula for computing the
Expand Down Expand Up @@ -1039,7 +1067,7 @@ export default class extends React.Component {
</SectionH3>
</SectionH2>

<SectionH2 id='other' title='Other'>
<SectionH2 location={this.props.location} id='other' title='Other'>
<SectionH3 id='other-function' title='Function'>
<p>The value for any layout or paint property may be specified as
a <em>function</em>. Functions allow you to make the appearance of a map feature
Expand Down Expand Up @@ -1276,7 +1304,7 @@ export default class extends React.Component {
</SectionH3>
</SectionH2>

<SectionH2 id='other-filter' title='Other filter'>
<SectionH2 location={this.props.location} id='other-filter' title='Other filter'>
<p>In previous versions of the style specification, <a href="#layer-filter">filters</a> were defined using the deprecated syntax documented below. Though filters defined with this syntax will continue to work, we recommend using the more flexible <a href="#expressions">expression</a> syntax instead. Expression syntax and the deprecated syntax below cannot be mixed in a single filter definition.</p>


Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,13 @@
"@mapbox/appropriate-images": "^2.0.0",
"@mapbox/appropriate-images-react": "^1.0.0",
"@mapbox/batfish": "1.9.8",
"@mapbox/dr-ui": "0.16.2",
"@mapbox/dr-ui": "0.18.2",
"@mapbox/flow-remove-types": "^1.3.0-await.upstream.2",
"@mapbox/gazetteer": "^3.1.2",
"@mapbox/mapbox-gl-rtl-text": "^0.2.1",
"@mapbox/mapbox-gl-test-suite": "file:test/integration",
"@mapbox/mbx-assembly": "^0.28.2",
"@mapbox/mr-ui": "0.7.1",
"@mapbox/mr-ui": "0.7.2",
"@octokit/rest": "^15.15.1",
"babel-eslint": "^10.0.1",
"benchmark": "^2.1.4",
Expand Down
Loading