@ostack.tech/ui-kform 0.1.0

package/scss/components/FormPages/_FormPages.scss

@@ -0,0 +1,288 @@
+@use "sass:color";
+@use "sass:map";
+@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+@use "FormPages-variables" as *;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}form-pages {
+  $form-pages: &;
+  display: flex;
+  justify-content: stretch;
+  height: 100%;
+
+  // Sidebar layout
+  &__navigation[data-navigation-mode="sidebar"] {
+    flex-shrink: 0;
+    width: $form-pages-sidebar-width;
+    min-height: calc(
+      var(--#{$prefix}form-app-min-height) - var(--#{$prefix}top-bar-height)
+    );
+    margin-bottom: calc(var(--#{$prefix}bottom-panel-height) * -1);
+    border-radius: $form-pages-sidebar-border-radius;
+
+    background-color: $form-pages-sidebar-background-color;
+    border-right: $form-pages-sidebar-border-width solid
+      $form-pages-sidebar-border-color;
+
+    @include ostack-ui.media-breakpoint-up(xl) {
+      width: $form-pages-sidebar-width-xl;
+    }
+  }
+
+  &__sidebar {
+    position: sticky;
+    top: var(--#{$prefix}top-bar-height);
+    z-index: $form-pages-sidebar-z-index;
+
+    max-height: calc(100dvh - var(--#{$prefix}top-bar-height));
+    overflow: auto;
+  }
+
+  &__sidebar-item-content {
+    display: flex;
+    align-items: center;
+  }
+
+  &__sidebar-item-code {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    min-width: $form-pages-sidebar-item-code-min-size;
+    min-height: $form-pages-sidebar-item-code-min-size;
+    margin-right: $form-pages-sidebar-item-code-margin-x;
+    padding: $form-pages-sidebar-item-code-padding;
+    border-radius: $form-pages-sidebar-item-code-border-radius;
+
+    font-size: $form-pages-sidebar-item-code-font-size;
+    line-height: $form-pages-sidebar-item-code-line-height;
+    font-weight: $form-pages-sidebar-item-code-font-weight;
+    background-color: $form-pages-sidebar-item-code-background-color;
+    color: $form-pages-sidebar-item-code-color;
+
+    @include ostack-ui.accessible-transition();
+
+    &[data-selected] {
+      background-color: $form-pages-sidebar-item-code-selected-background-color;
+      color: $form-pages-sidebar-item-code-selected-color;
+    }
+
+    &[data-status] {
+      background-color: $form-pages-sidebar-item-code-status-background-color;
+      color: $form-pages-sidebar-item-code-status-color;
+    }
+  }
+
+  // Select layout
+  &[data-navigation-mode="select"] {
+    flex-direction: column;
+  }
+
+  &__navigation[data-navigation-mode="select"] {
+    position: sticky;
+    top: var(--#{$prefix}top-bar-height);
+    z-index: $form-pages-select-z-index;
+    box-shadow: $form-pages-select-box-shadow;
+  }
+
+  &__select-container[data-variant="default"] {
+    border-radius: 0;
+    border: 0;
+    background-color: var(--#{ostack-ui.$prefix}primary-9);
+    background-image: none;
+
+    &[data-focused] {
+      box-shadow: inset 0 0 0 2px var(--#{ostack-ui.$prefix}neutral-a12);
+    }
+  }
+
+  &__select[data-variant="default"] {
+    padding-top: calc(ostack-ui.spacing(2) - 2px);
+    padding-bottom: ostack-ui.spacing(2);
+    height: auto;
+    border-radius: 0 !important;
+
+    font-weight: ostack-ui.$font-weight-bold;
+    font-size: ostack-ui.$font-size-md;
+    color: var(--#{ostack-ui.$prefix}background-color);
+
+    @include ostack-ui.accessible-transition();
+  }
+
+  &__select-value > span,
+  &__select-option > span {
+    display: flex;
+    align-items: center;
+  }
+
+  &__select-popover {
+    min-width: 0;
+    width: calc(100dvw - ostack-ui.spacing(1));
+  }
+
+  &__select-option-code {
+    $code-size: 30px;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    min-width: $code-size;
+    min-height: $code-size;
+    margin-right: ostack-ui.spacing(3);
+    padding: ostack-ui.spacing(0.5) ostack-ui.spacing(1);
+    border-radius: ostack-ui.$control-code-border-radius;
+
+    font-size: var(--#{ostack-ui.$prefix}font-size-sm);
+    line-height: var(--#{ostack-ui.$prefix}line-height-sm);
+    font-weight: ostack-ui.$font-weight-bold;
+    background-color: rgba(255, 255, 255, 0.6);
+    color: var(--#{ostack-ui.$prefix}primary-9);
+
+    @include ostack-ui.accessible-transition();
+
+    #{$form-pages}__select-value &,
+    #{$form-pages}__select-option[data-state="checked"] &:not([data-status]) {
+      background-color: rgba(255, 255, 255, 0.25);
+      color: var(--#{ostack-ui.$prefix}background-color);
+    }
+
+    &[data-status] {
+      background-color: var(--#{ostack-ui.$prefix}accent-9);
+      color: var(--#{ostack-ui.$prefix}accent-contrast);
+    }
+  }
+
+  &__select-arrow {
+    color: var(--#{ostack-ui.$prefix}background-color);
+  }
+
+  &__page {
+    flex: 1;
+    min-width: 0;
+    min-height: calc(
+      var(--#{$prefix}form-app-min-height) - var(
+          --#{$prefix}top-bar-height
+        ) - var(--#{$prefix}form-pages-navigation-select-height) - var(
+          --#{$prefix}bottom-panel-height
+        )
+    );
+    background-color: var(--#{ostack-ui.$prefix}background-color);
+  }
+
+  &__page-header {
+    position: sticky;
+    top: var(--#{$prefix}top-bar-height);
+    z-index: ostack-ui.$z-index-sticky + 1;
+
+    display: flex;
+    align-items: center;
+    padding: ostack-ui.spacing(2) ostack-ui.spacing(4);
+    border-bottom: 1px solid var(--#{ostack-ui.$prefix}primary-3);
+    background-color: var(--#{ostack-ui.$prefix}background-color);
+  }
+
+  // Hide page header in small screens when navigation is present
+  @include ostack-ui.media-breakpoint-down(sm) {
+    &__navigation + &__page {
+      & > #{$form-pages}__page-header {
+        background-color: transparent;
+        padding-left: ostack-ui.spacing(2.5);
+        padding-right: ostack-ui.spacing(2.5);
+        overflow: hidden;
+
+        &:not([data-has-popovers]) {
+          padding: 0;
+          border: 0;
+        }
+
+        & > #{$form-pages}__page-code,
+        & > #{$form-pages}__page-title {
+          display: none;
+        }
+      }
+
+      & > #{$form-pages}__page-content {
+        top: calc(
+          var(--#{$prefix}top-bar-height) +
+            var(--#{$prefix}form-pages-navigation-select-height)
+        );
+      }
+    }
+  }
+
+  &__page-code {
+    $code-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: $code-size;
+    min-width: $code-size;
+    margin-right: ostack-ui.spacing(2);
+    border-radius: ostack-ui.$control-code-border-radius;
+    padding: ostack-ui.spacing(0.5) ostack-ui.spacing(1);
+
+    background-color: var(--#{ostack-ui.$prefix}primary-3);
+    color: var(--#{ostack-ui.$prefix}primary-9);
+    font-size: ostack-ui.$font-size-sm;
+    line-height: ostack-ui.$line-height-sm;
+    font-weight: ostack-ui.$font-weight-bold;
+
+    @include ostack-ui.accessible-transition();
+
+    &[data-status] {
+      background-color: var(--#{ostack-ui.$prefix}accent-9);
+      color: var(--#{ostack-ui.$prefix}accent-contrast);
+    }
+  }
+
+  &__page-title {
+    margin: 0;
+    color: var(--#{ostack-ui.$prefix}primary-9);
+    font-size: ostack-ui.$font-size-md;
+    line-height: ostack-ui.$line-height-md;
+    font-weight: ostack-ui.$font-weight-bold;
+
+    &:not(:last-child) {
+      margin-right: ostack-ui.spacing(4);
+    }
+  }
+
+  &__page-header-popovers {
+    margin-left: auto;
+    margin-right: ostack-ui.spacing(-0.5);
+  }
+
+  &__page-helper-button,
+  &__page-issues-popover-button {
+    margin-top: ostack-ui.spacing(-3) !important;
+    margin-bottom: ostack-ui.spacing(-3) !important;
+    margin-right: ostack-ui.spacing(-1.5) !important;
+  }
+
+  &__page-helper-popover {
+    max-width: min(
+      #{ostack-ui.$container-md-max-width},
+      var(--radix-popover-content-available-width)
+    );
+    max-height: min(600px, var(--radix-popover-content-available-height));
+    padding: ostack-ui.spacing(1) ostack-ui.spacing(2);
+  }
+
+  &__page-content {
+    position: sticky;
+    top: calc(
+      var(--#{$prefix}top-bar-height) +
+        var(--#{$prefix}form-pages-page-header-height)
+    );
+    z-index: ostack-ui.$z-index-sticky;
+
+    padding: ostack-ui.spacing(4);
+
+    @include ostack-ui.media-breakpoint-up(sm) {
+      padding-bottom: calc(
+        var(--#{$prefix}bottom-panel-height) + ostack-ui.spacing(4)
+      );
+      margin-bottom: calc(var(--#{$prefix}bottom-panel-height) * -1);
+    }
+  }
+}

package/scss/components/IssueMessages/_IssueMessages.scss

@@ -0,0 +1,13 @@
+@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}issue-messages {
+  &__issue-code {
+    font-style: italic;
+    opacity: 0.9;
+
+    &::before {
+      content: " ";
+    }
+  }
+}

package/scss/components/IssuesPanel/_IssuesPanel-variables.scss

@@ -0,0 +1,82 @@
+@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+
+$issues-panel-margin-x: ostack-ui.spacing(4) !default;
+$issues-panel-padding-y: ostack-ui.spacing(3) !default;
+$issues-panel-padding-x: ostack-ui.spacing(4) !default;
+$issues-panel-z-index: ostack-ui.$z-index-sticky + 1 !default;
+
+$issues-panel-border-radius: ostack-ui.$card-border-radius
+  ostack-ui.$card-border-radius 0 0 !default;
+$issues-panel-border-width: 1px 1px 0 1px !default;
+$issues-panel-stuck-border-radius: null !default;
+$issues-panel-stuck-border-width: null !default;
+
+$issues-panel-border-radius-xs: 0 !default;
+$issues-panel-border-width-sm: 1px 0 0 0 !default;
+$issues-panel-stuck-border-radius-xs: null !default;
+$issues-panel-stuck-border-width-sm: null !default;
+
+// Issues panel header
+$issues-panel-header-padding-x: $issues-panel-padding-x !default;
+$issues-panel-header-padding-bottom: ostack-ui.spacing(2) !default;
+$issues-panel-header-z-index: ostack-ui.$z-index-sticky !default;
+$issues-panel-header-stuck-shadow-size: 8px !default;
+$issues-panel-header-stuck-shadow-color: rgba(0, 0, 0, 0.1) !default;
+$issues-panel-header-stuck-shadow-gradient:
+  $issues-panel-header-stuck-shadow-color, transparent !default;
+
+// Issues panel icon
+$issues-panel-icon-margin-y: ostack-ui.spacing(5) !default;
+$issues-panel-icon-margin-x: ostack-ui.spacing(3) !default;
+
+// Issues panel title
+$issues-panel-title-font-size: ostack-ui.$font-size-md !default;
+$issues-panel-title-line-height: ostack-ui.$line-height-md !default;
+
+$issues-panel-title-font-size-sm: ostack-ui.$font-size-sm !default;
+$issues-panel-title-line-height-sm: null !default;
+
+// Issues panel breadcrumbs
+$issues-panel-breadcrumb-item-margin-x: ostack-ui.spacing(1.5) !default;
+
+// Issues panel controls
+$issues-panel-controls-margin-y: ostack-ui.spacing(3.5) !default;
+$issues-panel-controls-margin-left: ostack-ui.spacing(4) !default;
+$issues-panel-action-group-margin-x: ostack-ui.spacing(3) !default;
+$issues-panel-action-margin-x: ostack-ui.spacing(1) !default;
+$issues-panel-validating-spinner-margin-x: ostack-ui.spacing(2) !default;
+$issues-panel-pagination-font-size: ostack-ui.$font-size-xs !default;
+$issues-panel-pagination-line-height: ostack-ui.$line-height-xs !default;
+$issues-panel-pagination-font-weight: ostack-ui.$font-weight-bold !default;
+
+// Issues panel body
+$issues-panel-body-padding-x: $issues-panel-padding-x !default;
+$issues-panel-body-padding-bottom: ostack-ui.spacing(3) !default;
+
+// Issues panel messages
+$issues-panel-messages-min-height: 190px !default;
+$issues-panel-messages-max-height: 260px !default;
+
+// Issues panel issues list title
+$issues-panel-issues-list-title-margin-bottom: ostack-ui.spacing(2) !default;
+$issues-panel-issues-list-title-font-size: var(
+  --#{ostack-ui.$prefix}font-size-sm
+) !default;
+$issues-panel-issues-list-title-line-height: var(
+  --#{ostack-ui.$prefix}line-height-sm
+) !default;
+
+// Issues panel issues list
+$issues-panel-issues-list-margin-bottom: ostack-ui.spacing(4) !default;
+$issues-panel-issues-list-padding-left: ostack-ui.spacing(4) !default;
+
+// Issues panel issue
+$issues-panel-issue-margin-y: ostack-ui.spacing(2) !default;
+$issues-panel-issue-font-size: var(--#{ostack-ui.$prefix}font-size-xs) !default;
+$issues-panel-issue-line-height: var(
+  --#{ostack-ui.$prefix}line-height-xs
+) !default;
+
+// Issues panel issue code
+$issues-panel-issue-code-font-style: italic !default;
+$issues-panel-issue-code-opacity: 0.9 !default;

package/scss/components/IssuesPanel/_IssuesPanel.scss

@@ -0,0 +1,196 @@
+@use "sass:color";
+@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+@use "IssuesPanel-variables" as *;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}issues-panel {
+  $issues-panel: &;
+  $card: ".#{ostack-ui.$prefix}card";
+
+  border-radius: $issues-panel-border-radius;
+  pointer-events: auto;
+  overflow: auto;
+
+  // Override card styles
+  &#{$card} {
+    padding: 0;
+    border-width: $issues-panel-border-width;
+  }
+
+  @include ostack-ui.media-breakpoint-down(sm) {
+    border-radius: $issues-panel-border-radius-xs;
+    // Override card styles
+    &#{$card} {
+      border-width: $issues-panel-border-width-sm;
+    }
+  }
+
+  &__container {
+    position: sticky;
+    bottom: 0;
+    z-index: $issues-panel-z-index;
+    display: flex;
+    justify-content: center;
+    pointer-events: none;
+
+    @include ostack-ui.accessible-animation(
+      ostack-ui.$animation-fade-in
+        var(--#{ostack-ui.$prefix}animation-fade-duration)
+        var(--#{ostack-ui.$prefix}animation-fade-timing-function)
+    );
+  }
+
+  &__container[data-stuck] & {
+    border-radius: $issues-panel-stuck-border-radius;
+    // Override card styles
+    &#{$card} {
+      border-width: $issues-panel-stuck-border-width;
+    }
+
+    @include ostack-ui.media-breakpoint-down(sm) {
+      border-radius: $issues-panel-stuck-border-radius-xs;
+      // Override card styles
+      &#{$card} {
+        border-width: $issues-panel-stuck-border-width-sm;
+      }
+    }
+  }
+
+  @include ostack-ui.media-breakpoint-up(sm) {
+    width: calc(100% - $issues-panel-margin-x * 2);
+    padding: $issues-panel-padding-y $issues-panel-padding-x;
+
+    &__container {
+      padding-left: var(--#{$prefix}left-sidebar-width);
+    }
+  }
+
+  &--messages {
+    min-height: $issues-panel-messages-min-height;
+    max-height: $issues-panel-messages-max-height;
+  }
+
+  &__header {
+    display: block;
+    padding: 0 $issues-panel-header-padding-x
+      $issues-panel-header-padding-bottom !important;
+
+    // Sticky
+    position: sticky;
+    top: 0;
+    z-index: $issues-panel-header-z-index;
+
+    &[data-stuck]::before {
+      content: "";
+      pointer-events: none;
+      position: absolute;
+      width: 100%;
+      height: $issues-panel-header-stuck-shadow-size;
+      left: 0;
+      bottom: -$issues-panel-header-stuck-shadow-size;
+      background-image: linear-gradient(
+        180deg,
+        $issues-panel-header-stuck-shadow-gradient
+      );
+    }
+  }
+
+  &--summary &__header {
+    padding-bottom: 0 !important;
+  }
+
+  &__body {
+    padding: 0 $issues-panel-body-padding-x $issues-panel-body-padding-bottom !important;
+  }
+
+  &__loading-spinner,
+  &__icon {
+    display: inline-block;
+    vertical-align: middle;
+    margin: $issues-panel-icon-margin-y $issues-panel-icon-margin-x
+      $issues-panel-icon-margin-y 0;
+  }
+
+  &__action:not(:first-child) {
+    margin-left: $issues-panel-action-margin-x;
+  }
+
+  &__title {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: $issues-panel-title-font-size !important;
+    line-height: $issues-panel-title-line-height !important;
+
+    @include ostack-ui.media-breakpoint-down(sm) {
+      font-size: $issues-panel-title-font-size-sm !important;
+      line-height: $issues-panel-title-line-height-sm !important;
+    }
+  }
+
+  &__breadcrumb-item:not(:last-child) {
+    &::after {
+      content: "›";
+      margin: 0 $issues-panel-breadcrumb-item-margin-x;
+    }
+  }
+
+  &__controls {
+    float: right;
+    display: flex;
+    align-items: center;
+    margin: $issues-panel-controls-margin-y 0 $issues-panel-controls-margin-y
+      $issues-panel-controls-margin-left;
+  }
+
+  &__validating-spinner {
+    margin-right: $issues-panel-validating-spinner-margin-x;
+  }
+
+  &__pagination {
+    flex-shrink: 0;
+    font-size: $issues-panel-pagination-font-size;
+    line-height: $issues-panel-pagination-line-height;
+    font-weight: $issues-panel-pagination-font-weight;
+    text-align: right;
+  }
+
+  &__pagination,
+  &__focus,
+  &__last {
+    margin-right: $issues-panel-action-group-margin-x;
+  }
+
+  &__close-button {
+    margin-left: auto;
+  }
+
+  &__issues-list-title {
+    margin: 0 0 $issues-panel-issues-list-title-margin-bottom;
+    font-size: $issues-panel-issues-list-title-font-size !important;
+    line-height: $issues-panel-issues-list-title-line-height !important;
+  }
+
+  &__issues-list {
+    margin: 0 0 $issues-panel-issues-list-margin-bottom;
+    padding-left: $issues-panel-issues-list-padding-left;
+  }
+
+  &__issue,
+  &__resolved-message {
+    font-size: $issues-panel-issue-font-size;
+    line-height: $issues-panel-issue-line-height;
+  }
+
+  &__issue:not(:first-child) {
+    margin-top: $issues-panel-issue-margin-y;
+  }
+
+  &__issue-code {
+    font-style: $issues-panel-issue-code-font-style;
+    opacity: $issues-panel-issue-code-opacity;
+
+    &::before {
+      content: " ";
+    }
+  }
+}

package/scss/components/TableControl/_TableControl.scss

@@ -0,0 +1,21 @@
+@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}table-control {
+  & > &__add-row-trigger {
+    float: right;
+    margin-bottom: ostack-ui.spacing(2);
+    margin-left: ostack-ui.spacing(2);
+  }
+
+  & > &__add-row-trigger + &__content-container {
+    // Top table content margin unneeded when the trigger is placed before it
+    margin-top: 0;
+  }
+
+  & > &__content-container ~ &__add-row-trigger {
+    // Bottom margin underneath the table content should be removed due to the
+    // clearfix
+    margin-bottom: 0;
+  }
+}

package/scss/components/TopBar/_TopBar.scss

@@ -0,0 +1,52 @@
+@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}top-bar {
+  $annexes-menu-container: ".#{$prefix}annexes__menu-container";
+  $annexes-tab-list-root: ".#{$prefix}annexes__tab-list-root";
+  $annexes-tab: ".#{$prefix}annexes__tab";
+
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+
+  position: sticky;
+  top: 0;
+  z-index: ostack-ui.$z-index-sticky + 3;
+
+  padding: ostack-ui.spacing(1) ostack-ui.spacing(1) 0;
+  border-bottom: 2px solid ostack-ui.$primary-9;
+
+  background-color: var(--#{ostack-ui.$prefix}background-color);
+
+  // Deal with double border (since the annex manager already comes with a
+  // bottom border). At first we had a simple `margin-bottom: -2px` on the annex
+  // manager, but that causes off-by-one pixel alignment issues in scaled
+  // screens (e.g. 125% browser zoom, or 125% screen scaling in Windows), so we
+  // instead remove the border completely from the manager, which forces us to
+  // override the focus styles of the tabs to show a bottom border.
+  & #{$annexes-menu-container},
+  & #{$annexes-tab-list-root} {
+    box-shadow: none;
+    margin-bottom: 0;
+  }
+
+  & #{$annexes-tab}:focus-visible:not(:disabled):not([data-disabled]) {
+    box-shadow:
+      inset -1px 0 0 0 ostack-ui.$neutral-12,
+      inset 0 1px 0 0 ostack-ui.$neutral-12,
+      inset 1px 0 0 0 ostack-ui.$neutral-12,
+      inset 0 -2px 0 ostack-ui.$neutral-12;
+
+    &[data-status] {
+      box-shadow:
+        inset -1px 0 0 0 ostack-ui.$neutral-12,
+        inset 1px 0 0 0 ostack-ui.$neutral-12,
+        inset 0 -2px 0 ostack-ui.$neutral-12;
+    }
+  }
+
+  &__actions {
+    margin: 0 0 ostack-ui.spacing(1) auto;
+  }
+}

package/scss/index.scss

@@ -0,0 +1,11 @@
+@forward "utils";
+
+// Components
+@forward "components/Annexes/Annexes";
+@forward "components/FileControl/FileControl";
+@forward "components/FormApp/FormApp";
+@forward "components/FormPages/FormPages";
+@forward "components/IssueMessages/IssueMessages";
+@forward "components/IssuesPanel/IssuesPanel";
+@forward "components/TableControl/TableControl";
+@forward "components/TopBar/TopBar";

package/scss/scss/_base-variables.scss

@@ -0,0 +1,5 @@
+@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+
+// Library's prefix
+$prefix-suffix: "kform-" !default;
+$prefix: #{ostack-ui.$prefix}#{$prefix-suffix};