Flutter Bench content

sites/docs/lib/_sass/_site.scss

@@ -14,6 +14,7 @@
 @use 'components/content';
 @use 'components/expansion-list';
 @use 'components/filter-search';
+@use 'components/filterable-index';
 @use 'components/footer';
 @use 'components/header';
 @use 'components/icons';
@@ -48,6 +49,7 @@
 @use 'package:site_shared/_sass/components/tooltip';
 
 // Styles for specific pages, alphabetically ordered.
+@use 'pages/cuj-index';
 @use 'pages/glossary';
 @use 'pages/learning-resources-index';
 @use 'pages/not-found';

sites/docs/lib/_sass/components/_filterable-index.scss

@@ -0,0 +1,224 @@
+// Layout and controls shared by the filterable index pages: the learning
+// resources index and the critical user journey index.
+//
+// The markup comes from the `FiltersSidebar` and `FilterSearchGroup`
+// components in `filterable_index.dart`, so everything here is keyed off
+// classes. Each page styles its own results list separately, keyed off the
+// id of that list.
+
+$mobile-breakpoint: 839px;
+$sidebar-width: 220px;
+
+.filterable-index {
+  display: flex;
+  flex-direction: row;
+
+  .left-col {
+    margin-right: 1rem;
+    flex: 2;
+  }
+
+  .right-col {
+    width: $sidebar-width;
+  }
+}
+
+// The sidebar follows the page as it scrolls on wide screens, and becomes an
+// off-canvas drawer on narrow ones. Everything within it, including any
+// page-specific footer, slides in and out as a single unit.
+.filter-sidebar {
+  position: sticky;
+  top: calc(var(--site-header-height) + 1rem);
+}
+
+.filter-group-wrapper {
+  border: 1px solid var(--site-inset-borderColor);
+  background-color: var(--site-inset-bgColor);
+  border-radius: var(--site-radius);
+  overflow: hidden;
+}
+
+// Only shown while the sidebar is a drawer, to close it again.
+.filter-header {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.75rem 1rem;
+  z-index: 10;
+}
+
+.close-icon {
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 4px;
+  background: none;
+  border: none;
+  color: var(--site-base-fgColor-alt);
+  transition: all 0.2s ease;
+  position: absolute;
+  right: 1rem;
+  top: 75%;
+  transform: translateY(-50%);
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+    color: var(--site-primary-color);
+  }
+
+  .material-symbols {
+    font-size: 20px;
+  }
+}
+
+.filter-group {
+  .table-title {
+    text-align: center;
+    color: var(--site-base-fgColor-alt);
+    background-color: var(--site-raised-bgColor);
+    font-family: var(--site-ui-fontFamily);
+    font-weight: 600;
+    font-size: .925rem;
+    padding: .5rem;
+    border-bottom: 1px solid var(--site-inset-borderColor);
+  }
+
+  .table-content {
+    padding: 1rem;
+  }
+
+  ul {
+    padding-left: 0;
+    margin-bottom: .5rem;
+
+    li {
+      list-style: none;
+      padding-left: 0;
+      padding-bottom: .25rem;
+      display: flex;
+      align-items: center;
+
+      label {
+        padding-left: .35rem;
+        font-size: .9rem;
+      }
+    }
+  }
+
+  h4 {
+    margin: 0 0 .5rem;
+    padding: 0;
+  }
+
+  button {
+    color: var(--site-primary-color);
+    margin: 0 0 2rem;
+    padding: .5rem 0 1rem 1rem;
+
+    &:hover {
+      color: var(--site-onPrimary-color);
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
+}
+
+.filter-search-group {
+  display: flex;
+  flex-direction: column;
+
+  button.show-filters-button {
+    @media (min-width: $mobile-breakpoint + 1) {
+      display: none;
+    }
+  }
+
+  .label-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: .925rem;
+
+    label {
+      font-family: var(--site-ui-fontFamily);
+      color: var(--site-base-fgColor-lighter);
+
+      padding: .25rem 1rem 0 0;
+      margin: 0;
+      text-align: end;
+    }
+
+    button {
+      padding: .25rem;
+      color: var(--site-primary-color);
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        color: var(--site-onPrimary-color-light);
+      }
+
+      &:disabled,
+      &[disabled] {
+        color: var(--site-inset-bgColor-translucent);
+        cursor: default;
+      }
+    }
+  }
+}
+
+// On narrow screens the sidebar becomes a drawer that slides in from the
+// right. Opening and closing is driven entirely by the hidden
+// `#open-filter-toggle` checkbox that precedes it.
+@media (max-width: $mobile-breakpoint) {
+  .filterable-index {
+    flex-direction: column;
+  }
+
+  .left-col {
+    margin-right: 0;
+  }
+
+  // The drawer itself is fixed-positioned, so this column no longer needs to
+  // reserve width for it in the flex layout.
+  .right-col {
+    width: auto;
+  }
+
+  .filter-header {
+    display: block;
+  }
+
+  .filter-sidebar {
+    position: fixed;
+    top: var(--site-header-height);
+    bottom: 0;
+    right: -$sidebar-width;
+    width: $sidebar-width;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--site-inset-bgColor);
+    border-left: 1px solid var(--site-inset-borderColor);
+    transition: right 0.3s ease-in-out;
+    z-index: 1000;
+  }
+
+  #open-filter-toggle:checked + .filter-sidebar {
+    right: 0;
+  }
+
+  // Fill the drawer rather than floating within it as a card,
+  // and scroll on its own so any footer stays in view.
+  .filter-group-wrapper {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    border: none;
+    border-radius: 0;
+  }
+
+  .filter-group .table-title {
+    background-color: var(--site-raised-bgColor-translucent);
+  }
+}

sites/docs/lib/_sass/pages/_cuj-index.scss

@@ -0,0 +1,141 @@
+@use 'sass:color';
+
+// The critical user journey index reuses the two column layout, search field,
+// and filter sidebar of the learning resources index, which are styled in
+// `_filterable-index.scss`.
+//
+// The journeys themselves render as full-width expandable cards, following
+// the glossary in `_glossary.scss`. Expanding and collapsing is wired up
+// by the `_setUpExpandableCards` global script.
+
+// The feedback button is the sidebar footer, so it sits below the filter card
+// and slides in with it when the sidebar becomes a drawer.
+.cuj-feedback {
+  margin-block-start: 1rem;
+
+  .outlined-button {
+    width: 100%;
+    justify-content: center;
+  }
+
+  @media (max-width: 839px) {
+    margin-block-start: 0;
+    padding: 0.75rem;
+    border-top: 1px solid var(--site-inset-borderColor);
+  }
+}
+
+#all-cujs-list {
+  margin-block-start: 1rem;
+
+  .cuj-card {
+    height: auto;
+    padding: 0.75rem 1rem;
+    gap: 0.25rem;
+
+    .card-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    .cuj-card-heading {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.4rem;
+      // Allow long goals to wrap instead of widening the flex item.
+      min-width: 0;
+    }
+
+    .card-title {
+      display: block;
+      margin: 0;
+      font-family: var(--site-ui-fontFamily);
+      font-size: 1.1rem;
+      font-weight: 500;
+      line-height: 1.35;
+      text-wrap: pretty;
+    }
+
+    .card-header-buttons {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.25rem;
+      flex-shrink: 0;
+
+      .icon-button {
+        border-radius: 1.5rem;
+
+        > span {
+          font-size: 1.5rem;
+        }
+      }
+    }
+
+    .cuj-task-count {
+      margin: 0;
+      font-size: 0.9rem;
+      color: var(--site-base-fgColor-lighter);
+    }
+
+    // The shared card styles lay `.card-content` out as a centered row.
+    // Journeys need a plain block so the task list stacks below the divider.
+    .card-content {
+      display: block;
+      border-top: 0.05rem solid var(--site-inset-borderColor);
+      margin-block-start: 0.5rem;
+      padding-block-start: 0.5rem;
+    }
+
+    &.collapsed {
+      .card-content {
+        display: none;
+      }
+
+      .expand-button {
+        transform: rotate(180deg);
+      }
+    }
+
+    .expand-button {
+      &:hover,
+      &:focus-within {
+        transition: transform .25s ease-out;
+      }
+    }
+
+    .cuj-task-list {
+      margin: 0;
+      padding-left: 1.15rem;
+
+      li {
+        padding-left: 0;
+        margin-block-end: 0.5rem;
+        font-size: 0.9rem;
+        line-height: 1.45;
+        color: var(--site-base-fgColor-alt);
+
+        &:last-child {
+          margin-block-end: 0;
+        }
+      }
+    }
+
+    // Two additional persona colors, following the `.pill-sm` modifiers.
+    // TODO(parlough): Consider if these colors can be shared and if
+    // compatible with dark mode.
+    .pill-sm.magenta {
+      color: color.scale(#FBD9EF, $lightness: 10%);
+      background: #9A2E6E;
+    }
+
+    .pill-sm.amber {
+      color: color.scale(#FCEBC8, $lightness: 10%);
+      background: #8A5300;
+    }
+  }
+}