105832 update new pipeline job page

[Pespiri]

No description provided.

[nilsgstrabo]

I would recommend using ::after css to add "/" as separator between breadcrumb items. Combine this with :not(:last-child) to exclude "/" for the last element
The way it is now, if a breadcrumb item without [to] is inserted anywhere but at the end, it won't get the "/" separator.

CSS and component example:

.breadcrumb {
  font-size: 1.000rem;
}

.breadcrumb-list {
  display: inline-block;
}

.breadcrumb-list__item {
  display: inline-block;
}

:not(:last-child).breadcrumb-list__item::after {
  content: "/";
  margin: 0 var(--eds_spacing_medium) 0 var(--eds_spacing_medium);
}

.breadcrumb__text {
  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
}

.breadcrumb__link {
  color: var(--eds_interactive_primary__resting);
}

import PropTypes from 'prop-types';
import React from 'react';
import { NavLink } from 'react-router-dom';

import './style.css';

const BreadcrumbLink = (link) => {
  if (link.to) {
    return (
      <>
        <NavLink className="breadcrumb__link" to={link.to}>
          {link.label}
        </NavLink>
      </>
    );
  }

  return <span className="breadcrumb__text">{link.label}</span>;
};

export const Breadcrumb = ({ links }) => {
  const linksRender = links.map((link, idx) => (
    <li className="breadcrumb-list__item" key={link.to || idx}>
      {BreadcrumbLink(link)}
    </li>
  ));

  return (
    <nav className="breadcrumb" role="navigation" aria-label="Page hierarchy">
      <ul className="breadcrumb-list">{linksRender}</ul>
    </nav>
  );
};

Breadcrumb.propTypes = {
  links: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.node.isRequired,
      to: PropTypes.string,
    })
  ).isRequired,
};

export default Breadcrumb;

[Pespiri]

I will have a look into it, but the '/' was removed from the .css to more closely resemble the EDS component until it has been fixed

[Pespiri]

The '/' not appearing after non-link breadcrumbs should now have been fixed

[nilsgstrabo]

I still think it is better to use ::after to insert the "/" instead of using a , the way it was before.

[Pespiri]

Updated the .css with your example with focus on the EDS styling

[nilsgstrabo]

Requested changes on breadcrumb component