@phillips/seldon 1.174.0 → 1.176.0

package/dist/patterns/CountryPicker/constants.js

@@ -0,0 +1,279 @@
+const e = [
+  { name: "Afghanistan", code: "AF" },
+  { name: "Åland Islands", code: "AX" },
+  { name: "Albania", code: "AL" },
+  { name: "Algeria", code: "DZ" },
+  { name: "American Samoa", code: "AS" },
+  { name: "Andorra", code: "AD" },
+  { name: "Angola", code: "AO" },
+  { name: "Anguilla", code: "AI" },
+  { name: "Antigua and Barbuda", code: "AG" },
+  { name: "Argentina", code: "AR" },
+  { name: "Armenia", code: "AM" },
+  { name: "Aruba", code: "AW" },
+  { name: "Australia", code: "AU" },
+  { name: "Austria", code: "AT" },
+  { name: "Azerbaijan", code: "AZ" },
+  { name: "Bahamas", code: "BS" },
+  { name: "Bahrain", code: "BH" },
+  { name: "Bangladesh", code: "BD" },
+  { name: "Barbados", code: "BB" },
+  { name: "Belarus", code: "BY" },
+  { name: "Belgium", code: "BE" },
+  { name: "Belize", code: "BZ" },
+  { name: "Benin", code: "BJ" },
+  { name: "Bermuda", code: "BM" },
+  { name: "Bhutan", code: "BT" },
+  { name: "Bolivia", code: "BO" },
+  {
+    name: "Caribbean Netherlands",
+    code: "BQ"
+  },
+  { name: "Bosnia and Herzegovina", code: "BA" },
+  { name: "Botswana", code: "BW" },
+  { name: "Brazil", code: "BR" },
+  {
+    name: "British Indian Ocean Territory",
+    code: "IO"
+  },
+  { name: "Brunei", code: "BN" },
+  { name: "Bulgaria", code: "BG" },
+  { name: "Burkina Faso", code: "BF" },
+  { name: "Burundi", code: "BI" },
+  { name: "Cape Verde", code: "CV" },
+  { name: "Cambodia", code: "KH" },
+  { name: "Cameroon", code: "CM" },
+  { name: "Canada", code: "CA" },
+  { name: "Cayman Islands", code: "KY" },
+  { name: "Central African Republic", code: "CF" },
+  { name: "Chad", code: "TD" },
+  { name: "Chile", code: "CL" },
+  { name: "China", code: "CN" },
+  { name: "Christmas Island", code: "CX" },
+  { name: "Cocos (Keeling) Islands", code: "CC" },
+  { name: "Colombia", code: "CO" },
+  { name: "Comoros", code: "KM" },
+  { name: "Congo (Republic)", code: "CG" },
+  { name: "Congo (DRC)", code: "CD" },
+  { name: "Cook Islands", code: "CK" },
+  { name: "Costa Rica", code: "CR" },
+  { name: "Côte d'Ivoire", code: "CI" },
+  { name: "Croatia", code: "HR" },
+  { name: "Cuba", code: "CU" },
+  { name: "Curaçao", code: "CW" },
+  { name: "Cyprus", code: "CY" },
+  { name: "Czech Republic", code: "CZ" },
+  {
+    name: "Timor-Leste",
+    code: "TL"
+  },
+  { name: "Denmark", code: "DK" },
+  { name: "Djibouti", code: "DJ" },
+  { name: "Dominica", code: "DM" },
+  { name: "Dominican Republic", code: "DO" },
+  { name: "Ecuador", code: "EC" },
+  { name: "Egypt", code: "EG" },
+  { name: "El Salvador", code: "SV" },
+  { name: "Equatorial Guinea", code: "GQ" },
+  { name: "Eritrea", code: "ER" },
+  { name: "Estonia", code: "EE" },
+  { name: "Ethiopia", code: "ET" },
+  {
+    name: "Falkland Islands",
+    code: "FK"
+  },
+  { name: "Faroe Islands", code: "FO" },
+  { name: "Fiji", code: "FJ" },
+  { name: "Finland", code: "FI" },
+  { name: "France", code: "FR" },
+  { name: "French Guiana", code: "GF" },
+  { name: "French Polynesia", code: "PF" },
+  { name: "Gabon", code: "GA" },
+  { name: "Gambia", code: "GM" },
+  { name: "Georgia", code: "GE" },
+  { name: "Germany", code: "DE" },
+  { name: "Ghana", code: "GH" },
+  { name: "Gibraltar", code: "GI" },
+  { name: "Greece", code: "GR" },
+  { name: "Greenland", code: "GL" },
+  { name: "Grenada", code: "GD" },
+  { name: "Guadeloupe", code: "GP" },
+  { name: "Guam", code: "GU" },
+  { name: "Guatemala", code: "GT" },
+  { name: "Guernsey", code: "GG" },
+  { name: "Guinea", code: "GN" },
+  { name: "Guinea-Bissau", code: "GW" },
+  { name: "Guyana", code: "GY" },
+  { name: "Haiti", code: "HT" },
+  { name: "Honduras", code: "HN" },
+  { name: "Hong Kong", code: "HK" },
+  { name: "Hungary", code: "HU" },
+  { name: "Iceland", code: "IS" },
+  { name: "India", code: "IN" },
+  { name: "Indonesia", code: "ID" },
+  { name: "Iran", code: "IR" },
+  { name: "Iraq", code: "IQ" },
+  { name: "Ireland", code: "IE" },
+  { name: "Israel", code: "IL" },
+  { name: "Italy", code: "IT" },
+  { name: "Jamaica", code: "JM" },
+  { name: "Japan", code: "JP" },
+  { name: "Jersey", code: "JE" },
+  { name: "Jordan", code: "JO" },
+  { name: "Kazakhstan", code: "KZ" },
+  { name: "Kenya", code: "KE" },
+  { name: "Kiribati", code: "KI" },
+  { name: "South Korea", code: "KR" },
+  { name: "Kosovo", code: "XK" },
+  { name: "Kuwait", code: "KW" },
+  { name: "Kyrgyzstan", code: "KG" },
+  { name: "Laos", code: "LA" },
+  { name: "Latvia", code: "LV" },
+  { name: "Lebanon", code: "LB" },
+  { name: "Lesotho", code: "LS" },
+  { name: "Liberia", code: "LR" },
+  { name: "Libya", code: "LY" },
+  { name: "Liechtenstein", code: "LI" },
+  { name: "Lithuania", code: "LT" },
+  { name: "Luxembourg", code: "LU" },
+  { name: "Macau", code: "MO" },
+  {
+    name: "Macedonia",
+    code: "MK"
+  },
+  { name: "Madagascar", code: "MG" },
+  { name: "Malawi", code: "MW" },
+  { name: "Malaysia", code: "MY" },
+  { name: "Maldives", code: "MV" },
+  { name: "Mali", code: "ML" },
+  { name: "Malta", code: "MT" },
+  { name: "Isle of Man", code: "IM" },
+  { name: "Marshall Islands", code: "MH" },
+  { name: "Martinique", code: "MQ" },
+  { name: "Mauritania", code: "MR" },
+  { name: "Mauritius", code: "MU" },
+  { name: "Mayotte", code: "YT" },
+  { name: "Mexico", code: "MX" },
+  { name: "Micronesia", code: "FM" },
+  { name: "Moldova", code: "MD" },
+  { name: "Monaco", code: "MC" },
+  { name: "Mongolia", code: "MN" },
+  { name: "Montenegro", code: "ME" },
+  { name: "Montserrat", code: "MS" },
+  { name: "Morocco", code: "MA" },
+  { name: "Mozambique", code: "MZ" },
+  { name: "Myanmar (Burma)", code: "MM" },
+  { name: "Namibia", code: "NA" },
+  { name: "Nauru", code: "NR" },
+  { name: "Nepal", code: "NP" },
+  { name: "Netherlands", code: "NL" },
+  { name: "New Caledonia", code: "NC" },
+  { name: "New Zealand", code: "NZ" },
+  { name: "Nicaragua", code: "NI" },
+  { name: "Niger", code: "NE" },
+  { name: "Nigeria", code: "NG" },
+  { name: "Niue", code: "NU" },
+  { name: "Norfolk Island", code: "NF" },
+  { name: "North Korea", code: "KP" },
+  { name: "Northern Mariana Islands", code: "MP" },
+  { name: "Norway", code: "NO" },
+  { name: "Oman", code: "OM" },
+  { name: "Pakistan", code: "PK" },
+  { name: "Palau", code: "PW" },
+  { name: "Palestine", code: "PS" },
+  { name: "Panama", code: "PA" },
+  { name: "Papua New Guinea", code: "PG" },
+  { name: "Paraguay", code: "PY" },
+  { name: "Peru", code: "PE" },
+  { name: "Philippines", code: "PH" },
+  { name: "Poland", code: "PL" },
+  { name: "Portugal", code: "PT" },
+  { name: "Puerto Rico", code: "PR" },
+  { name: "Qatar", code: "QA" },
+  { name: "Réunion", code: "RE" },
+  { name: "Romania", code: "RO" },
+  { name: "Russia", code: "RU" },
+  { name: "Rwanda", code: "RW" },
+  { name: "Saint Barthélemy", code: "BL" },
+  {
+    name: "Saint Helena",
+    code: "SH"
+  },
+  { name: "Saint Kitts and Nevis", code: "KN" },
+  { name: "Saint Lucia", code: "LC" },
+  {
+    name: "Saint Martin",
+    code: "MF"
+  },
+  { name: "Saint Pierre and Miquelon", code: "PM" },
+  {
+    name: "Saint Vincent and the Grenadines",
+    code: "VC"
+  },
+  { name: "Samoa", code: "WS" },
+  { name: "San Marino", code: "SM" },
+  { name: "São Tomé and Príncipe", code: "ST" },
+  { name: "Saudi Arabia", code: "SA" },
+  { name: "Senegal", code: "SN" },
+  { name: "Serbia", code: "RS" },
+  { name: "Seychelles", code: "SC" },
+  { name: "Sierra Leone", code: "SL" },
+  { name: "Singapore", code: "SG" },
+  { name: "Sint Maarten", code: "SX" },
+  { name: "Slovakia", code: "SK" },
+  { name: "Slovenia", code: "SI" },
+  { name: "Solomon Islands", code: "SB" },
+  { name: "Somalia", code: "SO" },
+  { name: "South Africa", code: "ZA" },
+  {
+    name: "South Georgia and the South Sandwich Islands",
+    code: "GS"
+  },
+  { name: "South Sudan", code: "SS" },
+  { name: "Spain", code: "ES" },
+  { name: "Sri Lanka", code: "LK" },
+  { name: "Sudan", code: "SD" },
+  { name: "Suriname", code: "SR" },
+  { name: "Svalbard and Jan Mayen", code: "SJ" },
+  { name: "Swaziland", code: "SZ" },
+  { name: "Sweden", code: "SE" },
+  { name: "Switzerland", code: "CH" },
+  { name: "Syria", code: "SY" },
+  { name: "Taiwan", code: "TW" },
+  { name: "Tajikistan", code: "TJ" },
+  { name: "Tanzania", code: "TZ" },
+  { name: "Thailand", code: "TH" },
+  { name: "Togo", code: "TG" },
+  { name: "Tokelau", code: "TK" },
+  { name: "Tonga", code: "TO" },
+  { name: "Trinidad and Tobago", code: "TT" },
+  { name: "Tunisia", code: "TN" },
+  { name: "Türkiye", code: "TR" },
+  { name: "Turkmenistan", code: "TM" },
+  { name: "Turks and Caicos Islands", code: "TC" },
+  { name: "Tuvalu", code: "TV" },
+  { name: "Western Sahara", code: "EH" },
+  { name: "Uganda", code: "UG" },
+  { name: "Ukraine", code: "UA" },
+  { name: "United Arab Emirates", code: "AE" },
+  { name: "United Kingdom", code: "GB" },
+  { name: "United States", code: "US" },
+  { name: "Uruguay", code: "UY" },
+  { name: "Uzbekistan", code: "UZ" },
+  { name: "Vanuatu", code: "VU" },
+  { name: "Vatican City", code: "VA" },
+  {
+    name: "Venezuela",
+    code: "VE"
+  },
+  { name: "Vietnam", code: "VN" },
+  { name: "U.S. Virgin Islands", code: "VI" },
+  { name: "British Virgin Islands", code: "VG" },
+  { name: "Wallis and Futuna", code: "WF" },
+  { name: "Yemen", code: "YE" },
+  { name: "Zambia", code: "ZM" },
+  { name: "Zimbabwe", code: "ZW" }
+];
+export {
+  e as countries
+};

package/dist/patterns/CountryPicker/index.d.ts

@@ -0,0 +1 @@
+export { default as CountryPicker, type CountryPickerProps } from './CountryPicker';

package/dist/patterns/CountryPicker/types.d.ts

@@ -0,0 +1,30 @@
+import { countries } from './constants';
+export declare function toConfig(isPhone: true, value: Country['code'] | undefined, onChange: (v: Country['code']) => void): PhoneConfig;
+export declare function toConfig(isPhone: false, value: Country['name'] | undefined, onChange: (v: Country['name']) => void): CountryConfig;
+export type PrependTrigger<T> = {
+    [K in keyof T as K extends 'hasError' ? 'hasTriggerError' : `trigger${Capitalize<string & K>}`]: T[K];
+};
+export type Country = {
+    code: (typeof countries)[number]['code'];
+    name: (typeof countries)[number]['name'];
+};
+export type PhoneConfig = {
+    isPhone: true;
+    value: Country['code'] | undefined;
+    onChange: (v: Country['code']) => void;
+};
+export type CountryConfig = {
+    isPhone: false;
+    value: Country['name'] | undefined;
+    onChange: (v: Country['name']) => void;
+};
+export type Config = PhoneConfig | CountryConfig;
+export type CommonProps = {
+    baseClassName?: string;
+    variantConfig: Config;
+};
+export type ModalStateProps = {
+    isOpen?: boolean;
+    onClose?: () => void;
+};
+export type ModalBaseProps = CommonProps & ModalStateProps;

package/dist/patterns/CountryPicker/types.js

@@ -0,0 +1,6 @@
+function i(e, o, t) {
+  return e ? { isPhone: !0, value: o, onChange: t } : { isPhone: !1, value: o, onChange: t };
+}
+export {
+  i as toConfig
+};

package/dist/patterns/CountryPicker/utils.d.ts

@@ -0,0 +1,2 @@
+import { CountryCode } from 'libphonenumber-js';
+export declare const getSafeCountryCallingCode: (countryCode: CountryCode | string) => string;

package/dist/patterns/CountryPicker/utils.js

@@ -0,0 +1,9 @@
+import { getCountryCallingCode as n } from "../../node_modules/libphonenumber-js/min/exports/getCountryCallingCode.js";
+const r = {
+  GS: "500"
+  // South Georgia and the South Sandwich Islands
+  // Add more special cases here as needed
+}, e = (t) => r[t] ? r[t] : String(n(t));
+export {
+  e as getSafeCountryCallingCode
+};

package/dist/patterns/CountryPicker/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/scss/componentStyles.scss

@@ -53,6 +53,10 @@
 @use 'components/Toast/toast';
 @use 'components/ExitGateCard/exitGateCard';
 @use 'components/ComposedModal/composedModal';
+@use 'patterns/CountryPicker/countryPickerOption';
+@use 'patterns/CountryPicker/countryPickerModal';
+@use 'patterns/CountryPicker/countryPickerTrigger';
+@use 'components/ProgressIndicator/progressIndicator';
 @use 'components/DescriptiveRadioButton/descriptiveRadioButton';
 @use 'components/DescriptiveRadioButtonGroup/descriptiveRadioButtonGroup';
 

package/dist/scss/components/Input/_input.scss

@@ -67,9 +67,6 @@ $lg: #{$px}-input--lg;
       display: flex;
       margin-right: 0.25rem;
       user-select: none;
-      user-select: none;
-      user-select: none;
-      user-select: none;
       white-space: nowrap;
     }
   }

package/dist/scss/components/ProgressIndicator/_progressIndicator.scss

@@ -0,0 +1,59 @@
+@use '../../allPartials' as *;
+
+.#{$px}-progress-indicator {
+  &__steps {
+    align-items: flex-start;
+    display: flex;
+    gap: 0;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__item {
+    align-items: center;
+    display: flex;
+    gap: $spacing-xsm;
+    position: relative;
+  }
+
+  &__circle {
+    align-items: center;
+    border: 1px solid $pure-black;
+    border-radius: 50%;
+    display: flex;
+    height: 1.5rem;
+    justify-content: center;
+    padding: 0;
+    width: 1.5rem;
+
+    &--active,
+    &--current {
+      background-color: $pure-black;
+      color: $white;
+
+      svg {
+        color: $white;
+      }
+    }
+  }
+
+  &__label {
+    display: none;
+
+    @media (min-width: $breakpoint-md) {
+      display: inline-block;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+
+  &__connector {
+    align-self: center;
+    background: $pure-black;
+    flex: 1 1 0;
+    height: 1px;
+    margin: 0 $spacing-xsm;
+    min-width: 8px;
+  }
+}

package/dist/scss/patterns/CountryPicker/_countryPickerModal.scss

@@ -0,0 +1,108 @@
+@use '../../allPartials' as *;
+
+.#{$px}-country-picker {
+  &__modal {
+    display: flex;
+    flex-direction: column;
+    height: 80vh;
+    width: 635px;
+
+    @media (max-width: $breakpoint-md) {
+      height: 100vh;
+      width: 100%;
+    }
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  &__header {
+    background: $white;
+    margin-bottom: 24px; // no token for this yet
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
+  &__list {
+    flex: 1;
+    margin-bottom: $spacing-sm;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  &__letter-header {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    margin: $spacing-sm 0;
+  }
+
+  &__letter-text {
+    &.seldon-text {
+      margin-bottom: 0;
+    }
+  }
+
+  &__letter-line {
+    border-bottom: 1px solid $light-gray;
+    height: 0;
+    width: 100%;
+  }
+
+  &__button-container {
+    background: $white;
+    border-top: 1px solid $light-gray;
+    margin-top: auto;
+    padding-top: 1rem;
+    width: 100%;
+
+    button {
+      width: 100%;
+    }
+  }
+
+  &__input-wrapper {
+    padding-bottom: 0.25rem;
+    position: relative;
+    width: 100%;
+
+    .seldon-input__validation {
+      display: none;
+    }
+
+    input {
+      padding-left: $spacing-md;
+
+      &::placeholder {
+        font-variation-settings: 'wght' 700;
+      }
+    }
+  }
+
+  &__input-icon {
+    align-items: center;
+    color: $dark-gray;
+    display: flex;
+    left: $spacing-xsm;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+  }
+
+  .#{$px}-country-picker__input-wrapper .seldon-input__label {
+    border: 0;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+}

package/dist/scss/patterns/CountryPicker/_countryPickerOption.scss

@@ -0,0 +1,71 @@
+@use '../../allPartials' as *;
+
+.#{$px}-country-picker {
+  &__option {
+    align-items: center;
+    background: $white;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row-reverse;
+    font-variation-settings: 'wght' 600;
+    justify-content: space-between;
+    margin-bottom: $spacing-micro;
+    margin-right: 1px; // account for scroll bar
+    outline: none;
+    padding: 12px $spacing-sm;
+    transition:
+      border-color 0.2s,
+      background 0.2s;
+
+    &--selected {
+      border: 1px solid $pure-black;
+
+      .#{$px}-country-picker__radio {
+        accent-color: $pure-black;
+      }
+    }
+
+    &--is-phone:focus-within {
+      outline: 1px solid $soft-black;
+      outline-offset: 1px;
+    }
+
+    &-content {
+      display: flex;
+      flex: 1;
+      justify-content: space-between;
+    }
+
+    &-flag {
+      height: 1rem;
+      margin-right: $spacing-sm;
+      vertical-align: middle;
+    }
+  }
+  .#{$px}-country-picker__radio {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+  &__radio--visually-hidden {
+    border: 0;
+    height: 1px;
+    margin: -1px;
+    opacity: 0;
+    padding: 0;
+    white-space: nowrap;
+    width: 1px;
+  }
+}
+
+// Override focus within styles when phone option is clicked
+// TODO: align with design on focus states since the radio input is hidden
+.#{$px}-country-picker__option--is-phone.#{$px}-country-picker__option--selected {
+  border: 1px solid $pure-black;
+
+  &:focus-within {
+    outline: none;
+  }
+}

package/dist/scss/patterns/CountryPicker/_countryPickerTrigger.scss

@@ -0,0 +1,73 @@
+@use '../../allPartials' as *;
+
+.#{$px}-country-picker {
+  &__trigger {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &-label {
+      color: $soft-black;
+      font-variation-settings: 'wght' 600;
+      margin-bottom: $spacing-micro;
+
+      &--error {
+        color: $error-red;
+      }
+    }
+
+    &-btn {
+      align-items: center;
+      appearance: none;
+      background: $white;
+      border: 1px solid $light-gray;
+      border-radius: 6px;
+      box-sizing: border-box;
+      cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      font-variation-settings: 'wght' 600;
+      justify-content: space-between;
+      padding: $spacing-xsm;
+      transition:
+        border-color 0.2s,
+        box-shadow 0.2s;
+      width: 100%;
+
+      &:focus-visible {
+        border-color: $pure-black;
+        box-shadow: 0 0 0 2px rgba($pure-black, 0.08);
+        outline: none;
+      }
+
+      &--error {
+        border-color: $error-red;
+      }
+    }
+
+    &-text {
+      color: $soft-black;
+      flex: 1;
+      overflow: hidden;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-icon {
+      align-items: center;
+      display: flex;
+      margin-left: $spacing-sm;
+    }
+
+    &-error-msg {
+      color: $error-red;
+      margin-top: $spacing-micro;
+    }
+
+    &-flag {
+      height: 1rem;
+      margin-right: $spacing-sm;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.174.0",
+  "version": "1.176.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -48,6 +48,7 @@
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.14",
     "@radix-ui/react-popover": "^1.1.11",
+    "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.11",