CarouselCard.unit.test.jsx.snap

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

exports[`<CarouselCard /> should match the snapshots 1`] = `
<DocumentFragment>
  .shadow-1 {
  box-shadow: 0 2px 1px -1px var(--qtm-shadow-umbra-color),0 1px 1px 0 var(--qtm-shadow-penumbra-color),0 1px 3px 0 var(--qtm-shadow-ambient-color);
}

.Card-module__card-wrapper___HvjEg {
  background-color: var(--qtm-colors-neutral-0);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.Content-module__content___itVo9 {
  font-size: calc(var(--qtm-base-font-size)*.875);
  margin: 0;
  padding: var(--qtm-spacing-small) var(--qtm-spacing-medium);
}

.c0 {
  margin: 2px 4px;
  text-align: center;
  height: 80px;
  width: 80px;
}

.c1 {
  height: 100%;
  padding: 8px;
}

.c2 {
  width: 64px;
  height: 64px;
}

<article
    class="c0 Card-module__card-wrapper___HvjEg shadow-1"
  >
    <div
      class="c1 Content-module__content___itVo9"
    >
      <img
        alt="a11y image description"
        class="c2"
        src="https://assets.catho.com.br/logo/svg/blue.svg"
      />
    </div>
  </article>
</DocumentFragment>
`;

exports[`<CarouselCard /> should match the snapshots 2`] = `
<DocumentFragment>
  .shadow-1 {
  box-shadow: 0 2px 1px -1px var(--qtm-shadow-umbra-color),0 1px 1px 0 var(--qtm-shadow-penumbra-color),0 1px 3px 0 var(--qtm-shadow-ambient-color);
}

.Card-module__card-wrapper___HvjEg {
  background-color: var(--qtm-colors-neutral-0);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.Content-module__content___itVo9 {
  font-size: calc(var(--qtm-base-font-size)*.875);
  margin: 0;
  padding: var(--qtm-spacing-small) var(--qtm-spacing-medium);
}

.Description-module__description-content___FVBwO {
  font-size: calc(var(--qtm-base-font-size)*.875);
  margin: var(--qtm-spacing-xsmall) 0 0 0;
}

.Media-module__media-wrapper___Uu7hp {
  background-color: var(--qtm-colors-neutral-300);
  margin-top: var(--qtm-spacing-small);
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}

.Media-module__media-image___vWBVj {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.Title-module__title___3S2cv {
  font-size: calc(var(--qtm-base-font-size)*1.5);
  font-weight: 600;
  margin: 0;
}

.Title-module__title-small___4mNd0 {
  font-size: calc(var(--qtm-base-font-size)*1.25);
}

.c0 {
  margin: 2px 8px;
  text-align: center;
  width: 224px;
  height: 240px;
}

.c1 {
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.c2 {
  width: 192px;
  height: 104px;
  padding-bottom: 0;
  margin-top: 0px;
  margin-bottom: 0px;
}

.c3 {
  font-size: 16px;
  line-height: 16px;
  margin: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c4 {
  font-size: 14px;
  margin: 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<article
    class="c0 Card-module__card-wrapper___HvjEg shadow-1"
  >
    <div
      class="c1 Content-module__content___itVo9"
    >
      <div
        class="c2 Media-module__media-wrapper___Uu7hp"
      >
        <img
          alt="a11y image description"
          class="Media-module__media-image___vWBVj"
          src="https://assets.catho.com.br/logo/svg/blue.svg"
        />
      </div>
      <h2
        class="c3 Title-module__title___3S2cv Title-module__title-small___4mNd0"
      >
        Card title
      </h2>
      <div
        class="c4 Description-module__description-content___FVBwO"
      >
        Lorem ipsum dolor avec
      </div>
    </div>
  </article>
</DocumentFragment>
`;

exports[`<CarouselCard /> should match the snapshots 3`] = `
<DocumentFragment>
  .shadow-1 {
  box-shadow: 0 2px 1px -1px var(--qtm-shadow-umbra-color),0 1px 1px 0 var(--qtm-shadow-penumbra-color),0 1px 3px 0 var(--qtm-shadow-ambient-color);
}

.Card-module__card-wrapper___HvjEg {
  background-color: var(--qtm-colors-neutral-0);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.Content-module__content___itVo9 {
  font-size: calc(var(--qtm-base-font-size)*.875);
  margin: 0;
  padding: var(--qtm-spacing-small) var(--qtm-spacing-medium);
}

.Description-module__description-content___FVBwO {
  font-size: calc(var(--qtm-base-font-size)*.875);
  margin: var(--qtm-spacing-xsmall) 0 0 0;
}

.Media-module__media-wrapper___Uu7hp {
  background-color: var(--qtm-colors-neutral-300);
  margin-top: var(--qtm-spacing-small);
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}

.Media-module__media-image___vWBVj {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.Title-module__title___3S2cv {
  font-size: calc(var(--qtm-base-font-size)*1.5);
  font-weight: 600;
  margin: 0;
}

.Title-module__title-small___4mNd0 {
  font-size: calc(var(--qtm-base-font-size)*1.25);
}

.c0 {
  margin: 2px 8px;
  text-align: center;
  width: 224px;
  height: 264px;
}

.c1 {
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.c2 {
  width: 192px;
  height: 104px;
  padding-bottom: 0;
  margin-top: 8px;
  margin-bottom: 8px;
}

.c3 {
  font-size: 16px;
  line-height: 16px;
  margin: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c4 {
  font-size: 14px;
  margin: 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<article
    class="c0 Card-module__card-wrapper___HvjEg shadow-1"
  >
    <div
      class="c1 Content-module__content___itVo9"
    >
      <div
        class="c2 Media-module__media-wrapper___Uu7hp"
      >
        <img
          alt="a11y image description"
          class="Media-module__media-image___vWBVj"
          src="https://assets.catho.com.br/logo/svg/blue.svg"
        />
      </div>
      <h2
        class="c3 Title-module__title___3S2cv Title-module__title-small___4mNd0"
      >
        Card title
      </h2>
      <div
        class="c4 Description-module__description-content___FVBwO"
      >
        Lorem ipsum dolor avec
      </div>
    </div>
  </article>
</DocumentFragment>
`;