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>