@oslokommune/punkt-css 15.0.4 → 15.2.0

package/dist/scss/components/_fileupload.scss

@@ -0,0 +1,830 @@
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/mixins/typography';
+
+$-module-name: 'pkt-fileupload';
+
+pkt-fileupload,
+.pkt-fileupload {
+  display: block;
+  width: fit-content;
+  --fg-color: var(--pkt-color-text-body-default);
+
+  // Visually hide file input but keep it accessible for screen readers
+  input[type='file'] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  // ============================================
+  // COMPONENT MODIFIERS
+  // ============================================
+
+  &--full-width {
+    width: 100%;
+
+    .pkt-fileupload__drop-zone,
+    .pkt-fileupload__queue-display,
+    .pkt-fileupload__queue-display__item {
+      width: 100%;
+    }
+  }
+
+  &--error {
+    .pkt-fileupload__drop-zone {
+      border-color: var(--pkt-color-brand-red-700);
+    }
+
+    .pkt-alert--error.pkt-fileupload__error-alert {
+      margin-bottom: 1rem;
+      width: 100%;
+    }
+  }
+
+  &--disabled {
+    pointer-events: none;
+    --fg-color: var(--pkt-color-text-action-disabled);
+
+    .pkt-fileupload__drop-zone__placeholder__icon svg {
+      --fg-color: var(--pkt-color-text-action-disabled);
+    }
+
+    p,
+    labe,
+    button,
+    input[type='text'] {
+      color: var(--pkt-color-text-action-disabled);
+    }
+
+    .pkt-fileupload__drop-zone {
+      cursor: not-allowed;
+      border-color: var(--pkt-color-input-border-disabled);
+      background: var(--pkt-color-input-background-disabled);
+
+      &__placeholder__title,
+      &__placeholder__title__open-file-dialog {
+        color: var(--pkt-color-text-action-disabled);
+        text-decoration: underline;
+      }
+    }
+  }
+
+  // ============================================
+  // DROP ZONE
+  // ============================================
+
+  &__drop-zone {
+    border: 1px dashed var(--pkt-color-input-border-normal);
+    color: var(--pkt-color-text-action-normal);
+    cursor: pointer;
+    padding: 2rem;
+    text-align: center;
+    margin-bottom: 1rem;
+    font-size: 14px;
+
+    &:hover {
+      border-color: var(--pkt-color-input-border-hover);
+    }
+
+    &:active {
+      background-color: var(--pkt-color-surface-subtle-pale-blue);
+      border-color: var(--pkt-color-input-border-active);
+
+      [data-mode='dark'] & {
+        background-color: var(--pkt-color-surface-strong-dark-blue);
+      }
+    }
+
+    &:focus-within {
+      border-color: var(--pkt-color-input-border-active);
+      outline: 2px solid var(--pkt-color-border-states-focus);
+      outline-offset: 0;
+    }
+
+    &:hover &__placeholder__icon svg,
+    &:focus-within &__placeholder__icon svg {
+      --fg-color: var(--pkt-color-text-action-hover);
+    }
+
+    &:hover &__placeholder__title,
+    &:hover &__placeholder__title__open-file-dialog,
+    &:focus-within &__placeholder__title,
+    &:focus-within &__placeholder__title__open-file-dialog {
+      color: var(--pkt-color-text-action-hover);
+    }
+
+    &--drag-active {
+      background-color: var(--pkt-color-surface-subtle-pale-blue);
+      border-color: var(--pkt-color-input-border-active);
+    }
+
+    &__placeholder {
+      text-align: left;
+      display: grid;
+      grid-template-areas:
+        'left top'
+        'left bottom';
+      grid-template-columns: 24px auto;
+      grid-template-rows: auto auto;
+      grid-column-gap: 1rem;
+      width: fit-content;
+      margin: auto;
+      line-height: 22px;
+      pointer-events: none;
+
+      p {
+        margin: 0;
+      }
+
+      &__icon {
+        width: 24px;
+        height: 24px;
+        grid-area: left;
+        align-self: center;
+        justify-self: center;
+
+        svg {
+          --fg-color: var(--pkt-color-input-border-normal);
+        }
+      }
+
+      &__title {
+        @include typography.get-text('pkt-txt-14-light');
+        grid-area: top;
+
+        &__open-file-dialog {
+          pointer-events: auto;
+          cursor: pointer;
+          color: var(--pkt-color-text-action-normal);
+          text-decoration: underline;
+          background: none;
+          border: none;
+          padding: 0;
+          font: inherit;
+
+          &:hover {
+            color: var(--pkt-color-text-action-hover);
+          }
+
+          &:focus-visible {
+            outline: 2px solid var(--pkt-color-border-states-focus);
+            outline-offset: 2px;
+          }
+        }
+      }
+
+      &__formats {
+        @include typography.get-text('pkt-txt-12-light');
+        color: var(--pkt-color-text-placeholder);
+        grid-area: bottom;
+      }
+    }
+  }
+
+  // ============================================
+  // QUEUE DISPLAY
+  // ============================================
+
+  &__queue-display {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 1rem;
+    row-gap: map.get(variables.$spacing, 'size-8');
+
+    &__item__rename-input {
+      // Bruker <input>, og ikke <PktInput> for å ikke måtte resette masse stiler fra PktInput. Så må settes manuelt.
+      border: 2px solid var(--pkt-color-input-border-normal);
+      color: var(--pkt-color-text-body-default);
+      background-color: var(--pkt-color-background-default);
+      border-radius: 0;
+      margin: 0;
+      width: 100%;
+
+      &:hover {
+        border-color: var(--pkt-color-input-border-hover);
+      }
+
+      &:focus-visible,
+      &:focus,
+      &:active {
+        border-color: var(--pkt-color-input-border-active);
+      }
+    }
+
+    // Thumbnail grid layout (when thumbnails are present)
+    // In-progress and error items are always full width (not in grid)
+    // TODO: Find a fallback for browsers that don't support :has()
+    // TODO: pakk den inn i en :is slik at filen ikke brekkes
+    // TODO: husk å sjekke med browserstack, hvordan stilene brekker for thumbnail viewet.
+    &:has(.pkt-fileupload__queue-display__item__thumbnail) {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+      gap: 1rem;
+
+      // Successfully uploaded thumbnails become grid items
+      .pkt-fileupload__queue-display__item:has(.pkt-fileupload__queue-display__item__thumbnail) {
+        border: 2px solid var(--pkt-color-border-subtle);
+        display: flex;
+        flex-direction: column;
+        padding: map.get(variables.$spacing, 'size-8');
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      // In-progress items span full width
+      .pkt-fileupload__queue-display__item--in-progress {
+        grid-column: 1 / -1;
+      }
+
+      // Error items span full width
+      .pkt-fileupload__queue-display__item--error {
+        grid-column: 1 / -1;
+      }
+
+      .pkt-fileupload__queue-display__item__thumbnail {
+        width: 100%;
+        min-width: 0; // Allow truncation to work
+      }
+
+      .pkt-fileupload__queue-display__item__actions {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        padding-left: 0;
+        align-items: flex-start;
+        gap: 0.5rem;
+      }
+    }
+
+    // ----------------------------------------
+    // Queue Item (base styles)
+    // ----------------------------------------
+
+    &__item {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      align-items: center;
+      gap: 0.5rem;
+      padding: map.get(variables.$spacing, 'size-16');
+      border: 2px solid var(--pkt-color-border-subtle);
+
+      @include bp('tablet-big-up') {
+        grid-template-columns: auto 1fr auto auto;
+        align-items: end;
+      }
+
+      // ----------------------------------------
+      // Queue Item Elements
+      // ----------------------------------------
+
+      &__icon {
+        grid-column: 1;
+        grid-row: 1;
+        align-self: center;
+        justify-self: center;
+        color: var(--pkt-color-text-subtle);
+      }
+
+      &__title {
+        @include typography.get-text('pkt-txt-16-light');
+        grid-column: 2;
+        grid-row: 1;
+        min-width: 0;
+        max-width: 100%;
+        overflow: hidden; // Truncate component clamps internally; this prevents layout overflow
+        white-space: normal;
+        align-self: center;
+        margin: 0;
+      }
+
+      &__actions {
+        grid-column: 1/3;
+        grid-row: 2;
+        align-self: center;
+        justify-self: flex-start;
+        display: flex;
+        gap: 1rem;
+
+        @include bp('tablet-big-up') {
+          justify-self: end;
+          padding-left: 1rem;
+          grid-column: 4;
+          grid-row: 1;
+        }
+      }
+
+      &__filesize {
+        @include typography.get-text('pkt-txt-12');
+        color: var(--pkt-color-text-placeholder);
+        grid-column: 3;
+        grid-row: 1;
+      }
+
+      &__cancel-button {
+        @include typography.get-text('pkt-txt-14-light');
+        cursor: pointer;
+        color: var(--pkt-color-text-action-normal);
+        text-decoration: underline;
+        background: none;
+        border: none;
+        padding: 0;
+        color: var(--pkt-color-text-body-dark);
+
+        &:hover {
+          color: var(--pkt-color-text-action-hover);
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--pkt-color-border-states-focus);
+          outline-offset: 2px;
+        }
+      }
+
+      &__operation {
+        @include typography.get-text('pkt-txt-14-light');
+        cursor: pointer;
+        color: var(--pkt-color-text-action-normal);
+        text-decoration: underline;
+        background: none;
+        border: none;
+        padding: 0;
+
+        &:hover {
+          color: var(--pkt-color-text-action-hover);
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--pkt-color-border-states-focus);
+          outline-offset: 2px;
+        }
+      }
+
+      &__inline-ui {
+        grid-column: 2 / -1; // Span to end to fill space when actions are hidden
+        grid-row: 1;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        .pkt-input,
+        input[type='text'] {
+          flex: 1;
+          min-width: 0;
+          padding: 0 map.get(variables.$spacing, 'size-8');
+          border: 2px solid var(--pkt-color-input-border-normal);
+          font: inherit;
+
+          &:focus {
+            outline: none;
+            border-color: var(--pkt-color-input-border-active);
+          }
+        }
+
+        .pkt-btn {
+          height: map.get(variables.$spacing, 'size-32');
+        }
+      }
+
+      &__operation-content {
+        grid-column: 1 / -1;
+        grid-row: 2;
+        padding: 0.75rem 1rem;
+        background: var(--pkt-color-surface-default-gray);
+        margin-top: 0.5rem;
+
+        &:empty {
+          display: none;
+        }
+      }
+
+      &__expanded-operation-ui {
+        grid-column: 1 / -1;
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: flex-start;
+        gap: 0.5rem;
+      }
+
+      &__comment-label {
+        @include typography.get-text('pkt-txt-16-medium');
+      }
+
+      &__comment-input {
+        grid-column: 1/-1;
+        grid-row: 1;
+        width: 100%;
+        font: inherit;
+        @include typography.get-text('pkt-txt-14');
+
+        &:focus {
+          outline: none;
+          border-color: var(--pkt-color-input-border-active);
+        }
+
+        &::placeholder {
+          color: var(--pkt-color-text-placeholder);
+        }
+      }
+
+      &__comment {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        gap: 1rem;
+        color: var(--pkt-color-text-body-dark);
+
+        &__content {
+          flex: 1;
+        }
+
+        &__text {
+          @include typography.get-text('pkt-txt-16-light');
+          display: block;
+        }
+
+        &__time {
+          @include typography.get-text('pkt-txt-12-medium');
+          display: block;
+          margin-top: 0.25rem;
+          color: var(--pkt-color-text-subtle);
+        }
+
+        &__actions {
+          display: flex;
+          gap: 0.5rem;
+          flex-shrink: 0;
+
+          .pkt-icon svg {
+            --fg-color: var(--pkt-color-text-body-dark);
+          }
+        }
+
+        &__action {
+          background: none;
+          border: none;
+          padding: 0;
+          cursor: pointer;
+          color: var(--pkt-color-text-subtle);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &:hover {
+            color: var(--pkt-color-text-action-hover);
+          }
+
+          &:focus-visible {
+            outline: 2px solid var(--pkt-color-border-states-focus);
+            outline-offset: 2px;
+          }
+
+          .pkt-icon {
+            width: 12px;
+            height: 15px;
+          }
+        }
+      }
+
+      &__thumbnail {
+        min-width: 0;
+
+        &__image-wrapper {
+          position: relative;
+          display: block;
+          width: 100%;
+          height: max-content;
+          padding: 0;
+          border: 0;
+          background: none;
+          cursor: pointer;
+
+          img {
+            display: block;
+            width: 100%;
+            aspect-ratio: 1;
+            object-fit: cover;
+          }
+
+          &:hover,
+          &:focus-visible {
+            .pkt-fileupload__queue-display__item__thumbnail__expand-icon {
+              background-color: var(--pkt-color-text-action-hover);
+              svg {
+                --fg-color: var(--pkt-color-text-body-light);
+              }
+            }
+          }
+        }
+
+        &__expand-icon {
+          position: absolute;
+          top: 0.25rem;
+          right: 0.25rem;
+          width: 30px;
+          height: 30px;
+          z-index: 2;
+          background-color: var(--pkt-color-background-subtle);
+          pointer-events: none;
+          padding: 2px;
+        }
+
+        &__title {
+          @include typography.get-text('pkt-txt-14');
+          margin-top: 0.5rem;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          min-width: 0; // Required for text-overflow to work in flex containers
+        }
+      }
+
+      // ----------------------------------------
+      // Queue Item State Modifiers
+      // ----------------------------------------
+
+      &--canceled {
+        opacity: 0.6;
+      }
+
+      // Shared styles for transfer states
+      &--in-progress,
+      &--error {
+        border: none;
+        grid-template-columns: auto 1fr auto;
+        padding: 1rem;
+        row-gap: 0.5rem;
+        color: var(--pkt-color-text-body-dark);
+
+        .pkt-fileupload__queue-display__item__icon {
+          grid-column: 1;
+          grid-row: 1;
+
+          svg {
+            --fg-color: var(--pkt-color-text-body-dark);
+          }
+        }
+
+        .pkt-fileupload__queue-display__item__title {
+          @include typography.get-text('pkt-txt-16-medium');
+          grid-column: 2;
+          grid-row: 1;
+          margin: 0;
+        }
+
+        .pkt-fileupload__queue-display__item__filesize {
+          @include typography.get-text('pkt-txt-12-medium');
+          color: var(--pkt-color-text-subtle);
+          grid-column: 1 / 3;
+          grid-row: 3;
+        }
+
+        .pkt-fileupload__queue-display__item__cancel-button {
+          grid-column: 3;
+          grid-row: 1;
+          margin-left: 1rem;
+
+          &:hover {
+            color: var(--pkt-color-brand-warm-blue-1000);
+          }
+        }
+
+        .pkt-fileupload__queue-display__item__error-message {
+          @include typography.get-text('pkt-txt-12');
+          grid-column: 2;
+          grid-row: 2;
+          color: var(--pkt-color-text-default);
+        }
+
+        // Override progress bar wrapper styles
+        .pkt-progressbar__bar-wrapper {
+          height: map.get(variables.$spacing, 'size-4');
+          background-color: var(--pkt-color-surface-default-gray);
+        }
+      }
+
+      // Error state (indeterminate - no progress bar)
+      &--error {
+        background-color: var(--pkt-color-surface-default-faded-red);
+
+        .pkt-fileupload__queue-display__item__icon {
+          align-self: center;
+        }
+
+        // Error state with progress bar (determinate upload that failed)
+        &:has(.pkt-fileupload__queue-display__item__progress--error) {
+          background-color: var(--pkt-color-surface-default-faded-red);
+          grid-template-rows: auto auto auto;
+
+          .pkt-fileupload__queue-display__item__progress {
+            grid-column: 1 / -1;
+            grid-row: 2;
+            margin: 0;
+
+            // Override progress bar fill to red
+            .pkt-progressbar__bar {
+              background-color: var(--pkt-color-brand-red-1000);
+            }
+          }
+
+          .pkt-fileupload__queue-display__item__error-message {
+            grid-column: 2 / -1;
+            grid-row: 3;
+            text-align: right;
+          }
+        }
+      }
+
+      // In-progress state
+      &--in-progress {
+        background-color: var(--pkt-color-surface-default-light-blue);
+        grid-template-rows: auto auto auto;
+
+        .pkt-fileupload__queue-display__item__progress {
+          grid-column: 1 / -1;
+          grid-row: 2;
+          margin: 0;
+        }
+
+        .pkt-fileupload__queue-display__item__percentage {
+          @include typography.get-text('pkt-txt-12');
+          grid-column: 3;
+          grid-row: 3;
+          text-align: right;
+        }
+
+        .pkt-fileupload__queue-display__item__loading-text {
+          @include typography.get-text('pkt-txt-12');
+          grid-column: 2;
+          grid-row: 2;
+        }
+      }
+    }
+  }
+}
+
+// ============================================
+// WRAPPER INTEGRATION (InputWrapper)
+// ============================================
+
+.pkt-fileupload-wrapper {
+  .pkt-inputwrapper__fieldset {
+    margin-bottom: 0;
+  }
+
+  .pkt-inputwrapper__helptext {
+    margin-bottom: 0.5rem;
+  }
+}
+
+// ============================================
+// IMAGE PREVIEW MODAL
+// ============================================
+
+.pkt-fileupload__image-preview-modal {
+  // Reset padding from modal
+  .pkt-contents {
+    padding: 0;
+  }
+
+  // ============================================
+  // MODAL OVERRIDES to make it look like a lightbox!
+  // TODO: When we get an actual PktLightBox component, we can remove these overrides.
+  // For now, we base us on the PktModal component so we maintain the functionality and only override the styles.
+  // ============================================
+
+  .pkt-modal {
+    max-height: 100%;
+    max-width: 100%;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+
+    .pkt-modal {
+      &__wrapper {
+        max-height: 100%;
+
+        .pkt-modal__content {
+          padding: 0;
+        }
+      }
+
+      &__header {
+        text-align: left;
+      }
+
+      &__headingText {
+        line-height: 2rem; // sattt til 34px.
+        padding: 1rem 0 0 1.5rem;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        max-width: calc(100% - 3rem); // Leave space for close button
+        background-color: transparent;
+        color: var(--pkt-color-text-body-light);
+      }
+
+      &__container {
+        padding-top: 0;
+        background-color: transparent;
+      }
+
+      &__closeButton {
+        background-color: transparent;
+        .pkt-btn {
+          color: var(--pkt-color-text-body-light);
+
+          &:hover,
+          &:focus-visible {
+            color: var(--pkt-color-warm-blue-1000);
+          }
+        }
+      }
+    }
+
+    &::backdrop {
+      background-color: rgba(0, 0, 0, 0.85);
+    }
+  }
+}
+
+.pkt-fileupload__image-preview {
+  position: relative;
+  background-color: var(--pkt-color-surface-default);
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: 1fr auto;
+  grid-template-areas:
+    'prev content next'
+    '. counter .';
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+
+  &__content {
+    height: 75vh;
+    grid-area: prev-start / prev-start / next-end / next-end;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    min-width: 0;
+    max-height: 100%;
+  }
+
+  &__image {
+    max-width: 100%;
+    max-height: fit-content;
+    object-fit: contain;
+  }
+
+  &__nav {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: var(--pkt-color-background-subtle);
+    z-index: 2;
+
+    .pkt-button:hover,
+    .pkt-button:focus-visible {
+      background-color: var(--pkt-color-text-action-hover);
+    }
+
+    &--prev {
+      grid-area: prev;
+      margin-left: 0.5rem;
+    }
+    &--next {
+      grid-area: next;
+      margin-right: 0.5rem;
+    }
+
+    .pkt-icon {
+      width: 24px;
+      height: 24px;
+
+      &:hover,
+      &:focus-visible svg {
+        --fg-color: var(--pkt-color-text-body-light);
+      }
+    }
+  }
+
+  &__counter {
+    @include typography.get-text('pkt-txt-14-medium');
+    color: var(--pkt-color-text-body-light);
+    grid-area: counter;
+    justify-self: center;
+  }
+}