@financial-times/qanda-ui 0.0.1-beta.2 → 0.0.1-beta.21

package/dist/qanda.scss

@@ -0,0 +1,802 @@
+$system-code: 'qanda';
+$app-bg-color: #fff2e8;
+$app-text-color: #333;
+$app-header-color: #007acc;
+@import '@financial-times/o-colors/main';
+@import '@financial-times/o-forms/main';
+@import '@financial-times/o-icons/main';
+@import '@financial-times/o-labels/main';
+@import '@financial-times/o-message/main';
+@import '@financial-times/o3-foundation/css/core.css';
+/* Inlined from ../components/Author/styles.css */
+.qanda-container {
+  .qanda-block__answer__author {
+    display: flex;
+    gap: var(--o3-spacing-4xs);
+  }
+
+  .qanda-block__answer__author-headshot {
+    height: 44px;
+    width: 44px;
+    background-color: var(--o3-color-palette-wheat);
+    border-radius: 50%;
+  }
+
+  .qanda-block__answer__author-info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .qanda-block__answer__author-name a {
+    color: var(--o3-color-use-case-body-text);
+    text-decoration: none;
+  }
+}
+
+/* Inlined from ../components/Calendar/styles.css */
+@import '@financial-times/o3-button/css/core.css';
+
+.qanda-container {
+  .live-qa-calendar-container {
+    width: 100%;
+  }
+
+  .live-qa-calendar-button {
+    width: 100%;
+  }
+
+  .live-qa-calendar-button.dropdown-visible {
+    color: var(--o3-color-palette-white-80, #fffcfa);
+    background-color: var(
+      --o3-button-secondary-mono-active-background,
+      #262a33
+    );
+  }
+
+  .live-qa-calendar-list {
+    display: flex;
+    margin-top: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    border-radius: 0 0 2px 2px;
+    background: var(--o3-color-palette-white-80, #fffcfa);
+    list-style-type: none;
+    padding: 0 0 8px 0;
+  }
+
+  .live-qa-calendar-list__item {
+    width: 100%;
+  }
+
+  .live-qa-calendar-list__item__link {
+    padding: 0 var(--o3-spacing-4xs, 8px);
+    display: flex;
+    height: 44px;
+    width: 100%;
+    align-items: center;
+    gap: var(--o3-spacing-4xs, 8px);
+    align-self: stretch;
+    text-decoration: none;
+    color: var(--Primary-FT-Grey, #333);
+    font-family: var(--o3-type-body-base-font-family);
+    font-weight: var(--o3-type-body-base-font-weight);
+    font-size: var(--o3-type-body-base-font-size);
+    line-height: var(--o3-type-body-base-line-height);
+  }
+
+  .live-qa-calendar-list__item:hover {
+    background: var(--o3-color-use-case-link-inverse-text-hover, #d4d4d6);
+  }
+
+  .live-qa-calendar-list__item:active {
+    background: #727071;
+    a {
+      color: var(--o3-color-palette-white, #fff);
+    }
+    .live-qa-calendar-icon {
+      filter: invert(1);
+    }
+  }
+
+  .live-qa-calendar-list__item:focus {
+    background: #c9cacc;
+    box-shadow:
+      0 0 0 4px #4d4845,
+      0 0 0 8px var(--o3-color-palette-white, #fff);
+  }
+
+  .live-qa-calendar-list__item__icon {
+    padding: 0 var(--o3-spacing-4xs, 8px);
+    width: 24px;
+    height: 24px;
+    aspect-ratio: 1/1;
+  }
+
+  .live-qa-calendar-list__item__text {
+    text-align: center;
+    font-family: 'Metric 2 VF';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  }
+}
+
+/* Inlined from ../components/CountdownTimer/styles.css */
+@import '@financial-times/o3-foundation/css/core.css';
+
+.qanda-portal.countdown-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  width: 100%;
+
+  .countdown-block {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    width: 100%;
+    padding: var(--o3-spacing-s) 0;
+    &::before,
+    &::after {
+      content: '';
+      flex-grow: 1;
+      height: 1px;
+      background-color: var(--o3-color-palette-black-20, #ccc1b7);
+    }
+    &::before {
+      margin-right: 8px;
+    }
+    &::after {
+      margin-left: 8px;
+    }
+  }
+
+  .countdown {
+    margin: 0;
+  }
+}
+
+/* Inlined from ../components/FloatingActionBar/styles.css */
+:root {
+  --floating-action-bar__live-icon-size: 10px;
+}
+
+.qanda-container {
+  .floating-action-bar__container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    /* Ensure FAB is on top of ...
+    1. some dinamically loaded teasers at the bottom of the article
+    2. the sharing bar on mobile
+    */
+    z-index: 7;
+  }
+
+  .floating-action-bar__fade-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(
+      0deg,
+      var(--o3-color-palette-paper) 0%,
+      rgba(255, 241, 229, 0.5) 12%,
+      rgba(255, 241, 229, 0) 20%
+    );
+    pointer-events: none;
+    z-index: 5;
+  }
+
+  .floating-action-bar {
+    position: relative;
+    height: 48px;
+    background: var(--o3-color-palette-white-60);
+    border-radius: 100px;
+    margin: auto;
+    margin-bottom: var(--o3-spacing-s);
+    padding: 0 var(--o3-spacing-2xs);
+    display: flex;
+    align-items: center;
+    gap: var(--o3-spacing-2xs);
+    box-shadow:
+      0px 1px 4px 0px rgba(0, 0, 0, 0.2),
+      0px 6px 10px 0px rgba(0, 0, 0, 0.15);
+    z-index: 6;
+  }
+
+  .floating-action-bar__live-container {
+    background-color: var(--o3-color-palette-crimson);
+    padding: var(--o3-spacing-5xs) var(--o3-spacing-4xs);
+    color: var(--o3-color-palette-white);
+    border-radius: 2px;
+  }
+
+  .floating-action-bar__live-label::before {
+    margin-right: var(--o3-spacing-4xs);
+  }
+
+  .floating-action-bar__live-icon {
+    display: inline-block;
+    width: var(--floating-action-bar__live-icon-size);
+    height: var(--floating-action-bar__live-icon-size);
+    background-color: var(--o3-color-palette-white);
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    margin-right: var(--o3-spacing-5xs);
+    animation: _o-labels-live-pulse 1.2s ease-in-out infinite;
+  }
+
+  .floating-action-bar__buttons {
+    display: flex;
+    gap: var(--o3-spacing-4xs);
+  }
+
+  .floating-action-bar__buttons button {
+    padding: var(--o3-spacing-4xs);
+  }
+
+  .floating-action-bar__updates-counter {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin-top: calc(var(--o3-spacing-3xs) * -1);
+    margin-right: var(--o3-spacing-3xs);
+    background-color: var(--o3-color-palette-claret);
+    color: var(--o3-color-palette-white);
+    border-radius: 100px;
+    padding: 2px var(--o3-spacing-5xs);
+    min-width: var(--o3-spacing-2xs);
+  }
+
+  /* ToDo: using an SVG for this icon until it becomes part of Origami */
+  .o3-button-icon.o3-button-icon--edit::before {
+    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M2 4.5625C2 4.25184 2.25184 4 2.5625 4H9.4375C9.74816 4 10 4.25184 10 4.5625V5.5C10 5.81066 9.74816 6 9.4375 6H4V20H18V14.5C18 14.1893 18.1893 13.9375 18.5 13.9375H19.4375C19.7482 13.9375 20 14.1893 20 14.5V21.4375C20 21.7482 19.7482 22 19.4375 22H2.5625C2.25184 22 2 21.7482 2 21.4375V4.5625Z' fill='black'/><path fill-rule='evenodd' clip-rule='evenodd' d='M7.00001 11.5C7.01639 11.4328 7.04922 11.3714 7.09513 11.3224L15.7827 2.97148C15.9253 2.819 16.1564 2.81946 16.2984 2.97252L21.0856 7.72154C21.2271 7.87405 21.2268 8.12048 21.0848 8.27254L12.4879 16.8694C12.4421 16.9185 12.385 16.9535 12.3223 16.9711L6.75835 17.6629C6.48908 17.7381 6.24367 17.4752 6.31392 17.1868L7.00001 11.5ZM11.3344 15.1016C11.397 15.0841 11.4542 15.0491 11.5 15L18.5 8L16 5.49997L8.75109 12.4947C8.70519 12.5438 8.67236 12.6051 8.65598 12.6724L8.50025 15.5L11.3344 15.1016Z' fill='black'/></svg>");
+  }
+}
+
+/* Inlined from ../components/EmbedFormField/styles.css */
+:root {
+  --embed-form-field__icon-size: 24px;
+}
+
+.qanda-portal.embed-form-field__container {
+  max-width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--o3-spacing-4xs);
+  margin: var(--o3-spacing-s) auto;
+  text-align: left;
+
+  .embed-form-field__text-input {
+    display: flex;
+    padding: var(--o3-spacing-4xs);
+    align-items: center;
+    gap: var(--o3-spacing-4xs);
+    border-radius: 2px;
+    border: 1.5px solid var(--o3-color-palette-black-50);
+    background-color: var(--o3-color-palette-white);
+    color: var(--o3-color-use-case-muted-text);
+    cursor: pointer;
+  }
+
+  .embed-form-field__icon {
+    background-color: var(--o3-color-palette-wheat);
+    border-radius: 50%;
+    padding: 10px;
+  }
+
+  .embed-form-field__icon i {
+    display: block;
+    height: var(--embed-form-field__icon-size);
+    width: var(--embed-form-field__icon-size);
+    background-color: var(--o3-color-palette-black-60);
+  }
+}
+
+/* Inlined from ../components/Expander/styles.css */
+@import '@financial-times/o3-foundation/css/core.css';
+
+.expander__link {
+  /* Override some o-button styles */
+  padding: 0px var(--o3-spacing-5xs, 4px) !important;
+  color: var(--o3-color-, #33302e);
+  float: right;
+  margin-top: var(--o3-spacing-2xs);
+}
+
+/* Inlined from ../components/Loader/styles.scss */
+@import '@financial-times/o-loading/main';
+
+@include oLoading(
+  $opts: (
+    'themes': (
+      'light',
+      'dark',
+    ),
+    'sizes': (
+      'mini',
+      'small',
+      'medium',
+      'large',
+    ),
+  )
+);
+
+/* Inlined from ../components/Overlay/styles.css */
+@import '@financial-times/o3-button/css/core.css';
+
+:root {
+  --overlay__header-icon-size: 48px;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(44px);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 0.4;
+  }
+}
+
+.qanda-container {
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    /* Just going on top of the main navigation */
+    z-index: 100;
+    visibility: visible;
+  }
+
+  .overlay__outer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 19;
+    animation: fadeIn 1s ease forwards;
+    background: var(--o3-color-palette-black-90);
+  }
+
+  .overlay__outer--no-background {
+    background: none;
+  }
+
+  .overlay__inner {
+    border-radius: var(--o3-spacing-2xs) var(--o3-spacing-2xs) 0 0;
+    background: var(--o3-color-use-case-page-background);
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    z-index: 20;
+    animation: slideUp 1s ease forwards;
+
+    @media (min-width: 740px) {
+      width: 375px;
+      right: 0;
+      top: 0;
+      border-radius: 0;
+      animation: slideIn 1s ease forwards;
+    }
+  }
+
+  .overlay__inner--shadow {
+    @media (min-width: 740px) {
+      width: 420px;
+      box-shadow:
+        -4px 6px 10px 0 rgba(0, 0, 0, 0.15),
+        -4px 4px 4px 0 rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  .overlay__header {
+    border-bottom: 1px solid var(--o3-color-palette-black-10);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    padding: 0 var(--o3-spacing-2xs);
+  }
+
+  .overlay__header-bar {
+    display: flex;
+    width: 100%;
+  }
+
+  .overlay__header:before {
+    @media (max-width: 740px) {
+      content: '';
+      width: var(--o3-spacing-m);
+      height: var(--o3-spacing-5xs);
+      border-radius: var(--o3-spacing-4xl);
+      background: var(--o3-color-palette-black-50);
+      margin: auto;
+      margin-top: var(--o3-spacing-3xs);
+    }
+  }
+
+  .overlay__header-title {
+    flex-grow: 1;
+    align-content: center;
+    text-align: left;
+  }
+
+  .overlay__header-close {
+    width: var(--overlay__header-icon-size);
+    height: var(--overlay__header-icon-size);
+  }
+
+  .overlay__content {
+    padding: var(--o3-spacing-2xs);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    gap: var(--o3-spacing-2xs);
+    overflow-y: auto;
+    height: calc(100% - 140px);
+
+    @media (min-width: 740px) {
+      height: calc(100% - 80px);
+    }
+  }
+
+  .overlay__content-box {
+    width: 100%;
+    padding: var(--o3-spacing-2xs);
+    box-sizing: border-box;
+    text-align: left;
+  }
+
+  .overlay__form-box {
+    border: 1px solid var(--o3-color-palette-black-10);
+    background: var(--o3-color-palette-white-40);
+  }
+
+  .overlay__submit-button {
+    width: 100%;
+    margin: var(--o3-spacing-s) 0 var(--o3-spacing-4xs) 0;
+  }
+
+  .overlay__user-container-display-name {
+    display: flex;
+    gap: var(--o3-spacing-3xs);
+    margin-bottom: var(--o3-spacing-s);
+  }
+
+  .overlay__message-icon {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    background-color: currentColor;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+  }
+}
+
+/* Inlined from ../components/QandaBlock/styles.css */
+@import '@financial-times/o3-foundation/css/core.css';
+
+:root {
+  --speech-triangle-width: 24px;
+  --speech-triangle-height: 17px;
+}
+
+.qanda-container {
+  .qanda-block {
+    display: flex;
+    flex-direction: column;
+    gap: var(--o3-spacing-xl);
+  }
+
+  .qanda-block__comment {
+    padding: var(--o3-spacing-s) var(--o3-spacing-2xs);
+    position: relative;
+    filter: drop-shadow(0 1px 2px var(--o3-color-palette-black-20, #ccc1b7));
+    will-change: filter;
+  }
+
+  .qanda-block__question {
+    background: var(--o3-color-palette-wheat);
+    margin-right: var(--o3-spacing-2xs);
+  }
+
+  .qanda-block__answer {
+    background: var(--o3-color-palette-white-80);
+    margin-left: var(--o3-spacing-2xs);
+  }
+
+  .qanda-block__question::after {
+    content: '';
+    position: absolute;
+    bottom: calc(var(--speech-triangle-height) * -1 + 1px);
+    right: 0;
+    border-left: var(--speech-triangle-width) solid transparent;
+    border-top: var(--speech-triangle-height) solid
+      var(--o3-color-palette-wheat);
+  }
+
+  .qanda-block__answer::before {
+    content: '';
+    position: absolute;
+    top: calc(var(--speech-triangle-height) * -1 + 1px);
+    left: 0;
+    border-right: var(--speech-triangle-width) solid transparent;
+    border-bottom: var(--speech-triangle-height) solid
+      var(--o3-color-palette-white-80);
+  }
+
+  .qanda-block__question-subtitle {
+    margin-bottom: var(--o3-spacing-4xs);
+  }
+
+  .qanda-block__answer-header {
+    display: flex;
+  }
+
+  .qanda-block__comment-byline {
+    flex-grow: 1;
+  }
+
+  .qanda-block__comment-byline p {
+    margin: 0;
+    font-size: var(--o3-type-body-highlight-font-size);
+  }
+
+  .qanda-block__comment-text {
+    margin-top: var(--o3-spacing-s);
+  }
+
+  .qanda-block__comment-text p {
+    margin: 0;
+    font-size: var(--o3-type-body-base-font-size);
+  }
+
+  .qanda-block__text {
+    /* Ellipses for question and answer based on container size */
+    container-type: inline-size;
+
+    &.expander--collapsed p:not(:first-of-type) {
+      display: none;
+    }
+  }
+
+  /* Mobile will show 3 lines of text before ellipse */
+  @container (max-width: 490px) {
+    .qanda-block__text.expander--collapsed
+      .expander__text--multiline
+      > p:first-of-type {
+      display: block;
+      display: -webkit-box;
+      /* Note: This need to stay aligned with the JS for the expander */
+      line-clamp: 3;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      /* Without this the letter like `g` may be visually cut. 
+      To be tested with final font */
+      padding-bottom: 1px;
+    }
+  }
+
+  /* Above mobile it will show 1 line of text before ellipse */
+  @container (min-width: 491px) {
+    .qanda-block__text.expander--collapsed
+      .expander__text--multiline
+      > p:first-of-type {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+}
+
+/* Inlined from ../components/QuestionForm/style.scss */
+.qanda-container {
+  .question-form__displayname-input {
+    gap: var(--o3-spacing-3xs, 12px);
+
+    .question-form__displayname__title {
+      font-size: var(--o3-type-body-highlight-font-size, 16px);
+      font-weight: 700px;
+    }
+
+    /* this is a temp hack as this styling is consistent with o3-form but is not in o-forms */
+    .question-form__displayname__input {
+      margin-top: 0;
+
+      .question-form__displayname__input__field {
+        padding: var(--o3-spacing-3xs, 12px) var(--o3-spacing-2xs, 16px);
+      }
+
+      &.o-forms-input--invalid {
+        .question-form__displayname__input__field {
+          color: var(--o3-color-use-case-body-text, #33302e);
+          border-radius: 2px;
+          border: 1.5px solid var(--o3-color-use-case-error, #c00);
+          background: var(
+            --o3-color-use-case-error-background,
+            rgba(204, 0, 0, 0.06)
+          );
+        }
+      }
+    }
+
+    .question-form__displayname__input__error {
+      padding-top: var(--o3-spacing-3xs, 12px);
+      margin-top: 0;
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
+      align-self: stretch;
+      color: var(--o3-color-use-case-error, #c00);
+    }
+  }
+
+  .question-form__question__input {
+    margin-bottom: var(--o3-spacing-4xs, 8px);
+  }
+}
+
+/* Inlined from ../components/Stream/styles.css */
+@import '@financial-times/o3-foundation/css/core.css';
+
+.qanda-container {
+  .qanda__stream {
+    margin-top: var(--o3-spacing-l);
+  }
+
+  .qanda__stream-title {
+    margin: 0 0 var(--o3-spacing-s);
+  }
+
+  .qanda__stream-loader {
+    align-self: center;
+  }
+
+  .qanda__blocks-container {
+    max-width: 1220px;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--o3-spacing-l);
+    margin-bottom: var(--o3-spacing-l);
+  }
+}
+
+/* Inlined from ../components/MessageBox/styles.css */
+@import '@financial-times/o3-button/css/core.css';
+
+.qanda-container {
+  .message-box__container {
+    width: 100%;
+    text-align: left;
+  }
+
+  .message-box__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--o3-spacing-4xs);
+  }
+
+  .message-box__content-link {
+    color: var(--o3-color-use-case-body-text);
+    text-decoration-color: var(--o3-color-use-case-body-text);
+  }
+}
+
+
+@include oForms(
+  $opts: (
+    'elements': (
+      'text',
+      'checkbox',
+      'textarea',
+    ),
+    'features': (
+      'disabled',
+      'inline',
+    ),
+  )
+);
+
+@include oLabels(
+  $opts: (
+    'indicators': (
+      'status': (
+        'live',
+      ),
+    ),
+  )
+);
+
+@include oMessage(
+  $opts: (
+    'types': (
+      'alert',
+      'notice',
+    ),
+    'states': (
+      'error',
+      'inform',
+      'success',
+    ),
+  )
+);
+
+@include oMessageAddState(
+  $name: 'survey',
+  $opts: (
+    'background-color': 'o3-color-palette-black-5',
+    'foreground-color': 'o3-color-palette-slate',
+    'text-align': 'left',
+  ),
+  $types: (
+    'action',
+  )
+);
+
+.qanda-container {
+  body {
+    margin: 0;
+    font-family: Georgia, serif;
+    background-color: $app-bg-color;
+    color: $app-text-color;
+    text-align: left;
+  }
+
+  .qanda-block {
+    font-family: Georgia, serif;
+    text-align: left;
+  }
+
+  h1 {
+    color: $app-header-color;
+    font-size: 2.5rem;
+  }
+
+  p {
+    font-size: 1.2rem;
+    margin-top: 10px;
+  }
+
+  .qanda-block__answer__author-opinion-icon {
+    @include oIconsContent(
+      $icon-name: 'speech-left',
+      $color: oColorsByName('oxford'),
+      $size: 44
+    );
+
+    background-color: var(--o3-color-palette-wheat);
+    border-radius: 50%;
+  }
+}