@appscode/design-system 2.17.87 → 2.17.91-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.17.87",
+  "version": "2.17.91-alpha.1",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/index.ts

@@ -16,6 +16,7 @@ import AcBreadcrumb from "./v3/breadcrumbs/Breadcrumb.vue";
 import AcButton from "./v3/button/Button.vue";
 import AcButtons from "./v3/button/Buttons.vue";
 import AcDownloadBtn from "./v3/button/DownloadBtn.vue";
+import AcSegmentedControl from "./v3/button/SegmentedControl.vue";
 
 import AcCard from "./v3/cards/Card.vue";
 import AcCardContent from "./v3/cards/CardContent.vue";
@@ -23,6 +24,8 @@ import AcCardHeader from "./v3/cards/CardHeader.vue";
 import AcCards from "../design/cards/Cards.vue";
 import AcCluster from "./v3/cards/Cluster.vue";
 import AcCounter from "./v3/cards/Counter.vue";
+import AcDetailCard from "./v3/cards/DetailCard.vue";
+import AcTableCard from "./v3/cards/TableCard.vue";
 import AcFeatureCard from "./v3/cards/FeatureCard.vue";
 import AcFeatureCards from "./v3/cards/FeatureCards.vue";
 import AcInfoCard from "./v3/cards/InfoCard.vue";
@@ -31,9 +34,14 @@ import AcOrgCard from "./v3/cards/OrgCard.vue";
 import AcOverviewCard from "./v3/cards/OverviewCard.vue";
 import AcOverviewCards from "./v3/cards/OverviewCards.vue";
 import AcPayment from "./v3/cards/Payment.vue";
+import AcRadioCard from "./v3/cards/RadioCard.vue";
 import AcSessionCard from "./v3/cards/SessionCard.vue";
+import AcStatCard from "./v3/cards/StatCard.vue";
 import AcVendor from "./v3/cards/Vendor.vue";
 
+import AcRecoverableWindow from "./v3/charts/RecoverableWindow.vue";
+import AcTimelineTrack from "./v3/charts/TimelineTrack.vue";
+
 import AcCodeBlock from "./v3/code-preview/CodeBlock.vue";
 import AcCodeGroup from "./v3/code-preview/CodeGroup.vue";
 
@@ -192,6 +200,9 @@ import AcTags from "./v3/tag/Tags.vue";
 
 import AcSimpleSelect from "./v3/form-fields/SimpleSelect.vue";
 
+export * from "./v3/charts/types";
+export { defaultRangeOptions } from "./v3/charts/timeline";
+
 export {
   AcAccordion,
   AcAlert,
@@ -204,13 +215,19 @@ export {
   AcBreadcrumb,
   AcButton,
   AcButtons,
+  AcRadioCard,
+  AcRecoverableWindow,
+  AcTimelineTrack,
   AcDownloadBtn,
+  AcSegmentedControl,
   AcCard,
   AcCardContent,
   AcCardHeader,
   AcCards,
   AcCluster,
   AcCounter,
+  AcDetailCard,
+  AcTableCard,
   AcFeatureCard,
   AcFeatureCards,
   AcInfoCard,
@@ -220,6 +237,7 @@ export {
   AcOverviewCards,
   AcPayment,
   AcSessionCard,
+  AcStatCard,
   AcVendor,
   AcCodeBlock,
   AcCodeGroup,

package/vue-components/styles/base/utilities/_grid.scss

@@ -27,3 +27,25 @@
     gap: #{$i}px;
   }
 }
+
+// Responsive grid utilities (mobile-first, Bulma breakpoints)
+// e.g. "grid grid-cols-1 grid-cols-2-tablet grid-cols-4-desktop"
+$grid-breakpoints: (
+  "tablet": 769px,
+  "desktop": 1024px,
+  "widescreen": 1216px,
+  "fullhd": 1408px,
+);
+
+@each $bp, $min in $grid-breakpoints {
+  @media screen and (min-width: $min) {
+    @for $i from 1 through 12 {
+      .grid-cols-#{$i}-#{$bp} {
+        grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+      }
+      .col-span-#{$i}-#{$bp} {
+        grid-column: span #{$i} / span #{$i};
+      }
+    }
+  }
+}

package/vue-components/styles/base/utilities/_typography.scss

@@ -158,6 +158,36 @@ strong {
   font-weight: $weight-bold;
 }
 
+// Letter spacing utilities
+$letter-spacings: (
+  "tighter": -0.05em,
+  "tight": -0.025em,
+  "normal": 0,
+  "wide": 0.025em,
+  "wider": 0.05em,
+  "widest": 0.1em,
+);
+@each $key, $value in $letter-spacings {
+  .tracking-#{$key} {
+    letter-spacing: $value;
+  }
+}
+
+// Line height utilities
+$line-heights: (
+  "none": 1,
+  "tight": 1.25,
+  "snug": 1.375,
+  "normal": 1.5,
+  "relaxed": 1.625,
+  "loose": 2,
+);
+@each $key, $value in $line-heights {
+  .leading-#{$key} {
+    line-height: $value;
+  }
+}
+
 .material-icons {
   font-size: 1em;
 }

package/vue-components/styles/components/_badge-tags.scss

@@ -1,4 +1,4 @@
-@mixin badge($text-color, $bg-color, $text-dark, $bg-light) {
+@mixin badge($text-color, $bg-color, $text-dark, $bg-light, $border-light) {
   color: $text-color;
   background-color: $bg-color;
   .circle {
@@ -7,6 +7,8 @@
   &.is-light {
     background-color: $bg-light;
     color: $text-dark;
+    border: 1px solid $border-light;
+    padding: 3px 7px; // keep same size as borderless tags
     .circle {
       background-color: $bg-color;
     }
@@ -48,25 +50,25 @@
   }
 
   &.is-primary {
-    @include badge($white-100, $ac-primary, $primary-10, $primary-95);
+    @include badge($white-100, $ac-primary, $primary-10, $primary-95, $primary-80);
   }
   &.is-secondary {
-    @include badge($white-100, $ac-secondary, $secondary-10, $secondary-95);
+    @include badge($white-100, $ac-secondary, $secondary-10, $secondary-95, $secondary-80);
   }
   &.is-info {
-    @include badge($white-100, $info, $blue-10, $blue-95);
+    @include badge($white-100, $info, $blue-10, $blue-95, $blue-80);
   }
   &.is-success {
-    @include badge($white-100, $success, $green-10, $green-95);
+    @include badge($white-100, $success, $green-10, $green-95, $green-80);
   }
   &.is-warning {
-    @include badge($white-100, $warning, $yellow-10, $yellow-95);
+    @include badge($white-100, $warning, $yellow-10, $yellow-95, $yellow-80);
   }
   &.is-danger {
-    @include badge($white-100, $danger, $red-10, $red-95);
+    @include badge($white-100, $danger, $red-10, $red-95, $red-80);
   }
   &.is-dark {
-    @include badge($white-100, $gray, $gray-10, $gray-95);
+    @include badge($white-100, $gray, $gray-10, $gray-95, $gray-80);
   }
 
   .circle {

package/vue-components/styles/components/charts/_recoverable-window.scss

@@ -0,0 +1,15 @@
+$rw-pitr-start: #059669;
+$rw-pitr-end: #34d399;
+$rw-pitr-legend: #10b981;
+$rw-snapshot: #00994a;
+$rw-base-divider: #166534;
+$rw-failed: #dc2626;
+$rw-scheduled: #9ca3af;
+$rw-running: #6ee7b7;
+$rw-rail: #f3f4f6;
+$rw-rail-border: #e5e7eb;
+$rw-axis-text: #9ca3af;
+$rw-guide: rgba(255, 255, 255, 0.35);
+$rw-dot-success: #10b981;
+$rw-dot-warning: #f97316;
+$rw-dot-danger: #dc2626;

package/vue-components/v3/button/SegmentedControl.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import AcButton from "./Button.vue";
+
+const props = withDefaults(defineProps<{ editable?: boolean }>(), {
+  editable: false,
+});
+
+const options = defineModel<string[]>("options", { required: true });
+const model = defineModel<string>();
+
+const editingIndex = ref(-1);
+const draft = ref("");
+
+const vFocus = {
+  mounted: (el: HTMLInputElement) => {
+    el.focus();
+    el.select();
+  },
+};
+
+function onClick(index: number) {
+  if (props.editable && options.value[index] === model.value) {
+    draft.value = options.value[index];
+    editingIndex.value = index;
+  } else {
+    model.value = options.value[index];
+  }
+}
+
+function save() {
+  const index = editingIndex.value;
+  const value = draft.value.trim();
+  editingIndex.value = -1;
+  if (index === -1 || !value || options.value.includes(value)) return;
+  options.value = options.value.map((option, i) => (i === index ? value : option));
+  model.value = value;
+}
+</script>
+
+<template>
+  <div class="buttons has-addons has-gap mb-0">
+    <template v-for="(option, index) in options" :key="index">
+      <input
+        v-if="index === editingIndex"
+        v-model="draft"
+        v-focus
+        class="input height-24 width-48 py-0 has-text-centered"
+        @keydown.enter.prevent="save"
+        @keydown.esc="editingIndex = -1"
+        @blur="save"
+      />
+      <AcButton
+        v-else
+        type="button"
+        :title="option"
+        :tooltip="editable && option === model ? 'Click to edit' : undefined"
+        :aria-pressed="option === model"
+        :modifier-classes="option === model ? 'is-tinny has-text-weight-bold' : 'is-tinny has-text-grey'"
+        @click="onClick(index)"
+      />
+    </template>
+  </div>
+</template>

package/vue-components/v3/cards/ConfirmNameCard.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+import CheckIcon from "../icons/CheckIcon.vue";
+
+interface Props {
+  // the value the user has to type to confirm
+  name: string;
+  // text around the highlighted name: "{prefix} <name> {suffix}"
+  prefix?: string;
+  suffix?: string;
+  required?: boolean;
+  placeholder?: string;
+  confirmedText?: string;
+  // warning note under the input; hidden when empty
+  hint?: string;
+  caseSensitive?: boolean;
+  // ignore leading/trailing whitespace while comparing
+  trim?: boolean;
+  disabled?: boolean;
+  id?: string;
+  modifierClasses?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  prefix: "Type",
+  suffix: "to confirm",
+  required: true,
+  placeholder: "",
+  confirmedText: "Identity Confirmed",
+  hint: "",
+  caseSensitive: true,
+  trim: false,
+  disabled: false,
+  id: "",
+  modifierClasses: "",
+});
+
+const emit = defineEmits<{
+  confirmed: [isConfirmed: boolean];
+}>();
+
+// the typed value
+const input = defineModel<string>({ default: "" });
+
+const inputId = computed(() => props.id || `confirm-name-${props.name.toLowerCase().replace(/\s+/g, "-")}`);
+
+const normalize = (value: string) => {
+  const v = props.trim ? value.trim() : value;
+  return props.caseSensitive ? v : v.toLowerCase();
+};
+
+const isConfirmed = computed(() => !!props.name && normalize(input.value) === normalize(props.name));
+
+watch(isConfirmed, (value) => emit("confirmed", value), { immediate: true });
+
+defineExpose({ isConfirmed });
+</script>
+
+<template>
+  <div class="confirm-name-card" :class="[modifierClasses, { 'is-confirmed': isConfirmed, 'is-disabled': disabled }]">
+    <label :for="inputId" class="cnc-label">
+      {{ prefix }} <code class="cnc-name">{{ name }}</code> {{ suffix }}
+      <span v-if="required" class="cnc-required">*</span>
+    </label>
+
+    <div class="cnc-field is-flex is-align-items-center is-flex-wrap-wrap gap-16">
+      <input
+        :id="inputId"
+        v-model="input"
+        type="text"
+        class="cnc-input"
+        autocomplete="off"
+        autocapitalize="off"
+        spellcheck="false"
+        :placeholder="placeholder || name"
+        :required="required"
+        :disabled="disabled"
+        :aria-invalid="!!input && !isConfirmed"
+      />
+      <span v-if="isConfirmed" class="cnc-badge" role="status">
+        <CheckIcon class="cnc-badge-icon" />
+        {{ confirmedText }}
+      </span>
+    </div>
+
+    <p v-if="hint || $slots.hint" class="cnc-hint is-flex is-align-items-center gap-8 mb-0">
+      <svg class="cnc-hint-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0"
+        />
+      </svg>
+      <slot name="hint">{{ hint }}</slot>
+    </p>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.confirm-name-card {
+  --cnc-mono: "Inconsolata", monospace;
+
+  padding: 24px 28px;
+  border: 1px solid $red-95;
+  border-radius: 12px;
+  background-color: $red-97;
+
+  &.is-disabled {
+    opacity: 0.6;
+  }
+}
+
+.cnc-label {
+  display: block;
+  margin-bottom: 16px;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.8;
+  color: $color-heading;
+}
+
+.cnc-name {
+  padding: 2px 8px;
+  border: 1px solid $red-90;
+  border-radius: 6px;
+  font-family: var(--cnc-mono);
+  font-size: 14px;
+  font-weight: 700;
+  color: $danger;
+  background-color: $red-95;
+}
+
+.cnc-required {
+  color: $danger;
+}
+
+.cnc-input {
+  width: 100%;
+  max-width: 384px;
+  height: 44px;
+  padding: 0 16px;
+  border: 1px solid $color-border;
+  border-radius: 8px;
+  font-family: var(--cnc-mono);
+  font-size: 15px;
+  color: $color-heading;
+  background-color: $white-100;
+  outline: none;
+  transition: border-color 0.2s;
+
+  &:focus {
+    border-color: $color-border-dark;
+  }
+
+  &[aria-invalid="true"] {
+    border-color: $red-80;
+  }
+
+  .is-confirmed & {
+    border-color: $green-80;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.cnc-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid $green-80;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: $success;
+  background-color: $green-95;
+
+  .cnc-badge-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.cnc-hint {
+  margin-top: 16px;
+  font-size: 13px;
+  color: $color-label;
+
+  .cnc-hint-icon {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    color: $yellow-40;
+  }
+}
+</style>

package/vue-components/v3/cards/DetailCard.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import AcDivider from "../divider/Divider.vue";
+
+interface Field {
+  label: string;
+  value?: string | number;
+  key?: string;
+}
+
+withDefaults(
+  defineProps<{
+    title: string;
+    fields?: Field[];
+    columns?: number;
+    modifierClasses?: string;
+  }>(),
+  {
+    fields: () => [],
+    columns: 2,
+    modifierClasses: "",
+  },
+);
+</script>
+
+<template>
+  <div class="is-flex is-flex-direction-column p-20 b-1 is-rounded-8 bg-white" :class="modifierClasses">
+    <div class="is-flex is-justify-content-space-between is-align-items-center gap-8">
+      <div class="is-flex is-align-items-center gap-12">
+        <span v-if="$slots.icon" class="icon is-medium is-flex-shrink-0 is-rounded-8 bg-primary-93 has-text-primary">
+          <slot name="icon" />
+        </span>
+        <h5>{{ title }}</h5>
+      </div>
+      <slot name="header-right" />
+    </div>
+
+    <AcDivider />
+
+    <div class="is-flex-grow-1">
+      <div v-if="fields.length" class="grid gap-16" :class="`grid-cols-${columns}`">
+        <div v-for="field in fields" :key="field.label">
+          <p class="has-text-grey">{{ field.label }}</p>
+          <div class="is-flex is-flex-wrap-wrap is-align-items-center gap-8 has-text-weight-semibold">
+            <slot :name="`field-${field.key}`" :field="field">{{ field.value }}</slot>
+          </div>
+        </div>
+      </div>
+      <slot />
+    </div>
+
+    <template v-if="$slots.footer">
+      <AcDivider />
+      <div class="is-flex is-justify-content-space-between is-align-items-center gap-8">
+        <slot name="footer" />
+      </div>
+    </template>
+  </div>
+</template>

package/vue-components/v3/cards/RadioCard.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  value: string | number;
+  label: string;
+  name?: string;
+  description?: string;
+  footer?: string;
+  status?: string;
+  statusTone?: "success" | "warning" | "danger";
+  disabled?: boolean;
+  id?: string;
+  modifierClasses?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: "radio-card",
+  description: "",
+  footer: "",
+  status: "",
+  statusTone: "success",
+  disabled: false,
+  id: "",
+  modifierClasses: "",
+});
+
+const selected = defineModel<string | number>();
+
+const inputId = computed(() => props.id || `${props.name}-${props.value}`);
+const isSelected = computed(() => selected.value === props.value);
+
+function select() {
+  if (props.disabled) return;
+  selected.value = props.value;
+}
+</script>
+
+<template>
+  <div
+    class="radio-card ac-radio"
+    :class="[modifierClasses, { 'is-selected': isSelected, 'is-disabled': disabled }]"
+    @click="select"
+  >
+    <input :id="inputId" v-model="selected" type="radio" :name="name" :value="value" :disabled="disabled" />
+    <label :for="inputId">{{ label }}</label>
+
+    <p v-if="description || $slots.default" class="radio-card__description">
+      <slot>{{ description }}</slot>
+    </p>
+
+    <p v-if="status || $slots.status" class="radio-card__status" :class="`radio-card__status--${statusTone}`">
+      <slot name="status">
+        <span class="radio-card__dot" />
+        {{ status }}
+      </slot>
+    </p>
+
+    <p v-else-if="footer || $slots.footer" class="radio-card__footer">
+      <slot name="footer">{{ footer }}</slot>
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.radio-card {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  border: 1px solid $color-border;
+  border-radius: 10px;
+  background-color: $white-100;
+  cursor: pointer;
+  transition: 0.2s ease-in-out;
+
+  label {
+    font-size: 14px;
+    font-weight: 600;
+    color: $slate-10;
+    padding-left: 32px;
+    line-height: 20px;
+
+    &::before {
+      width: 20px;
+      height: 20px;
+      border-color: $color-border-dark;
+    }
+
+    &::after {
+      top: 5px;
+      left: 5px;
+      width: 10px;
+      height: 10px;
+    }
+  }
+
+  &:hover:not(.is-disabled) {
+    border-color: $ac-primary;
+  }
+
+  &.is-selected {
+    border-color: $ac-primary;
+    background-color: $primary-97;
+    box-shadow: inset 0 0 0 1px $ac-primary;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+.radio-card__description {
+  margin: 6px 0 0;
+  padding-left: 32px;
+  font-size: 14px;
+  line-height: 20px;
+  color: $slate-40;
+}
+
+.radio-card__footer,
+.radio-card__status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 16px 0 0;
+  padding-top: 0;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.radio-card__footer {
+  margin-top: auto;
+  padding-top: 16px;
+  color: $slate-50;
+}
+
+.radio-card__status {
+  margin-top: auto;
+  padding-top: 16px;
+
+  &--success {
+    color: $ac-primary;
+  }
+
+  &--warning {
+    color: $warning;
+  }
+
+  &--danger {
+    color: $danger;
+  }
+}
+
+.radio-card__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+  flex-shrink: 0;
+}
+</style>