mrcthms

<GlobalNavigation {...{
  "globalNavigationWebURL": "/global-navigation-web",
  "isDocument": true,
  "documentID": 7884175,
  "context": "document",
  "documentType": "board",
  "logoURL": "logoURL()",
  "settings": [
    "Object",
    "Object"

mrcthms

import React from 'react'
// This is not the 'home' icon in the screenshot – we do not have a 'home' icon
// in Helios. Something that would be great to add as the one in the screenshot
// looks a little out of place among the other Helios icons.
import { Screens } from '@invisionapp/helios/icons'
import { Dropdown } from '@invisionapp/helios'

function MyDropdown(props) {
  return (
    <Dropdown

mrcthms

import React from 'react'
import { Root } from './styles'

export default ({ withPadding, children, ...props }) => (
  <Root {...props} withPadding={withPadding}>{children}</Root>
 )

mrcthms

import React from 'react'
import { Dropdown, Tooltip } from 'invision-helios'

const MyComponent = props => (
  <Dropdown trigger={<Tooltip trigger="Open Dropdown">I am the content of the Tooltip</Tooltip>}>
    {props.children}
  </Dropdown>
)

mrcthms

import React, { PureComponent, Fragment } from 'react'
import { Search, ListView, Avatar, TabBar, Header, ScreenTitle } from 'component-library'
import { Settings } from 'component-library/icons' 

class App extends PureComponent {
  state = {
    searchValue: '',
    listItems: []
  }
  componentDidMount() {

mrcthms

import React, { Fragment } from 'react'
import { Modal, Button } from 'invision-helios'

class MyComponent extends React.Component {
  state = {
    open: false
  }
  
  handleClick = () => {
    this.setState(prev => ({

mrcthms

class Parent extends Component {
  state = {
    counter: 0
  }
  handleClick = () => this.setState({ counter: this.state.counter + 1 })
  render() {
    return (
      <div>
        <p onClick={this.handleClick}>{this.state.counter}</p>
        <Child />

mrcthms

import React, { Component } from 'react'
import styled from 'styled-components'

const StyledButton = styled('a')`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: ${({ theme }) => theme.radii.circled};

mrcthms

<Pagination
  aria-label="Pagination Navigation"
  currentPage={1}
  element="span"
  items={[
    {
      onClick: () => { setState(1) }
    },
    {
      onClick: () => { setState(2) }

mrcthms

<Row ratio={[1, 2, 1]}>
  <Col>I will be 25%</Col>
  <Col>I will be 50%</Col>
  <Col>I will be 25%</Col>
</Row>

// New props