@brandsync/wc 1.10.0 → 1.12.0

package/dist/collection/components/bs-onboarding-checklist/bs-onboarding-checklist.css

@@ -0,0 +1,488 @@
+/**
+ * @prop --bs-onboarding-checklist-width: Width of the `panel` (420px), `launcher` (260px; 300px `inline`) and `completion` (380px) forms. The `dashboard` fills its container. Never wider than the container.
+ * @prop --bs-onboarding-checklist-radius: Corner radius of the `panel`, `dashboard` and `completion` cards. Aliased to --bs-border-radius-150 (12px).
+ * @prop --bs-onboarding-checklist-padding: Card padding. Aliased to --bs-spacing-200 (16px).
+ * @prop --bs-onboarding-checklist-gap: Gap between the card's rows. Aliased to --bs-spacing-150 (12px).
+ * @prop --bs-onboarding-checklist-shadow: Shadow of the `panel`, `launcher` and `completion`. 0 2px 2px --bs-elevation-medium (Figma). The `dashboard` has a border instead.
+ * @prop --bs-onboarding-checklist-color: Heading and label colour. Aliased to --bs-text-default.
+ * @prop --bs-onboarding-checklist-color-secondary: Paragraph, finished-step and caption colour. Aliased to --bs-text-secondary.
+ * @prop --bs-onboarding-checklist-icon-color: Step status icons. Aliased to --bs-icon-action (the Figma binds icons to `color/icons/action`).
+ * @prop --bs-onboarding-checklist-accent: Other accents. Aliased to --bs-color-primary-default.
+ * @prop --bs-onboarding-checklist-bar-fill: Progress bar fill. Aliased to --bs-surface-action (the `completion` bar uses --bs-color-success-default).
+ * @prop --bs-onboarding-checklist-bar-track: Progress bar track. Aliased to --bs-surface-container.
+ * @prop --bs-onboarding-checklist-card-height: Fixed height of the `dashboard` step cards, so they line up whatever their labels wrap to. 146px (Figma). Raise it if a label needs more than two lines.
+ * @prop --bs-onboarding-checklist-border: Border of the `dashboard` and its step cards. Aliased to --bs-border-default.
+ */
+:host {
+  display: block;
+  max-width: 100%;
+
+  --bs-onboarding-checklist-width: 420px;
+  --bs-onboarding-checklist-radius: var(--bs-border-radius-150);
+  --bs-onboarding-checklist-padding: var(--bs-spacing-200);
+  --bs-onboarding-checklist-gap: var(--bs-spacing-150);
+  --bs-onboarding-checklist-shadow: 0 2px 2px var(--bs-elevation-medium);
+  --bs-onboarding-checklist-color: var(--bs-text-default);
+  --bs-onboarding-checklist-color-secondary: var(--bs-text-secondary);
+  --bs-onboarding-checklist-icon-color: var(--bs-icon-action);
+  --bs-onboarding-checklist-accent: var(--bs-color-primary-default);
+  --bs-onboarding-checklist-bar-fill: var(--bs-surface-action);
+  --bs-onboarding-checklist-bar-track: var(--bs-surface-container);
+  --bs-onboarding-checklist-border: var(--bs-border-default);
+  --bs-onboarding-checklist-card-height: 146px;
+}
+
+/* The dashboard reacts to its own width, not the viewport's. Only the dashboard: a size container can't be
+   sized by its content, which would collapse the fit-content ring launcher. */
+:host([type='dashboard']) {
+  container-type: inline-size;
+}
+
+:host([type='panel']) {
+  width: var(--bs-onboarding-checklist-width);
+}
+
+:host([type='launcher']) {
+  --bs-onboarding-checklist-width: 260px;
+  width: var(--bs-onboarding-checklist-width);
+}
+
+:host([type='launcher'][launcher-layout='ring']) {
+  width: fit-content;
+}
+
+:host([type='launcher'][launcher-layout='inline']) {
+  --bs-onboarding-checklist-width: 300px;
+}
+
+:host([type='completion']) {
+  --bs-onboarding-checklist-width: 380px;
+  width: var(--bs-onboarding-checklist-width);
+}
+
+/* bs-card supplies the surface; this only sets how it looks here. */
+.bs-oc--panel,
+.bs-oc--completion {
+  --bs-card-radius: var(--bs-onboarding-checklist-radius);
+  --bs-card-padding: var(--bs-onboarding-checklist-padding);
+  --bs-card-shadow: var(--bs-onboarding-checklist-shadow);
+}
+
+.bs-oc--dashboard {
+  --bs-card-radius: var(--bs-onboarding-checklist-radius);
+  --bs-card-padding: var(--bs-onboarding-checklist-padding) var(--bs-spacing-550) var(--bs-onboarding-checklist-padding) var(--bs-onboarding-checklist-padding);
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-onboarding-checklist-border);
+  --bs-card-shadow: none;
+  position: relative;
+}
+
+.bs-oc--launcher {
+  --bs-card-radius: var(--bs-border-radius-100);
+  --bs-card-padding: var(--bs-spacing-150);
+  --bs-card-shadow: var(--bs-onboarding-checklist-shadow);
+}
+
+.bs-oc {
+  color: var(--bs-onboarding-checklist-color);
+}
+
+.bs-oc p,
+.bs-oc ol {
+  margin: 0;
+}
+
+.bs-oc__glyph {
+  width: 16px;
+  height: 16px;
+}
+
+.bs-oc__heading {
+  margin: 0;
+  font-size: var(--bs-font-size-2xl);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: 32px;
+}
+
+.bs-oc__description {
+  color: var(--bs-onboarding-checklist-color-secondary);
+  font-size: var(--bs-font-size-md);
+  line-height: 24px;
+}
+
+.bs-oc__description--center {
+  text-align: center;
+}
+
+.bs-oc__spacer {
+  flex: 1 1 0;
+}
+
+.bs-oc__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* --- shared: progress ----------------------------------------------------------------------- */
+.bs-oc__progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-75);
+  align-self: stretch;
+}
+
+.bs-oc__progress-labels {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-oc__progress-text {
+  font-weight: var(--bs-font-weight-medium);
+}
+
+.bs-oc__progress-percent {
+  color: var(--bs-onboarding-checklist-color-secondary);
+}
+
+/* Set on the bar itself: bs-progress-linear declares its own defaults on :host, which beat anything merely
+   inherited from an ancestor. */
+.bs-oc__bar {
+  --bs-progress-linear-fill: var(--bs-onboarding-checklist-bar-fill);
+  --bs-progress-linear-track: var(--bs-onboarding-checklist-bar-track);
+}
+
+.bs-oc__bar--success {
+  --bs-progress-linear-fill: var(--bs-color-success-default);
+}
+
+/* --- shared: buttons ------------------------------------------------------------------------ */
+.bs-oc__text-button {
+  --bs-button-subtle-color: var(--bs-text-action);
+}
+
+.bs-oc__block {
+  --bs-button-width: 100%;
+  --bs-button-height-md: var(--bs-spacing-550);
+  --bs-button-height-lg: var(--bs-spacing-550);
+}
+
+.bs-oc__close {
+  flex: none;
+}
+
+.bs-oc__close svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* --- panel ---------------------------------------------------------------------------------- */
+.bs-oc__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-onboarding-checklist-gap);
+}
+
+.bs-oc__head {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-oc__steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-25);
+  padding: 0;
+  list-style: none;
+}
+
+.bs-oc__step {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-150);
+  min-height: 40px;
+  padding: 0 var(--bs-spacing-100);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-oc__step--done {
+  color: var(--bs-onboarding-checklist-color-secondary);
+}
+
+.bs-oc__status {
+  display: inline-flex;
+  flex: none;
+  width: 24px;
+  height: 24px;
+  color: var(--bs-onboarding-checklist-icon-color);
+}
+
+.bs-oc__status svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* The current step: an inset card holding the description, the estimate and the actions. */
+.bs-oc__current {
+  display: block;
+}
+
+.bs-oc__current-card {
+  --bs-card-radius: var(--bs-border-radius-100);
+  --bs-card-padding: var(--bs-spacing-100);
+  --bs-card-shadow: none;
+}
+
+.bs-oc__current-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-oc__current-head {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-150);
+}
+
+.bs-oc__current-label {
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: 20px;
+}
+
+.bs-oc__current-text {
+  color: var(--bs-onboarding-checklist-color-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-oc__current-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-oc__estimate {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-50);
+  color: var(--bs-onboarding-checklist-color-secondary);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+.bs-oc__clock {
+  width: 14px;
+  height: 14px;
+}
+
+.bs-oc__current-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-oc__current-actions bs-button {
+  --bs-button-height-sm: var(--bs-spacing-400);
+  --bs-button-padding-x-sm: var(--bs-spacing-150);
+}
+
+/* --- dashboard ------------------------------------------------------------------------------ */
+.bs-oc__dash {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-500);
+}
+
+.bs-oc--dashboard .bs-oc__close {
+  position: absolute;
+  top: -1px;
+  inset-inline-end: -1px;
+}
+
+.bs-oc__dash-summary {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--bs-onboarding-checklist-gap);
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.bs-oc__dash-summary bs-progress-linear {
+  align-self: stretch;
+}
+
+.bs-oc__link {
+  --bs-button-height-sm: var(--bs-spacing-400);
+  /* Figma: a link with a trailing arrow has 12px of padding before its text and 8px after the arrow
+     (bs-button's own 20px/12px would push the text further in). */
+  --bs-button-padding-x-label-side: var(--bs-spacing-150);
+  --bs-button-padding-x-icon-side: var(--bs-spacing-100);
+}
+
+.bs-oc__cards {
+  display: flex;
+  align-items: stretch;
+  gap: var(--bs-spacing-100);
+  padding: 0;
+  list-style: none;
+}
+
+.bs-oc__card-item {
+  display: flex;
+}
+
+.bs-oc__step-card {
+  --bs-card-radius: var(--bs-border-radius-100);
+  --bs-card-padding: var(--bs-spacing-200);
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-onboarding-checklist-border);
+  --bs-card-shadow: none;
+  width: 196px;
+  /* Figma: the step cards are all 146px tall, whatever their label wraps to. */
+  height: var(--bs-onboarding-checklist-card-height);
+}
+
+.bs-oc__step-card--current {
+  --bs-card-bg: var(--bs-surface-selected);
+  --bs-card-border-color: var(--bs-border-primary);
+}
+
+.bs-oc__step-card-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-oc__step-card-label {
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 20px;
+}
+
+.bs-oc__step-card-caption {
+  color: var(--bs-onboarding-checklist-color-secondary);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+}
+
+/* Narrow container: the step cards drop under the summary and share the width. */
+@container (max-width: 899px) {
+  .bs-oc__dash {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--bs-spacing-200);
+  }
+
+  .bs-oc__cards {
+    flex-direction: column;
+  }
+
+  .bs-oc__step-card {
+    width: 100%;
+  }
+}
+
+/* --- launcher ------------------------------------------------------------------------------- */
+.bs-oc__launcher {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-150);
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.bs-oc__launcher:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 4px;
+  border-radius: var(--bs-border-radius-100);
+}
+
+.bs-oc__launcher-copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-100);
+  white-space: nowrap;
+}
+
+.bs-oc--launcher-ring .bs-oc__launcher-copy {
+  gap: 0;
+}
+
+.bs-oc__launcher-title {
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: 20px;
+}
+
+.bs-oc__launcher-text {
+  color: var(--bs-onboarding-checklist-color-secondary);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+}
+
+.bs-oc__launcher-copy--inline {
+  flex: 1 1 0;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--bs-spacing-50);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.bs-oc__launcher-title--inline {
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-semibold);
+}
+
+.bs-oc__ring {
+  flex: none;
+}
+
+.bs-oc__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 32px;
+  height: 32px;
+  color: var(--bs-icon-default);
+}
+
+.bs-oc__chevron svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* --- completion ----------------------------------------------------------------------------- */
+.bs-oc__completion {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-oc__completion .bs-oc__glyph {
+  width: 24px;
+  height: 24px;
+}