Homepage Install Card Component

<h2>Description</h2>
<p>
  Implement the Install Card (Home Page variant) as defined in Figma. This component appears on the homepage and provides a prominent entry point for installing Boost via package managers or system installation methods.
</p>
<p>
  The component includes a heading, installation method tabs, a command display area, and a context-specific dropdown selector.
</p>
<a href="https://www.figma.com/design/VhZHw3RudFNMzfPEEYchE9/UI-Kit---Foundations-Delivery?node-id=255-4000&t=Q7UHVWQmh43koFOw-4">Figma Link</a>

<h2>Scope</h2>

<h3>Component Structure</h3>
<ul>
  <li>Primary heading (e.g. “Install Boost and get started in your terminal.”)</li>
  <li>Installation method tabs:
    <ul>
      <li>Package Managers</li>
      <li>System Install</li>
    </ul>
  </li>
  <li>Command display area (installation command)</li>
  <li>Context-specific dropdown selector</li>
</ul>
https://www.boost.org/doc/user-guide/getting-started.html
<h2>Installation Contexts &amp; Options</h2>

<h3>Package Managers Tab</h3>
<p><strong>Dropdown options:</strong></p>
<ul>
  <li>Conan</li>
  <li>vcpkg</li>
</ul>
<p><strong>Behaviour:</strong></p>
<ul>
  <li>Default selection per Figma (confirm if Conan is default)</li>
  <li>Selecting an option updates the command dynamically</li>
  <li>Example command pattern:
    <ul>
      <li><code>conan install boost</code></li>
      <li><code>vcpkg install boost</code></li>
    </ul>
  </li>
</ul>

<h3>System Install Tab</h3>
<p><strong>Dropdown options:</strong></p>
<ul>
  <li>Ubuntu</li>
  <li>Fedora</li>
  <li>CentOS</li>
  <li>Arch</li>
  <li>Homebrew</li>
</ul>
<a href="https://www.boost.org/doc/user-guide/getting-started.html"> System Install Docs</a>

<p><strong>Behaviour:</strong></p>
<ul>
  <li>Default selection per Figma</li>
  <li>Selecting an OS updates the command dynamically</li>
  <li>Command template must adapt to the selected system</li>
</ul>

<h2>Behaviour</h2>
<ul>
  <li>Default state:
    <ul>
      <li>Package Managers tab active</li>
      <li>Default package manager selected</li>
    </ul>
  </li>
  <li>Switching tabs:
    <ul>
      <li>Updates dropdown options accordingly</li>
      <li>Updates command content accordingly</li>
    </ul>
  </li>
  <li>Dropdown selection updates the command without page reload</li>
  <li>Command content must be dynamic and driven by configuration</li>
</ul>

<h2>Implementation Requirements</h2>
<ul>
  <li>Use design tokens for:
    <ul>
      <li>Typography</li>
      <li>Spacing</li>
      <li>Border radius</li>
      <li>Surface/background styling</li>
      <li>Active tab styling</li>
    </ul>
  </li>
  <li>Code snippet must:
    <ul>
      <li>Use the existing Code Block component (if applicable)</li>
      <li>Support dynamic content updates</li>
    </ul>
  </li>
  <li>Tabs must:
    <ul>
      <li>Use proper ARIA roles (<code>tablist</code>, <code>tab</code>, <code>tabpanel</code>)</li>
      <li>Support keyboard navigation</li>
    </ul>
  </li>
  <li>Dropdown must:
    <ul>
      <li>Be keyboard accessible</li>
      <li>Close appropriately on selection</li>
    </ul>
  </li>
  <li>Command configuration should be structured for easy extension (future OS or package managers)</li>
</ul>

<h2>Out of Scope</h2>
<ul>
  <li>Backend environment detection</li>
  <li>Auto-detection of user OS</li>
  <li>Library subpage variant</li>
  <li>Analytics event wiring</li>
  <li>Installation verification logic</li>
</ul>

<h2>Acceptance Criteria</h2>

<h3>Component</h3>
<ul>
  <li>Install Card renders correctly on homepage</li>
  <li>Package Managers tab is active by default</li>
  <li>Package Managers dropdown shows:
    <ul>
      <li>Conan</li>
      <li>vcpkg</li>
    </ul>
  </li>
  <li>System Install dropdown shows:
    <ul>
      <li>Ubuntu</li>
      <li>Fedora</li>
      <li>CentOS</li>
      <li>Arch</li>
      <li>Homebrew</li>
    </ul>
  </li>
  <li>Switching tabs updates dropdown options</li>
  <li>Selecting dropdown option updates command correctly</li>
  <li>Active tab styling matches Figma</li>
  <li>Long commands do not break layout</li>
  <li>Component renders correctly across mobile, tablet, and desktop, as defined in Figma</li>
</ul>

<h3>Storybook Acceptance Criteria</h3>
<ul>
  <li>Home Page Install Card is documented in Storybook</li>
  <li>Demonstrates:
    <ul>
      <li>Package Managers tab with both options</li>
      <li>System Install tab with all OS options</li>
      <li>Tab switching</li>
      <li>Responsive layouts</li>
    </ul>
  </li>
  <li>Code snippets are provided</li>
</ul>

<h2>Accessibility and Analytics</h2>
<ul>
  <li><strong>Semantic structure</strong><br />
    Use appropriate structural elements (<code>section</code>, heading).
  </li>
  <li><strong>Tab accessibility</strong><br />
    Implement ARIA roles correctly and ensure keyboard navigation between tabs functions.
  </li>
  <li><strong>Dropdown accessibility</strong><br />
    Dropdown must be fully keyboard accessible.
  </li>
  <li><strong>Analytics readiness</strong><br />
    The component must allow analytics-related attributes or identifiers to be passed in without structural modification.
  </li>
</ul>

<h2>Dependencies / Assumptions</h2>
<ul>
  <li>Code Block component is implemented</li>
  <li>Dropdown component is available</li>
  <li>Design tokens are implemented</li>
  <li>Figma is the source of truth for layout and behaviour</li>
</ul>

<h2>Definition of Done</h2>
<ul>
  <li>Home Page Install Card implemented</li>
  <li>Tab and dropdown behaviour verified</li>
  <li>Correct option lists verified</li>
  <li>Responsive layout verified</li>
  <li>Accessibility validated</li>
  <li>Storybook documentation complete</li>
  <li>Task reviewed and approved</li>
</ul>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Homepage Install Card Component #2133

Description

Scope

Component Structure

Installation Contexts & Options

Package Managers Tab

System Install Tab

Behaviour

Implementation Requirements

Out of Scope

Acceptance Criteria

Component

Storybook Acceptance Criteria

Accessibility and Analytics

Dependencies / Assumptions

Definition of Done

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Homepage Install Card Component #2133

Description

Description

Scope

Component Structure

Installation Contexts & Options

Package Managers Tab

System Install Tab

Behaviour

Implementation Requirements

Out of Scope

Acceptance Criteria

Component

Storybook Acceptance Criteria

Accessibility and Analytics

Dependencies / Assumptions

Definition of Done

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions