@citizenplane/pimp 18.11.1 → 18.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.11.1",
+  "version": "18.12.0",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/assets/css/shadows.css

@@ -76,4 +76,14 @@
   --cp-shadow-focus-ring-accent-ring-blur: 0;
   --cp-shadow-focus-ring-accent-ring-spread: 4px;
   --cp-shadow-focus-ring-accent-ring-color: var(--cp-colors-accent-500);
+  --cp-shadow-focus-ring-error-gap-offset-x: 0;
+  --cp-shadow-focus-ring-error-gap-offset-y: 0;
+  --cp-shadow-focus-ring-error-gap-blur: 0;
+  --cp-shadow-focus-ring-error-gap-spread: 2px;
+  --cp-shadow-focus-ring-error-gap-color: var(--cp-colors-white);
+  --cp-shadow-focus-ring-error-ring-offset-x: 0;
+  --cp-shadow-focus-ring-error-ring-offset-y: 0;
+  --cp-shadow-focus-ring-error-ring-blur: 0;
+  --cp-shadow-focus-ring-error-ring-spread: 4px;
+  --cp-shadow-focus-ring-error-ring-color: var(--cp-colors-red-500);
 }

package/src/assets/css/tokens.css

@@ -355,6 +355,14 @@
     var(--cp-shadow-focus-ring-accent-ring-offset-x) var(--cp-shadow-focus-ring-accent-ring-offset-y)
     var(--cp-shadow-focus-ring-accent-ring-blur) var(--cp-shadow-focus-ring-accent-ring-spread)
     var(--cp-shadow-focus-ring-accent-ring-color);
+
+  --cp-shadow-focus-ring-error:
+    var(--cp-shadow-focus-ring-error-gap-offset-x) var(--cp-shadow-focus-ring-error-gap-offset-y)
+    var(--cp-shadow-focus-ring-error-gap-blur) var(--cp-shadow-focus-ring-error-gap-spread)
+    var(--cp-shadow-focus-ring-error-gap-color),
+    var(--cp-shadow-focus-ring-error-ring-offset-x) var(--cp-shadow-focus-ring-error-ring-offset-y)
+    var(--cp-shadow-focus-ring-error-ring-blur) var(--cp-shadow-focus-ring-error-ring-spread)
+    var(--cp-shadow-focus-ring-error-ring-color);
 }
 
 /* stylelint-enable */

package/src/components/CpSegmentedControl.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="cpSegmentedControl" :class="segmentedControlDynamicClasses">
+    <div class="cpSegmentedControl__options">
+      <template v-for="(option, index) in options" :key="option.value">
+        <cp-segmented-control-item
+          :option="option"
+          :name="name"
+          :is-disabled="isDisabled"
+          :is-full-width="isFullWidth"
+          :is-invalid="isInvalid"
+          :is-selected="isSelected(index)"
+          :orientation="orientation"
+          v-model="selectedValue"
+          :size="size"
+          @mouseenter="handleOptionMouseEnter(index)"
+          @mouseleave="handleOptionMouseLeave"
+          @focusin="handleOptionFocusIn(index)"
+          @focusout="handleOptionFocusOut"
+        />
+        <div
+          v-if="!isLastOption(index)"
+          class="cpSegmentedControl__divider"
+          :class="getDynamicDividerClasses(index)"
+          aria-hidden="true"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { capitalizeFirstLetter } from '@/helpers'
+import CpSegmentedControlItem from './CpSegmentedControlItem.vue'
+
+interface Option {
+  label: string
+  leadingIcon?: string
+  trailingIcon?: string
+  value: string
+}
+
+interface Props {
+  isDisabled?: boolean
+  isFullWidth?: boolean
+  isInvalid?: boolean
+  name: string
+  options: Option[]
+  orientation?: 'horizontal' | 'vertical'
+  size?: 'sm' | 'md'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  orientation: 'horizontal',
+})
+
+const segmentedControlDynamicClasses = computed(() => ({
+  'cpSegmentedControl--isInvalid': props.isInvalid,
+  'cpSegmentedControl--fullWidth': props.isFullWidth,
+  'cpSegmentedControl--isDisabled': props.isDisabled,
+  [`cpSegmentedControl--is${capitalizeFirstLetter(props.orientation)}`]: true,
+}))
+
+const selectedValue = defineModel<string | undefined>()
+const hoveredIndex = ref<number | null>(null)
+const focusedIndex = ref<number | null>(null)
+
+const isSelected = (index: number) => index === selectedIndex.value
+
+const isLastOption = (index: number) => index === props.options.length - 1
+
+const selectedIndex = computed(() => {
+  if (selectedValue.value === undefined) return -1
+
+  return props.options.findIndex((option) => option.value === selectedValue.value)
+})
+
+const setAdjacentDividerIndexes = (indexes: Set<number>, optionIndex: number) => {
+  if (optionIndex < 0) return
+
+  if (optionIndex > 0) {
+    indexes.add(optionIndex - 1)
+  }
+
+  if (optionIndex < props.options.length - 1) {
+    indexes.add(optionIndex)
+  }
+}
+
+const selectedDividerIndexes = computed(() => {
+  const indexes = new Set<number>()
+
+  setAdjacentDividerIndexes(indexes, selectedIndex.value)
+
+  if (focusedIndex.value !== null) {
+    setAdjacentDividerIndexes(indexes, focusedIndex.value)
+  }
+
+  return indexes
+})
+
+const hoveredDividerIndexes = computed(() => {
+  const indexes = new Set<number>()
+
+  if (
+    hoveredIndex.value !== null
+    && hoveredIndex.value !== selectedIndex.value
+    && hoveredIndex.value !== focusedIndex.value
+  ) {
+    setAdjacentDividerIndexes(indexes, hoveredIndex.value)
+  }
+
+  return indexes
+})
+
+const getDynamicDividerClasses = (index: number) => {
+  const isActive = selectedDividerIndexes.value.has(index)
+
+  return {
+    'cpSegmentedControl__divider--isActive': isActive,
+    'cpSegmentedControl__divider--isHovered': !isActive && hoveredDividerIndexes.value.has(index),
+  }
+}
+
+const handleOptionMouseEnter = (index: number) => {
+  if (props.isDisabled) return
+
+  hoveredIndex.value = index
+}
+
+const handleOptionMouseLeave = () => (hoveredIndex.value = null)
+
+const handleOptionFocusIn = (index: number) => {
+  if (props.isDisabled) return
+
+  focusedIndex.value = index
+}
+
+const handleOptionFocusOut = () => (focusedIndex.value = null)
+</script>
+
+<style lang="scss">
+.cpSegmentedControl {
+  width: fit-content;
+  min-width: 0;
+  max-width: 100%;
+
+  &--fullWidth {
+    width: 100%;
+  }
+
+  &__options {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    border-radius: var(--cp-radius-md);
+    box-shadow: var(--cp-shadows-3xs);
+  }
+
+  &__divider {
+    width: fn.px-to-rem(1);
+    flex-shrink: 0;
+    align-self: stretch;
+    background-color: var(--cp-border-soft);
+    transition: background-color 100ms ease;
+
+    &--isHovered {
+      background-color: var(--cp-border-soft-hover);
+    }
+
+    &--isActive {
+      position: relative;
+      z-index: 5;
+      background-color: var(--cp-border-accent-solid);
+    }
+  }
+
+  &--isInvalid {
+    .cpSegmentedControl__divider {
+      background-color: var(--cp-border-error-solid);
+    }
+
+    .cpSegmentedControl__divider--isHovered,
+    .cpSegmentedControl__divider--isActive {
+      background-color: var(--cp-border-error-solid);
+    }
+  }
+
+  &--isDisabled {
+    .cpSegmentedControl__divider,
+    .cpSegmentedControl__divider--isHovered,
+    .cpSegmentedControl__divider--isActive {
+      background-color: var(--cp-border-disabled);
+    }
+  }
+
+  &--isVertical {
+    .cpSegmentedControl__options {
+      flex-direction: column;
+    }
+
+    .cpSegmentedControl__divider {
+      width: 100%;
+      height: fn.px-to-rem(1);
+    }
+  }
+}
+</style>

package/src/components/CpSegmentedControlItem.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="cpSegmentedControlItem" :class="dynamicSegmentedControlItemClasses">
+    <input
+      :id="option.value"
+      v-model="selectedValue"
+      class="cpSegmentedControlItem__input"
+      :disabled="isDisabled"
+      :name="name"
+      type="radio"
+      :value="option.value"
+    />
+    <label class="cpSegmentedControlItem__inner" :for="option.value">
+      <cp-icon v-if="option.leadingIcon" class="cpSegmentedControlItem__icon" size="16" :type="option.leadingIcon" />
+      <span class="cpSegmentedControlItem__label">{{ option.label }}</span>
+      <cp-icon v-if="option.trailingIcon" class="cpSegmentedControlItem__icon" size="16" :type="option.trailingIcon" />
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { capitalizeFirstLetter } from '@/helpers'
+
+interface Option {
+  label: string
+  leadingIcon?: string
+  trailingIcon?: string
+  value: string
+}
+
+interface Props {
+  isDisabled?: boolean
+  isFullWidth?: boolean
+  isInvalid?: boolean
+  isSelected?: boolean
+  name: string
+  option: Option
+  orientation?: 'horizontal' | 'vertical'
+  size?: 'sm' | 'md'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  orientation: 'horizontal',
+})
+
+const selectedValue = defineModel<string | undefined>()
+
+const dynamicSegmentedControlItemClasses = computed(() => ({
+  'cpSegmentedControlItem--isDisabled': props.isDisabled,
+  'cpSegmentedControlItem--isInvalid': props.isInvalid,
+  'cpSegmentedControlItem--isSelected': props.isSelected,
+  'cpSegmentedControlItem--fullWidth': props.isFullWidth && props.orientation !== 'vertical',
+  [`cpSegmentedControlItem--${props.size}`]: props.size,
+  [`cpSegmentedControlItem--is${capitalizeFirstLetter(props.orientation)}`]: true,
+}))
+</script>
+
+<style scoped lang="scss">
+.cpSegmentedControlItem {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  min-width: 0;
+  flex: 0 1 auto;
+  align-items: center;
+  border-width: fn.px-to-rem(1) 0;
+  border-style: solid;
+  border-color: var(--cp-border-soft);
+  background-color: var(--cp-background-primary);
+  color: var(--cp-text-secondary);
+  font-weight: 500;
+  transition:
+    background-color 100ms ease,
+    border-color 100ms ease,
+    box-shadow 100ms ease,
+    color 100ms ease;
+
+  &--fullWidth {
+    width: 100%;
+  }
+
+  &--md &__inner {
+    padding: fn.px-to-rem(13) var(--cp-spacing-xl);
+  }
+
+  &--sm &__inner {
+    padding: calc(var(--cp-spacing-sm-md) - 1px) var(--cp-spacing-xl);
+  }
+
+  &:first-child {
+    border-radius: var(--cp-radius-md) 0 0 var(--cp-radius-md);
+    border-left-width: fn.px-to-rem(1);
+  }
+
+  &:last-child {
+    border-radius: 0 var(--cp-radius-md) var(--cp-radius-md) 0;
+    border-right-width: fn.px-to-rem(1);
+  }
+
+  &:has(.cpSegmentedControlItem__input:focus-visible) {
+    z-index: 4;
+    border-color: var(--cp-border-accent-solid);
+    background-color: var(--cp-background-accent-secondary-hover);
+    box-shadow: var(--cp-shadow-focus-ring-accent);
+    color: var(--cp-foreground-accent-primary-hover);
+  }
+
+  &--isInvalid:has(.cpSegmentedControlItem__input:focus-visible) {
+    border-color: var(--cp-border-error-solid);
+    background-color: var(--cp-background-error-secondary-hover);
+    box-shadow: var(--cp-shadow-focus-ring-error);
+    color: var(--cp-text-error-primary-hover);
+  }
+
+  &:has(.cpSegmentedControlItem__input:disabled) {
+    background-color: var(--cp-background-primary);
+    color: var(--cp-text-disabled);
+  }
+
+  &:has(.cpSegmentedControlItem__input:disabled) > .cpSegmentedControlItem__inner {
+    cursor: not-allowed;
+  }
+
+  &--isSelected:not(:has(.cpSegmentedControlItem__input:is(:focus-visible, :disabled))) {
+    background-color: var(--cp-background-accent-secondary);
+    color: var(--cp-text-accent-primary);
+  }
+
+  &--isSelected.cpSegmentedControlItem--isInvalid:not(:has(.cpSegmentedControlItem__input:is(:focus-visible, :disabled))) {
+    background-color: var(--cp-background-error-secondary);
+    color: var(--cp-text-error-primary);
+  }
+
+  &:hover:not(.cpSegmentedControlItem--isSelected, :has(.cpSegmentedControlItem__input:disabled)) {
+    border-color: var(--cp-border-soft-hover);
+    background-color: var(--cp-background-primary-hover);
+    color: var(--cp-text-secondary-hover);
+  }
+
+  &--isSelected:not(:has(.cpSegmentedControlItem__input:disabled)) {
+    border-color: var(--cp-border-accent-solid);
+  }
+
+  &--isSelected:has(.cpSegmentedControlItem__input:disabled) {
+    background-color: var(--cp-background-disabled);
+  }
+
+  &--isSelected:hover:not(:has(.cpSegmentedControlItem__input:is(:disabled, :focus-visible))) {
+    border-color: var(--cp-border-accent-solid);
+    background-color: var(--cp-background-accent-secondary-hover);
+    color: var(--cp-text-accent-primary-hover);
+  }
+
+  &--isSelected.cpSegmentedControlItem--isInvalid:hover:not(:has(.cpSegmentedControlItem__input:is(:disabled, :focus-visible))) {
+    background-color: var(--cp-background-error-secondary-hover);
+    color: var(--cp-text-error-primary);
+  }
+
+  &--isInvalid {
+    border-color: var(--cp-border-error-solid);
+
+    &:hover:not(.cpSegmentedControlItem--isSelected, :has(.cpSegmentedControlItem__input:disabled)) {
+      border-color: var(--cp-border-error-solid);
+      background-color: var(--cp-background-error-secondary-hover);
+    }
+
+    &.cpSegmentedControlItem--isSelected:not(:has(.cpSegmentedControlItem__input:disabled)) {
+      border-color: var(--cp-border-error-solid);
+    }
+  }
+
+  &--isDisabled {
+    border-color: var(--cp-border-disabled);
+
+    &.cpSegmentedControlItem--isSelected {
+      color: var(--cp-text-disabled);
+    }
+
+    &.cpSegmentedControlItem--isInvalid {
+      border-color: var(--cp-border-disabled);
+    }
+  }
+
+  &--isVertical {
+    width: 100%;
+    border-width: 0 fn.px-to-rem(1);
+
+    &:first-child {
+      border-radius: var(--cp-radius-md) var(--cp-radius-md) 0 0;
+      border-top-width: fn.px-to-rem(1);
+      border-right-width: fn.px-to-rem(1);
+      border-left-width: fn.px-to-rem(1);
+    }
+
+    &:last-child {
+      border-radius: 0 0 var(--cp-radius-md) var(--cp-radius-md);
+      border-right-width: fn.px-to-rem(1);
+      border-bottom-width: fn.px-to-rem(1);
+      border-left-width: fn.px-to-rem(1);
+    }
+
+    &:not(:first-child, :last-child) {
+      border-right-width: fn.px-to-rem(1);
+      border-left-width: fn.px-to-rem(1);
+    }
+  }
+
+  &__inner {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    min-width: 0;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: var(--cp-text-size-sm);
+    gap: var(--cp-spacing-md);
+    line-height: var(--cp-line-height-sm);
+  }
+
+  &__input {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    appearance: none;
+    background-color: transparent;
+    cursor: pointer;
+    inset: 0;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__label {
+    @extend %u-text-ellipsis;
+
+    min-width: 0;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+}
+</style>

package/src/components/index.ts

@@ -52,6 +52,7 @@ import CpSeatMapRowFacility from './CpSeatMapRowFacility.vue'
 import CpSeatMapSeat from './CpSeatMapSeat.vue'
 import CpSeatMapSeatWrapper from './CpSeatMapSeatWrapper.vue'
 import CpSeatMapZone from './CpSeatMapZone.vue'
+import CpSegmentedControl from './CpSegmentedControl.vue'
 import CpSelect from './CpSelect.vue'
 import CpSelectableButton from './CpSelectableButton.vue'
 import CpSelectMenu from './CpSelectMenu.vue'
@@ -118,6 +119,7 @@ const Components = {
   CpRadioGroup,
   CpSelectableButton,
   CpSwitch,
+  CpSegmentedControl,
   CpTable,
   CpTableColumnEditor,
   CpIcon,
@@ -233,6 +235,7 @@ export {
   CpSeatMapSeat,
   CpSeatMapSeatWrapper,
   CpSeatMapZone,
+  CpSegmentedControl,
   CpSelect,
   CpSelectableButton,
   CpSelectMenu,