@kaizen/components 0.0.0-canary-test-exports-20231114054615 → 0.0.0-canary-bundle-size-check-20231115005811

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -0,0 +1,725 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/layout";
+@import "../../styles/utils/legacy/grid";
+@import "../../styles/utils/legacy/layout";
+@import "../../styles/utils/button-reset";
+@import "../../styles/utils/layers";
+@import "./mixins";
+@import "./variables";
+
+$title-block-margin-width-on-medium-and-small: 12px;
+$breadcrumb-circle-width: 48px;
+$breadcrumb-breakpoint-width: $layout-content-max-width +
+  $layout-content-side-margin * 2 + $breadcrumb-circle-width * 2.25;
+$title-block-separator-height: 0.1875rem;
+$tab-container-height-default: $ca-grid * 3;
+$tab-container-height-small: $ca-grid * 2.5;
+$tab-container-height-default-collapsed: 0;
+$tab-container-height-medium-and-small-collapsed: 0;
+
+/* stylelint-disable no-descending-specificity */
+.titleBlock {
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: $dt-color-background-color-default;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+
+  &.educationVariant {
+    background-color: $dt-color-background-color-eduction;
+  }
+
+  &.adminVariant {
+    background-color: $dt-color-background-color-admin;
+  }
+
+  @media print {
+    display: none;
+  }
+}
+
+.titleRow,
+.rowBelowSeparator {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.adminVariant .titleRow {
+  background-color: $color-white;
+}
+
+%titleBlockInner {
+  max-width: $layout-content-max-width;
+  margin: 0 $layout-content-side-margin;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+
+  @include title-block-medium-and-small {
+    margin: 0 $title-block-margin-width-on-medium-and-small;
+  }
+}
+
+.titleRowInner {
+  @extend %titleBlockInner;
+}
+
+.rowBelowSeparatorInner {
+  @extend %titleBlockInner;
+}
+
+.titleRowInnerContent {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  min-height: $ca-grid * 3.5;
+  justify-content: space-between;
+  border-bottom: $title-block-separator-height solid rgba($color-white-rgb, 0.1);
+
+  .educationVariant & {
+    border-bottom-color: rgba($color-purple-700-rgb, 0.2);
+  }
+
+  .adminVariant &,
+  .collapseNavigationArea & {
+    border-bottom-color: transparent;
+  }
+
+  @include title-block-medium-and-small {
+    border-bottom: none;
+  }
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+
+  // Applying width 100% when the title is *not* long and is followed by a subtitle
+  // causes misalignment of both.
+  @include title-block-under-1366 {
+    width: 100%;
+  }
+}
+
+.titleAndSubtitle {
+  display: flex;
+  align-items: center;
+  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+  z-index: $ca-z-index-dropdown; // this ensures the page switcher dropdown sits over nav tabs
+
+  .hasSubtitle & {
+    @include title-block-under-1366 {
+      transform: translateY(-0.3833em);
+    }
+  }
+
+  transform: translateY(-0.0833em);
+}
+
+.titleAndSubtitleInner {
+  display: flex;
+  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+
+  // TODO: removing .hasLongTitle here fixes the alignment on Performance story, but we should be able to not wrap subtitle.
+  .hasSubtitle.hasLongTitle.hasLongSubtitle & {
+    align-items: center;
+
+    @include title-block-under-1366 {
+      align-items: baseline;
+    }
+  }
+
+  .hasPageSwitcherSelect & {
+    @include title-block-medium-and-small {
+      align-items: normal;
+      flex-direction: column;
+      justify-content: space-between;
+      transform: translateY(calc(#{$ca-grid} / 3));
+    }
+  }
+
+  .hasSubtitle & {
+    align-items: baseline;
+    overflow: hidden;
+
+    @include title-block-under-1366 {
+      align-items: normal;
+      flex-direction: column;
+      justify-content: space-between;
+      transform: translateY(calc(#{$ca-grid} / 3));
+
+      .hasLongTitle.hasLongSubtitle & {
+        align-items: baseline;
+      }
+    }
+
+    @include title-block-medium-and-small {
+      transform: translateY(calc(#{$ca-grid} / 2));
+    }
+  }
+}
+
+.titleTextOverride.titleTextOverride {
+  padding: 4px 0;
+
+  @media (max-width: $breadcrumb-breakpoint-width) {
+    font-family: $typography-heading-2-font-family;
+    font-weight: $typography-heading-2-font-weight;
+    font-size: $typography-heading-2-font-size;
+    line-height: $typography-heading-2-line-height;
+    letter-spacing: $typography-heading-2-letter-spacing;
+  }
+
+  @include title-block-under-1366 {
+    font-family: $typography-heading-2-font-family;
+    font-weight: $typography-heading-2-font-weight;
+    font-size: $typography-heading-2-font-size;
+    line-height: $typography-heading-2-line-height;
+    letter-spacing: $typography-heading-2-letter-spacing;
+    padding: 2px 0;
+  }
+
+  .hasLongTitle & {
+    @include title-block-under-1366 {
+      font-family: $typography-heading-3-font-family;
+      font-weight: $typography-heading-3-font-weight;
+      font-size: $typography-heading-3-font-size;
+      line-height: $typography-heading-3-line-height;
+      letter-spacing: $typography-heading-3-letter-spacing;
+      padding: 2px 0;
+    }
+  }
+
+  @include title-block-medium-and-small {
+    font-family: $typography-heading-4-font-family;
+    font-weight: $typography-heading-4-font-weight;
+    font-size: $typography-heading-4-font-size;
+    line-height: $typography-heading-4-line-height;
+    letter-spacing: $typography-heading-4-letter-spacing;
+    padding: 0;
+  }
+}
+
+.avatar {
+  display: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  height: $ca-grid * 2;
+  width: $ca-grid * 2;
+
+  @include ca-margin($end: calc(#{$ca-grid} / 2));
+
+  > * {
+    max-width: 100%;
+  }
+
+  @media (min-width: $layout-breakpoints-large) {
+    display: block;
+  }
+
+  &.withBorder {
+    border: 3px solid $color-white;
+    border-radius: 50%;
+  }
+
+  .hasLongTitle & {
+    display: none;
+  }
+}
+
+.hamburger {
+  display: none;
+
+  @include ca-margin($end: $spacing-xs);
+
+  @include title-block-medium-and-small {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.subtitle {
+  display: flex;
+  align-items: center;
+  color: $color-white;
+  font-family: $typography-paragraph-small-font-family;
+  font-weight: $typography-paragraph-small-font-weight;
+  font-size: $typography-paragraph-small-font-size;
+  line-height: $typography-paragraph-small-line-height;
+  letter-spacing: $typography-paragraph-small-letter-spacing;
+  max-width: 230px;
+
+  .adminVariant & {
+    color: $color-purple-800;
+  }
+
+  @include ca-margin($start: calc(#{$ca-grid} / 2));
+
+  @include title-block-under-1366 {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: none;
+    margin: ($ca-grid / 5) 0;
+  }
+}
+
+.subtitleText {
+  @include title-block-under-1366 {
+    max-width: 42vw;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  @include title-block-small {
+    max-width: 88vw;
+  }
+}
+
+.sectionTitleContainer {
+  display: flex;
+  align-items: center;
+  padding: ($ca-grid * 3/4) 0;
+}
+
+.sectionTitleInner {
+  display: flex;
+  flex-direction: column;
+}
+
+.sectionTitleOverride.sectionTitleOverride {
+  white-space: nowrap;
+
+  @include ca-margin($end: $ca-grid);
+
+  font-family: $typography-heading-2-font-family;
+  font-weight: $typography-heading-2-font-weight;
+  font-size: $typography-heading-2-font-size;
+  line-height: $typography-heading-2-line-height;
+  letter-spacing: $typography-heading-2-letter-spacing;
+
+  @include title-block-under-1645 {
+    font-family: $typography-heading-3-font-family;
+    font-weight: $typography-heading-3-font-weight;
+    font-size: $typography-heading-3-font-size;
+    line-height: $typography-heading-3-line-height;
+    letter-spacing: $typography-heading-3-letter-spacing;
+  }
+
+  @include title-block-medium-and-small {
+    font-family: $typography-heading-4-font-family;
+    font-weight: $typography-heading-4-font-weight;
+    font-size: $typography-heading-4-font-size;
+    line-height: $typography-heading-4-line-height;
+    letter-spacing: $typography-heading-4-letter-spacing;
+  }
+}
+
+.sectionTitle {
+  display: block;
+}
+
+.sectionTitleDescription {
+  .sectionTitle + & {
+    margin-top: $ca-grid / 4;
+  }
+
+  color: $color-white;
+  max-width: 780px;
+  font-family: $typography-paragraph-small-font-family;
+  font-weight: $typography-paragraph-small-font-weight;
+  font-size: $typography-paragraph-small-font-size;
+  line-height: $typography-paragraph-small-line-height;
+  letter-spacing: $typography-paragraph-small-letter-spacing;
+
+  &.dark {
+    color: rgba($color-purple-800-rgb, 0.7);
+  }
+}
+
+.rowBelowSeparatorInnerContent {
+  display: flex;
+  width: 100%;
+  margin-top: -$title-block-separator-height;
+  justify-content: space-between;
+}
+
+.titleAndAdjacent {
+  display: flex;
+  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+}
+
+.titleAndAdjacentNotBreadcrumb {
+  display: flex;
+  transition: opacity 0.3s ease;
+  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+  align-items: center;
+
+  .breadcrumb:hover ~ &,
+  .breadcrumb:focus ~ &,
+  .breadcrumbTextLink:hover ~ &,
+  .breadcrumbTextLink:focus ~ & {
+    opacity: 0%;
+  }
+}
+
+.tag {
+  @include ca-margin($start: calc(#{$ca-grid} / 2));
+
+  display: flex;
+  align-items: center;
+
+  @include title-block-medium-and-small {
+    display: none;
+  }
+
+  + .pageSwitcherSelectNextToTitle {
+    @include ca-margin($start: 0);
+  }
+}
+
+.pageSwitcherSelectNextToTitle {
+  @include ca-margin($start: calc(#{$ca-grid} / 2));
+
+  flex-shrink: 0;
+  width: 10 * $ca-grid;
+}
+
+.pageSwitcherSelectUnderneathTitle {
+  flex-shrink: 0;
+  max-width: 10 * $ca-grid;
+}
+
+.navigationTabsContainer {
+  height: $tab-container-height-default;
+
+  @include title-block-small {
+    height: $tab-container-height-small;
+  }
+}
+
+.navigationTabsContainerCollapsed {
+  height: $tab-container-height-default-collapsed;
+
+  @include title-block-medium-and-small {
+    height: $tab-container-height-medium-and-small-collapsed;
+  }
+}
+
+.navigationTabScrollerContainer {
+  .hasNavigationTabs & {
+    @include title-block-small {
+      display: block;
+      overflow-x: scroll;
+      scrollbar-width: none;
+      width: 100vw;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+}
+
+.navigationTabsNav {
+  height: 100%;
+}
+
+.navigationTabsList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  height: 100%;
+}
+
+%navigationTabEdgeShadow {
+  display: none;
+  pointer-events: none;
+
+  @include title-block-small {
+    display: block;
+    position: absolute;
+    top: $tab-container-height-small - $title-block-separator-height;
+    width: $tab-container-height-small;
+    height: $tab-container-height-small;
+    background: linear-gradient(
+      0deg,
+      $color-purple-600,
+      rgba($color-purple-600-rgb, 0)
+    );
+    z-index: $ca-z-index-sticky;
+  }
+
+  .adminVariant & {
+    @include title-block-small {
+      background: linear-gradient(
+        0deg,
+        $color-gray-100,
+        rgba($color-gray-100-rgb, 0)
+      );
+    }
+  }
+
+  .educationVariant & {
+    @include title-block-small {
+      background: linear-gradient(
+        0deg,
+        $color-blue-200,
+        rgba($color-blue-200-rgb, 0)
+      );
+    }
+  }
+}
+
+.navigationTabEdgeShadowLeft {
+  @extend %navigationTabEdgeShadow;
+
+  transform: rotate(90deg);
+  left: 0;
+  top: calc(100% - #{$tab-container-height-default});
+
+  @include title-block-small {
+    top: calc(100% - #{$tab-container-height-small});
+  }
+}
+
+.navigationTabEdgeShadowRight {
+  @extend %navigationTabEdgeShadow;
+
+  transform: rotate(-90deg);
+  right: 0;
+  top: calc(100% - #{$tab-container-height-default});
+
+  @include title-block-small {
+    top: calc(100% - #{$tab-container-height-small});
+  }
+}
+
+// This should be in SecondaryAction.module.scss,
+// but the variants prevent us from breaking this out.
+.secondaryActionsContainer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding: (calc(#{$ca-grid} / 2)) 0;
+
+  @include ca-margin($start: $ca-grid * 1.5);
+
+  // To be removed eventually – the Dropdown does not
+  // currently set its own color, and we want it
+  // to be Cluny like the default secondary buttons
+  .educationVariant &,
+  .adminVariant & {
+    color: $color-blue-500;
+  }
+
+  @include title-block-medium-and-small {
+    display: none;
+  }
+}
+
+.breadcrumb {
+  @include button-reset;
+
+  cursor: pointer;
+  display: flex;
+  position: absolute;
+  z-index: $ca-z-index-sticky;
+  align-items: center;
+  top: 50%;
+  transform: translateY(-50%);
+
+  @include ca-position(
+    $start: calc(-#{$breadcrumb-circle-width} - #{$ca-grid})
+  );
+
+  align-self: normal;
+
+  &:hover .breadcrumbTextLink {
+    text-decoration: underline;
+  }
+
+  @media only screen and (max-width: $breadcrumb-breakpoint-width) {
+    position: relative;
+
+    @include ca-margin($end: calc(#{$ca-grid} / 2));
+    @include ca-position($start: 0);
+
+    transform: translateY(0);
+  }
+
+  @include title-block-medium-and-small {
+    display: none;
+  }
+}
+
+@mixin visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+@mixin visually-hidden-reset {
+  clip: initial;
+  clip-path: initial;
+  height: initial;
+  overflow: initial;
+  position: initial;
+  white-space: initial;
+  width: initial;
+}
+
+.breadcrumbTextLink {
+  // We are using visually hidden here instead of display:none so that a screen reader
+  // navigating via 'read mode' (which doesn't trigger hover/focus) will still hear this link name
+  @include visually-hidden;
+
+  z-index: $ca-z-index-sticky - 1;
+
+  @include ca-position($start: -2 * $ca-grid);
+
+  position: absolute;
+
+  @include title-block-under-1645 {
+    @include ca-position($start: $ca-grid);
+  }
+
+  @media only screen and (min-width: $breadcrumb-breakpoint-width) {
+    @include ca-position(
+      $start: calc(#{$breadcrumb-circle-width} - #{$ca-grid})
+    );
+  }
+
+  &:hover,
+  &:focus,
+  .breadcrumb:hover &,
+  .breadcrumb:focus & {
+    @include visually-hidden-reset;
+    // ^be careful of this mixin unsetting values you need
+    // e.g. I needed to set position:absolute again below
+    position: absolute;
+    display: block;
+    animation: slide-fade 0.4s;
+
+    [dir="rtl"] & {
+      animation: reverse-slide-fade 0.4s;
+    }
+  }
+}
+
+.breadcrumbText {
+  margin-inline-start: $spacing-xl;
+  white-space: nowrap;
+  font-family: $typography-heading-5-font-family;
+  font-weight: $typography-heading-5-font-weight;
+  font-size: $typography-heading-5-font-size;
+  line-height: $typography-heading-5-line-height;
+  letter-spacing: $typography-heading-5-letter-spacing;
+}
+
+.breadcrumb,
+.breadcrumb:hover,
+.breadcrumbText {
+  color: $color-white;
+
+  .educationVariant &,
+  .adminVariant & {
+    color: $color-purple-800;
+  }
+}
+
+.circle {
+  $border-width: 3px;
+
+  flex: 0 0 $breadcrumb-circle-width;
+  box-sizing: border-box;
+  width: $breadcrumb-circle-width;
+  height: $breadcrumb-circle-width;
+  color: $color-white;
+  border-color: rgba($color-white-rgb, 0.5);
+  border-width: 2px;
+  border-radius: 50%;
+  border-style: solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background-color 0.3s ease,
+    transform 0.3s ease;
+
+  .breadcrumb:hover &,
+  .breadcrumb:focus & {
+    transform: scale(1.1);
+    border-color: $color-white;
+    color: $color-white;
+    background-color: rgba($color-white-rgb, 0.1);
+  }
+
+  .educationVariant &,
+  .adminVariant & {
+    color: $color-blue-500;
+    border-color: $color-blue-300;
+    border-width: $border-width;
+  }
+
+  .educationVariant .breadcrumb:hover &,
+  .educationVariant .breadcrumb:focus &,
+  .adminVariant .breadcrumb:hover &,
+  .adminVariant .breadcrumb:focus & {
+    border-color: $color-blue-500;
+    color: $color-blue-500;
+    background-color: rgba($color-blue-500-rgb, 0.1);
+  }
+}
+
+@keyframes slide-fade {
+  0% {
+    display: none;
+    opacity: 0%;
+  }
+
+  1% {
+    display: block;
+    opacity: 0%;
+    transform: translateX(-30px);
+  }
+
+  100% {
+    opacity: 100%;
+    transform: translateX(0);
+  }
+}
+
+@keyframes reverse-slide-fade {
+  0% {
+    display: none;
+    opacity: 0%;
+  }
+
+  1% {
+    display: block;
+    opacity: 0%;
+    transform: translateX(30px);
+  }
+
+  100% {
+    opacity: 100%;
+    transform: translateX(0);
+  }
+}
+/* stylelint-enable no-descending-specificity */