search

Capgemini / dcx-react-library

React Library UI/UX agnostic
https://main--6069a6f47f4b9f002171f8e1.chromatic.com
MIT License
113 stars 6 forks source link

Breadcrumbs components #415

Closed brightpixels closed 1 year ago

brightpixels commented 1 year ago

We are looking for a breadcrumbs component to help users understand where they are currently. We are using GDS styling so something that will enables to output the same html would be great: https://design-system.service.gov.uk/components/breadcrumbs/

the usage will be similar to this:

<Breadcrumb className="myclass" itemsClassName="myclass">
    <BreadcrumbItem className="myclass"> content </BreadcrumbItem>
    <BreadcrumbItem className="myclass"> content </BreadcrumbItem>
    <BreadcrumbItem className="myclass"> content </BreadcrumbItem>
    <BreadcrumbItem className="myclass"> content </BreadcrumbItem>
</Breadcrumb>

The implementation will be similar to our tabGroup component (src/tabGroup) where you need a Provider and a Context

HMTL rendered will be similar to this:

<div class="govuk-breadcrumbs">
  <ol class="govuk-breadcrumbs__list">
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="#">Home</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="#">Passports, travel and living abroad</a>
    </li>
    <li class="govuk-breadcrumbs__list-item">
      <a class="govuk-breadcrumbs__link" href="#">Travel abroad</a>
    </li>
  </ol>
</div>

Please follow these steps to create your branch:

git checkout release/0.8
git pull
git checkout -b 'feature/breadcrumbs'
daniele-zurico commented 1 year ago

closed by https://github.com/Capgemini/dcx-react-library/pull/508