Design React Kit

Design React Kit provides React components designed for Public Administration services.

Key resources:

• GitHub Repository: For detailed usage instructions and contribution guidelines.
• Playground Project: A small application built with the kit to demonstrate its capabilities.
• License: Distributed under the BSD-3 license, which allows for modification and redistribution, including in closed-source software.

The Upload components provide various graphical and functional variants for HTML file input fields, allowing users to upload one or more files via form submission.

Key variants include:

• File List: A list of files where each item can exist in one of three states: loading (uploading), success (uploaded correctly), or error (upload failed).
• Image Preview: Replaces standard SVG file icons with thumbnails of the uploaded images. The component optimizes non-square images, but lightweight images are recommended.
• Avatar Upload: Combines an Avatar display with a file input for updating profile images. It is designed for a single file upload (no multiple attribute).
• Gallery: A specialized view for managing a series of photos with thumbnail previews.
• Drag & Drop: Allows users to drag files from their device directly onto the upload icon.

The Video component is built on top of the video.js library. It provides advanced video functionalities including support for multiple video formats, UI customization, and integration with external APIs. For low-level implementation details, refer to the Bootstrap video documentation.

import { Video } from '../../src';

A Megamenu is a variation of the Dropdown component used within a Navbar.

Key implementation details:

• The Navbar must include the class has-megamenu.
• The Collapse component (used for mobile responsiveness) must include the megamenu prop.
• Content is organized using MegamenuItem, which holds the specific menu content (links, images, or CTAs).

<Navbar expand='lg' className='has-megamenu'>
  <NavbarBrand />
  <NavbarToggler ... />
  <Collapse isOpen={openNav} navbar header megamenu>
    <Nav className='mt-0' navbar>
      <MegamenuItem itemName='Menu Name'>
        {/* Content */}
      </MegamenuItem>
    </Nav>
  </Collapse>
</Navbar>

You can enhance BottomNavItem with visual indicators:

• Badge: Use the badge attribute to display numerical indicators (e.g., unread message counts).
• Alert: Use the alert attribute to highlight a section that requires attention or contains new content.

Accessibility Note: Both badges and alerts are hidden from screen readers by default. To ensure accessibility, you must provide an explanatory text using the srText attribute.

<BottomNav>
  {/* Item with a badge and accessibility text */}
  <BottomNavItem 
    label="Messages" 
    href="/messages" 
    badge={5} 
    srText="5 unread messages" 
  />

  {/* Item with an alert and accessibility text */}
  <BottomNavItem 
    label="Notifications" 
    href="/notifications" 
    alert 
    srText="New notifications available" 
  />
</BottomNav>

When using tables, follow these accessibility guidelines:

1. Use <caption>: A <caption> element acts as a header for the table. It helps screen reader users identify the table's purpose and decide whether to read it.
2. Don't rely solely on color: Using color to convey meaning (e.g., a red row for an error) is only a visual cue. Ensure that the information is also available via text content or through alternative means like the .visually-hidden class for screen readers.

When using badges, especially for counters, consider the following accessibility requirements:

1. Meaningful Context: Color alone does not convey meaning to screen reader users. Ensure that information conveyed by color is also available via text or alternative means.
2. Hidden Text: If a badge (like a number) might be confusing without context (e.g., a '4' appearing at the end of a sentence), use a visually hidden text element with the .visually-hidden class to provide context for assistive technologies.

Example of providing context for a counter:

<button>
  Notifiche
  <Badge>
    <span className="visually-hidden">4 notifiche non lette</span>
    4
  </Badge>
</button>

The ThumbNav component acts as a container for multiple ThumbNavItem elements. Each ThumbNavItem represents a single link or thumbnail in the navigation.

Key behaviors:

• Aspect Ratio: Each ThumbNavItem includes a resizer to maintain a consistent 3:2 aspect ratio regardless of the source image dimensions.
• Active State: To highlight the currently selected item, apply the active attribute to the corresponding ThumbNavItem.
• Accessibility: For accessibility compliance, ensure the alt attribute of the thumbnail image describes the action associated with the link.

Use ThumbNav as the parent and populate it with ThumbNavItem children.

To manage the uploading of a series of photos and display them as a gallery with thumbnails, use the UploadList component and set the tipologia prop to 'gallery'.

Note: While the component optimizes the display of non-square images, it is recommended to use lightweight images for better performance.

// Example configuration for gallery mode
<UploadList tipologia='gallery' ... />