Accordion.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Accordion component have to match snapshot 1`] = `
<Accordion
  allow_close_all={null}
  attributes={null}
  class={null}
  className={null}
  contentRef={null}
  custom_element={null}
  custom_method={null}
  disabled={null}
  element={null}
  expanded={null}
  expanded_ssr={null}
  flush_remembered_state={null}
  group={null}
  heading={null}
  heading_level={null}
  icon={null}
  icon_position={null}
  icon_size="medium"
  id="accordion"
  left_component={null}
  no_animation={true}
  on_change={null}
  on_state_update={null}
  prerender={null}
  prevent_rerender={null}
  prevent_rerender_conditional={null}
  remember_state={null}
  single_container={null}
  skeleton={null}
  title="title"
  variant="default"
>
  <div
    className="dnb-accordion dnb-accordion__variant--default"
    id="accordion"
  >
    <AccordionHeader
      className={null}
      description={null}
      disabled={null}
      element={null}
      heading={null}
      heading_level={null}
      icon={null}
      icon_position={null}
      icon_size="medium"
      id={null}
      left_component={null}
      no_animation={null}
      skeleton={null}
      title={null}
    >
      <div
        aria-controls="accordion-content"
        aria-expanded={false}
        className="dnb-accordion__header dnb-accordion__header--no-animation"
        disabled={false}
        onClick={[Function]}
        onKeyDown={[Function]}
        onMouseOut={[Function]}
        onMouseOver={[Function]}
        role="button"
        tabIndex="0"
      >
        <AccordionHeaderIcon
          expanded={false}
          icon={null}
          key="icon"
          size="medium"
        >
          <span
            className="dnb-accordion__header__icon"
          >
            <IconPrimary
              alt={null}
              aria-hidden={true}
              attributes={null}
              border={null}
              className={null}
              color={null}
              height={null}
              icon="chevron-down"
              inherit_color={true}
              modifier={null}
              size="medium"
              skeleton={null}
              title={null}
              width={null}
            >
              <span
                aria-hidden={true}
                className="dnb-icon dnb-icon--medium dnb-icon--inherit-color"
                data-testid="chevron-down icon"
                role="presentation"
              >
                <chevron_down_medium>
                  <svg
                    fill="none"
                    height={24}
                    viewBox="0 0 24 24"
                    width={24}
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="m19 8.5-7 7-7-7"
                      stroke="#000"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={1.5}
                    />
                  </svg>
                </chevron_down_medium>
              </span>
            </IconPrimary>
          </span>
        </AccordionHeaderIcon>
        <AccordionHeaderContainer
          key="container"
        />
        <span
          className="dnb-accordion__header__wrapper"
          key="wrapper"
        >
          <AccordionHeaderTitle
            key="title"
          >
            <span
              className="dnb-accordion__header__title"
            >
              title
            </span>
          </AccordionHeaderTitle>
          <AccordionHeaderDescription
            key="description"
          />
        </span>
      </div>
    </AccordionHeader>
    <AccordionContent
      className={null}
      instance={null}
    >
      <HeightAnimation
        animate={false}
        className="dnb-accordion__content"
        innerRef={
          {
            "current": null,
          }
        }
        keepInDOM={false}
        open={false}
      />
    </AccordionContent>
  </div>
</Accordion>
`;

exports[`Accordion scss have to match default theme snapshot 1`] = `
"/*
* Accordion theme
*
*/
/**
 * This file is only used to make themes independent
 * so that they can get imported individually, without the core styles
 *
 */
/*
 * Utilities
 */
/*
* Button mixins
*
*/
.dnb-accordion__header {
  border: none; }

.dnb-accordion__header__icon, .dnb-accordion__header__container {
  color: var(--color-sea-green); }

.dnb-accordion__header__description {
  color: var(--color-black-55); }

.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__title {
  font-weight: var(--font-weight-medium); }

.dnb-accordion__variant--outlined > .dnb-accordion__header {
  color: var(--color-black-80);
  background-color: var(--color-white);
  --border-color: var(--color-black-8);
  box-shadow: inset 0 0 0 0.0625rem var(--border-color);
  /* iOS fix - because "inset" works not fine with border-radius */
  /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
  border-color: transparent; }
  @supports (-webkit-touch-callout: none) {
    .dnb-accordion__variant--outlined > .dnb-accordion__header {
      box-shadow: 0 0 0 0.0625rem var(--border-color); } }
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
      .dnb-accordion__variant--outlined > .dnb-accordion__header {
        box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
  @media screen and (-ms-high-contrast: none) {
    .dnb-accordion__variant--outlined > .dnb-accordion__header {
      box-shadow: inset 0 0 0 1px var(--color-black-8); } }
  .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled],
  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled] {
    cursor: not-allowed; }
  .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]),
  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
    outline: none; }
    html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
    html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
      color: var(--color-emerald-green);
      background-color: var(--color-white); }
    html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
    html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
      --border-color: var(--color-emerald-green);
      box-shadow: inset 0 0 0 0.125rem var(--border-color);
      /* iOS fix - because "inset" works not fine with border-radius */
      /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
      border-color: transparent; }
      @supports (-webkit-touch-callout: none) {
        html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
        html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
          box-shadow: 0 0 0 0.125rem var(--border-color); } }
      @media not all and (min-resolution: 0.001dpcm) {
        @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
          html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
          html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
            box-shadow: 0 0 0 0.125rem var(--border-color); } } }
      @media screen and (-ms-high-contrast: none) {
        html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard']
        html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) {
          box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } }
  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover[disabled] {
    cursor: not-allowed; }
  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) {
    color: var(--color-emerald-green);
    background-color: var(--color-white);
    --border-color: var(--color-emerald-green);
    box-shadow: 0 0 0 0.125rem var(--border-color);
    border-color: transparent; }
    @media screen and (-ms-high-contrast: none) {
      html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) {
        box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
    @media screen and (-ms-high-contrast: none) {
      html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) {
        opacity: 1; } }
  .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled],
  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled] {
    cursor: not-allowed; }
  .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]),
  html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]) {
    color: var(--color-emerald-green);
    background-color: var(--color-pistachio);
    --border-color: var(--color-emerald-green);
    box-shadow: 0 0 0 0.0625rem var(--border-color);
    border-color: transparent; }
    @media screen and (-ms-high-contrast: none) {
      .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]),
      html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]) {
        box-shadow: 0 0 0 0.0625rem var(--color-emerald-green); } }

.dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] {
  background-color: var(--color-white);
  --border-color: var(--color-sea-green-30);
  box-shadow: 0 0 0 0.0625rem var(--border-color);
  border-color: transparent; }
  @media screen and (-ms-high-contrast: none) {
    .dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] {
      box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30); } }
  .dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] * {
    color: var(--color-sea-green-30); }

.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header {
  color: var(--color-white);
  background-color: var(--color-sea-green);
  --border-color: transparent;
  box-shadow: 0 0 0 0.0625rem var(--border-color);
  border-color: transparent; }
  @media screen and (-ms-high-contrast: none) {
    .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header {
      box-shadow: 0 0 0 0.0625rem transparent; } }

.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header[disabled] {
  background-color: var(--color-sea-green-30); }
  .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header[disabled] * {
    color: var(--color-white); }

html[data-whatinput='keyboard']
.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
  background-color: var(--color-mint-green); }
  html[data-whatinput='keyboard']
.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus * {
    color: var(--color-emerald-green); }

.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
  outline: none; }
  html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
    --border-color: var(--color-emerald-green);
    box-shadow: inset 0 0 0 0.125rem var(--border-color);
    /* iOS fix - because "inset" works not fine with border-radius */
    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
    border-color: transparent; }
    @supports (-webkit-touch-callout: none) {
      html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
        box-shadow: 0 0 0 0.125rem var(--border-color); } }
    @media not all and (min-resolution: 0.001dpcm) {
      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
        html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
          box-shadow: 0 0 0 0.125rem var(--border-color); } } }
    @media screen and (-ms-high-contrast: none) {
      html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
        box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } }

.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not(:hover):not([disabled]) * {
  color: var(--color-white); }

html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover[disabled] {
  cursor: not-allowed; }

html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) {
  color: var(--color-white);
  background-color: var(--color-sea-green);
  --border-color: var(--color-sea-green);
  box-shadow: 0 0 0 0.0625rem var(--border-color);
  border-color: transparent; }
  @media screen and (-ms-high-contrast: none) {
    html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) {
      box-shadow: 0 0 0 0.0625rem var(--color-sea-green); } }

.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active) * {
  color: var(--color-white); }
"
`;

exports[`Accordion scss have to match snapshot 1`] = `
"/*
* DNB Accordion
*
*/
/**
 * This file is only used to make components independent
 * so that they can get imported individually, without the core styles
 *
 */
/*
 * Utilities
 */
/*
 * Scopes
 *
 */
/*
 * Document Reset
 *
 */
/*
* DNB icon
*
*/
/*
* Icon component
*
*/
.dnb-icon {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  line-height: 1rem;
  color: inherit;
  width: 1em;
  height: 1em; }
  .dnb-icon img,
  .dnb-icon svg {
    width: inherit;
    height: inherit;
    shape-rendering: geometricPrecision;
    vertical-align: top; }
  .dnb-icon svg[width='100%'] {
    width: inherit; }
  .dnb-icon svg[height='100%'] {
    height: inherit; }
  .dnb-icon--inherit-color svg:not([fill]),
  .dnb-icon--inherit-color svg [fill] {
    fill: currentColor; }
  .dnb-icon--inherit-color svg [stroke] {
    stroke: currentColor; }
  .dnb-icon--small {
    font-size: 0.75rem; }
  .dnb-icon--default {
    font-size: 1rem; }
  .dnb-icon--medium {
    font-size: 1.5rem; }
  .dnb-icon--large {
    font-size: 2rem; }
  .dnb-icon--x-large {
    font-size: 2.5rem; }
  .dnb-icon--xx-large {
    font-size: 3rem; }
  .dnb-icon--custom-size {
    width: auto;
    height: auto; }
  .dnb-icon--auto {
    font-size: 1em; }
  .dnb-icon--auto > .dnb-icon--wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center; }
  h1 .dnb-icon,
  h2 .dnb-icon,
  h3 .dnb-icon,
  h4 .dnb-icon,
  h5 .dnb-icon,
  h6 .dnb-icon {
    vertical-align: middle; }
  .dnb-icon.dnb-skeleton {
    color: var(--skeleton-color) !important; }
    .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after {
      content: none !important; }
  @media screen and (-ms-high-contrast: none) {
    .dnb-icon {
      flex: none; } }

.dnb-accordion {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small);
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--color-black-80, #333);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  -moz-tab-size: 4;
  tab-size: 4;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  /**
  * 1. Remove repeating backgrounds in all browsers (opinionated).
  * 2. Add border box sizing in all browsers (opinionated).
  */
  /**
  * 1. Add text decoration inheritance in all browsers (opinionated).
  * 2. Add vertical alignment inheritance in all browsers (opinionated).
  */
  margin: 0;
  padding: 0; }
  .dnb-accordion *,
  .dnb-accordion ::before,
  .dnb-accordion ::after {
    background-repeat: no-repeat;
    /* 1 */
    box-sizing: border-box;
    /* 2 */ }
  .dnb-accordion ::before,
  .dnb-accordion ::after {
    text-decoration: inherit;
    /* 1 */
    vertical-align: inherit;
    /* 2 */ }

/*
* Accordion component
*
*/
:root {
  --accordion-border-width: 0.0625rem;
  --accordion-border-radius: 0.25rem;
  --accordion-easing: var(--easing-default); }

.dnb-accordion {
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-small);
  line-height: var(--line-height-basis); }
  .dnb-accordion__header {
    display: flex;
    align-items: center;
    cursor: pointer;
    outline: none;
    border: var(--accordion-border-width) solid transparent;
    border-radius: var(--accordion-border-radius); }
    .dnb-accordion__header:focus {
      user-select: none; }
    .dnb-accordion__header * {
      pointer-events: none; }
    .dnb-accordion__header--prevent-click {
      user-select: none;
      pointer-events: none; }
    .dnb-accordion__header__wrapper {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 1.5rem 0 1.5rem 2rem; }
    .dnb-accordion__header--description .dnb-accordion__header__wrapper {
      margin: 1rem 0 1rem 2rem; }
    .dnb-accordion__header__icon + .dnb-accordion__header__wrapper {
      margin-left: 0;
      margin-right: 2rem; }
    .dnb-accordion__header__container {
      margin: 0 1rem; }
    .dnb-accordion__header__icon {
      align-self: flex-start;
      margin: 1.5rem 1rem;
      font-size: var(--font-size-small);
      line-height: var(--line-height-small);
      transition: transform 400ms var(--accordion-easing); }
    .dnb-accordion__header--description .dnb-accordion__header__icon {
      margin-top: 1rem; }
    .dnb-accordion__header__icon--right {
      justify-content: space-between; }
    .dnb-accordion__header__icon--right .dnb-accordion__header__icon {
      order: 3; }
    .dnb-accordion__header__icon--right .dnb-accordion__header__container {
      order: 1; }
    .dnb-accordion__header__icon--right .dnb-accordion__header__wrapper {
      order: 2;
      margin-left: 1rem;
      margin-right: 1rem; }
    .dnb-accordion__header__icon--right .dnb-accordion__header__wrapper + .dnb-accordion__header__container {
      margin-right: 0; }
    .dnb-accordion__header__icon--right .dnb-accordion__header__container + .dnb-accordion__header__wrapper {
      margin-left: 0; }
    .dnb-accordion__header__title {
      font-size: var(--font-size-basis);
      line-height: var(--line-height-basis); }
    .dnb-accordion__header__description {
      font-size: var(--font-size-small);
      line-height: var(--line-height-small);
      font-weight: var(--font-weight-basis); }
    .dnb-accordion__header__title + .dnb-accordion__header__description {
      margin-top: 0.25rem; }
    .dnb-accordion__header__description + .dnb-accordion__header__title {
      margin-top: 0.25rem; }
  .dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon {
    transform: rotate(-180deg); }
  .dnb-accordion__content {
    display: flex;
    width: 100%;
    will-change: height;
    transition: height 400ms var(--accordion-easing), opacity 600ms var(--accordion-easing); }
    .dnb-accordion__content__inner {
      width: 100%;
      margin-top: 1rem; }
    .dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner {
      display: none; }
  .dnb-accordion-group--single-container {
    transition: min-height 1s var(--accordion-easing); }
  .dnb-accordion-group--single-container .dnb-accordion {
    position: static;
    max-width: 60rem; }
    @media screen and (min-width: 40em) {
      .dnb-accordion-group--single-container .dnb-accordion__header {
        width: 40%; }
      .dnb-accordion-group--single-container .dnb-accordion__content {
        margin-left: 1rem;
        transition: opacity 1s var(--accordion-easing); }
        .dnb-accordion-group--single-container .dnb-accordion__content__inner {
          margin-top: 0; } }
  @media screen and (min-width: 40em) {
    .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon {
      transform: rotate(-90deg); } }
  .dnb-accordion-group--single-container .dnb-accordion-group__children {
    max-width: 60rem; }
    @media screen and (min-width: 40em) {
      .dnb-accordion-group--single-container .dnb-accordion-group__children {
        position: relative;
        display: flex;
        flex-direction: column; }
        .dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content {
          position: absolute;
          z-index: 10;
          top: 0;
          right: 0;
          width: 60%; } }
  .dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon,
  html[data-visual-test] .dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon {
    transition-duration: 1ms !important; }
"
`;