| 1 |
import * as FEEDBACK from "./constants"; |
| 2 |
import * as FEEDBACK_TYPO from "./typographyPrefixConstants"; |
| 3 |
import { addProperty } from "../../../helpers/helper"; |
| 4 |
|
| 5 |
export default ({ blockId }) => { |
| 6 |
const formContentTextSelector = `.${blockId}.feedback-form .feedback-form-link`; |
| 7 |
const formContentIconSelectorPath = `.${blockId}.feedback-form .feedback-form-link .feedback-form-icon svg path`; |
| 8 |
const formContentIconSelectorSvg = `.${blockId}.feedback-form .feedback-form-link .feedback-form-icon svg`; |
| 9 |
const feedbackFormModalSelector = `#betterdocs-form-modal.${blockId}.betterdocs-modalwindow .modal-inner .modal-content`; |
| 10 |
const feedbackFormModalHeading = `#betterdocs-form-modal.${blockId}.betterdocs-modalwindow .modal-inner .modal-content .feedback-form-title`; |
| 11 |
const feedbackFormModalLabelSelector = `#betterdocs-form-modal.${blockId}.betterdocs-modalwindow .betterdocs-feedback-form label`; |
| 12 |
const feedbackFormModalButtonSelector = `#betterdocs-form-modal.${blockId}.betterdocs-modalwindow .betterdocs-feedback-form #feedback_form_submit_btn`; |
| 13 |
const feedbackFormModalButtonSelectorRoot = `#betterdocs-form-modal.${blockId}.betterdocs-modalwindow .feedback-from-button`; |
| 14 |
|
| 15 |
return [ |
| 16 |
addProperty("color", "formContentColor", { |
| 17 |
args: { hover: 'formContentColor' }, |
| 18 |
cssSelector: formContentTextSelector, |
| 19 |
}), |
| 20 |
|
| 21 |
addProperty("typography", FEEDBACK_TYPO.formTitleTypo, { |
| 22 |
args: { |
| 23 |
prefixConstant: FEEDBACK_TYPO.formTitleTypo, |
| 24 |
}, |
| 25 |
cssSelector: formContentTextSelector, |
| 26 |
}), |
| 27 |
|
| 28 |
addProperty("fill", "iconColor", { |
| 29 |
cssSelector: formContentIconSelectorPath, |
| 30 |
}), |
| 31 |
|
| 32 |
addProperty("responsive", "feedbackIconSize", { |
| 33 |
args: { property: "width", controlName: FEEDBACK.ICON_SIZE }, |
| 34 |
cssSelector: formContentIconSelectorSvg, |
| 35 |
}), |
| 36 |
|
| 37 |
addProperty("responsive", "feedbackFormWidth", { |
| 38 |
args: { property: "max-width", controlName: FEEDBACK.FORM_WIDTH }, |
| 39 |
cssSelector: feedbackFormModalSelector, |
| 40 |
}), |
| 41 |
|
| 42 |
addProperty("responsive", "feedbackFormHeight", { |
| 43 |
args: { |
| 44 |
property: "height", |
| 45 |
controlName: FEEDBACK.FORM_HEIGHT, |
| 46 |
}, |
| 47 |
cssSelector: feedbackFormModalSelector, |
| 48 |
}), |
| 49 |
|
| 50 |
addProperty("color", "feedbackFormHeadingColor", { |
| 51 |
args: { property: "color" }, |
| 52 |
cssSelector: feedbackFormModalHeading, |
| 53 |
}), |
| 54 |
|
| 55 |
addProperty("typography", FEEDBACK_TYPO.feedBackFormHeadingtypo, { |
| 56 |
args: { |
| 57 |
prefixConstant: FEEDBACK_TYPO.feedBackFormHeadingtypo, |
| 58 |
}, |
| 59 |
cssSelector: feedbackFormModalHeading, |
| 60 |
}), |
| 61 |
|
| 62 |
addProperty("alignment", "feedbackFormHeadingAlignment", { |
| 63 |
cssSelector: feedbackFormModalHeading, |
| 64 |
}), |
| 65 |
|
| 66 |
addProperty("color", "feedbackFormLabelColor", { |
| 67 |
args: { property: "color" }, |
| 68 |
cssSelector: feedbackFormModalLabelSelector, |
| 69 |
}), |
| 70 |
|
| 71 |
addProperty("typography", FEEDBACK_TYPO.feedbackFormLabelTypo, { |
| 72 |
args: { |
| 73 |
prefixConstant: FEEDBACK_TYPO.feedbackFormLabelTypo, |
| 74 |
}, |
| 75 |
cssSelector: feedbackFormModalHeading, |
| 76 |
}), |
| 77 |
|
| 78 |
addProperty("background-color", "feedbackFormButtonBackColor", { |
| 79 |
args: { property: "background-color" }, |
| 80 |
cssSelector: feedbackFormModalButtonSelector, |
| 81 |
}), |
| 82 |
|
| 83 |
addProperty("color", "feedbackFormButtonTextColor", { |
| 84 |
args: { property: "color" }, |
| 85 |
cssSelector: feedbackFormModalButtonSelector, |
| 86 |
}), |
| 87 |
|
| 88 |
addProperty("typography", FEEDBACK_TYPO.feedbackFormButtonTextTypo, { |
| 89 |
args: { |
| 90 |
prefixConstant: FEEDBACK_TYPO.feedbackFormButtonTextTypo, |
| 91 |
}, |
| 92 |
cssSelector: feedbackFormModalButtonSelector, |
| 93 |
}), |
| 94 |
|
| 95 |
addProperty("responsive", FEEDBACK.FORM_BUTTON_WIDTH, { |
| 96 |
args: { property: "width" }, |
| 97 |
cssSelector: feedbackFormModalButtonSelector, |
| 98 |
}), |
| 99 |
|
| 100 |
addProperty("dimension", FEEDBACK.FORM_BUTTON_PADDING, { |
| 101 |
args: { styleFor: "padding" }, |
| 102 |
cssSelector: feedbackFormModalButtonSelector, |
| 103 |
}), |
| 104 |
|
| 105 |
addProperty("alignment", "feedbackFormButtonAlignment", { |
| 106 |
cssSelector: feedbackFormModalButtonSelectorRoot, |
| 107 |
}), |
| 108 |
|
| 109 |
]; |
| 110 |
}; |
| 111 |
|
