const defaultProps = {
  page: 'design-system',
};

const userProp = {
  user: {
    data: {
      name: 'Tom Tom',
      email: 'tom@example.com',
      avatarSmallUrl:
        'https://6a5edc300520d4037dd6-0732807511066685711db213ddc1d2df.ssl.cf2.rackcdn.com/snw8ceng29ch3zbs4pvro3t2jxswf8yk',
      accessToken: 'abc123',
      premium: {
        active: {
          domain: 'myCustomDomain',
        },
      },
    },
    loading: false,
    isEligibleForFreeTrial: true,
  },
};

const userHandlerProps = {
  onClickLogin: (defaultBehaviour) => {
    alert('Log in clicked');
    defaultBehaviour();
  },
  onClickLogout: (defaultBehaviour) => {
    alert('Log out clicked');
    defaultBehaviour();
  },
  onClickSignup: (defaultBehaviour) => {
    alert('Sign up clicked');
    defaultBehaviour();
  },
};

const createHandlerProps = {
  onClickCreatePoll: (defaultBehaviour) => {
    alert('Create poll clicked');
    defaultBehaviour();
  },
  onClickCreateOneOnOne: (defaultBehaviour) => {
    alert('Create 1:1 clicked');
    defaultBehaviour();
  },
  onClickCreateSurvey: (defaultBehaviour) => {
    alert('Create survey clicked');
    defaultBehaviour();
  },
};

function navigateToNewUrl(url) {
  window.location.href = url;
}

<div>
  <p>Without a logged-in user:</p>
  <Navigation {...defaultProps} />

  <p>With a logged-in free user:</p>
  <Navigation {...defaultProps} {...userProp} />

  <p>With a logged-in subscribed user:</p>
  <Navigation
    {...defaultProps}
    user={{
      ...userProp.user,
      isEligibleForFreeTrial: false,
    }}
  />

  <p>Logged out, without Create Poll menu:</p>
  <Navigation {...defaultProps} hideCreatePollMenu />

  <p>Logged in, without Create Poll menu:</p>
  <Navigation {...defaultProps} {...userProp} hideCreatePollMenu />

  <p>Logged out, with action handlers and links for user/create actions:</p>
  <Navigation {...defaultProps} {...userHandlerProps} {...createHandlerProps} />

  <p>Logged in, with action handlers and links for user/create actions:</p>
  <Navigation {...defaultProps} {...userProp} {...userHandlerProps} {...createHandlerProps} />

  <p>Logged out, white theme:</p>
  <Navigation {...defaultProps} theme="white" />

  <p>Logged in with no links passed to component:</p>
  <Navigation {...defaultProps} {...userProp} theme="white" links={[]} />

  <p>Logged in, override url of '/logout'</p>
  <Navigation {...defaultProps} {...userProp} theme="white" onClickLogout={() => navigateToNewUrl('/newURL')} />

  <p>Logged in with custom logo:</p>
  <Navigation {...defaultProps} {...userProp} customLogo="https://doodle.com/graphics/mails0/doodleLogo.png" />

  <p>Logged in, white theme:</p>
  <Navigation {...defaultProps} {...userProp} theme="white" />

  <p>Logged out with no links passed to component:</p>
  <Navigation {...defaultProps} theme="white" links={[]} />
</div>;

Tracking setup

Note: This component supports tracking by providing its trackingClient with an initialized API client instance of lib-tracking 1.x.