Repository: h2oai/wave
File: ui/src/nav.tsx (TypeScript)

Code before:
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import * as Fluent from '@fluentui/react'
import { B, Id, Model, S } from 'h2o-wave'
import React from 'react'
import { stylesheet } from 'typestyle'
import { Component, XComponents } from './form'
import { CardEffect, cards, getEffectClass, toCardEffect } from './layout'
import { XPersona } from './persona'
import { clas, cssVar, padding } from './theme'
import { bond, wave } from './ui'

/** Create a navigation item. */
export interface NavItem {
  /** The name of this item. Prefix the name with a '#' to trigger hash-change navigation. */
  name: Id
  /** The label to display. */
  label: S
  /** An optional icon to display next to the label. */
  icon?: S
  /** True if this item should be disabled. */
  disabled?: B
  /** The item title, typically displayed as a tooltip. */
  title?: S
}

/** Create a group of navigation items. */
export interface NavGroup {
  /** The label to display for this group. */
  label: S
  /** The navigation items contained in this group. */
  items: NavItem[]
  /** Indicates whether nav groups should be rendered as collapsed initially */
  collapsed?: B
}

/** Create a card containing a navigation pane. */
export interface State {
  /** The navigation groups contained in this pane. */
  items: NavGroup[]
  /** The name of the initially active (highlighted) navigation item. */
  value?: S
  /** The card's title. */
  title?: S
  /** The card's subtitle. */
  subtitle?: S
  /** The icon, displayed to the left. **/
  icon?: S

Review comment (suggestion):
```suggestion
  /** An optional tooltip message displayed when a user hovers over this item. */
```

Code after:
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import * as Fluent from '@fluentui/react'
import { B, Id, Model, S } from 'h2o-wave'
import React from 'react'
import { stylesheet } from 'typestyle'
import { Component, XComponents } from './form'
import { CardEffect, cards, getEffectClass, toCardEffect } from './layout'
import { XPersona } from './persona'
import { clas, cssVar, padding } from './theme'
import { bond, wave } from './ui'

/** Create a navigation item. */
export interface NavItem {
  /** The name of this item. Prefix the name with a '#' to trigger hash-change navigation. */
  name: Id
  /** The label to display. */
  label: S
  /** An optional icon to display next to the label. */
  icon?: S
  /** True if this item should be disabled. */
  disabled?: B
  /** An optional tooltip message displayed when a user hovers over this item. */
  tooltip?: S
}

/** Create a group of navigation items. */
export interface NavGroup {
  /** The label to display for this group. */
  label: S
  /** The navigation items contained in this group. */
  items: NavItem[]
  /** Indicates whether nav groups should be rendered as collapsed initially */
  collapsed?: B
}

/** Create a card containing a navigation pane. */
export interface State {
  /** The navigation groups contained in this pane. */
  items: NavGroup[]
  /** The name of the initially active (highlighted) navigation item. */
  value?: S
  /** The card's title. */
  title?: S
  /** The card's subtitle. */
  subtitle?: S
  /** The icon, displayed to the left. **/
  icon?: S