Skip to content

Commit

Permalink
Merge branch 'master' into ONL-7918-ec-table-sort-to-ts
Browse files Browse the repository at this point in the history
  • Loading branch information
@raulwwq0
raulwwq0 authored Sep 22, 2023
2 parents ebd210d + 0a7b47b commit 556a102
Show file tree
Hide file tree
Showing 11 changed files with 213 additions and 71 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ebury/chameleon-components",
"version": "2.2.43",
"version": "2.2.44",
"main": "src/main.js",
"sideEffects": false,
"author": "Ebury Team (http://labs.ebury.rocks/)",
Expand Down
1 change: 1 addition & 0 deletions src/components/ec-filter-popover/ec-filter-popover.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ function onOpen(isOpen) {
&__filter-content {
@apply tw-bg-gray-8;
@apply tw-border-gray-6 tw-border-solid tw-border tw-rounded;
@apply tw-flex tw-flex-col;
width: var(--ec-filter-popover-width);
max-height: var(--ec-filter-popover-height);
Expand Down
133 changes: 103 additions & 30 deletions ...ents/ec-multiple-values-selection/__snapshots__/ec-multiple-values-selection.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,8 +167,8 @@ exports[`EcMultipleValuesSelection search should not have the search visible if
>
<svg
class="ec-icon ec-icon--success ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-check"
Expand Down Expand Up @@ -220,8 +220,8 @@ exports[`EcMultipleValuesSelection search should not have the search visible if
>
<svg
class="ec-icon ec-icon--success ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-partial"
Expand Down Expand Up @@ -273,8 +273,8 @@ exports[`EcMultipleValuesSelection search should not have the search visible if
>
<svg
class="ec-icon ec-icon--error ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-cancelled"
Expand Down Expand Up @@ -366,8 +366,8 @@ exports[`EcMultipleValuesSelection search should render properly when isSearchab
>
<svg
class="ec-icon ec-icon--success ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-check"
Expand Down Expand Up @@ -419,8 +419,8 @@ exports[`EcMultipleValuesSelection search should render properly when isSearchab
>
<svg
class="ec-icon ec-icon--success ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-partial"
Expand Down Expand Up @@ -472,8 +472,8 @@ exports[`EcMultipleValuesSelection search should render properly when isSearchab
>
<svg
class="ec-icon ec-icon--error ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-cancelled"
Expand Down Expand Up @@ -555,8 +555,8 @@ exports[`EcMultipleValuesSelection should render correctly if all the required p
>
<svg
class="ec-icon ec-icon--success ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-check"
Expand Down Expand Up @@ -608,8 +608,8 @@ exports[`EcMultipleValuesSelection should render correctly if all the required p
>
<svg
class="ec-icon ec-icon--success ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-partial"
Expand Down Expand Up @@ -661,8 +661,8 @@ exports[`EcMultipleValuesSelection should render correctly if all the required p
>
<svg
class="ec-icon ec-icon--error ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-cancelled"
Expand Down Expand Up @@ -710,6 +710,79 @@ exports[`EcMultipleValuesSelection should render loading state 1`] = `
</div>
`;

exports[`EcMultipleValuesSelection should render with rounded icons 1`] = `
<div
class="ec-multiple-values-selection"
data-test="ec-multiple-values-selection"
>
<!--v-if-->
<!--v-if-->
<div
class="ec-multiple-values-selection__values"
>
<ul>
<li
class="ec-multiple-values-selection__value-wrapper"
data-test="ec-multiple-values-selection__value-wrapper ec-multiple-values-selection__value-wrapper--not-selected"
>
<div
class="ec-checkbox ec-multiple-values-selection__checkbox"
data-test="ec-multiple-values-selection__checkbox-select ec-multiple-values-selection__checkbox-select-0 ec-checkbox"
>
<input
class="ec-checkbox__input"
data-test="ec-checkbox__input"
id="ec-checkbox-1"
type="checkbox"
/>
<div
class="ec-checkbox__label-checkbox-wrapper ec-checkbox__label-checkbox-wrapper--is-single-line"
>
<span
class="ec-checkbox__check-icon-wrapper"
>
<!--v-if-->
</span>
<label
class="ec-checkbox__label ec-checkbox__label--is-single-line"
data-test="ec-checkbox__label"
for="ec-checkbox-1"
title="Currency EUR"
>
<div
class="ec-multiple-values-selection__label-wrapper"
>
<svg
class="ec-icon ec-icon--interactive ec-multiple-values-selection__icon ec-multiple-values-selection__icon--rounded"
height="20"
width="20"
>
<use
xlink:href="#ec-currency-eur"
/>
</svg>
<span
class="ec-multiple-values-selection__label-text"
>
Currency EUR
</span>
</div>
</label>
</div>
<!--v-if-->
</div>
</li>
</ul>
</div>
</div>
`;

exports[`EcMultipleValuesSelection should set the empty state icon 1`] = `
<div
class="ec-multiple-values-selection"
Expand Down Expand Up @@ -919,8 +992,8 @@ exports[`EcMultipleValuesSelection should toggle (select/unselect) all options c
>
<svg
class="ec-icon ec-icon--success ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-check"
Expand Down Expand Up @@ -980,8 +1053,8 @@ exports[`EcMultipleValuesSelection should toggle (select/unselect) all options c
>
<svg
class="ec-icon ec-icon--success ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-partial"
Expand Down Expand Up @@ -1041,8 +1114,8 @@ exports[`EcMultipleValuesSelection should toggle (select/unselect) all options c
>
<svg
class="ec-icon ec-icon--error ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-cancelled"
Expand Down Expand Up @@ -1148,8 +1221,8 @@ exports[`EcMultipleValuesSelection should toggle (select/unselect) all options c
>
<svg
class="ec-icon ec-icon--success ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-check"
Expand Down Expand Up @@ -1201,8 +1274,8 @@ exports[`EcMultipleValuesSelection should toggle (select/unselect) all options c
>
<svg
class="ec-icon ec-icon--success ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-partial"
Expand Down Expand Up @@ -1254,8 +1327,8 @@ exports[`EcMultipleValuesSelection should toggle (select/unselect) all options c
>
<svg
class="ec-icon ec-icon--error ec-multiple-values-selection__icon"
height="24"
width="24"
height="20"
width="20"
>
<use
xlink:href="#ec-rounded-cancelled"
Expand Down
17 changes: 17 additions & 0 deletions src/components/ec-multiple-values-selection/ec-multiple-values-selection.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,23 @@ describe('EcMultipleValuesSelection', () => {
expect(wrapper.element).toMatchSnapshot();
});

it('should render with rounded icons', () => {
const wrapper = mountEcMultipleValuesSelection({
items: [
{
value: 'Currency EUR',
icon: {
name: 'currency-eur',
type: 'interactive',
},
text: 'Currency EUR',
},
],
hasRoundedIcons: true,
});
expect(wrapper.element).toMatchSnapshot();
});

describe('search', () => {
it('should not have the search visible if isSearchable is set to false', () => {
const wrapper = mountEcMultipleValuesSelection({ items, isSearchable: false });
Expand Down
11 changes: 10 additions & 1 deletion src/components/ec-multiple-values-selection/ec-multiple-values-selection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,9 +96,10 @@
<ec-icon
v-if="item.icon"
class="ec-multiple-values-selection__icon"
:class="{ 'ec-multiple-values-selection__icon--rounded': hasRoundedIcons }"
:name="item.icon.name"
:type="item.icon.type"
:size="24"
:size="20"
/>
<span class="ec-multiple-values-selection__label-text">{{ item.text }}</span>
</div>
Expand Down Expand Up @@ -162,6 +163,10 @@ const props = defineProps({
type: String,
default: 'Search...',
},
hasRoundedIcons: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(['update:modelValue', 'search', 'change']);
Expand Down Expand Up @@ -280,6 +285,10 @@ function isItemChecked(item) {
&__icon {
@apply tw-mr-8;
@apply tw-flex-shrink-0;
&--rounded {
@apply tw-rounded-1/2;
}
}
&__label-text {
Expand Down
Loading

0 comments on commit 556a102

Please sign in to comment.