forum/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.hbs

<StyleguideExample @title="<Chat::Header::Icon>">
  <Styleguide::Component>
    <header
      class="d-header"
      style="display: flex; align-items: center; justify-content: center;"
    >
      <ul class="d-header-icons">
        <li class="header-dropdown-toggle chat-header-icon">
          <Chat::Header::Icon
            @isActive={{this.isActive}}
            @currentUserInDnD={{this.currentUserInDnD}}
            @unreadCount={{this.unreadCount}}
            @urgentCount={{this.urgentCount}}
            @indicatorPreference={{this.indicatorPreference}}
          />
        </li>
      </ul>
    </header>
  </Styleguide::Component>

  <Styleguide::Controls>
    <Styleguide::Controls::Row @name="isActive">
      <DToggleSwitch
        @state={{this.isActive}}
        {{on "click" this.toggleIsActive}}
      />
    </Styleguide::Controls::Row>
    <Styleguide::Controls::Row @name="currentUserInDnD">
      <DToggleSwitch
        @state={{this.currentUserInDnD}}
        {{on "click" this.toggleCurrentUserInDnD}}
      />
    </Styleguide::Controls::Row>
  </Styleguide::Controls>
  <Styleguide::Controls::Row @name="Unread count">
    <input
      type="number"
      {{on "input" this.updateUnreadCount}}
      value={{this.unreadCount}}
    />
  </Styleguide::Controls::Row>
  <Styleguide::Controls::Row @name="Urgent count">
    <input
      type="number"
      {{on "input" this.updateUrgentCount}}
      value={{this.urgentCount}}
    />
  </Styleguide::Controls::Row>
  <Styleguide::Controls::Row @name="Indicator preference">
    <ComboBox
      @value={{this.indicatorPreference}}
      @content={{this.indicatorPreferences}}
      @onChange={{this.updateIndicatorPreference}}
      @valueProperty={{null}}
      @nameProperty={{null}}
    />

  </Styleguide::Controls::Row>
</StyleguideExample>