feat: Added Divider Component (#1257)

---------

Co-authored-by: Ivan Kitanov <IKitanov@infragistics.com>
Co-authored-by: sivanova <sivanova@infragistics.com>
Co-authored-by: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com>

CHANGELOG.md

@@ -7,8 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 ### Added
 - Banner component [#1174](https://github.com/IgniteUI/igniteui-webcomponents/issues/1174)
+- Divider component [#1237](https://github.com/IgniteUI/igniteui-webcomponents/issues/1237)
 - Date picker component [#174](https://github.com/IgniteUI/igniteui-webcomponents/issues/174)
-
 ### Fixed
 - Input, Textarea - passing `undefined` to **value** sets the underlying input value to undefined [#1206](https://github.com/IgniteUI/igniteui-webcomponents/issues/1206)
 - Mask input - after a form `reset` call correctly update underlying input value and placeholder state

src/components/common/definitions/defineAllComponents.ts

@@ -19,6 +19,7 @@ import IgcComboComponent from '../../combo/combo.js';
 import IgcDatePickerComponent from '../../date-picker/date-picker.js';
 import IgcDateTimeInputComponent from '../../date-time-input/date-time-input.js';
 import IgcDialogComponent from '../../dialog/dialog.js';
+import IgcDividerComponent from '../../divider/divider.js';
 import IgcDropdownGroupComponent from '../../dropdown/dropdown-group.js';
 import IgcDropdownHeaderComponent from '../../dropdown/dropdown-header.js';
 import IgcDropdownItemComponent from '../../dropdown/dropdown-item.js';
@@ -87,6 +88,7 @@ const allComponents: IgniteComponent[] = [
   IgcDropdownHeaderComponent,
   IgcDropdownItemComponent,
   IgcDialogComponent,
+  IgcDividerComponent,
   IgcSwitchComponent,
   IgcExpansionPanelComponent,
   IgcFormComponent,

src/components/divider/divider.spec.ts

@@ -0,0 +1,49 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import { defineComponents } from '../common/definitions/defineComponents.js';
+import IgcDividerComponent from './divider.js';
+
+describe('Divider', () => {
+  before(() => {
+    defineComponents(IgcDividerComponent);
+  });
+
+  const createDefaultDivider = () => html` <igc-divider></igc-divider> `;
+
+  const createVerticalDashedDivider = () => html`
+    <igc-divider vertical type="dashed"></igc-divider>
+  `;
+
+  let divider: IgcDividerComponent;
+
+  beforeEach(async () => {
+    divider = await fixture<IgcDividerComponent>(createDefaultDivider());
+  });
+
+  describe('Initialization Tests', () => {
+    it('passes the a11y audit', async () => {
+      await expect(divider).to.be.accessible();
+      await expect(divider).shadowDom.to.be.accessible();
+    });
+
+    it('is correctly initialized and rendered with its default component state', () => {
+      expect(divider.middle).to.be.false;
+      expect(divider.vertical).to.be.false;
+      expect(divider.type).to.be.equal('solid');
+      expect(divider).dom.to.equal('<igc-divider type="solid"></igc-divider>');
+    });
+
+    it('should correctly render when vertical and dashed properties are set', async () => {
+      divider = await fixture<IgcDividerComponent>(
+        createVerticalDashedDivider()
+      );
+
+      expect(divider.middle).to.be.false;
+      expect(divider.vertical).to.be.true;
+      expect(divider.type).to.be.equal('dashed');
+      expect(divider).dom.to.equal(
+        '<igc-divider vertical type="dashed"></igc-divider>'
+      );
+    });
+  });
+});

src/components/divider/divider.ts

@@ -0,0 +1,83 @@
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { styles } from './themes/divider.base.css.js';
+import { styles as shared } from './themes/shared/divider.common.css.js';
+import { all } from './themes/themes.js';
+
+/**
+ * The igc-divider allows the content author to easily create a horizontal/vertical rule as a break between content to better organize information on a page.
+ *
+ * @element igc-divider
+ *
+ * @cssproperty --color - Sets the color of the divider.
+ * @cssproperty --inset - Shrinks the divider by the given amount from the start. If `middle` is set it will shrink from both sides.
+ *
+ */
+
+@themes(all)
+export default class IgcDividerComponent extends LitElement {
+  public static readonly tagName = 'igc-divider';
+  public static override styles = [styles, shared];
+
+  private _internals: ElementInternals;
+
+  /* blazorSuppress */
+  public static register() {
+    registerComponent(IgcDividerComponent);
+  }
+
+  private _vertical = false;
+
+  /**
+   * Whether to render a vertical divider line.
+   * @attr
+   */
+  @property({ type: Boolean, reflect: true })
+  public set vertical(value: boolean) {
+    this._vertical = Boolean(value);
+    this._internals.ariaOrientation = this._vertical
+      ? 'vertical'
+      : 'horizontal';
+  }
+
+  public get vertical(): boolean {
+    return this._vertical;
+  }
+
+  /**
+   * When set and inset is provided, it will shrink the divider line from both sides.
+   * @attr
+   */
+  @property({ type: Boolean, reflect: true })
+  public middle = false;
+
+  /**
+   * Whether to render a solid or a dashed divider line.
+   * @attr
+   */
+
+  @property({ reflect: true })
+  public type: 'solid' | 'dashed' = 'solid';
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+
+    this._internals.role = 'separator';
+    this._internals.ariaOrientation = this._vertical
+      ? 'vertical'
+      : 'horizontal';
+  }
+
+  protected override render() {
+    return html``;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'igc-divider': IgcDividerComponent;
+  }
+}

src/components/divider/themes/dark/_themes.scss

@@ -0,0 +1,7 @@
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/divider' as *;
+
+$material: digest-schema($dark-material-divider);
+$bootstrap: digest-schema($dark-bootstrap-divider);
+$fluent: digest-schema($dark-fluent-divider);
+$indigo: digest-schema($dark-indigo-divider);

src/components/divider/themes/dark/divider.bootstrap.scss

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $bootstrap;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+}

src/components/divider/themes/dark/divider.fluent.scss

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+}

src/components/divider/themes/dark/divider.indigo.scss

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $indigo;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+}

src/components/divider/themes/dark/divider.material.scss

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+}

src/components/divider/themes/divider.base.scss

@@ -0,0 +1,24 @@
+@use 'styles/common/component';
+@use 'styles/utilities' as *;
+
+:host {
+    display: flex;
+    position: relative;
+    justify-content: center;
+    overflow: hidden;
+    min-height: rem(1px);
+    width: 100%;
+
+    &::after {
+        content: '';
+        position: absolute;
+        height: 100%;
+        width: 100%;
+    }
+}
+
+:host([vertical]) {
+    display: inline-flex;
+    min-width: rem(1px);
+    width: rem(1px);
+}

src/components/divider/themes/light/_themes.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/divider' as *;
+
+$base: digest-schema($light-divider);
+$material: digest-schema($material-divider);
+$bootstrap: digest-schema($bootstrap-divider);
+$fluent: digest-schema($fluent-divider);
+$indigo: digest-schema($indigo-divider);

src/components/divider/themes/light/divider.bootstrap.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $bootstrap;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+}

src/components/divider/themes/light/divider.fluent.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+}

src/components/divider/themes/light/divider.indigo.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $indigo;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+}

src/components/divider/themes/light/divider.material.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+}

src/components/divider/themes/light/divider.shared.scss

@@ -0,0 +1,6 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+:host {
+    @include css-vars-from-theme($base, 'ig-divider');
+}

src/components/divider/themes/shared/divider.common.scss

@@ -0,0 +1,60 @@
+@use 'styles/utilities' as *;
+@use '../light/themes' as *;
+
+$theme: $material;
+
+:host {
+    &::after {
+        background: var-get($theme, 'color');
+    }
+}
+
+:host(:not([vertical])) {
+    &::after {
+        inset-inline-start: var-get($theme, 'inset');
+    }
+}
+
+:host(:not([vertical])[middle]) {
+    &::after {
+        min-width: rem(4px);
+        width: calc(100% - (var-get($theme, 'inset') * 2));
+    }
+}
+
+:host([vertical]) {
+    &::after {
+        inset-block-start: var-get($theme, 'inset');
+    }
+}
+
+:host([vertical][middle]) {
+    &::after {
+        min-height: rem(4px);
+        height: calc(100% - (var-get($theme, 'inset') * 2));
+    }
+}
+
+:host(:not([vertical])[type='dashed']) {
+    &::after {
+        background: repeating-linear-gradient(
+            to right,
+            var-get($theme, 'color'),
+            var-get($theme, 'color') rem(10px),
+            transparent rem(10px),
+            transparent rem(20px)
+        );
+    }
+}
+
+:host([vertical][type='dashed']) {
+    &::after {
+        background: repeating-linear-gradient(
+            to bottom,
+            var-get($theme, 'color'),
+            var-get($theme, 'color') rem(10px),
+            transparent rem(10px),
+            transparent rem(20px)
+        );
+    }
+}

src/components/divider/themes/shared/divider.indigo.scss

@@ -0,0 +1,28 @@
+@use 'styles/utilities' as *;
+@use '../light/themes' as *;
+
+$theme: $indigo;
+
+:host(:not([vertical])[type='dashed']) {
+    &::after {
+        background: repeating-linear-gradient(
+            to right,
+            var-get($theme, 'color'),
+            var-get($theme, 'color') rem(3px),
+            transparent rem(3px),
+            transparent rem(6px)
+        );
+    }
+}
+
+:host([vertical][type='dashed']) {
+    &::after {
+        background: repeating-linear-gradient(
+            to bottom,
+            var-get($theme, 'color'),
+            var-get($theme, 'color') rem(3px),
+            transparent rem(3px),
+            transparent rem(6px)
+        );
+    }
+}