@instructure/outcomes-ui 4.0.0 → 4.1.0

package/lib/components/Gradebook/gradebook-table/ColumnHeader/__tests__/index.test.tsx

@@ -0,0 +1,149 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Menu } from '@instructure/ui-menu'
+import { IconStarLine } from '@instructure/ui-icons'
+import { ColumnHeader } from '..'
+
+describe('ColumnHeader', () => {
+  const defaultProps = {
+    title: 'Test Column',
+    optionsMenuTriggerLabel: 'Test Options',
+    optionsMenuItems: [],
+  }
+
+  it('renders the title', () => {
+    render(<ColumnHeader {...defaultProps} />)
+    expect(screen.getAllByText('Test Column').length).toBeGreaterThan(0)
+  })
+
+  it('does not render the options menu when no items are provided', () => {
+    render(<ColumnHeader {...defaultProps} />)
+    expect(screen.queryByRole('button', {name: 'Test Options'})).not.toBeInTheDocument()
+  })
+
+  it('renders the options menu trigger', () => {
+    const menuItems = [<Menu.Item key="item-a">Item A</Menu.Item>]
+
+    render(<ColumnHeader {...defaultProps} optionsMenuItems={menuItems} />)
+    expect(screen.getByRole('button', {name: 'Test Options'})).toBeInTheDocument()
+  })
+
+  it('renders multiple menu groups correctly', () => {
+    const menuItems = [
+      <Menu.Group key="group-1" label="Group 1">
+        <Menu.Item>Item A</Menu.Item>
+      </Menu.Group>,
+      <Menu.Group key="group-2" label="Group 2">
+        <Menu.Item>Item B</Menu.Item>
+      </Menu.Group>,
+    ]
+
+    render(<ColumnHeader {...defaultProps} optionsMenuItems={menuItems} />)
+    fireEvent.click(screen.getByRole('button', {name: 'Test Options'}))
+
+    expect(screen.getByText('Group 1')).toBeInTheDocument()
+    expect(screen.getByText('Group 2')).toBeInTheDocument()
+    expect(screen.getByText('Item A')).toBeInTheDocument()
+    expect(screen.getByText('Item B')).toBeInTheDocument()
+  })
+
+  it('uses custom column width when provided', () => {
+    const {container} = render(<ColumnHeader {...defaultProps} columnWidth={300} />)
+    const headerElement = container.querySelector('[data-testid="column-header"]')
+    expect(headerElement).toHaveStyle({width: '300px'})
+  })
+
+  it('does not set width when columnWidth is not provided', () => {
+    const {container} = render(<ColumnHeader {...defaultProps} />)
+    const headerElement = container.querySelector('[data-testid="column-header"]')
+    expect(headerElement).not.toHaveStyle({width: '300px'})
+  })
+
+  it('renders menu with single item', () => {
+    const menuItems = [<Menu.Item key="item-1">Single Item</Menu.Item>]
+
+    render(<ColumnHeader {...defaultProps} optionsMenuItems={menuItems} />)
+    fireEvent.click(screen.getByRole('button', {name: 'Test Options'}))
+
+    expect(screen.getByText('Single Item')).toBeInTheDocument()
+  })
+
+  it('renders the title in both visible and screen reader text', () => {
+    render(<ColumnHeader {...defaultProps} title="Custom Title" />)
+
+    const allTitles = screen.getAllByText('Custom Title')
+    expect(allTitles.length).toBeGreaterThan(1)
+  })
+
+  it('renders menu without optionsMenuTriggerLabel', () => {
+    const menuItems = [<Menu.Item key="item-1">Test Item</Menu.Item>]
+    const propsWithoutLabel = {
+      title: 'Test Column',
+      optionsMenuItems: menuItems,
+    }
+
+    render(<ColumnHeader {...propsWithoutLabel} />)
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+  })
+
+  it('opens and closes menu on trigger click', () => {
+    const menuItems = [<Menu.Item key="item-1">Menu Item</Menu.Item>]
+
+    render(<ColumnHeader {...defaultProps} optionsMenuItems={menuItems} />)
+
+    expect(screen.queryByText('Menu Item')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', {name: 'Test Options'}))
+    expect(screen.getByText('Menu Item')).toBeInTheDocument()
+  })
+
+  it('handles empty array for optionsMenuItems', () => {
+    render(<ColumnHeader {...defaultProps} optionsMenuItems={[]} />)
+    expect(screen.queryByRole('button', {name: 'Test Options'})).not.toBeInTheDocument()
+  })
+
+  it('renders with a very long title that might truncate', () => {
+    const longTitle = 'This is a very long column header title that should potentially truncate'
+    render(<ColumnHeader {...defaultProps} title={longTitle} columnWidth={150} />)
+    expect(screen.getAllByText(longTitle).length).toBeGreaterThan(0)
+  })
+
+  it('renders without columnWidth or optionsMenuTriggerLabel', () => {
+    const minimalProps = {
+      title: 'Minimal Test',
+    }
+    render(<ColumnHeader {...minimalProps} />)
+    expect(screen.getAllByText('Minimal Test').length).toBeGreaterThan(0)
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('renders with columnWidth set to 0', () => {
+    const {container} = render(<ColumnHeader {...defaultProps} columnWidth={0} />)
+    const headerElement = container.querySelector('[data-testid="column-header"]')
+    expect(headerElement).toHaveStyle({width: '0px'})
+  })
+
+  it('renders the icon when provided', () => {
+    render(<ColumnHeader {...defaultProps} icon={<IconStarLine data-testid="test-icon" />} />)
+    expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+  })
+
+  it('does not render an icon container when icon is not provided', () => {
+    render(<ColumnHeader {...defaultProps} />)
+    expect(screen.queryByTestId('test-icon')).not.toBeInTheDocument()
+  })
+
+  it('renders with a custom background without errors', () => {
+    render(<ColumnHeader {...defaultProps} background="brand" />)
+    expect(screen.getByTestId('column-header')).toBeInTheDocument()
+  })
+
+  it('renders with the default secondary background without errors', () => {
+    render(<ColumnHeader {...defaultProps} />)
+    expect(screen.getByTestId('column-header')).toBeInTheDocument()
+  })
+
+
+})

package/lib/components/Gradebook/gradebook-table/ColumnHeader/index.stories.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Menu } from '@instructure/ui-menu'
+import { IconStarLine } from '@instructure/ui-icons'
+import { ColumnHeader } from '.'
+import type { ColumnHeaderProps } from '.'
+
+const meta: Meta<ColumnHeaderProps> = {
+  title: 'Gradebook/ColumnHeader',
+  component: ColumnHeader,
+  args: {
+    title: 'Column Title',
+    optionsMenuTriggerLabel: 'Options',
+  },
+}
+
+export default meta
+type Story = StoryObj<ColumnHeaderProps>
+
+const menuItems = [
+  <Menu.Group label="Group 1" key="group-1">
+    <Menu.Item>
+      Option 1
+    </Menu.Item>
+
+    <Menu.Item>
+      Option 2
+    </Menu.Item>
+  </Menu.Group>
+]
+
+export const Default: Story = {
+  args: {
+    title: 'Test Title',
+  },
+}
+
+export const LongTitle: Story = {
+  args: {
+    title: 'This is a long title that should be truncated with an ellipsis when it exceeds the available space',
+  },
+}
+
+export const WithMenu: Story = {
+  args: {
+    title: 'Test Title',
+    optionsMenuTriggerLabel: 'Test options',
+    optionsMenuItems: menuItems,
+  },
+}
+
+export const LongTitleWithMenu: Story = {
+  args: {
+    title: 'This is a very long title that should be truncated with an ellipsis when it exceeds the available space',
+    optionsMenuTriggerLabel: 'Test options',
+    optionsMenuItems: menuItems,
+  },
+}
+
+export const CustomWidth: Story = {
+  args: {
+    title: 'Custom Width',
+    columnWidth: 300,
+  },
+}
+
+export const NarrowColumn: Story = {
+  args: {
+    title: 'Narrow Column Title',
+    columnWidth: 150,
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    title: 'Test Title',
+    icon: <IconStarLine />,
+  },
+}
+
+export const WithBrandBackground: Story = {
+  args: {
+    title: 'Test Title',
+    background: 'brand',
+    optionsMenuTriggerLabel: 'Test options',
+    optionsMenuItems: menuItems,
+  },
+}
+
+export const WithIconAndBackground: Story = {
+  args: {
+    title: 'Test Title',
+    icon: <IconStarLine />,
+    background: 'brand',
+    optionsMenuTriggerLabel: 'Test options',
+    optionsMenuItems: menuItems,
+  },
+}

package/lib/components/Gradebook/gradebook-table/ColumnHeader/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { Text } from '@instructure/ui-text'
+import { Flex } from '@instructure/ui-flex'
+import { IconButton } from '@instructure/ui-buttons'
+import { IconMoreLine } from '@instructure/ui-icons'
+import { Menu } from '@instructure/ui-menu'
+import { View, type ViewProps } from '@instructure/ui-view'
+import { AccessibleContent } from '@instructure/ui-a11y-content'
+import { CELL_HEIGHT, COLUMN_WIDTH } from '@/util/gradebook/constants'
+import TruncateWithTooltip from '@/components/Gradebook/shared/TruncateWithTooltip'
+import { getInverseColor } from '@/util/gradebook/colors'
+
+export interface ColumnHeaderProps {
+  title: string
+  optionsMenuTriggerLabel?: string
+  optionsMenuItems?: React.ReactNode[]
+  icon?: React.ReactNode
+  background?: ViewProps['background']
+  columnWidth?: number
+}
+
+export const ColumnHeader: React.FC<ColumnHeaderProps> = ({
+  title,
+  optionsMenuTriggerLabel,
+  optionsMenuItems = [],
+  icon,
+  background = 'secondary',
+  columnWidth = COLUMN_WIDTH,
+}) => {
+  return (
+    <View background={background} as="div" width={columnWidth} data-testid="column-header">
+      <Flex
+        alignItems="center"
+        justifyItems="space-between"
+        height={CELL_HEIGHT}
+        padding="none none none x-small"
+      >
+        <Flex.Item shouldGrow shouldShrink overflowX="hidden">
+          <Flex gap="x-small">
+            {icon &&
+              <Flex.Item padding="0 0 xx-small none">
+                {icon}
+              </Flex.Item>
+            }
+
+            <Flex.Item shouldGrow shouldShrink overflowX="hidden" padding="0 xx-small 0 0">
+              <AccessibleContent alt={title}>
+                <Text weight="bold">
+                  <TruncateWithTooltip>{title}</TruncateWithTooltip>
+                </Text>
+              </AccessibleContent>
+            </Flex.Item>
+          </Flex>
+        </Flex.Item>
+
+        {optionsMenuItems.length > 0 && (
+          <Menu
+            placement="bottom"
+            trigger={
+              <IconButton
+                withBorder={false}
+                withBackground={false}
+                size="small"
+                screenReaderLabel={optionsMenuTriggerLabel}
+                color={getInverseColor(background)}
+              >
+                <IconMoreLine />
+              </IconButton>
+            }
+          >
+            {optionsMenuItems}
+          </Menu>
+        )}
+      </Flex>
+    </View>
+  )
+}

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/ScoreWithLabel.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { Flex } from '@instructure/ui-flex'
+import { Text } from '@instructure/ui-text'
+import { ScoreDisplayFormat } from '@/util/gradebook/constants'
+import type { MasteryLevel } from '@/types/gradebook'
+import { MasteryLevelIcon } from '@/components/Gradebook/icons/MasteryLevelIcon'
+
+export interface ScoreWithLabelProps {
+  masteryLevel: MasteryLevel
+  score: number
+  label: string
+  scoreDisplayFormat?: ScoreDisplayFormat
+}
+
+interface LabelProps {
+  scoreDisplayFormat: ScoreDisplayFormat
+  score: number
+  text: string
+}
+
+const Label: React.FC<LabelProps> = ({scoreDisplayFormat, score, text}) => {
+  if (scoreDisplayFormat === ScoreDisplayFormat.ICON_AND_LABEL) {
+    return <Text size="legend">{text}</Text>
+  }
+
+  if (scoreDisplayFormat === ScoreDisplayFormat.ICON_AND_POINTS) {
+    return <Text size="legend">{score}</Text>
+  }
+}
+
+export const ScoreWithLabel: React.FC<ScoreWithLabelProps> = ({
+  masteryLevel,
+  score,
+  label,
+  scoreDisplayFormat = ScoreDisplayFormat.ICON_ONLY,
+}) => {
+  const justifyItems = scoreDisplayFormat === ScoreDisplayFormat.ICON_ONLY ? 'center' : 'start'
+
+  return (
+    <Flex
+      width="100%"
+      height="100%"
+      alignItems="center"
+      gap="small"
+      padding="none medium-small"
+      justifyItems={justifyItems}
+    >
+      <MasteryLevelIcon
+        masteryLevel={masteryLevel}
+        width="1.5rem"
+        height="1.5rem"
+        ariaLabel={label}
+        ariaHidden={scoreDisplayFormat === ScoreDisplayFormat.ICON_AND_LABEL}
+      />
+
+      <Label
+        scoreDisplayFormat={scoreDisplayFormat}
+        score={score}
+        text={label}
+      />
+    </Flex>
+  )
+}

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/__tests__/ScoreWithLabel.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { ScoreDisplayFormat } from '@/util/gradebook/constants'
+import { ScoreWithLabel, ScoreWithLabelProps } from '../ScoreWithLabel'
+
+describe('ScoreWithLabel', () => {
+  const defaultProps: ScoreWithLabelProps = {
+    masteryLevel: 'exceeds_mastery',
+    score: 3,
+    label: 'Mastery',
+  }
+
+  it('renders with icon and label', () => {
+    render(
+      <ScoreWithLabel {...defaultProps} scoreDisplayFormat={ScoreDisplayFormat.ICON_AND_LABEL} />,
+    )
+    expect(screen.getByText('Mastery')).toBeInTheDocument()
+  })
+
+  describe('scoreDisplayFormat', () => {
+    it('shows label in ScreenReaderContent with ICON_ONLY format (default)', () => {
+      render(<ScoreWithLabel {...defaultProps} scoreDisplayFormat={ScoreDisplayFormat.ICON_ONLY} />)
+      expect(screen.queryByText('Mastery')).not.toBeInTheDocument()
+    })
+
+    it('shows visible label with ICON_AND_LABEL format', () => {
+      render(
+        <ScoreWithLabel {...defaultProps} scoreDisplayFormat={ScoreDisplayFormat.ICON_AND_LABEL} />,
+      )
+      const labelText = screen.getByText('Mastery')
+      expect(labelText).toBeInTheDocument()
+      expect(labelText.closest('[class*="screenReaderContent"]')).not.toBeInTheDocument()
+    })
+
+    it('shows visible score with ICON_AND_POINTS format', () => {
+      render(
+        <ScoreWithLabel
+          {...defaultProps}
+          scoreDisplayFormat={ScoreDisplayFormat.ICON_AND_POINTS}
+        />,
+      )
+      const pointsText = screen.getByText('3')
+      expect(pointsText).toBeInTheDocument()
+      expect(pointsText.closest('[class*="screenReaderContent"]')).not.toBeInTheDocument()
+    })
+  })
+
+  it('uses default ICON_ONLY format when not specified', () => {
+    render(<ScoreWithLabel {...defaultProps} />)
+    expect(screen.queryByText('Mastery')).not.toBeInTheDocument()
+  })
+})

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/__tests__/index.test.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { ScoreDisplayFormat } from '@/util/gradebook/constants'
+import { ScoreCellContent, ScoreCellContentProps } from '../index'
+
+describe('ScoreCellContent', () => {
+  const defaultProps: ScoreCellContentProps = {
+    masteryLevel: 'exceeds_mastery',
+    score: 3,
+    label: 'Mastery',
+    scoreDisplayFormat: ScoreDisplayFormat.ICON_ONLY,
+  }
+
+  it('passes props to ScoreWithLabel component', () => {
+    render(
+      <ScoreCellContent
+        {...defaultProps}
+        scoreDisplayFormat={ScoreDisplayFormat.ICON_AND_LABEL}
+      />,
+    )
+    expect(screen.getByText('Mastery')).toBeInTheDocument()
+  })
+
+  describe('action button visibility', () => {
+    it('does not show action button by default', () => {
+      render(<ScoreCellContent {...defaultProps} onAction={jest.fn()} />)
+      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument()
+    })
+
+    it('shows action button when focus is true', () => {
+      render(<ScoreCellContent {...defaultProps} onAction={jest.fn()} focus={true} />)
+      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument()
+    })
+
+    it('shows action button on hover (internal state)', () => {
+      render(<ScoreCellContent {...defaultProps} onAction={jest.fn()} />)
+
+      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument()
+
+      const viewElement = screen.getByTestId('score-cell-content')
+      fireEvent.mouseEnter(viewElement)
+
+      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument()
+    })
+
+    it('hides action button on mouse leave (internal state)', () => {
+      render(<ScoreCellContent {...defaultProps} onAction={jest.fn()} />)
+      const viewElement = screen.getByTestId('score-cell-content')
+
+      fireEvent.mouseEnter(viewElement)
+      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument()
+
+      fireEvent.mouseLeave(viewElement)
+      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument()
+    })
+
+    it('shows action button when hover prop is true (controlled)', () => {
+      render(<ScoreCellContent {...defaultProps} onAction={jest.fn()} hover={true} />)
+      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument()
+    })
+
+    it('does not update internal hover state when hover prop is controlled', () => {
+      render(<ScoreCellContent {...defaultProps} onAction={jest.fn()} hover={false} />)
+      const viewElement = screen.getByTestId('score-cell-content')
+
+      fireEvent.mouseEnter(viewElement)
+
+      // Button should not appear because hover prop is controlled and set to false
+      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('action button interaction', () => {
+    it('calls onAction when action button is clicked', () => {
+      const onAction = jest.fn()
+      render(<ScoreCellContent {...defaultProps} onAction={onAction} focus={true} />)
+
+      const button = screen.getByTestId('score-cell-action-button')
+      fireEvent.click(button)
+
+      expect(onAction).toHaveBeenCalledTimes(1)
+    })
+
+    it('disables action button when onAction is undefined', () => {
+      render(<ScoreCellContent {...defaultProps} onAction={undefined} focus={true} />)
+
+      expect(screen.queryByTestId('score-cell-action-button')).toHaveAttribute('disabled')
+    })
+  })
+
+  describe('scoreDisplayFormat', () => {
+    it('renders with ICON_ONLY format', () => {
+      render(
+        <ScoreCellContent {...defaultProps} scoreDisplayFormat={ScoreDisplayFormat.ICON_ONLY} />,
+      )
+      expect(screen.queryByText('Mastery')).not.toBeInTheDocument()
+      expect(screen.queryByText('3')).not.toBeInTheDocument()
+    })
+
+    it('renders with ICON_AND_LABEL format', () => {
+      render(
+        <ScoreCellContent
+          {...defaultProps}
+          scoreDisplayFormat={ScoreDisplayFormat.ICON_AND_LABEL}
+        />,
+      )
+      expect(screen.getByText('Mastery')).toBeInTheDocument()
+    })
+
+    it('renders with ICON_AND_POINTS format', () => {
+      render(
+        <ScoreCellContent
+          {...defaultProps}
+          scoreDisplayFormat={ScoreDisplayFormat.ICON_AND_POINTS}
+        />,
+      )
+      expect(screen.getByText('3')).toBeInTheDocument()
+    })
+  })
+})

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/index.stories.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { View } from '@instructure/ui-view'
+import { action } from '@storybook/addon-actions'
+import { ScoreDisplayFormat } from '@/util/gradebook/constants'
+import { ScoreCellContent } from './index'
+
+const meta: Meta<typeof ScoreCellContent> = {
+  title: 'Gradebook/ScoreCellContent',
+  component: ScoreCellContent,
+  decorators: [
+    (Story) => (
+      <View width="200px" display="inline-block">
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ScoreCellContent>
+
+export const IconOnly: Story = {
+  args: {
+    scoreDisplayFormat: ScoreDisplayFormat.ICON_ONLY,
+    masteryLevel: 'exceeds_mastery',
+    label: 'Exceeds Mastery',
+    score: 4,
+    background: 'secondary',
+  },
+}
+
+export const IconAndScore: Story = {
+  args: {
+    scoreDisplayFormat: ScoreDisplayFormat.ICON_AND_POINTS,
+    masteryLevel: 'mastery',
+    label: 'Mastery',
+    score: 3,
+    background: 'secondary',
+  },
+}
+
+export const IconAndLabel: Story = {
+  args: {
+    scoreDisplayFormat: ScoreDisplayFormat.ICON_AND_LABEL,
+    masteryLevel: 'near_mastery',
+    label: 'Near Mastery',
+    score: 2,
+    background: 'secondary',
+  },
+}
+
+export const OnAction: Story = {
+  args: {
+    scoreDisplayFormat: ScoreDisplayFormat.ICON_AND_POINTS,
+    masteryLevel: 'remediation',
+    label: 'Remediation',
+    score: 1,
+    onAction: action('onAction'),
+    background: 'secondary',
+  },
+}
+
+// Actual focus will be on table cell element, no focus ring shows here, only action button is displayed
+export const FocusControlled: Story = {
+  args: {
+    scoreDisplayFormat: ScoreDisplayFormat.ICON_AND_POINTS,
+    masteryLevel: 'no_evidence',
+    label: 'No Evidence',
+    score: 0,
+    onAction: action('onAction'),
+    focus: true,
+    background: 'secondary',
+  },
+}