@hh.ru/magritte-ui-branded-button 1.1.7 → 1.2.0
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/BrandedButton.js +2 -2
- package/BrandedButton.js.map +1 -1
- package/index.css +652 -237
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/index.mock.d.ts +5 -0
- package/index.mock.js +11 -0
- package/index.mock.js.map +1 -0
- package/package.json +2 -2
package/BrandedButton.js
CHANGED
|
@@ -8,7 +8,7 @@ import { Text } from '@hh.ru/magritte-ui-typography';
|
|
|
8
8
|
import '@hh.ru/magritte-ui-icon/variants/icon';
|
|
9
9
|
import '@hh.ru/magritte-ui-icon/variants/service';
|
|
10
10
|
|
|
11
|
-
var styles = {"branded-button":"magritte-branded-button___1S-6h_1-
|
|
11
|
+
var styles = {"branded-button":"magritte-branded-button___1S-6h_1-2-0","brandedButton":"magritte-branded-button___1S-6h_1-2-0","with-label":"magritte-with-label___Dk5zY_1-2-0","withLabel":"magritte-with-label___Dk5zY_1-2-0","large":"magritte-large___fhHp1_1-2-0","medium":"magritte-medium___acdMN_1-2-0","content":"magritte-content___KCvC7_1-2-0","label":"magritte-label___5wD1u_1-2-0","icons":"magritte-icons___w0xoV_1-2-0","icon":"magritte-icon___Jrf4s_1-2-0","apple-primary":"magritte-apple-primary___JRlQ6_1-2-0","applePrimary":"magritte-apple-primary___JRlQ6_1-2-0","disabled":"magritte-disabled___jnf8q_1-2-0","vk-primary":"magritte-vk-primary___Yb3pK_1-2-0","vkPrimary":"magritte-vk-primary___Yb3pK_1-2-0","mail-primary":"magritte-mail-primary___-L14-_1-2-0","mailPrimary":"magritte-mail-primary___-L14-_1-2-0","ok-primary":"magritte-ok-primary___C1FPr_1-2-0","okPrimary":"magritte-ok-primary___C1FPr_1-2-0","google-primary":"magritte-google-primary___aFVAZ_1-2-0","googlePrimary":"magritte-google-primary___aFVAZ_1-2-0","esia-primary":"magritte-esia-primary___tVRSb_1-2-0","esiaPrimary":"magritte-esia-primary___tVRSb_1-2-0","tinkoff-primary":"magritte-tinkoff-primary___N-25n_1-2-0","tinkoffPrimary":"magritte-tinkoff-primary___N-25n_1-2-0","yandex-primary":"magritte-yandex-primary___-7Uln_1-2-0","yandexPrimary":"magritte-yandex-primary___-7Uln_1-2-0","more-primary":"magritte-more-primary___KWZtF_1-2-0","morePrimary":"magritte-more-primary___KWZtF_1-2-0","apple-secondary":"magritte-apple-secondary___hGF96_1-2-0","appleSecondary":"magritte-apple-secondary___hGF96_1-2-0","vk-secondary":"magritte-vk-secondary___QtaCT_1-2-0","vkSecondary":"magritte-vk-secondary___QtaCT_1-2-0","mail-secondary":"magritte-mail-secondary___3UqUc_1-2-0","mailSecondary":"magritte-mail-secondary___3UqUc_1-2-0","ok-secondary":"magritte-ok-secondary___vnWnt_1-2-0","okSecondary":"magritte-ok-secondary___vnWnt_1-2-0","google-secondary":"magritte-google-secondary___xz82D_1-2-0","googleSecondary":"magritte-google-secondary___xz82D_1-2-0","esia-secondary":"magritte-esia-secondary___fpaCK_1-2-0","esiaSecondary":"magritte-esia-secondary___fpaCK_1-2-0","tinkoff-secondary":"magritte-tinkoff-secondary___mSvD7_1-2-0","tinkoffSecondary":"magritte-tinkoff-secondary___mSvD7_1-2-0","yandex-secondary":"magritte-yandex-secondary___8lFGz_1-2-0","yandexSecondary":"magritte-yandex-secondary___8lFGz_1-2-0","more-secondary":"magritte-more-secondary___ZC-AL_1-2-0","moreSecondary":"magritte-more-secondary___ZC-AL_1-2-0","apple-tertiary":"magritte-apple-tertiary___Ibvcd_1-2-0","appleTertiary":"magritte-apple-tertiary___Ibvcd_1-2-0","vk-tertiary":"magritte-vk-tertiary___V2CIc_1-2-0","vkTertiary":"magritte-vk-tertiary___V2CIc_1-2-0","mail-tertiary":"magritte-mail-tertiary___WJxIx_1-2-0","mailTertiary":"magritte-mail-tertiary___WJxIx_1-2-0","ok-tertiary":"magritte-ok-tertiary___aOdxp_1-2-0","okTertiary":"magritte-ok-tertiary___aOdxp_1-2-0","google-tertiary":"magritte-google-tertiary___LGKec_1-2-0","googleTertiary":"magritte-google-tertiary___LGKec_1-2-0","esia-tertiary":"magritte-esia-tertiary___IU16g_1-2-0","esiaTertiary":"magritte-esia-tertiary___IU16g_1-2-0","tinkoff-tertiary":"magritte-tinkoff-tertiary___eCe-N_1-2-0","tinkoffTertiary":"magritte-tinkoff-tertiary___eCe-N_1-2-0","yandex-tertiary":"magritte-yandex-tertiary___VLvi4_1-2-0","yandexTertiary":"magritte-yandex-tertiary___VLvi4_1-2-0","more-tertiary":"magritte-more-tertiary___fv4ob_1-2-0","moreTertiary":"magritte-more-tertiary___fv4ob_1-2-0","icon-apple":"magritte-icon-apple___GNkzh_1-2-0","iconApple":"magritte-icon-apple___GNkzh_1-2-0","icon-vk":"magritte-icon-vk___ZYtqi_1-2-0","iconVk":"magritte-icon-vk___ZYtqi_1-2-0","icon-mail":"magritte-icon-mail___llrks_1-2-0","iconMail":"magritte-icon-mail___llrks_1-2-0","icon-ok":"magritte-icon-ok___46dW7_1-2-0","iconOk":"magritte-icon-ok___46dW7_1-2-0","icon-google":"magritte-icon-google___IMAFR_1-2-0","iconGoogle":"magritte-icon-google___IMAFR_1-2-0","icon-esia":"magritte-icon-esia___dDBGo_1-2-0","iconEsia":"magritte-icon-esia___dDBGo_1-2-0","icon-tinkoff":"magritte-icon-tinkoff___d4LZ9_1-2-0","iconTinkoff":"magritte-icon-tinkoff___d4LZ9_1-2-0","icon-yandex":"magritte-icon-yandex___fe4ig_1-2-0","iconYandex":"magritte-icon-yandex___fe4ig_1-2-0"};
|
|
12
12
|
|
|
13
13
|
const ICONS_MAX = 2;
|
|
14
14
|
const BrandedButtonComponent = ({ Element = 'button', service: _service, size = 'medium', mode = 'primary', 'data-qa': dataQa = 'branded-button', disabled, children, ...restProps }, ref) => {
|
|
@@ -35,7 +35,7 @@ const BrandedButtonComponent = ({ Element = 'button', service: _service, size =
|
|
|
35
35
|
return (jsx(Element, { ...additionalAttributes, ...restProps, disabled: isComponentDisabled, className: classnames(styles.brandedButton, styles[size], serviceClass && styles[serviceClass], {
|
|
36
36
|
[styles.withLabel]: !!children,
|
|
37
37
|
[styles.disabled]: isComponentDisabled,
|
|
38
|
-
}), children: jsxs("div", { className: classnames(styles.content), children: [children && jsx(Text, { typography: "subtitle-1-semibold", children: children }), IconComponent && jsx(IconComponent, { "data-qa": `branded-button-icon-${isMoreButton ? 'more' : service}` }), isMoreButton && !IconComponent && (jsxs("div", { className: styles.icons, children: [service.slice(0, ICONS_MAX).map((item) => {
|
|
38
|
+
}), children: jsxs("div", { className: classnames(styles.content), children: [children && (jsx("span", { className: styles.label, children: jsx(Text, { Element: "span", typography: "subtitle-1-semibold", children: children }) })), IconComponent && (jsx("span", { className: styles.icon, children: jsx(IconComponent, { "data-qa": `branded-button-icon-${isMoreButton ? 'more' : service}` }) })), isMoreButton && !IconComponent && (jsxs("div", { className: styles.icons, children: [service.slice(0, ICONS_MAX).map((item) => {
|
|
39
39
|
const Icon = mode === 'tertiary'
|
|
40
40
|
? ICON_MAP[item]?.tertiary[state]
|
|
41
41
|
: ICON_MAP[item]?.secondary[state];
|
package/BrandedButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrandedButton.js","sources":["../src/BrandedButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { ComponentWithCustomElement, ForwardRefRenderFuncWithCustomElement } from '@hh.ru/magritte-types';\nimport { SERVICE_ICON_MAP, SERVICE_ONLY_ICON_MAP } from '@hh.ru/magritte-ui-branded-button/icons';\nimport { BrandedButtonProps } from '@hh.ru/magritte-ui-branded-button/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './branded-button.less';\n\nconst ICONS_MAX = 2;\n\nconst BrandedButtonComponent: ForwardRefRenderFuncWithCustomElement<BrandedButtonProps, 'button'> = (\n {\n Element = 'button',\n service: _service,\n size = 'medium',\n mode = 'primary',\n 'data-qa': dataQa = 'branded-button',\n disabled,\n children,\n ...restProps\n },\n ref\n) => {\n const ICON_MAP = children ? SERVICE_ICON_MAP : SERVICE_ONLY_ICON_MAP;\n const service = Array.isArray(_service) && _service.length === 1 ? _service[0] : _service;\n const isMoreButton = Array.isArray(service);\n const forceDisabled = useDisabled();\n const isComponentDisabled = disabled || forceDisabled;\n const state = isComponentDisabled ? 'disabled' : 'default';\n const IconComponent = isMoreButton ? ICON_MAP.more?.[mode][state] : ICON_MAP[service]?.[mode][state];\n const serviceClass = (isMoreButton ? `more-${mode}` : `${service}-${mode}`) as keyof typeof styles;\n const additionalAttributes: Record<string, unknown> = {\n 'data-qa': dataQa,\n };\n\n if (Element === 'button') {\n additionalAttributes.type = 'button';\n } else {\n additionalAttributes.tabIndex = isComponentDisabled ? -1 : 0;\n }\n\n if (ref) {\n additionalAttributes.ref = ref;\n }\n\n return (\n <Element\n {...additionalAttributes}\n {...restProps}\n disabled={isComponentDisabled}\n className={classnames(styles.brandedButton, styles[size], serviceClass && styles[serviceClass], {\n [styles.withLabel]: !!children,\n [styles.disabled]: isComponentDisabled,\n })}\n >\n <div className={classnames(styles.content)}>\n {children && <Text typography=\"subtitle-1-semibold\"
|
|
1
|
+
{"version":3,"file":"BrandedButton.js","sources":["../src/BrandedButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { ComponentWithCustomElement, ForwardRefRenderFuncWithCustomElement } from '@hh.ru/magritte-types';\nimport { SERVICE_ICON_MAP, SERVICE_ONLY_ICON_MAP } from '@hh.ru/magritte-ui-branded-button/icons';\nimport { BrandedButtonProps } from '@hh.ru/magritte-ui-branded-button/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './branded-button.less';\n\nconst ICONS_MAX = 2;\n\nconst BrandedButtonComponent: ForwardRefRenderFuncWithCustomElement<BrandedButtonProps, 'button'> = (\n {\n Element = 'button',\n service: _service,\n size = 'medium',\n mode = 'primary',\n 'data-qa': dataQa = 'branded-button',\n disabled,\n children,\n ...restProps\n },\n ref\n) => {\n const ICON_MAP = children ? SERVICE_ICON_MAP : SERVICE_ONLY_ICON_MAP;\n const service = Array.isArray(_service) && _service.length === 1 ? _service[0] : _service;\n const isMoreButton = Array.isArray(service);\n const forceDisabled = useDisabled();\n const isComponentDisabled = disabled || forceDisabled;\n const state = isComponentDisabled ? 'disabled' : 'default';\n const IconComponent = isMoreButton ? ICON_MAP.more?.[mode][state] : ICON_MAP[service]?.[mode][state];\n const serviceClass = (isMoreButton ? `more-${mode}` : `${service}-${mode}`) as keyof typeof styles;\n const additionalAttributes: Record<string, unknown> = {\n 'data-qa': dataQa,\n };\n\n if (Element === 'button') {\n additionalAttributes.type = 'button';\n } else {\n additionalAttributes.tabIndex = isComponentDisabled ? -1 : 0;\n }\n\n if (ref) {\n additionalAttributes.ref = ref;\n }\n\n return (\n <Element\n {...additionalAttributes}\n {...restProps}\n disabled={isComponentDisabled}\n className={classnames(styles.brandedButton, styles[size], serviceClass && styles[serviceClass], {\n [styles.withLabel]: !!children,\n [styles.disabled]: isComponentDisabled,\n })}\n >\n <div className={classnames(styles.content)}>\n {children && (\n <span className={styles.label}>\n <Text Element=\"span\" typography=\"subtitle-1-semibold\">\n {children}\n </Text>\n </span>\n )}\n {IconComponent && (\n <span className={styles.icon}>\n <IconComponent data-qa={`branded-button-icon-${isMoreButton ? 'more' : service}`} />\n </span>\n )}\n {isMoreButton && !IconComponent && (\n <div className={styles.icons}>\n {service.slice(0, ICONS_MAX).map((item) => {\n const Icon =\n mode === 'tertiary'\n ? ICON_MAP[item]?.tertiary[state]\n : ICON_MAP[item]?.secondary[state];\n return (\n <div key={item} className={styles[`icon-${item}`]}>\n {Icon && <Icon data-qa={`branded-button-icon-${item}`} />}\n </div>\n );\n })}\n {service.length > ICONS_MAX && (\n <Text typography=\"subtitle-1-semibold\">+ {service.length - ICONS_MAX}</Text>\n )}\n </div>\n )}\n </div>\n </Element>\n );\n};\n\nexport const BrandedButton = forwardRef(BrandedButtonComponent) as ComponentWithCustomElement<\n BrandedButtonProps,\n 'button'\n>;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|