Breadcrumbs components

.storybook/preview.js

@@ -1,5 +1,5 @@
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
-import '../stories/govUkStyle.css';
+import '../stories/govUkStyleOfficial.css';
 import '../stories/liveEdit/style.css';
 import {
   Title,
@@ -67,6 +67,8 @@ export const parameters = {
             'Tooltip',
             ['Documentation', 'Live', 'Class based'],
           ],
+          'Breadcrumb',
+          ['Documentation', 'Live', 'Without style', 'Class based'],
           'CopyToClipboard',
           ['Documentation', 'Live', 'Without style', 'Class based'],
           'Details',

example/src/components/BreadcrumbDemo.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Link,
+} from '@capgeminiuk/dcx-react-library';
+import './breadcrumbStyle.scss';
+
+export const BreadcrumbDemo = () => {
+  return (
+    <>
+      <h1>Demo of Breadcrumb</h1>
+      <Breadcrumb>
+        <BreadcrumbItem>
+          <Link value="content 1" to="#" />
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <Link value="content 2" to="#" />
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <Link value="content 3" to="#" />
+        </BreadcrumbItem>
+      </Breadcrumb>
+
+      <h2>Demo of Breadcrumb with selected and selectedClassName</h2>
+      <Breadcrumb
+        className="govuk-breadcrumbs govuk-breadcrumbs__list"
+        itemsClassName="govuk-breadcrumbs__list-item"
+      >
+        <BreadcrumbItem selected selectedClassName="selClass">
+          <Link value="content 1" to="#" />
+        </BreadcrumbItem>
+        <BreadcrumbItem selectedClassName="selClass">
+          <Link value="content 2" to="#" />
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <Link value="content 3" to="#" />
+        </BreadcrumbItem>
+      </Breadcrumb>
+
+      <h2>Demo of Breadcrumb with selected and itemSelectedClassName</h2>
+      <Breadcrumb
+        itemSelectedClassName="selClass"
+        className="govuk-breadcrumbs govuk-breadcrumbs__list"
+        itemsClassName="govuk-breadcrumbs__list-item"
+      >
+        <BreadcrumbItem>
+          <Link value="content 1" to="#" className="breadcrumb_link" />
+        </BreadcrumbItem>
+        <BreadcrumbItem selected>
+          <Link value="content 2" to="#" className="breadcrumb_link" />
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <Link value="content 3" to="#" className="breadcrumb_link" />
+        </BreadcrumbItem>
+      </Breadcrumb>
+
+      <h2>Demo of Breadcrumb with Separator</h2>
+      <Breadcrumb
+        separatorItem={<span> / </span>}
+        className="govuk-breadcrumbs govuk-breadcrumbs__list"
+        itemSelectedClassName="selClass"
+        itemsClassName="breadcrumbItems"
+      >
+        <BreadcrumbItem>
+          <Link value="content 1" to="#" className="breadcrumb_link" />
+        </BreadcrumbItem>
+        <BreadcrumbItem selected>
+          <Link value="content 2" to="#" className="breadcrumb_link" />
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <Link value="content 3" to="#" className="breadcrumb_link" />
+        </BreadcrumbItem>
+      </Breadcrumb>
+    </>
+  );
+};

example/src/components/breadcrumbStyle.scss

@@ -0,0 +1,218 @@
+h2{
+  margin-bottom: 30px
+}
+
+.selClass {
+  content: none;
+  outline: 3px solid rgba(0, 0, 0, 0);
+  color: #0b0c0c;
+  background-color: #fd0;
+  box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+  text-decoration: none;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.breadcrumbItems {
+  display: inline-block;
+  position: relative;
+  margin-bottom: 5px;
+  margin-left: 0.625em;
+  float: left;
+}
+
+.breadcrumbItems:before {
+  content: none;
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -0.206875em;
+  width: 0.4375em;
+  height: 0.4375em;
+  margin: auto 0;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  border: solid;
+  border-width: 1px 1px 0 0;
+  border-color: #505a5f;
+}
+
+.breadcrumb_link {
+  text-decoration: underline;
+  text-underline-offset: 5px;
+  color: black;
+}
+
+.breadcrumb_link:hover {
+  text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+  -webkit-text-decoration-skip: none;
+  text-decoration-skip: none;
+}
+
+.breadcrumb_link:hover {
+  color: rgba(11, 12, 12, 0.99);
+}
+
+.govuk-breadcrumbs {
+  font-family: 'GDS Transport', arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 1.1428571429;
+  color: #0b0c0c;
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
+
+@media print {
+  .govuk-breadcrumbs {
+    font-family: sans-serif;
+  }
+}
+
+@media (min-width: 40.0625em) {
+  .govuk-breadcrumbs {
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.25;
+  }
+}
+
+@media print {
+  .govuk-breadcrumbs {
+    font-size: 14pt;
+    line-height: 1.2;
+  }
+}
+
+@media print {
+  .govuk-breadcrumbs {
+    color: #000;
+  }
+}
+
+@media (max-width: 40.0525em) {
+  .govuk-breadcrumbs--collapse-on-mobile .govuk-breadcrumbs__list-item {
+    display: none;
+  }
+
+  .govuk-breadcrumbs--collapse-on-mobile
+    .govuk-breadcrumbs__list-item:first-child,
+  .govuk-breadcrumbs--collapse-on-mobile
+    .govuk-breadcrumbs__list-item:last-child {
+    display: inline-block;
+  }
+
+  .govuk-breadcrumbs--collapse-on-mobile .govuk-breadcrumbs__list-item:before {
+    top: 0.375em;
+    margin: 0;
+  }
+
+  .govuk-breadcrumbs--collapse-on-mobile .govuk-breadcrumbs__list {
+    display: flex;
+  }
+}
+
+.govuk-breadcrumbs__list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.govuk-breadcrumbs__list:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.govuk-breadcrumbs__list-item {
+  display: inline-block;
+  position: relative;
+  margin-bottom: 5px;
+  margin-left: 0.625em;
+  padding-left: 0.9784375em;
+  float: left;
+}
+
+.govuk-breadcrumbs__list-item:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -0.206875em;
+  width: 0.4375em;
+  height: 0.4375em;
+  margin: auto 0;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  border: solid;
+  border-width: 1px 1px 0 0;
+  border-color: #505a5f;
+}
+
+@supports (border-width: max(0px)) {
+  .govuk-breadcrumbs__list-item:before {
+    border-width: max(1px, 0.0625em) max(1px, 0.0625em) 0 0;
+    font-size: max(16px, 1em);
+  }
+}
+
+.govuk-breadcrumbs__list-item:first-child {
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.govuk-breadcrumbs__list-item:first-child:before {
+  content: none;
+  display: none;
+}
+
+.govuk-breadcrumbs__list-item {
+  display: inline-block;
+  position: relative;
+  margin-bottom: 5px;
+  margin-left: 0.625em;
+  padding-left: 0.9784375em;
+  float: left;
+}
+
+.govuk-breadcrumbs__list-item:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -0.206875em;
+  width: 0.4375em;
+  height: 0.4375em;
+  margin: auto 0;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  border: solid;
+  border-width: 1px 1px 0 0;
+  border-color: #505a5f;
+}
+
+@supports (border-width: max(0px)) {
+  .govuk-breadcrumbs__list-item:before {
+    border-width: max(1px, 0.0625em) max(1px, 0.0625em) 0 0;
+    font-size: max(16px, 1em);
+  }
+}
+
+.govuk-breadcrumbs__list-item:first-child {
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.govuk-breadcrumbs__list-item:first-child:before {
+  content: none;
+  display: none;
+}
+

example/src/components/index.ts

@@ -20,4 +20,5 @@ export { CharacterCountDemo } from './CharacterCountDemo';
 export { LinkDemo } from './LinkDemo';
 export { LabelDemo } from './LabelDemo';
 export { ListDemo } from './ListDemo';
+export { BreadcrumbDemo } from './BreadcrumbDemo';
 export * from './library-candidates';

example/src/index.tsx

@@ -34,6 +34,7 @@ import { InsertTextDemo } from './components/InsertTextDemo';
 import { LabelDemo } from './components/LabelDemo';
 import { KeyboardInputDemo } from './components/KeyboardInputDemo';
 import { PreformattedTextDemo } from './components/PreformattedTextDemo';
+import { BreadcrumbDemo } from './components/BreadcrumbDemo';
 const App = () => (
   <div>
     <BrowserRouter>
@@ -66,6 +67,7 @@ const App = () => (
         <Route path="/keyBoard" element={<KeyboardInputDemo />} />
         <Route path="/preformattedText" element={<PreformattedTextDemo />} />
         <Route path="/list" element={<ListDemo />} />
+        <Route path="/breadcrumb" element={<BreadcrumbDemo />} />
       </Routes>
     </BrowserRouter>
   </div>

src/breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { classNames } from '../common';
+import { BreadcrumbContext } from './UseBreadcrumb';
+
+export type BreadcrumbProps = {
+  /**
+   * allow to specify a custom content
+   */
+  children: JSX.Element[];
+  /**
+   * A CSS class for styling Breadcrumb
+   */
+  className?: string;
+  /**
+   * A CSS class for applying the same styling in case all the BreadcrumbItems have exactly the same look and feel
+   */
+  itemsClassName?: string;
+  /**
+   * A CSS class for applying the same styling to all the BreadcrumbItems
+   */
+  itemSelectedClassName?: string;
+  /**
+   * allow to specify a user to add a separator
+   */
+  separatorItem?: JSX.Element;
+  /**
+   * allow to specify a user with Additional props/attributes
+   */
+  breadcrumbsProps?: React.HTMLAttributes<HTMLOListElement>;
+};
+
+export const Breadcrumb = ({
+  children,
+  itemsClassName,
+  className,
+  itemSelectedClassName,
+  separatorItem,
+  breadcrumbsProps,
+}: BreadcrumbProps) => (
+  <BreadcrumbContext.Provider
+    value={{
+      itemsClassName,
+      itemSelectedClassName,
+      separatorItem,
+    }}
+  >
+    <ol className={classNames([className])} {...breadcrumbsProps}>
+      {React.Children.map(children, (child: JSX.Element, index: number) =>
+        React.cloneElement(child, { isFirst: index === 0 })
+      )}
+    </ol>
+  </BreadcrumbContext.Provider>
+);