Merge 7aef820 into b4b51bb

app/ids-breadcrumb/add-remove.html

@@ -0,0 +1,22 @@
+{{> ../layouts/head.html }}
+
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">BREADCRUMBS</ids-text>
+</ids-layout-grid>
+<ids-layout-grid>
+  <ids-breadcrumb>
+    <ids-hyperlink color="unset">Breadcrumb 1</ids-hyperlink>
+    <ids-hyperlink color="unset" font-size="20" href="#">Large Breadcrumb</ids-hyperlink>
+    <ids-hyperlink color="unset" disabled href="#">Disabled Breadcrumb</ids-hyperlink>
+  </ids-breadcrumb>
+</ids-layout-grid>
+<br /><br />
+<ids-layout-grid>
+  <ids-checkbox label="Disabled"></ids-checkbox>
+</ids-layout-grid>
+<ids-layout-grid cols="10" gap="md">
+  <ids-button type="primary">Add Link</ids-button>
+  <ids-button type="secondary">Remove</ids-button>
+</ids-layout-grid>
+
+{{> ../layouts/footer.html }}

app/ids-breadcrumb/add-remove.js

@@ -0,0 +1,19 @@
+import '../../src/ids-breadcrumb/ids-breadcrumb';
+import '../../src/ids-layout-grid/ids-layout-grid';
+import '../../src/ids-layout-grid/ids-layout-grid-cell';
+import '../../src/ids-button/ids-button';
+import '../../src/ids-checkbox/ids-checkbox';
+import IdsHyperlink from '../../src/ids-hyperlink/ids-hyperlink';
+
+const [button1, button2] = document.querySelectorAll('ids-button');
+const breadcrumb = document.querySelector('ids-breadcrumb');
+const checkbox = document.querySelector('ids-checkbox');
+button1.onclick = () => {
+  const link = new IdsHyperlink();
+  link.innerText = `Breadcrumb ${breadcrumb.children.length + 1}`;
+  link.href = '#';
+  if (checkbox.checked) link.disabled = '';
+  breadcrumb.push(link);
+};
+
+button2.onclick = () => breadcrumb.pop();

app/ids-breadcrumb/example.html

@@ -0,0 +1,12 @@
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Breadcrumb</ids-text>
+</ids-layout-grid>
+
+<ids-layout-grid>
+  <ids-breadcrumb>
+    <ids-hyperlink font-size="14" color="unset">First Item</ids-hyperlink>
+    <ids-hyperlink font-size="14" color="unset">Second Item</ids-hyperlink>
+    <ids-hyperlink font-size="14" color="unset" disabled>Disabled Item</ids-hyperlink>
+    <ids-hyperlink font-size="14" color="unset">Current Item</ids-hyperlink>
+  </ids-breadcrumb>
+</ids-layout-grid>

app/ids-breadcrumb/index.html

@@ -0,0 +1,3 @@
+{{> ../layouts/head.html }}
+{{> example.html }}
+{{> ../layouts/footer.html }}

app/ids-breadcrumb/index.js

@@ -0,0 +1,3 @@
+import IdsBreadcrumb from '../../src/ids-breadcrumb/ids-breadcrumb';
+import IdsHyperlink from '../../src/ids-hyperlink/ids-hyperlink';
+import IdsText from '../../src/ids-text/ids-text';

app/ids-breadcrumb/standalone-css.html

@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="../ids-breadcrumb/ids-breadcrumb.css" />
+<link rel="stylesheet" href="../ids-hyperlink/ids-hyperlink.css" />
+
+<div class="ids-breadcrumb">
+  <a class="ids-hyperlink" color="unset" font-size="48" href="#">First Breadcrumb</a>
+  <a class="ids-hyperlink" color="unset" font-size="48">Breadcrumb - No href</a>
+  <a class="ids-hyperlink" color="unset" font-size="48" disabled href="#">Disabled</a>
+</div>

src/ids-base/ids-constants.js

@@ -34,6 +34,7 @@ export const props = {
   DISABLE_EVENTS: 'disable-native-events',
   DISABLED: 'disabled',
   DISMISSIBLE: 'dismissible',
+  DISPLAY: 'display',
   ERROR: 'error',
   EXPANDED: 'expanded',
   FIELD_HEIGHT: 'field-height',

src/ids-breadcrumb/README.md

@@ -0,0 +1,37 @@
+# Ids Breadcrumb Component
+
+## Description
+
+Displays the current view and all parent views. A user can navigate between views. Best for presenting hierarchical paths in a system.
+
+## Use Cases
+
+- Use breadcrumb in a tree-like page navigation to show the path to the current page.
+
+## Terminology
+/*
+- **Counts**: UI embellishments for summarizing high level numeric information.
+- **Value**: The numeric value displayed on the count component.
+- **Text**:  The name or brief description of the value.
+- **Compact**: When compact, the count value appears slightly smaller than usual.
+*/
+## Features (With Code Examples)
+
+A normal breadcrumb component
+
+```html
+<ids-breadcrumb>
+  <ids-hyperlink font-size="14" color="unset">First Item</ids-hyperlink>
+  <ids-hyperlink font-size="14" color="unset">Second Item</ids-hyperlink>
+  <ids-hyperlink font-size="14" color="unset" disabled>Disabled Item</ids-hyperlink>
+  <ids-hyperlink font-size="14" color="unset">Current Item</ids-hyperlink>
+</ids-breadcrumb>
+```
+
+## Settings and Attributes
+
+Use ids-hyperlink components as the inner elements a the breadcrumb is designed to work with these specifically. The following ids-hyperlink attributes should be considered:
+- `color` {string} Set to unset to disable the hyperlink color and get the default coloring to work.
+- `disabled` Use leave blank or set to 'true' to set disabled color.
+- `font-size` {number} Will be 14 by default.
+- `href` {string} The url that the hyperlink component links to.

src/ids-breadcrumb/ids-breadcrumb.d.ts

@@ -0,0 +1,6 @@
+// Ids is a JavaScript project, but we define TypeScript declarations so we can
+// confirm our code is type safe, and to support TypeScript users.
+
+/** A segment of text with standardized settings, theming and fonts */
+export default class IdsBreadcrumb extends HTMLElement {
+}

src/ids-breadcrumb/ids-breadcrumb.js

@@ -0,0 +1,87 @@
+import {
+  IdsElement,
+  customElement,
+  scss,
+  mix,
+} from '../ids-base';
+
+// Import Mixins
+import { IdsEventsMixin, IdsThemeMixin } from '../ids-mixins';
+
+import styles from './ids-breadcrumb.scss';
+
+/**
+ * @type {IdsBreadcrumb}
+ * @inherits IdsElement
+ * @mixes IdsEventsMixin
+ * @mixes IdsThemeMixin
+ * @part breadcrumb
+ */
+@customElement('ids-breadcrumb')
+@scss(styles)
+class IdsBreadcrumb extends mix(IdsElement).with(IdsEventsMixin, IdsThemeMixin) {
+  constructor() {
+    super();
+  }
+
+  /**
+   * Sets the role of the children to 'listitem' for accessiblity reasons.
+   * Also bolds the last crumb.
+   */
+  connectedCallback() {
+    this.setAttribute('role', 'list');
+    for (const child of this.children) {
+      child.setAttribute('role', 'listitem');
+      if (!(child.getAttribute('font-size'))) child.setAttribute('font-size', 14);
+      child.textDecoration = 'none';
+    }
+    if (this.lastElementChild) this.lastElementChild.fontWeight = 'bolder';
+  }
+
+  /**
+   * Inner template contents
+   * @returns {string} The template
+   */
+  template() {
+    return `
+      <div class="ids-breadcrumb">
+        <nav>
+          <slot></slot>
+        </nav>
+      </div>`;
+  }
+
+  /**
+   * Appends an individual breadcrumb to the end of the stack
+   * @param {Element} breadcrumb The HTML element with which to add
+   */
+  push(breadcrumb) {
+    if (this.lastElementChild) {
+      this.lastElementChild.fontWeight = '';
+    }
+    breadcrumb.fontWeight = 'bolder';
+    breadcrumb.color = 'unset';
+    breadcrumb.setAttribute('role', 'listitem');
+    if (!(breadcrumb.getAttribute('font-size'))) {
+      breadcrumb.setAttribute('font-size', 14);
+    }
+    this.appendChild(breadcrumb);
+  }
+
+  /**
+   * Removes the last breadcrumb from the stack.
+   * @returns {Element | null} The removed element
+   */
+  pop() {
+    if (this.lastElementChild) {
+      const breadcrumb = this.removeChild(this.lastElementChild);
+      if (this.lastElementChild) {
+        this.lastElementChild.fontWeight = 'bolder';
+      }
+      return breadcrumb;
+    }
+    return null;
+  }
+}
+
+export default IdsBreadcrumb;

src/ids-breadcrumb/ids-breadcrumb.scss

@@ -0,0 +1,78 @@
+/* Ids Breadcrumb Component */
+@import '../ids-base/ids-base';
+
+.ids-breadcrumb {
+  @include antialiased();
+
+  [text-decoration] {
+    text-decoration: attr(text-decoration);
+  }
+}
+
+::slotted(*),
+.ids-breadcrumb > * {
+  display: inline;
+}
+
+// Create the / between breadcrumbs
+::slotted(*:not(:first-child))::before,
+.ids-breadcrumb > *:not(:first-child)::before {
+  @include antialiased();
+  @include text-slate-60();
+
+  content: '\002F';
+  font-weight: normal;
+  padding-left: 4px;
+  padding-right: 8px;
+  text-decoration: none;
+  display: inline-block;
+}
+
+// Handle font colors for different themes
+::slotted(ids-hyperlink[version='new'][mode='light']) {
+  @include text-slate-60();
+}
+
+::slotted(ids-hyperlink[version='new'][mode='light'][disabled]) {
+  @include text-slate-30();
+}
+
+::slotted(ids-hyperlink[version='new'][mode='dark']) {
+  @include text-slate-40();
+}
+
+::slotted(ids-hyperlink[version='new'][mode='dark'][disabled]) {
+  @include text-slate-60();
+}
+
+::slotted(ids-hyperlink[version='new'][mode='contrast']) {
+  @include text-slate-80();
+}
+
+::slotted(ids-hyperlink[version='new'][mode='contrast'][disabled]) {
+  @include text-slate-30();
+}
+
+::slotted(ids-hyperlink[version='classic'][mode='light']) {
+  @include text-graphite-60();
+}
+
+::slotted(ids-hyperlink[version='classic'][mode='light'][disabled]) {
+  @include text-graphite-30();
+}
+
+::slotted(ids-hyperlink[version='classic'][mode='dark']) {
+  @include text-slate-40();
+}
+
+::slotted(ids-hyperlink[version='classic'][mode='dark'][disabled]) {
+  @include text-classic-slate-50();
+}
+
+::slotted(ids-hyperlink[version='classic'][mode='contrast']) {
+  @include text-slate-80();
+}
+
+::slotted(ids-hyperlink[version='classic'][mode='contrast'][disabled]) {
+  @include text-slate-50();
+}

src/ids-hyperlink/ids-hyperlink.js

@@ -15,6 +15,8 @@ import {
 
 import styles from './ids-hyperlink.scss';
 
+const fontSizes = ['xs', 'sm', 'base', 'lg', 'xl', 10, 12, 14, 16, 20, 24, 28, 32, 40, 48, 60, 72];
+
 /**
  * IDS Hyperlink Component
  * @type {IdsHyperlink}
@@ -31,7 +33,7 @@ class IdsHyperlink extends mix(IdsElement).with(IdsEventsMixin, IdsThemeMixin) {
   }
 
   connectedCallback() {
-    this.setAttribute('role', 'link');
+    if (!(this.getAttribute('role'))) this.setAttribute('role', 'link');
     super.connectedCallback();
   }
 
@@ -44,6 +46,8 @@ class IdsHyperlink extends mix(IdsElement).with(IdsEventsMixin, IdsThemeMixin) {
       props.COLOR,
       props.DISABLED,
       props.HREF,
+      props.FONT_SIZE,
+      props.FONT_WEIGHT,
       props.MODE,
       props.TARGET,
       props.TEXT_DECORATION,
@@ -144,6 +148,45 @@ class IdsHyperlink extends mix(IdsElement).with(IdsEventsMixin, IdsThemeMixin) {
   get color() {
     return this.getAttribute(props.COLOR);
   }
+
+  /**
+   * Set the font size/style of the text with a class.
+   * @param {string | null} value The font size in the font scheme
+   * i.e. 10, 12, 16 or xs, sm, base, lg, xl
+   */
+  set fontSize(value) {
+    fontSizes.forEach((size) => this.container?.classList.remove(`ids-text-${size}`));
+
+    if (value) {
+      this.setAttribute(props.FONT_SIZE, value);
+      this.container?.classList.add(`ids-text-${value}`);
+      return;
+    }
+
+    this.removeAttribute(props.FONT_SIZE);
+  }
+
+  get fontSize() { return this.getAttribute(props.FONT_SIZE); }
+
+  /**
+   * Adjust font weight; can be either "bold" or "bolder"
+   * @param {string | null} value (if bold)
+   */
+  set fontWeight(value) {
+    this.container?.classList.remove(...['bold', 'bolder']);
+
+    if (value === 'bold' || value === 'bolder') {
+      this.setAttribute(props.FONT_WEIGHT, value);
+      this.container?.classList.add(value);
+      return;
+    }
+
+    this.removeAttribute(props.FONT_WEIGHT);
+  }
+
+  get fontWeight() {
+    return this.getAttribute(props.FONT_WEIGHT);
+  }
 }
 
 export default IdsHyperlink;