@aurodesignsystem-dev/auro-accordion 0.0.0-pr190.0 → 0.0.0-pr200.0

package/src/styles/style.scss

@@ -1,200 +0,0 @@
-// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* stylelint-disable order/properties-order, selector-max-combinators, selector-max-compound-selectors, declaration-empty-line-before, declaration-no-important, no-descending-specificity */
-
-// Import Auro tokens
-@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
-
-@use "@aurodesignsystem/webcorestylesheets/dist/bundled/type/classes.alaska.min.css";
-
-:host {
-  interpolate-size: allow-keywords; // stylelint-disable-line
-
-  --webkit-fill: -webkit-fill-available;
-
-  .trigger {
-    position: relative;
-
-    display: inline-block;
-
-    border-width: 1px;
-    border-style: solid;
-    border-radius: var(--ds-border-radius, vac.$ds-border-radius);
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  ::slotted([slot="trigger"]) {
-    padding-left: var(--ds-size-100, vac.$ds-size-100);
-    padding-right: var(--ds-size-200, vac.$ds-size-200);
-  }
-
-  .iconWrapper {
-    height: var(--ds-size-300, vac.$ds-size-300);
-    margin-top: -2px;
-  }
-
-  [auro-icon] {
-    --ds-auro-icon-size: var(--ds-size-300, #{vac.$ds-size-300});
-
-    &[hidden] { // stylelint-disable-line selector-max-attribute
-      display: none;
-    }
-  }
-
-  .content {
-    width: 100%;
-
-    transition: all 0.5s ease-in-out;
-    transition-property: height;
-  }
-
-  .componentWrapper {
-    height: 100%;
-    overflow: hidden;
-  }
-
-  .contentWrapper {
-    padding-left: var(--ds-size-400, vac.$ds-size-400);
-    padding-bottom: var(--ds-size-300, vac.$ds-size-300);
-  }
-}
-
-:host(:focus) {
-  .trigger {
-    border-width: 1px;
-    border-style: solid;
-  }
-}
-
-:host([chevron="right"]) {
-  ::slotted([slot="trigger"]) {
-    padding-left: 0;
-    padding-right: var(--ds-size-100, vac.$ds-size-100);
-  }
-
-  .contentWrapper {
-    padding-left: var(--ds-size-400, vac.$ds-size-400);
-  }
-}
-
-:host([chevron="right"]:not([emphasis])) {
-  ::slotted([slot="trigger"]) {
-    padding-left: var(--ds-size-250, vac.$ds-size-250);
-  }
-
-  .contentWrapper {
-    padding-left: var(--ds-size-250, vac.$ds-size-250);
-  }
-}
-
-:host([alignRight]) {
-  .componentWrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-  }
-}
-
-:host([fluid]) {
-  .trigger {
-    width: 100%;
-  }
-}
-
-:host([grouped]) {
-  .componentWrapper {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-  }
-}
-
-:host([grouped][chevron="right"]:not([alignright])) {
-  .trigger {
-    width: var(--webkit-fill, 100%);
-
-    --trigger-padding-right: var(--ds-size-200, #{vac.$ds-size-200}); // will be passed to the child component
-  }
-}
-
-:host(:not([expanded])),
-:host([expanded="false"]) {
-  .content  {
-    height: 0 !important;
-  }
-}
-
-:host([expanded]) {
-  .content {
-    height: auto;
-  }
-}
-
-:host([emphasis]) {
-  .trigger {
-    border-style: solid;
-    border-width: 1px;
-    border-left-width: 2px;
-
-    --trigger-padding-left: var(--ds-size-200, #{vac.$ds-size-200}); // will be passed to the child component
-
-    &:before {
-      display: block;
-
-      position: absolute;
-
-      top: -1px;
-      left: -2px;
-
-      width: 1px;
-      height: calc(100% + 2px);
-      content: '';
-      border-left-style: solid;
-      border-left-width: 2px;
-    }
-
-    &:focus {
-      border-left-width: 1px;
-      margin-left: 1px;
-    }
-  }
-
-  .content {
-    border-left-width: 2px;
-    border-left-style: solid;
-    padding: unset;
-  }
-
-  .contentWrapper {
-    padding-left: var(--ds-size-200, vac.$ds-size-200);
-  }
-
-  .iconWrapper {
-    padding-right: var(--ds-size-200, vac.$ds-size-200);
-  }
-}
-
-:host([emphasis][variant="lg"]) {
-  .trigger,
-  .contentWrapper {
-    padding-left: calc(var(--ds-size-200, vac.$ds-size-200) + var(--ds-size-50, vac.$ds-size-50));
-  }
-}
-
-:host([emphasis]:not([expanded]):hover) {
-  .trigger {
-    text-decoration: unset;
-  }
-}
-
-:host([chevron="none"]) {
-  ::slotted([slot="trigger"]),
-  .contentWrapper {
-    padding-left: unset;
-  }
-}

package/src/styles/tokens-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`:host{--ds-auro-accordion-content-border-color: transparent;--ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-accordion-trigger-border-color: transparent;--ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;

package/src/styles/tokens.css

@@ -1,7 +0,0 @@
-:host {
-  --ds-auro-accordion-content-border-color: transparent;
-  --ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));
-  --ds-auro-accordion-trigger-border-color: transparent;
-  --ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #2a2a2a);
-  --ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);
-}

package/src/styles/tokens.scss

@@ -1,9 +0,0 @@
-@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
-
-:host {
-  --ds-auro-accordion-content-border-color: transparent;
-  --ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
-  --ds-auro-accordion-trigger-border-color: transparent;
-  --ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
-  --ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
-}

package/src/tokens-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`:host{--ds-auro-accordion-content-border-color:transparent;--ds-auro-accordion-group-border-color:var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-accordion-trigger-border-color:transparent;--ds-auro-accordion-trigger-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a)}`;

package/src/tokens.css

@@ -1,7 +0,0 @@
-:host{
-  --ds-auro-accordion-content-border-color:transparent;
-  --ds-auro-accordion-group-border-color:var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));
-  --ds-auro-accordion-trigger-border-color:transparent;
-  --ds-auro-accordion-trigger-color:var(--ds-basic-color-texticon-default, #2a2a2a);
-  --ds-auro-accordion-trigger-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);
-}

package/test/auro-accordion-group.test.js

@@ -1,230 +0,0 @@
-import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
-import { AuroAccordionGroup } from '../src/auro-accordion-group';
-import { AuroAccordion } from '../src/auro-accordion';
-
-AuroAccordion.register();
-AuroAccordionGroup.register();
-
-describe('auro-accordion-group', () => {
-  it('auro-accordion-group is accessible', async () => {
-    const el = await defaultFixture();
-
-    await expect(el).to.be.accessible();
-  });
-
-  it('auro-accordion-group custom element is defined', async () => {
-    const el = await !!customElements.get("auro-accordion-group");
-
-    await expect(el).to.be.true;
-  });
-
-  it('accordion has correct attributes when in an accordion group with emphasis attribute', async () => {
-    const el = await emphasisFixture();
-    const accordion = el.querySelector('auro-accordion');
-
-    await expect(accordion.emphasis).to.be.true;
-    await expect(accordion.getAttribute('chevron') === 'right').to.be.true;
-    await expect(accordion.grouped).to.be.true;
-  });
-
-  it('sm attribute is passed down to the accordion', async () => {
-    const el = await smFixture();
-    const accordion = el.querySelector('auro-accordion');
-
-    await expect(accordion.getAttribute('variant') === 'sm').to.be.true;
-  });
-
-  it('lg attribute is passed down to the accordion', async () => {
-    const el = await lgFixture();
-    const accordion = el.querySelector('auro-accordion');
-
-    await expect(accordion.getAttribute('variant') === 'lg').to.be.true;
-  });
-
-  it('one accordion closes when another accordion opens', async () => {
-    const el = await expandedFixture();
-
-    const firstAccordion = [...el.querySelectorAll('auro-accordion')][0];
-    const secondAccordion = [...el.querySelectorAll('auro-accordion')][1];
-
-    const secondAccordionTrigger = secondAccordion.querySelector('span');
-
-    await expect(firstAccordion.hasAttribute('expanded')).to.be.true;
-    await expect(secondAccordion.hasAttribute('expanded')).to.be.false;
-
-    secondAccordionTrigger.click();
-
-    await elementUpdated(el);
-
-    await expect(firstAccordion.hasAttribute('expanded')).to.be.false;
-    await expect(secondAccordion.hasAttribute('expanded')).to.be.true;
-  });
-
-  it('noToggleExpanded attribute allows for multiple accordions to be open at once', async () => {
-    const el = await expandedFixture();
-
-    el.setAttribute('noToggleExpanded', true);
-
-    const firstAccordion = [...el.querySelectorAll('auro-accordion')][0];
-    const secondAccordion = [...el.querySelectorAll('auro-accordion')][1];
-
-    const secondAccordionTrigger = secondAccordion.querySelector('span');
-
-    await expect(firstAccordion.hasAttribute('expanded')).to.be.true;
-    await expect(secondAccordion.hasAttribute('expanded')).to.be.false;
-
-    secondAccordionTrigger.click();
-
-    await elementUpdated(el);
-
-    await expect(firstAccordion.hasAttribute('expanded')).to.be.true;
-    await expect(secondAccordion.hasAttribute('expanded')).to.be.true;
-  });
-
-  it('render with disabled attribute', async () => {
-    const el = await fixture(html`
-      <auro-accordion-group disabled>
-        <auro-accordion>
-          <span slot="trigger">Trigger</span>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-        </auro-accordion>
-      </auro-accordion-group>
-    `);
-
-    const accordion = el.querySelector('auro-accordion');
-
-    await expect(accordion.disabled).to.be.true;
-  });
-});
-
-async function defaultFixture() {
-  return await fixture(html`
-    <auro-accordion-group>
-      <auro-accordion>
-        <span slot="trigger">Trigger</span>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-        <p>
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-        <p>
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        </p>
-        <p>
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </auro-accordion>
-    </auro-accordion-group>
-
-  `);
-}
-
-async function emphasisFixture() {
-  return await fixture(html`
-    <auro-accordion-group emphasis>
-      <auro-accordion>
-        <span slot="trigger">Trigger</span>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-        <p>
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-        <p>
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        </p>
-        <p>
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </auro-accordion>
-    </auro-accordion-group>
-
-  `);
-}
-
-async function smFixture() {
-  return await fixture(html`
-    <auro-accordion-group variant="sm">
-      <auro-accordion>
-        <span slot="trigger">Trigger</span>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-        <p>
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-        <p>
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        </p>
-        <p>
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </auro-accordion>
-    </auro-accordion-group>
-
-  `);
-}
-
-async function lgFixture() {
-  return await fixture(html`
-    <auro-accordion-group variant="lg">
-      <auro-accordion>
-        <span slot="trigger">Trigger</span>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-        <p>
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-        <p>
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        </p>
-        <p>
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </auro-accordion>
-    </auro-accordion-group>
-
-  `);
-}
-
-async function expandedFixture() {
-  return await fixture(html`
-    <auro-accordion-group>
-      <auro-accordion expanded>
-        <span slot="trigger">Trigger</span>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-        <p>
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-        <p>
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        </p>
-        <p>
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </auro-accordion>
-
-      <auro-accordion>
-        <span slot="trigger">Trigger</span>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-        <p>
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        </p>
-        <p>
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        </p>
-        <p>
-          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </auro-accordion>
-    </auro-accordion-group>
-  `);
-}

package/test/auro-accordion.test.js

@@ -1,104 +0,0 @@
-import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
-import { AuroAccordion } from '../src/auro-accordion';
-
-AuroAccordion.register();
-
-// import './../index.js';
-
-describe('auro-accordion', () => {
-  it('auro-accordion is accessible', async () => {
-    const el = await defaultFixture();
-
-    await expect(el).to.be.accessible();
-  });
-
-  it('auro-accordion custom element is defined', async () => {
-    const el = await !!customElements.get("auro-accordion");
-
-    await expect(el).to.be.true;
-  });
-
-  it('toggles the accordion when clicking on the trigger', async () => {
-    const el = await defaultFixture();
-
-    const trigger = el.shadowRoot.querySelector('.trigger');
-    const shadowButton = trigger.shadowRoot.querySelector('button');
-
-    await expect(trigger.hasAttribute('ariaexpanded')).to.be.false;
-    await expect(shadowButton.getAttribute('aria-expanded')).to.equal('false');
-
-    trigger.click();
-
-    await elementUpdated(trigger);
-
-    await expect(trigger.hasAttribute('ariaexpanded')).to.be.true;
-    await expect(shadowButton.getAttribute('aria-expanded')).to.equal('true');
-
-    trigger.click();
-
-    await elementUpdated(trigger);
-
-    await expect(trigger.hasAttribute('ariaexpanded')).to.be.false;
-    await expect(shadowButton.getAttribute('aria-expanded')).to.equal('false');
-  });
-
-  it('render the disabled attribute', async () => {
-    const el = await fixture(html`
-      <auro-accordion disabled>
-        <span slot="trigger">Trigger</span>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </auro-accordion>
-    `);
-
-    const trigger = el.shadowRoot.querySelector('.trigger');
-
-    await expect(trigger.hasAttribute('aria-disabled')).to.not.null;
-  });
-
-  it('test toggle event when disabled is true', async () => {
-    const el = await defaultFixture();
-    el.disabled = true;
-    const trigger = el.shadowRoot.querySelector('.trigger');
-    trigger.click();
-
-    await elementUpdated(trigger);
-    await expect(trigger.hasAttribute('aria-expanded')).to.not.null;
-  });
-
-  it('render with chevron attribute value "none"', async () => {
-    const el = await fixture(html`
-      <auro-accordion chevron="none">
-        <span slot="trigger">Trigger</span>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </auro-accordion>
-    `);
-
-    const trigger = el.shadowRoot.querySelector('.trigger');
-
-    await expect(trigger.hasAttribute('chevron')).to.be.false;
-  });
-});
-
-async function defaultFixture() {
-  return await fixture(html`
-  <auro-accordion>
-    <span slot="trigger">Trigger</span>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-    </p>
-    <p>
-      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-    </p>
-    <p>
-      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </p>
-    <p>
-      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-  </auro-accordion>
-  `);
-}