const requiredProps = {
  onClickLogout: () => {
    console.log('Log out clicked');
    alert('Log out clicked');
  },
};

const props = {
  ...requiredProps,
  variant: 'white',
  name: 'Uri',
  avatar:
    'https://6a5edc300520d4037dd6-0732807511066685711db213ddc1d2df.ssl.cf2.rackcdn.com/snw8ceng29ch3zbs4pvro3t2jxswf8yk',
};

<div>
  <p>Default without all optional props:</p>
  <UserMenu {...requiredProps} />

  <p>Variant 'white' with name and avatar:</p>
  <UserMenu {...props} />

  <p>Variant 'accent' with name and avatar and dimension 'compact':</p>
  <UserMenu {...props} variant="accent" dimension="compact" />

  <p>Variant 'white' without name:</p>
  <UserMenu {...props} name={null} />

  <p>Variant 'linkBlue' with additional custom menu item:</p>
  <UserMenu
    {...props}
    variant="linkBlue"
    customItems={[
      {
        label: { id: 'dummy', defaultMessage: 'Additional item' },
        action: () => alert('Hallo'),
      },
    ]}
  />
</div>;