Button: Card - HuBMAP Apps

[LibbyUX]

Button: Card - HuBMAP Apps

• Design System Components: Button: Card - HuBMAP Apps
• Google Spreadsheet: HuBMAP Tools for Shared Navigation Component

Building Blocks

• App icons
• Font styles
  • Product Titles
    • Color: HRA Blue
    • Font style/size: Label Large
  • Product descriptions
    • Color: HRA Blue 2
    • Font style/size: Label Medium
• Responsive: These buttons are responsive and shrink and grow as needed

Usage

• HuBMAP's HIVE UX/UI Cross Collaboration team has created a menu to connect HuBMAP applications cohesively. This menu is accessed by clicking the apps icon button in our new navigation headers.
  • These buttons are used HuBMAP App Side Nav Overlay Menu. See Sidenav: HuBMAP Apps #557 for the full component.
  • Eventually, these buttons will be used in longer mobile side nav menus, for breakpoints 1012px and below.

Variants

• Products
  • HuBMAP Consortium
  • HuBMAP Data Portal
  • Data Portal Workspaces
  • Human Reference Atlas
  • Exploration User Interface
  • ASCT+B Reporter
  • Azimuth
  • FUSION
  • Antibody Validation Reports
• States
  • Ready/default
  • Hover
  • Active/pressed
  • Focus
  • Focus visible

Behavior

• Clicking on any of these products always opens a new tab, unless they are currently on the HRA, EUI, or ASCT+B Reporter.
  • Note that this menu has only been specified for certain products so far, like the FTU Explorer and the CDE. This functionality will be added to all UIs eventually.
• We chose to add periods at the end of all of the product descriptions. Note that this varies from and overrides how people filled out the HuBMAP Tools spreadsheet.

[LibbyUX]

Update: HuBMAP-styled variant added to the Design System Repo & Component file.

[LibbyUX]

Update: Still tinkering with HuBMAP-styled variants - I will have this finalized soon.

[LibbyUX]

Update: HuBMAP Style variants will not be in the design system. Stay tuned for a separate issue for these. These components are ready for dev. Thanks!

[bhushankhope]

@LibbyUX Here is the preview for this component
link