@designcrowd/fe-shared-lib 1.6.3 → 1.6.4-ast-website-rename-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/tailwind-brandCrowd.css +8 -141
- package/dist/css/tailwind-brandPage.css +9 -130
- package/dist/css/tailwind-crazyDomains.css +8 -141
- package/dist/css/tailwind-designCom.css +8 -141
- package/dist/css/tailwind-designCrowd.css +8 -141
- package/index.js +1 -0
- package/package.json +1 -1
- package/public/css/tailwind-brandCrowd.css +2521 -0
- package/public/css/tailwind-brandPage.css +2201 -0
- package/public/css/tailwind-crazyDomains.css +2521 -0
- package/public/css/tailwind-designCom.css +2521 -0
- package/public/css/tailwind-designCrowd.css +2521 -0
- package/src/atoms/components/BrandNameEditor/BrandNameEditor.stories.js +75 -0
- package/src/atoms/components/BrandNameEditor/BrandNameEditor.vue +150 -0
- package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.de-DE.json +8 -8
- package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.es-ES.json +8 -8
- package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.fr-CA.json +8 -8
- package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.fr-FR.json +8 -8
- package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.pt-BR.json +8 -8
- package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.pt-PT.json +8 -8
- package/src/experiences/components/SideNavigationPanel/SideNavigationPanel.vue +40 -4
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import BrandNameEditor from './BrandNameEditor.vue';
|
|
2
|
+
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Components/Brand Name Editor',
|
|
5
|
+
component: BrandNameEditor,
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
const data = {
|
|
9
|
+
components: {
|
|
10
|
+
BrandNameEditor,
|
|
11
|
+
},
|
|
12
|
+
data() {
|
|
13
|
+
return {
|
|
14
|
+
value: 'My Website',
|
|
15
|
+
};
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export const Default = () => {
|
|
20
|
+
return {
|
|
21
|
+
...data,
|
|
22
|
+
template: `
|
|
23
|
+
<div class="tw-bg-gray-800 tw-p-4">
|
|
24
|
+
<BrandNameEditor v-model="value" />
|
|
25
|
+
</div>
|
|
26
|
+
`,
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export const DarkMode = () => {
|
|
31
|
+
return {
|
|
32
|
+
...data,
|
|
33
|
+
template: `
|
|
34
|
+
<div class="tw-bg-gray-800 tw-p-4">
|
|
35
|
+
<BrandNameEditor v-model="value" :dark-mode="true" />
|
|
36
|
+
</div>
|
|
37
|
+
`,
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export const WithPlaceholder = () => {
|
|
42
|
+
return {
|
|
43
|
+
components: {
|
|
44
|
+
BrandNameEditor,
|
|
45
|
+
},
|
|
46
|
+
data() {
|
|
47
|
+
return {
|
|
48
|
+
value: '',
|
|
49
|
+
};
|
|
50
|
+
},
|
|
51
|
+
template: `
|
|
52
|
+
<div class="tw-bg-gray-800 tw-p-4">
|
|
53
|
+
<BrandNameEditor v-model="value" :dark-mode="true" placeholder="Enter website name..." />
|
|
54
|
+
</div>
|
|
55
|
+
`,
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
export const Empty = () => {
|
|
60
|
+
return {
|
|
61
|
+
components: {
|
|
62
|
+
BrandNameEditor,
|
|
63
|
+
},
|
|
64
|
+
data() {
|
|
65
|
+
return {
|
|
66
|
+
value: '',
|
|
67
|
+
};
|
|
68
|
+
},
|
|
69
|
+
template: `
|
|
70
|
+
<div class="tw-bg-gray-800 tw-p-4">
|
|
71
|
+
<BrandNameEditor v-model="value" />
|
|
72
|
+
</div>
|
|
73
|
+
`,
|
|
74
|
+
};
|
|
75
|
+
};
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
data-component="brand-name-editor"
|
|
4
|
+
class="tw-relative tw-flex tw-flex-grow tw-items-center tw-gap-2"
|
|
5
|
+
:class="{
|
|
6
|
+
'tw-text-white': darkMode,
|
|
7
|
+
'tw-text-black': !darkMode,
|
|
8
|
+
'tw-uppercase': uppercase,
|
|
9
|
+
}"
|
|
10
|
+
>
|
|
11
|
+
<div
|
|
12
|
+
v-if="displayMode"
|
|
13
|
+
class="dynamic-width-input tw-cursor-pointer tw-font-bold"
|
|
14
|
+
:class="{ 'tw-normal-case': uppercase && !!modelValue?.trim() }"
|
|
15
|
+
@click="onEditClick"
|
|
16
|
+
>
|
|
17
|
+
{{ modelValue?.trim() || templateTypeName || placeholder }}
|
|
18
|
+
</div>
|
|
19
|
+
<input
|
|
20
|
+
v-if="!displayMode"
|
|
21
|
+
ref="brandNameInput"
|
|
22
|
+
:value="modelValue"
|
|
23
|
+
type="text"
|
|
24
|
+
:maxlength="maxLength"
|
|
25
|
+
class="dynamic-width-input tw-px-2 tw-border-white"
|
|
26
|
+
:class="{
|
|
27
|
+
'focus:tw-shadow-md': darkMode,
|
|
28
|
+
'tw-normal-case': uppercase,
|
|
29
|
+
}"
|
|
30
|
+
:placeholder="placeholder"
|
|
31
|
+
@input="onInput"
|
|
32
|
+
@blur="save"
|
|
33
|
+
@focus="focus"
|
|
34
|
+
@keyup.enter="($event.target as HTMLInputElement).blur()"
|
|
35
|
+
@keyup.esc="revert"
|
|
36
|
+
/>
|
|
37
|
+
<span
|
|
38
|
+
ref="textWidthSpan"
|
|
39
|
+
class="tw-absolute tw-invisible tw-max-w-full -tw-z-50 tw-top-4 tw-left-4 tw-whitespace-nowrap tw-pointer-events-none dynamic-width-input"
|
|
40
|
+
>
|
|
41
|
+
{{ modelValue.replace(/ /g, ' ') }}
|
|
42
|
+
</span>
|
|
43
|
+
<Button
|
|
44
|
+
class="tw-flex tw-items-center"
|
|
45
|
+
icon="Edit"
|
|
46
|
+
variant="no-border"
|
|
47
|
+
:white="darkMode"
|
|
48
|
+
icon-size="sm"
|
|
49
|
+
@on-click="onPencilIconClick"
|
|
50
|
+
/>
|
|
51
|
+
</div>
|
|
52
|
+
</template>
|
|
53
|
+
|
|
54
|
+
<script setup lang="ts">
|
|
55
|
+
import { ref, computed, watch, nextTick, onMounted } from 'vue';
|
|
56
|
+
import Button from '../Button/Button.vue';
|
|
57
|
+
|
|
58
|
+
const props = withDefaults(
|
|
59
|
+
defineProps<{
|
|
60
|
+
modelValue: string;
|
|
61
|
+
darkMode?: boolean;
|
|
62
|
+
placeholder?: string;
|
|
63
|
+
maxLength?: number;
|
|
64
|
+
templateTypeName?: string;
|
|
65
|
+
uppercase?: boolean;
|
|
66
|
+
}>(),
|
|
67
|
+
{
|
|
68
|
+
darkMode: false,
|
|
69
|
+
placeholder: '',
|
|
70
|
+
maxLength: 100,
|
|
71
|
+
templateTypeName: '',
|
|
72
|
+
uppercase: false,
|
|
73
|
+
},
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
const emit = defineEmits<{
|
|
77
|
+
'update:model-value': [value: string];
|
|
78
|
+
save: [];
|
|
79
|
+
}>();
|
|
80
|
+
|
|
81
|
+
const brandNameInput = ref<HTMLInputElement | null>(null);
|
|
82
|
+
const textWidthSpan = ref<HTMLSpanElement | null>(null);
|
|
83
|
+
const displayMode = ref(true);
|
|
84
|
+
const revertValue = ref(props.modelValue);
|
|
85
|
+
const inputOffsetPx = 22;
|
|
86
|
+
|
|
87
|
+
function resizeInput() {
|
|
88
|
+
nextTick(() => {
|
|
89
|
+
if (props.modelValue && brandNameInput.value && textWidthSpan.value) {
|
|
90
|
+
brandNameInput.value.style.width = `${textWidthSpan.value.offsetWidth + inputOffsetPx}px`;
|
|
91
|
+
} else if (brandNameInput.value) {
|
|
92
|
+
brandNameInput.value.style.width = 'auto';
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
watch(() => displayMode.value, resizeInput);
|
|
98
|
+
watch(() => props.modelValue, resizeInput);
|
|
99
|
+
|
|
100
|
+
onMounted(() => {
|
|
101
|
+
nextTick(() => {
|
|
102
|
+
revertValue.value = props.modelValue;
|
|
103
|
+
resizeInput();
|
|
104
|
+
});
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
function focus() {
|
|
108
|
+
displayMode.value = false;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
function save() {
|
|
112
|
+
displayMode.value = true;
|
|
113
|
+
if (props.modelValue.trim() === '' || props.modelValue !== revertValue.value) {
|
|
114
|
+
emit('save');
|
|
115
|
+
revertValue.value = props.modelValue;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
function revert() {
|
|
120
|
+
emit('update:model-value', revertValue.value);
|
|
121
|
+
brandNameInput.value?.blur();
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
function onInput(event: Event) {
|
|
125
|
+
emit('update:model-value', (event.target as HTMLInputElement).value);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
function onEditClick() {
|
|
129
|
+
displayMode.value = !displayMode.value;
|
|
130
|
+
if (!displayMode.value) {
|
|
131
|
+
nextTick(() => {
|
|
132
|
+
brandNameInput.value?.focus();
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
function onPencilIconClick() {
|
|
138
|
+
onEditClick();
|
|
139
|
+
}
|
|
140
|
+
</script>
|
|
141
|
+
<style scoped>
|
|
142
|
+
.dynamic-width-input {
|
|
143
|
+
@apply tw-border tw-bg-transparent tw-outline-none tw-truncate tw-rounded tw-w-auto tw-my-auto tw-text-base tw-text-white tw-max-w-xs;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
input.dynamic-width-input:focus {
|
|
147
|
+
-webkit-box-shadow: 0 0 5px #d1d1d1;
|
|
148
|
+
box-shadow: 0 0 5px #d1d1d1;
|
|
149
|
+
}
|
|
150
|
+
</style>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
|
-
"sharedPaymentConfig"
|
|
3
|
-
"onboardingIncomplete"
|
|
4
|
-
"pendingVerification"
|
|
5
|
-
"connected"
|
|
6
|
-
"inactive"
|
|
7
|
-
"addPaymentProvider"
|
|
8
|
-
"deletePaymentMethod"
|
|
9
|
-
"currencyLabel"
|
|
2
|
+
"sharedPaymentConfig": {
|
|
3
|
+
"onboardingIncomplete": "Das Onboarding wurde noch nicht abgeschlossen.",
|
|
4
|
+
"pendingVerification": "Ausstehende Verifizierung",
|
|
5
|
+
"connected": "Verbunden",
|
|
6
|
+
"inactive": "Inaktiv",
|
|
7
|
+
"addPaymentProvider": "Zahlungsanbieter hinzufügen",
|
|
8
|
+
"deletePaymentMethod": "Zahlungsmethode löschen",
|
|
9
|
+
"currencyLabel": "Währung"
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
|
-
"sharedPaymentConfig"
|
|
3
|
-
"onboardingIncomplete"
|
|
4
|
-
"pendingVerification"
|
|
5
|
-
"connected"
|
|
6
|
-
"inactive"
|
|
7
|
-
"addPaymentProvider"
|
|
8
|
-
"deletePaymentMethod"
|
|
9
|
-
"currencyLabel"
|
|
2
|
+
"sharedPaymentConfig": {
|
|
3
|
+
"onboardingIncomplete": "Incorporación incompleta",
|
|
4
|
+
"pendingVerification": "Pendiente de verificación",
|
|
5
|
+
"connected": "Conectado",
|
|
6
|
+
"inactive": "Inactivo",
|
|
7
|
+
"addPaymentProvider": "Añadir proveedor de pago",
|
|
8
|
+
"deletePaymentMethod": "Eliminar método de pago",
|
|
9
|
+
"currencyLabel": "Moneda"
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
|
-
"sharedPaymentConfig"
|
|
3
|
-
"onboardingIncomplete"
|
|
4
|
-
"pendingVerification"
|
|
5
|
-
"connected"
|
|
6
|
-
"inactive"
|
|
7
|
-
"addPaymentProvider"
|
|
8
|
-
"deletePaymentMethod"
|
|
9
|
-
"currencyLabel"
|
|
2
|
+
"sharedPaymentConfig": {
|
|
3
|
+
"onboardingIncomplete": "Inscription incomplète",
|
|
4
|
+
"pendingVerification": "Vérification en attente",
|
|
5
|
+
"connected": "Connecté",
|
|
6
|
+
"inactive": "Inactif",
|
|
7
|
+
"addPaymentProvider": "Ajouter un fournisseur de paiement",
|
|
8
|
+
"deletePaymentMethod": "Supprimer le mode de paiement",
|
|
9
|
+
"currencyLabel": "Devise"
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
|
-
"sharedPaymentConfig"
|
|
3
|
-
"onboardingIncomplete"
|
|
4
|
-
"pendingVerification"
|
|
5
|
-
"connected"
|
|
6
|
-
"inactive"
|
|
7
|
-
"addPaymentProvider"
|
|
8
|
-
"deletePaymentMethod"
|
|
9
|
-
"currencyLabel"
|
|
2
|
+
"sharedPaymentConfig": {
|
|
3
|
+
"onboardingIncomplete": "Inscription incomplète",
|
|
4
|
+
"pendingVerification": "Vérification en attente",
|
|
5
|
+
"connected": "Connecté",
|
|
6
|
+
"inactive": "Inactif",
|
|
7
|
+
"addPaymentProvider": "Ajouter un fournisseur de paiement",
|
|
8
|
+
"deletePaymentMethod": "Supprimer le mode de paiement",
|
|
9
|
+
"currencyLabel": "Devise"
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
|
-
"sharedPaymentConfig"
|
|
3
|
-
"onboardingIncomplete"
|
|
4
|
-
"pendingVerification"
|
|
5
|
-
"connected"
|
|
6
|
-
"inactive"
|
|
7
|
-
"addPaymentProvider"
|
|
8
|
-
"deletePaymentMethod"
|
|
9
|
-
"currencyLabel"
|
|
2
|
+
"sharedPaymentConfig": {
|
|
3
|
+
"onboardingIncomplete": "Integração incompleta",
|
|
4
|
+
"pendingVerification": "Verificação Pendente",
|
|
5
|
+
"connected": "Conectado",
|
|
6
|
+
"inactive": "Inativo",
|
|
7
|
+
"addPaymentProvider": "Adicionar fornecedor de pagamentos",
|
|
8
|
+
"deletePaymentMethod": "Excluir método de pagamento",
|
|
9
|
+
"currencyLabel": "Moeda"
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
|
-
"sharedPaymentConfig"
|
|
3
|
-
"onboardingIncomplete"
|
|
4
|
-
"pendingVerification"
|
|
5
|
-
"connected"
|
|
6
|
-
"inactive"
|
|
7
|
-
"addPaymentProvider"
|
|
8
|
-
"deletePaymentMethod"
|
|
9
|
-
"currencyLabel"
|
|
2
|
+
"sharedPaymentConfig": {
|
|
3
|
+
"onboardingIncomplete": "Integração incompleta",
|
|
4
|
+
"pendingVerification": "Verificação Pendente",
|
|
5
|
+
"connected": "Ligado",
|
|
6
|
+
"inactive": "Inativo",
|
|
7
|
+
"addPaymentProvider": "Adicionar fornecedor de pagamentos",
|
|
8
|
+
"deletePaymentMethod": "Eliminar método de pagamento",
|
|
9
|
+
"currencyLabel": "Moeda"
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -2,7 +2,16 @@
|
|
|
2
2
|
<!-- Side Navigation Component following these figma designs: https://www.figma.com/design/UUZ56EQZbb1Ua9NBMm6Rt5/DCOM---My-Account-Left-Nav -->
|
|
3
3
|
<div class="sidebar">
|
|
4
4
|
<div class="menu tw-mb-4">
|
|
5
|
-
<MenuCta
|
|
5
|
+
<MenuCta
|
|
6
|
+
v-if="createNewDesignCta"
|
|
7
|
+
class="tw-mt-2 tw-mb-4"
|
|
8
|
+
:label="createNewDesignCta.label"
|
|
9
|
+
:url="createNewDesignCta.url"
|
|
10
|
+
:action="createNewDesignCta.action"
|
|
11
|
+
variant="primary"
|
|
12
|
+
icon="plus"
|
|
13
|
+
icon-size="xs"
|
|
14
|
+
/>
|
|
6
15
|
<div class="menuitemcontainer">
|
|
7
16
|
<MenuItem
|
|
8
17
|
v-for="item in menuItems"
|
|
@@ -15,8 +24,21 @@
|
|
|
15
24
|
</div>
|
|
16
25
|
</div>
|
|
17
26
|
<div class="ctas tw-flex tw-flex-col tw-gap-2">
|
|
18
|
-
<MenuCta
|
|
19
|
-
|
|
27
|
+
<MenuCta
|
|
28
|
+
v-if="upgradeCta"
|
|
29
|
+
:label="upgradeCta.label"
|
|
30
|
+
:url="upgradeCta.url"
|
|
31
|
+
:action="upgradeCta.action"
|
|
32
|
+
variant="secondary"
|
|
33
|
+
icon="crown"
|
|
34
|
+
icon-size="sm"
|
|
35
|
+
/>
|
|
36
|
+
<MenuCta
|
|
37
|
+
v-if="rateCta"
|
|
38
|
+
:label="rateCta.label"
|
|
39
|
+
:action="rateCta.action"
|
|
40
|
+
variant="empty"
|
|
41
|
+
/>
|
|
20
42
|
</div>
|
|
21
43
|
</div>
|
|
22
44
|
</template>
|
|
@@ -25,15 +47,29 @@ import MenuCta from './MenuCta.vue';
|
|
|
25
47
|
import MenuItem from './MenuItem.vue';
|
|
26
48
|
import type { IMenuItem } from './types';
|
|
27
49
|
|
|
50
|
+
interface CtaConfig {
|
|
51
|
+
label: string;
|
|
52
|
+
url?: string;
|
|
53
|
+
action?: () => void;
|
|
54
|
+
}
|
|
55
|
+
|
|
28
56
|
defineProps({
|
|
29
57
|
menuItems: {
|
|
30
58
|
type: Array<IMenuItem>,
|
|
31
59
|
required: true,
|
|
32
60
|
},
|
|
33
61
|
createNewDesignCta: {
|
|
34
|
-
type: Object,
|
|
62
|
+
type: Object as () => CtaConfig,
|
|
35
63
|
required: true,
|
|
36
64
|
},
|
|
65
|
+
upgradeCta: {
|
|
66
|
+
type: Object as () => CtaConfig | undefined,
|
|
67
|
+
default: undefined,
|
|
68
|
+
},
|
|
69
|
+
rateCta: {
|
|
70
|
+
type: Object as () => CtaConfig | undefined,
|
|
71
|
+
default: undefined,
|
|
72
|
+
},
|
|
37
73
|
});
|
|
38
74
|
</script>
|
|
39
75
|
<style scoped>
|