From 6bca417b38fbcdb478c753ff878c210d5cb9f21a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D1=96los=20=E2=85=AD=D1=96b=D5=BDlk=D0=B0?= Date: Mon, 5 Feb 2024 09:08:11 +0000 Subject: [PATCH] [ONL-8213] Fix TS enums casing (#1839) * [ONL-8213] chore: Enforce TS naming for enums. * [ONL-8213] fix: Updated icon names and button enums to match eslint rules. * [ONL-8213] fix: Updated all enum references. * 2.7.2 --- .eslintrc.js | 11 + package-lock.json | 4 +- package.json | 2 +- src/components/ec-alert/ec-alert.vue | 8 +- src/components/ec-btn/ec-btn.spec.ts | 24 +- src/components/ec-btn/ec-btn.story.ts | 6 +- src/components/ec-btn/ec-btn.vue | 16 +- src/components/ec-btn/types.ts | 14 +- .../ec-button-group/ec-button-group.vue | 2 +- src/components/ec-checkbox/ec-checkbox.vue | 2 +- src/components/ec-icon/ec-icon.spec.ts | 10 +- src/components/ec-icon/ec-icon.story.ts | 4 +- src/components/ec-icon/icon-names.ts | 318 +++++++++--------- .../components/copy/copy.vue | 2 +- .../components/edit/edit.vue | 6 +- .../components/loading/loading.vue | 4 +- .../components/value-text/value-text.vue | 2 +- .../ec-inline-input-field.vue | 2 +- .../ec-input-field/ec-input-field.spec.ts | 16 +- .../ec-input-field/ec-input-field.story.ts | 14 +- .../ec-input-field/ec-input-field.vue | 2 +- src/components/ec-loading/ec-loading.vue | 2 +- .../ec-metroline-item/ec-metroline-item.vue | 2 +- src/components/ec-modal/ec-modal.vue | 4 +- .../ec-navigation-arrows.vue | 4 +- .../ec-option-card/ec-option-card.spec.ts | 12 +- .../ec-option-card/ec-option-card.story.ts | 16 +- .../ec-phone-number-input.vue | 4 +- src/components/ec-radio-btn/ec-radio-btn.vue | 2 +- .../ec-smart-table/ec-smart-table.vue | 2 +- .../ec-summary-info/ec-summary-info.spec.ts | 4 +- .../ec-summary-info/ec-summary-info.story.ts | 2 +- .../ec-summary-info/ec-summary-info.vue | 2 +- .../ec-table-head/ec-table-head.vue | 2 +- .../ec-table-sort/ec-table-sort.vue | 4 +- src/components/ec-tag/ec-tag.spec.ts | 6 +- src/components/ec-tag/ec-tag.story.ts | 4 +- .../ec-text-filter/ec-text-filter.vue | 4 +- src/icons/build-types.js | 4 +- src/styles/components/ec-btn/ec-btn.story.ts | 6 +- 40 files changed, 277 insertions(+), 278 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 267bccb36..cda92cecf 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -159,6 +159,17 @@ module.exports = { rules: { 'no-shadow': 'off', '@typescript-eslint/no-shadow': 'error', + '@typescript-eslint/naming-convention': ['error', { + selector: 'typeLike', + format: ['PascalCase'], + }, { + selector: 'enumMember', + format: ['UPPER_CASE'], + }, { + selector: 'typeParameter', + format: ['PascalCase'], + prefix: ['T'], + }], }, }, ], diff --git a/package-lock.json b/package-lock.json index ee08b3c1b..e13876235 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ebury/chameleon-components", - "version": "2.7.1", + "version": "2.7.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ebury/chameleon-components", - "version": "2.7.1", + "version": "2.7.2", "license": "MIT", "dependencies": { "@vueuse/core": "10.2.1", diff --git a/package.json b/package.json index 42c8864e8..65b9b0048 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ebury/chameleon-components", - "version": "2.7.1", + "version": "2.7.2", "main": "src/main.ts", "sideEffects": false, "author": "Ebury Team (http://labs.ebury.rocks/)", diff --git a/src/components/ec-alert/ec-alert.vue b/src/components/ec-alert/ec-alert.vue index 3fafe65de..692154d47 100644 --- a/src/components/ec-alert/ec-alert.vue +++ b/src/components/ec-alert/ec-alert.vue @@ -20,7 +20,7 @@ @click.stop.prevent="onDismiss" > @@ -101,12 +101,12 @@ const icon = computed(() => { switch (props.type) { case AlertType.ERROR: case AlertType.WARNING: - return IconName.SimpleError; + return IconName.SIMPLE_ERROR; case AlertType.SUCCESS: - return IconName.SimpleCheck; + return IconName.SIMPLE_CHECK; case AlertType.INFO: default: - return IconName.SimpleInfo; + return IconName.SIMPLE_INFO; } }); diff --git a/src/components/ec-btn/ec-btn.spec.ts b/src/components/ec-btn/ec-btn.spec.ts index 29fcf4068..0b08e0ed7 100644 --- a/src/components/ec-btn/ec-btn.spec.ts +++ b/src/components/ec-btn/ec-btn.spec.ts @@ -26,8 +26,8 @@ describe('EcBtn', () => { describe(':props', () => { it.each([ - ['ec-btn--sm', ButtonSize.Small], - ['ec-btn--md', ButtonSize.Medium], + ['ec-btn--sm', ButtonSize.SMALL], + ['ec-btn--md', ButtonSize.MEDIUM], ])('should render a `, diff --git a/src/components/ec-icon/icon-names.ts b/src/components/ec-icon/icon-names.ts index 3d8d0b8b3..ddf1e06b4 100644 --- a/src/components/ec-icon/icon-names.ts +++ b/src/components/ec-icon/icon-names.ts @@ -1,163 +1,163 @@ // This code is generated by build-types.js: do not change it manually export enum IconName { - CurrencyAed = 'currency-aed', - CurrencyAng = 'currency-ang', - CurrencyAud = 'currency-aud', - CurrencyBbd = 'currency-bbd', - CurrencyBgn = 'currency-bgn', - CurrencyBhd = 'currency-bhd', - CurrencyBrl = 'currency-brl', - CurrencyBsd = 'currency-bsd', - CurrencyBwp = 'currency-bwp', - CurrencyBzd = 'currency-bzd', - CurrencyCad = 'currency-cad', - CurrencyCdf = 'currency-cdf', - CurrencyChf = 'currency-chf', - CurrencyCny = 'currency-cny', - CurrencyCzk = 'currency-czk', - CurrencyDkk = 'currency-dkk', - CurrencyEgp = 'currency-egp', - CurrencyEur = 'currency-eur', - CurrencyFjd = 'currency-fjd', - CurrencyGbp = 'currency-gbp', - CurrencyGhs = 'currency-ghs', - CurrencyGnf = 'currency-gnf', - CurrencyHkd = 'currency-hkd', - CurrencyHrk = 'currency-hrk', - CurrencyHuf = 'currency-huf', - CurrencyIls = 'currency-ils', - CurrencyInr = 'currency-inr', - CurrencyIsk = 'currency-isk', - CurrencyJmd = 'currency-jmd', - CurrencyJod = 'currency-jod', - CurrencyJpy = 'currency-jpy', - CurrencyKes = 'currency-kes', - CurrencyKwd = 'currency-kwd', - CurrencyKyd = 'currency-kyd', - CurrencyKzt = 'currency-kzt', - CurrencyLkr = 'currency-lkr', - CurrencyLrd = 'currency-lrd', - CurrencyLsl = 'currency-lsl', - CurrencyMga = 'currency-mga', - CurrencyMur = 'currency-mur', - CurrencyMwk = 'currency-mwk', - CurrencyMxn = 'currency-mxn', - CurrencyMzn = 'currency-mzn', - CurrencyNad = 'currency-nad', - CurrencyNgn = 'currency-ngn', - CurrencyNoFlag = 'currency-no-flag', - CurrencyNok = 'currency-nok', - CurrencyNzd = 'currency-nzd', - CurrencyOmr = 'currency-omr', - CurrencyPhp = 'currency-php', - CurrencyPkr = 'currency-pkr', - CurrencyPln = 'currency-pln', - CurrencyQar = 'currency-qar', - CurrencyRon = 'currency-ron', - CurrencyRsd = 'currency-rsd', - CurrencyRub = 'currency-rub', - CurrencyRwf = 'currency-rwf', - CurrencySar = 'currency-sar', - CurrencySek = 'currency-sek', - CurrencySgd = 'currency-sgd', - CurrencySll = 'currency-sll', - CurrencySzl = 'currency-szl', - CurrencyThb = 'currency-thb', - CurrencyTnd = 'currency-tnd', - CurrencyTry = 'currency-try', - CurrencyTtd = 'currency-ttd', - CurrencyTzs = 'currency-tzs', - CurrencyUgx = 'currency-ugx', - CurrencyUsd = 'currency-usd', - CurrencyXaf = 'currency-xaf', - CurrencyXcd = 'currency-xcd', - CurrencyZar = 'currency-zar', - CurrencyZmw = 'currency-zmw', - RoundedBooks = 'rounded-books', - RoundedCalendar = 'rounded-calendar', - RoundedCancelled = 'rounded-cancelled', - RoundedCheck = 'rounded-check', - RoundedDocuments = 'rounded-documents', - RoundedEuro = 'rounded-euro', - RoundedHourglass = 'rounded-hourglass', - RoundedInfo = 'rounded-info', - RoundedNotification = 'rounded-notification', - RoundedOpen = 'rounded-open', - RoundedPartial = 'rounded-partial', - RoundedPause = 'rounded-pause', - RoundedRejected = 'rounded-rejected', - RoundedReturned = 'rounded-returned', - RoundedSettings = 'rounded-settings', - RoundedThumbDown = 'rounded-thumb-down', - RoundedThumbUpDown = 'rounded-thumb-up-down', - RoundedThumbUp = 'rounded-thumb-up', - RoundedTrade = 'rounded-trade', - RoundedUnknown = 'rounded-unknown', - RoundedVerified = 'rounded-verified', - SimpleAccounts = 'simple-accounts', - SimpleAdd = 'simple-add', - SimpleAddress = 'simple-address', - SimpleAlias = 'simple-alias', - SimpleAmount = 'simple-amount', - SimpleArrowDropDown = 'simple-arrow-drop-down', - SimpleArrowLeft = 'simple-arrow-left', - SimpleArrowRight = 'simple-arrow-right', - SimpleArrowUpDown = 'simple-arrow-up-down', - SimpleAttachment = 'simple-attachment', - SimpleBank = 'simple-bank', - SimpleBatchPayment = 'simple-batch-payment', - SimpleBlock = 'simple-block', - SimpleBuy = 'simple-buy', - SimpleCalendar = 'simple-calendar', - SimpleCheck = 'simple-check', - SimpleChevronDown = 'simple-chevron-down', - SimpleChevronLeft = 'simple-chevron-left', - SimpleChevronRight = 'simple-chevron-right', - SimpleChevronUp = 'simple-chevron-up', - SimpleCity = 'simple-city', - SimpleClose = 'simple-close', - SimpleCloudUpload = 'simple-cloud-upload', - SimpleCollect = 'simple-collect', - SimpleConvertAndPay = 'simple-convert-and-pay', - SimpleCopy = 'simple-copy', - SimpleCountry = 'simple-country', - SimpleCurrency = 'simple-currency', - SimpleDashboard = 'simple-dashboard', - SimpleDelete = 'simple-delete', - SimpleDocument = 'simple-document', - SimpleDownload = 'simple-download', - SimpleDrawdown = 'simple-drawdown', - SimpleEdit = 'simple-edit', - SimpleError = 'simple-error', - SimpleEye = 'simple-eye', - SimpleFee = 'simple-fee', - SimpleHedging = 'simple-hedging', - SimpleHelp = 'simple-help', - SimpleInfo = 'simple-info', - SimpleLoading = 'simple-loading', - SimpleLocker = 'simple-locker', - SimpleMail = 'simple-mail', - SimpleMore = 'simple-more', - SimpleNumbers = 'simple-numbers', - SimpleOutlineDelete = 'simple-outline-delete', - SimplePayment = 'simple-payment', - SimplePerson = 'simple-person', - SimplePostalCode = 'simple-postal-code', - SimpleReason = 'simple-reason', - SimpleRefresh = 'simple-refresh', - SimpleRelationship = 'simple-relationship', - SimpleRequest = 'simple-request', - SimpleReuse = 'simple-reuse', - SimpleSearch = 'simple-search', - SimpleSell = 'simple-sell', - SimpleSignOut = 'simple-sign-out', - SimpleSnowflake = 'simple-snowflake', - SimpleThumbDown = 'simple-thumb-down', - SimpleThumbUp = 'simple-thumb-up', - SimpleTradeFinance = 'simple-trade-finance', - SimpleTrade = 'simple-trade', - SimpleWallet = 'simple-wallet', - SimpleWand = 'simple-wand', - SimpleWithdraw = 'simple-withdraw', + CURRENCY_AED = 'currency-aed', + CURRENCY_ANG = 'currency-ang', + CURRENCY_AUD = 'currency-aud', + CURRENCY_BBD = 'currency-bbd', + CURRENCY_BGN = 'currency-bgn', + CURRENCY_BHD = 'currency-bhd', + CURRENCY_BRL = 'currency-brl', + CURRENCY_BSD = 'currency-bsd', + CURRENCY_BWP = 'currency-bwp', + CURRENCY_BZD = 'currency-bzd', + CURRENCY_CAD = 'currency-cad', + CURRENCY_CDF = 'currency-cdf', + CURRENCY_CHF = 'currency-chf', + CURRENCY_CNY = 'currency-cny', + CURRENCY_CZK = 'currency-czk', + CURRENCY_DKK = 'currency-dkk', + CURRENCY_EGP = 'currency-egp', + CURRENCY_EUR = 'currency-eur', + CURRENCY_FJD = 'currency-fjd', + CURRENCY_GBP = 'currency-gbp', + CURRENCY_GHS = 'currency-ghs', + CURRENCY_GNF = 'currency-gnf', + CURRENCY_HKD = 'currency-hkd', + CURRENCY_HRK = 'currency-hrk', + CURRENCY_HUF = 'currency-huf', + CURRENCY_ILS = 'currency-ils', + CURRENCY_INR = 'currency-inr', + CURRENCY_ISK = 'currency-isk', + CURRENCY_JMD = 'currency-jmd', + CURRENCY_JOD = 'currency-jod', + CURRENCY_JPY = 'currency-jpy', + CURRENCY_KES = 'currency-kes', + CURRENCY_KWD = 'currency-kwd', + CURRENCY_KYD = 'currency-kyd', + CURRENCY_KZT = 'currency-kzt', + CURRENCY_LKR = 'currency-lkr', + CURRENCY_LRD = 'currency-lrd', + CURRENCY_LSL = 'currency-lsl', + CURRENCY_MGA = 'currency-mga', + CURRENCY_MUR = 'currency-mur', + CURRENCY_MWK = 'currency-mwk', + CURRENCY_MXN = 'currency-mxn', + CURRENCY_MZN = 'currency-mzn', + CURRENCY_NAD = 'currency-nad', + CURRENCY_NGN = 'currency-ngn', + CURRENCY_NO_FLAG = 'currency-no-flag', + CURRENCY_NOK = 'currency-nok', + CURRENCY_NZD = 'currency-nzd', + CURRENCY_OMR = 'currency-omr', + CURRENCY_PHP = 'currency-php', + CURRENCY_PKR = 'currency-pkr', + CURRENCY_PLN = 'currency-pln', + CURRENCY_QAR = 'currency-qar', + CURRENCY_RON = 'currency-ron', + CURRENCY_RSD = 'currency-rsd', + CURRENCY_RUB = 'currency-rub', + CURRENCY_RWF = 'currency-rwf', + CURRENCY_SAR = 'currency-sar', + CURRENCY_SEK = 'currency-sek', + CURRENCY_SGD = 'currency-sgd', + CURRENCY_SLL = 'currency-sll', + CURRENCY_SZL = 'currency-szl', + CURRENCY_THB = 'currency-thb', + CURRENCY_TND = 'currency-tnd', + CURRENCY_TRY = 'currency-try', + CURRENCY_TTD = 'currency-ttd', + CURRENCY_TZS = 'currency-tzs', + CURRENCY_UGX = 'currency-ugx', + CURRENCY_USD = 'currency-usd', + CURRENCY_XAF = 'currency-xaf', + CURRENCY_XCD = 'currency-xcd', + CURRENCY_ZAR = 'currency-zar', + CURRENCY_ZMW = 'currency-zmw', + ROUNDED_BOOKS = 'rounded-books', + ROUNDED_CALENDAR = 'rounded-calendar', + ROUNDED_CANCELLED = 'rounded-cancelled', + ROUNDED_CHECK = 'rounded-check', + ROUNDED_DOCUMENTS = 'rounded-documents', + ROUNDED_EURO = 'rounded-euro', + ROUNDED_HOURGLASS = 'rounded-hourglass', + ROUNDED_INFO = 'rounded-info', + ROUNDED_NOTIFICATION = 'rounded-notification', + ROUNDED_OPEN = 'rounded-open', + ROUNDED_PARTIAL = 'rounded-partial', + ROUNDED_PAUSE = 'rounded-pause', + ROUNDED_REJECTED = 'rounded-rejected', + ROUNDED_RETURNED = 'rounded-returned', + ROUNDED_SETTINGS = 'rounded-settings', + ROUNDED_THUMB_DOWN = 'rounded-thumb-down', + ROUNDED_THUMB_UP_DOWN = 'rounded-thumb-up-down', + ROUNDED_THUMB_UP = 'rounded-thumb-up', + ROUNDED_TRADE = 'rounded-trade', + ROUNDED_UNKNOWN = 'rounded-unknown', + ROUNDED_VERIFIED = 'rounded-verified', + SIMPLE_ACCOUNTS = 'simple-accounts', + SIMPLE_ADD = 'simple-add', + SIMPLE_ADDRESS = 'simple-address', + SIMPLE_ALIAS = 'simple-alias', + SIMPLE_AMOUNT = 'simple-amount', + SIMPLE_ARROW_DROP_DOWN = 'simple-arrow-drop-down', + SIMPLE_ARROW_LEFT = 'simple-arrow-left', + SIMPLE_ARROW_RIGHT = 'simple-arrow-right', + SIMPLE_ARROW_UP_DOWN = 'simple-arrow-up-down', + SIMPLE_ATTACHMENT = 'simple-attachment', + SIMPLE_BANK = 'simple-bank', + SIMPLE_BATCH_PAYMENT = 'simple-batch-payment', + SIMPLE_BLOCK = 'simple-block', + SIMPLE_BUY = 'simple-buy', + SIMPLE_CALENDAR = 'simple-calendar', + SIMPLE_CHECK = 'simple-check', + SIMPLE_CHEVRON_DOWN = 'simple-chevron-down', + SIMPLE_CHEVRON_LEFT = 'simple-chevron-left', + SIMPLE_CHEVRON_RIGHT = 'simple-chevron-right', + SIMPLE_CHEVRON_UP = 'simple-chevron-up', + SIMPLE_CITY = 'simple-city', + SIMPLE_CLOSE = 'simple-close', + SIMPLE_CLOUD_UPLOAD = 'simple-cloud-upload', + SIMPLE_COLLECT = 'simple-collect', + SIMPLE_CONVERT_AND_PAY = 'simple-convert-and-pay', + SIMPLE_COPY = 'simple-copy', + SIMPLE_COUNTRY = 'simple-country', + SIMPLE_CURRENCY = 'simple-currency', + SIMPLE_DASHBOARD = 'simple-dashboard', + SIMPLE_DELETE = 'simple-delete', + SIMPLE_DOCUMENT = 'simple-document', + SIMPLE_DOWNLOAD = 'simple-download', + SIMPLE_DRAWDOWN = 'simple-drawdown', + SIMPLE_EDIT = 'simple-edit', + SIMPLE_ERROR = 'simple-error', + SIMPLE_EYE = 'simple-eye', + SIMPLE_FEE = 'simple-fee', + SIMPLE_HEDGING = 'simple-hedging', + SIMPLE_HELP = 'simple-help', + SIMPLE_INFO = 'simple-info', + SIMPLE_LOADING = 'simple-loading', + SIMPLE_LOCKER = 'simple-locker', + SIMPLE_MAIL = 'simple-mail', + SIMPLE_MORE = 'simple-more', + SIMPLE_NUMBERS = 'simple-numbers', + SIMPLE_OUTLINE_DELETE = 'simple-outline-delete', + SIMPLE_PAYMENT = 'simple-payment', + SIMPLE_PERSON = 'simple-person', + SIMPLE_POSTAL_CODE = 'simple-postal-code', + SIMPLE_REASON = 'simple-reason', + SIMPLE_REFRESH = 'simple-refresh', + SIMPLE_RELATIONSHIP = 'simple-relationship', + SIMPLE_REQUEST = 'simple-request', + SIMPLE_REUSE = 'simple-reuse', + SIMPLE_SEARCH = 'simple-search', + SIMPLE_SELL = 'simple-sell', + SIMPLE_SIGN_OUT = 'simple-sign-out', + SIMPLE_SNOWFLAKE = 'simple-snowflake', + SIMPLE_THUMB_DOWN = 'simple-thumb-down', + SIMPLE_THUMB_UP = 'simple-thumb-up', + SIMPLE_TRADE_FINANCE = 'simple-trade-finance', + SIMPLE_TRADE = 'simple-trade', + SIMPLE_WALLET = 'simple-wallet', + SIMPLE_WAND = 'simple-wand', + SIMPLE_WITHDRAW = 'simple-withdraw', } diff --git a/src/components/ec-inline-input-field/components/copy/copy.vue b/src/components/ec-inline-input-field/components/copy/copy.vue index f33517f97..305916cb9 100644 --- a/src/components/ec-inline-input-field/components/copy/copy.vue +++ b/src/components/ec-inline-input-field/components/copy/copy.vue @@ -26,7 +26,7 @@ }" class="ec-inline-input-field-copy__icon" data-test="ec-inline-input-field-copy__icon" - :name="IconName.SimpleCopy" + :name="IconName.SIMPLE_COPY" :size="16" /> diff --git a/src/components/ec-inline-input-field/components/edit/edit.vue b/src/components/ec-inline-input-field/components/edit/edit.vue index 40595f70a..c70de9abb 100644 --- a/src/components/ec-inline-input-field/components/edit/edit.vue +++ b/src/components/ec-inline-input-field/components/edit/edit.vue @@ -9,7 +9,7 @@ class="ec-inline-input-field-edit__label-tooltip" data-test="ec-inline-input-field-edit__label-tooltip" :type="IconType.INTERACTIVE" - :name="IconName.SimpleInfo" + :name="IconName.SIMPLE_INFO" :size="14" /> @@ -34,7 +34,7 @@ > @@ -46,7 +46,7 @@ > diff --git a/src/components/ec-inline-input-field/components/loading/loading.vue b/src/components/ec-inline-input-field/components/loading/loading.vue index 30afb9b63..26ae50faa 100644 --- a/src/components/ec-inline-input-field/components/loading/loading.vue +++ b/src/components/ec-inline-input-field/components/loading/loading.vue @@ -11,12 +11,12 @@ />
diff --git a/src/components/ec-inline-input-field/components/value-text/value-text.vue b/src/components/ec-inline-input-field/components/value-text/value-text.vue index 74f5c9824..e37e0cdb4 100644 --- a/src/components/ec-inline-input-field/components/value-text/value-text.vue +++ b/src/components/ec-inline-input-field/components/value-text/value-text.vue @@ -18,7 +18,7 @@ > diff --git a/src/components/ec-inline-input-field/ec-inline-input-field.vue b/src/components/ec-inline-input-field/ec-inline-input-field.vue index 65aa2f9eb..479ff43c5 100644 --- a/src/components/ec-inline-input-field/ec-inline-input-field.vue +++ b/src/components/ec-inline-input-field/ec-inline-input-field.vue @@ -15,7 +15,7 @@ class="ec-inline-input-field__label-tooltip" data-test="ec-inline-input-field__label-tooltip" :type="IconType.INTERACTIVE" - :name="IconName.SimpleInfo" + :name="IconName.SIMPLE_INFO" :size="14" /> diff --git a/src/components/ec-input-field/ec-input-field.spec.ts b/src/components/ec-input-field/ec-input-field.spec.ts index efa92c967..c35e1e076 100644 --- a/src/components/ec-input-field/ec-input-field.spec.ts +++ b/src/components/ec-input-field/ec-input-field.spec.ts @@ -172,7 +172,7 @@ describe('EcInputField', () => { }); it('should emit an event when we click on the icon', () => { - const wrapper = mountInputField({ icon: IconName.SimpleCheck }); + const wrapper = mountInputField({ icon: IconName.SIMPLE_CHECK }); wrapper.findByDataTest('ec-input-field__icon') .trigger('click'); @@ -181,18 +181,18 @@ describe('EcInputField', () => { }); it('should render given icon', () => { - const wrapper = mountInputField({ icon: IconName.SimpleCheck }); + const wrapper = mountInputField({ icon: IconName.SIMPLE_CHECK }); expect(wrapper.findByDataTest('ec-input-field__icon-wrapper').exists()).toBe(true); expect(wrapper.element).toMatchSnapshot(); }); it('should render given icon with given size', () => { - const wrapper = mountInputField({ icon: IconName.SimpleCheck, iconSize: 40 }); + const wrapper = mountInputField({ icon: IconName.SIMPLE_CHECK, iconSize: 40 }); expect(wrapper.findByDataTest('ec-input-field__icon-wrapper').element).toMatchSnapshot(); }); it('should render given icon with success colour', () => { - const wrapper = mountInputField({ icon: IconName.SimpleCheck, iconType: IconType.SUCCESS }); + const wrapper = mountInputField({ icon: IconName.SIMPLE_CHECK, iconType: IconType.SUCCESS }); expect(wrapper.findByDataTest('ec-input-field__icon-wrapper').element).toMatchSnapshot(); }); @@ -202,18 +202,18 @@ describe('EcInputField', () => { }); it('should render given left-icon', () => { - const wrapper = mountInputField({ leftIcon: IconName.SimpleCheck }); + const wrapper = mountInputField({ leftIcon: IconName.SIMPLE_CHECK }); expect(wrapper.findByDataTest('ec-input-field__left-icon-wrapper').exists()).toBe(true); expect(wrapper.element).toMatchSnapshot(); }); it('should render given left-icon with given size', () => { - const wrapper = mountInputField({ leftIcon: IconName.SimpleCheck, leftIconSize: 40 }); + const wrapper = mountInputField({ leftIcon: IconName.SIMPLE_CHECK, leftIconSize: 40 }); expect(wrapper.findByDataTest('ec-input-field__left-icon-wrapper').element).toMatchSnapshot(); }); it('should render given left-icon with success colour', () => { - const wrapper = mountInputField({ leftIcon: IconName.SimpleCheck, leftIconType: IconType.SUCCESS }); + const wrapper = mountInputField({ leftIcon: IconName.SIMPLE_CHECK, leftIconType: IconType.SUCCESS }); expect(wrapper.findByDataTest('ec-input-field__left-icon-wrapper').element).toMatchSnapshot(); }); @@ -233,7 +233,7 @@ describe('EcInputField', () => { }); it('renders properly the icon when disabled', () => { - const wrapper = mountInputField({ icon: IconName.SimpleCheck }, { attrs: { disabled: true } }); + const wrapper = mountInputField({ icon: IconName.SIMPLE_CHECK }, { attrs: { disabled: true } }); expect(wrapper.element).toMatchSnapshot(); }); diff --git a/src/components/ec-input-field/ec-input-field.story.ts b/src/components/ec-input-field/ec-input-field.story.ts index 608c13568..380d78d1c 100644 --- a/src/components/ec-input-field/ec-input-field.story.ts +++ b/src/components/ec-input-field/ec-input-field.story.ts @@ -70,8 +70,8 @@ basic.args = { modelValue: '', placeholder: 'My input', bottomNote: 'Your email', - icon: IconName.SimpleCheck, - leftIcon: IconName.SimpleSearch, + icon: IconName.SIMPLE_CHECK, + leftIcon: IconName.SIMPLE_SEARCH, note: 'Max 80 chars.', }; basic.parameters = { @@ -178,7 +178,7 @@ export const all: AllInputFieldStory = storyArgs => ({
- +
@@ -190,19 +190,19 @@ export const all: AllInputFieldStory = storyArgs => ({
- +
- +
- +
- +
diff --git a/src/components/ec-input-field/ec-input-field.vue b/src/components/ec-input-field/ec-input-field.vue index ebaac4c11..a835cf9cc 100644 --- a/src/components/ec-input-field/ec-input-field.vue +++ b/src/components/ec-input-field/ec-input-field.vue @@ -20,7 +20,7 @@ class="ec-input-field__tooltip" data-test="ec-input-field__tooltip" :type="IconType.INTERACTIVE" - :name="IconName.SimpleInfo" + :name="IconName.SIMPLE_INFO" :size="14" /> diff --git a/src/components/ec-loading/ec-loading.vue b/src/components/ec-loading/ec-loading.vue index 1e8678782..e1787f1b1 100644 --- a/src/components/ec-loading/ec-loading.vue +++ b/src/components/ec-loading/ec-loading.vue @@ -10,7 +10,7 @@ data-test="ec-loading__backdrop" >
diff --git a/src/components/ec-modal/ec-modal.vue b/src/components/ec-modal/ec-modal.vue index c1d52f2ab..c3102e950 100644 --- a/src/components/ec-modal/ec-modal.vue +++ b/src/components/ec-modal/ec-modal.vue @@ -173,8 +173,8 @@ const positiveButton = ref(null); const negativeButton = ref(null); const isLoadingPositiveButton = computed(() => !!props.isLoading.positive); const isLoadingNegativeButton = computed(() => !!props.isLoading.negative); -const positiveButtonCategory = computed(() => props.category.positive || ButtonCategory.Primary); -const negativeButtonCategory = computed(() => props.category.negative || ButtonCategory.Secondary); +const positiveButtonCategory = computed(() => props.category.positive || ButtonCategory.PRIMARY); +const negativeButtonCategory = computed(() => props.category.negative || ButtonCategory.SECONDARY); const isPositiveButtonDisabled = computed(() => props.positiveButtonProps.isDisabled || false); const isNegativeButtonDisabled = computed(() => props.negativeButtonProps.isDisabled || false); function hasPositiveButton() { diff --git a/src/components/ec-navigation-arrows/ec-navigation-arrows.vue b/src/components/ec-navigation-arrows/ec-navigation-arrows.vue index 3967f30cc..4569f6d13 100644 --- a/src/components/ec-navigation-arrows/ec-navigation-arrows.vue +++ b/src/components/ec-navigation-arrows/ec-navigation-arrows.vue @@ -10,7 +10,7 @@ data-test="ec-navigation-arrows__previous" @click="emit(NavigationArrowsEvent.PREVIOUS_CLICK)" > - + + diff --git a/src/components/ec-option-card/ec-option-card.spec.ts b/src/components/ec-option-card/ec-option-card.spec.ts index 61e11b945..f0d69a3fd 100644 --- a/src/components/ec-option-card/ec-option-card.spec.ts +++ b/src/components/ec-option-card/ec-option-card.spec.ts @@ -28,7 +28,7 @@ describe('EcOptionCard', () => { it('renders properly when an Icon is passed', () => { const wrapper = mountEcOptionCard({ - iconName: IconName.SimpleEye, + iconName: IconName.SIMPLE_EYE, title: 'Test option card with Icon', }); expect(wrapper.findByDataTest('ec-option-card__icon').exists()).toBe(true); @@ -36,7 +36,7 @@ describe('EcOptionCard', () => { it('renders properly when an Icon and Title and Caption is passed', () => { const wrapper = mountEcOptionCard({ - iconName: IconName.SimpleEye, + iconName: IconName.SIMPLE_EYE, title: 'Test option card with Icon and caption', caption: 'Test Caption', }); @@ -45,7 +45,7 @@ describe('EcOptionCard', () => { it.each([OptionCardType.ACCENT, OptionCardType.DANGER])('should render the Option card with the classes related to the type "%s" when type prop is set', (cardType) => { const wrapper = mountEcOptionCard({ - iconName: IconName.SimpleInfo, + iconName: IconName.SIMPLE_INFO, type: cardType, title: 'Test title', caption: 'Test Caption', @@ -60,7 +60,7 @@ describe('EcOptionCard', () => { it('renders the Option Card disabled if the isDisabled prop is set to true', () => { const wrapper = mountEcOptionCard({ isDisabled: true, - iconName: IconName.SimpleEye, + iconName: IconName.SIMPLE_EYE, title: 'Test option card with Icon and caption', caption: 'Test Caption', }); @@ -75,7 +75,7 @@ describe('EcOptionCard', () => { const wrapper = mountEcOptionCard({ isDisabled: true, type: OptionCardType.ACCENT, - iconName: IconName.SimpleEye, + iconName: IconName.SIMPLE_EYE, title: 'Test option card with Icon and caption', caption: 'Test Caption', }); @@ -93,7 +93,7 @@ describe('EcOptionCard', () => { const wrapper = mountEcOptionCard({ isDisabled: true, type: OptionCardType.DANGER, - iconName: IconName.SimpleEye, + iconName: IconName.SIMPLE_EYE, title: 'Test option card with Icon and caption', caption: 'Test Caption', }); diff --git a/src/components/ec-option-card/ec-option-card.story.ts b/src/components/ec-option-card/ec-option-card.story.ts index 28958a5de..2c4dcdf1a 100644 --- a/src/components/ec-option-card/ec-option-card.story.ts +++ b/src/components/ec-option-card/ec-option-card.story.ts @@ -37,22 +37,22 @@ const Template: EcOptionCardStory = args => ({
Default
- +
Accent
- +
Danger
- +
Disabled
- +
@@ -79,19 +79,19 @@ const Template: EcOptionCardStory = args => ({

Icon and Title

- +
- +
- +
- +
diff --git a/src/components/ec-phone-number-input/ec-phone-number-input.vue b/src/components/ec-phone-number-input/ec-phone-number-input.vue index 0c95ace7c..3f164557e 100644 --- a/src/components/ec-phone-number-input/ec-phone-number-input.vue +++ b/src/components/ec-phone-number-input/ec-phone-number-input.vue @@ -125,7 +125,7 @@ class="ec-phone-number-input__error-tooltip" data-test="ec-phone-number-input__error-tooltip" :type="IconType.ERROR" - :name="IconName.SimpleError" + :name="IconName.SIMPLE_ERROR" :size="14" /> @@ -143,7 +143,7 @@ class="ec-phone-number-input__warning-tooltip" data-test="ec-phone-number-input__warning-tooltip" :type="IconType.WARNING" - :name="IconName.SimpleError" + :name="IconName.SIMPLE_ERROR" :size="14" /> diff --git a/src/components/ec-radio-btn/ec-radio-btn.vue b/src/components/ec-radio-btn/ec-radio-btn.vue index d71312af6..6662a9330 100644 --- a/src/components/ec-radio-btn/ec-radio-btn.vue +++ b/src/components/ec-radio-btn/ec-radio-btn.vue @@ -52,7 +52,7 @@ 'ec-radio-btn__icon--checked': isChecked && !isDisabled, 'ec-radio-btn__icon--checked-and-disabled': isDisabled && isChecked, }" - :name="IconName.RoundedNotification" + :name="IconName.ROUNDED_NOTIFICATION" :size="20" /> diff --git a/src/components/ec-smart-table/ec-smart-table.vue b/src/components/ec-smart-table/ec-smart-table.vue index 5ef8d1f07..109e9c8ee 100644 --- a/src/components/ec-smart-table/ec-smart-table.vue +++ b/src/components/ec-smart-table/ec-smart-table.vue @@ -130,7 +130,7 @@ data-test="ec-smart-table__table-end-detector" > { describe('icon', () => { it('should render with the given "icon" prop', () => { - const wrapper = mountSummaryInfo({ iconName: IconName.SimpleSell }); + const wrapper = mountSummaryInfo({ iconName: IconName.SIMPLE_SELL }); expect(wrapper.findByDataTest('ec-summary-info__main-icon').exists()).toBe(true); expect(wrapper.element).toMatchSnapshot(); }); @@ -227,7 +227,7 @@ describe('EcSummaryInfo', () => { describe('slots', () => { it('should render with the default slot given', () => { - const wrapper = mountSummaryInfo({ iconName: IconName.SimpleSell }, { + const wrapper = mountSummaryInfo({ iconName: IconName.SIMPLE_SELL }, { slots: { default: `
diff --git a/src/components/ec-summary-info/ec-summary-info.story.ts b/src/components/ec-summary-info/ec-summary-info.story.ts index 2adef2dd6..9f71cea64 100644 --- a/src/components/ec-summary-info/ec-summary-info.story.ts +++ b/src/components/ec-summary-info/ec-summary-info.story.ts @@ -20,7 +20,7 @@ export default { } as Meta; const basicArgs = { - iconName: IconName.SimplePayment, + iconName: IconName.SIMPLE_PAYMENT, lineItems: [], }; diff --git a/src/components/ec-summary-info/ec-summary-info.vue b/src/components/ec-summary-info/ec-summary-info.vue index 4a0246c08..50339b367 100644 --- a/src/components/ec-summary-info/ec-summary-info.vue +++ b/src/components/ec-summary-info/ec-summary-info.vue @@ -39,7 +39,7 @@ }" :class="getItemClasses('ec-summary-info__content-line-item-icon', index, item.stylePreset)" :data-test="getItemClasses('ec-summary-info__content-line-item-icon', index, item.stylePreset).join(' ')" - :name="IconName.SimpleInfo" + :name="IconName.SIMPLE_INFO" :size="14" />
diff --git a/src/components/ec-table-head/ec-table-head.vue b/src/components/ec-table-head/ec-table-head.vue index b4b557873..8b286f60b 100644 --- a/src/components/ec-table-head/ec-table-head.vue +++ b/src/components/ec-table-head/ec-table-head.vue @@ -34,7 +34,7 @@ class="ec-table-head__icon" data-test="ec-table-head__tooltip-icon" :type="IconType.INTERACTIVE" - :name="IconName.SimpleInfo" + :name="IconName.SIMPLE_INFO" :size="16" /> props.direction === SortDirection.DESC); const icon = computed(() => { if (isAsc.value || isDesc.value) { - return IconName.SimpleArrowDropDown; + return IconName.SIMPLE_ARROW_DROP_DOWN; } - return IconName.SimpleArrowUpDown; + return IconName.SIMPLE_ARROW_UP_DOWN; }); const directionTitle = computed(() => { diff --git a/src/components/ec-tag/ec-tag.spec.ts b/src/components/ec-tag/ec-tag.spec.ts index 2ee461dd0..a48fd05a5 100644 --- a/src/components/ec-tag/ec-tag.spec.ts +++ b/src/components/ec-tag/ec-tag.spec.ts @@ -27,7 +27,7 @@ describe('EcTag', () => { it('should render as expected when passing the icon name', () => { const wrapper = mountTag({ text: 'Trusted', - iconName: IconName.RoundedCheck, + iconName: IconName.ROUNDED_CHECK, }); expect(wrapper.element).toMatchSnapshot(); @@ -36,7 +36,7 @@ describe('EcTag', () => { it('should render as expected when passing the icon type', () => { const wrapper = mountTag({ text: 'Trusted', - iconName: IconName.RoundedCheck, + iconName: IconName.ROUNDED_CHECK, iconType: IconType.SUCCESS, }); @@ -46,7 +46,7 @@ describe('EcTag', () => { it('should render as expected when we set "is-icon-rounded" to be true', () => { const wrapper = mountTag({ text: 'Trusted', - iconName: IconName.CurrencyAed, + iconName: IconName.CURRENCY_AED, isIconRounded: true, }); diff --git a/src/components/ec-tag/ec-tag.story.ts b/src/components/ec-tag/ec-tag.story.ts index fe503a7ac..d2a1de02f 100644 --- a/src/components/ec-tag/ec-tag.story.ts +++ b/src/components/ec-tag/ec-tag.story.ts @@ -40,7 +40,7 @@ export const basic = Template.bind({}); basic.args = { text: 'Trusted', isIconRounded: false, - iconName: IconName.RoundedCheck, + iconName: IconName.ROUNDED_CHECK, iconType: IconType.SUCCESS, }; @@ -63,6 +63,6 @@ export const truncatedText: EcTagStory = TruncatedTextTemplate.bind({}); truncatedText.args = { text: 'Trusted Beneficiary', isIconRounded: false, - iconName: IconName.RoundedCheck, + iconName: IconName.ROUNDED_CHECK, iconType: IconType.SUCCESS, }; diff --git a/src/components/ec-text-filter/ec-text-filter.vue b/src/components/ec-text-filter/ec-text-filter.vue index 67d212bd1..4575a6ff8 100644 --- a/src/components/ec-text-filter/ec-text-filter.vue +++ b/src/components/ec-text-filter/ec-text-filter.vue @@ -6,7 +6,7 @@ (props.modelValue ? IconName.SimpleClose : undefined)); +const rightIcon = computed(() => (props.modelValue ? IconName.SIMPLE_CLOSE : undefined)); diff --git a/src/icons/build-types.js b/src/icons/build-types.js index 4aa1908fa..8aa074452 100644 --- a/src/icons/build-types.js +++ b/src/icons/build-types.js @@ -10,8 +10,8 @@ function getIconNames() { fs.readdirSync(path.resolve(__dirname, `../assets/icons/${dir}`), { withFileTypes: false }).forEach((file) => { const enumValue = `${dir}-${file.replace('.svg', '')}`; icons.push([enumValue.split('-') - .map(part => _.capitalize(part)) - .join(''), enumValue]); + .map(part => _.upperCase(part)) + .join('_'), enumValue]); }); }); return icons; diff --git a/src/styles/components/ec-btn/ec-btn.story.ts b/src/styles/components/ec-btn/ec-btn.story.ts index 70462e2a2..a9871d16a 100644 --- a/src/styles/components/ec-btn/ec-btn.story.ts +++ b/src/styles/components/ec-btn/ec-btn.story.ts @@ -65,8 +65,8 @@ function generatePropsStory(storyName: string, theme: ChameleonThemeConfig): But
- - + + @@ -192,7 +192,7 @@ function generateAllForElement(storyName: string, elementName: string, theme: Ch return { buttons, title: [ - `${size === ButtonSize.Medium ? 'Medium' : 'Small'}`, + `${size === ButtonSize.MEDIUM ? 'Medium' : 'Small'}`, `${hasIconOnly ? 'icon-only' : ''}`, `${hasIcon ? 'icon' : ''}`, `${outline ? 'outline' : ''}`,