diff --git a/packages/sdds-insol-next/src/components/_beta/EmbeddedButton/EmbeddedButton.config.ts b/packages/sdds-insol-next/src/components/_beta/EmbeddedButton/EmbeddedButton.config.ts new file mode 100644 index 00000000000..f7c78ed9861 --- /dev/null +++ b/packages/sdds-insol-next/src/components/_beta/EmbeddedButton/EmbeddedButton.config.ts @@ -0,0 +1,122 @@ +import { css, _beta_embeddedButtonTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; +import { + surfaceAccent, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_insol_next'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + }, + variations: { + view: { + default: css` + ${tokens.color}: ${textPrimary}; + ${tokens.colorHover}: ${textPrimaryHover}; + ${tokens.colorActive}: ${textPrimaryActive}; + ${tokens.backgroundColor}: transparent; + ${tokens.spinnerColor}: ${textPrimary}; + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.loadingIconOpacity}: 0.06; + `, + secondary: css` + ${tokens.color}: ${textSecondary}; + ${tokens.colorHover}: ${textSecondaryHover}; + ${tokens.colorActive}: ${textSecondaryActive}; + ${tokens.backgroundColor}: transparent; + ${tokens.spinnerColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.loadingIconOpacity}: 0.06; + `, + accent: css` + ${tokens.color}: ${textAccent}; + ${tokens.colorHover}: ${textAccentHover}; + ${tokens.colorActive}: ${textAccentActive}; + ${tokens.backgroundColor}: transparent; + ${tokens.spinnerColor}: ${textAccent}; + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.loadingIconOpacity}: 0.06; + `, + positive: css` + ${tokens.color}: ${textPositive}; + ${tokens.colorHover}: ${textPositiveHover}; + ${tokens.colorActive}: ${textPositiveActive}; + ${tokens.backgroundColor}: transparent; + ${tokens.spinnerColor}: ${textPositive}; + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.loadingIconOpacity}: 0.06; + `, + warning: css` + ${tokens.color}: ${textWarning}; + ${tokens.colorHover}: ${textWarningHover}; + ${tokens.colorActive}: ${textWarningActive}; + ${tokens.backgroundColor}: transparent; + ${tokens.spinnerColor}: ${textWarning}; + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.loadingIconOpacity}: 0.06; + `, + negative: css` + ${tokens.color}: ${textNegative}; + ${tokens.colorHover}: ${textNegativeHover}; + ${tokens.colorActive}: ${textNegativeActive}; + ${tokens.backgroundColor}: transparent; + ${tokens.spinnerColor}: ${textNegative}; + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.loadingIconOpacity}: 0.06; + `, + info: css` + ${tokens.color}: ${textInfo}; + ${tokens.colorHover}: ${textInfoHover}; + ${tokens.colorActive}: ${textInfoActive}; + ${tokens.backgroundColor}: transparent; + ${tokens.spinnerColor}: ${textInfo}; + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.loadingIconOpacity}: 0.06; + `, + }, + size: { + l: css` + ${tokens.borderRadius}: 0.75rem; + ${tokens.spinnerSize}: 2.25rem; + `, + m: css` + ${tokens.borderRadius}: 0.625rem; + ${tokens.spinnerSize}: 1.5rem; + `, + s: css` + ${tokens.borderRadius}: 0.5rem; + ${tokens.spinnerSize}: 1rem; + `, + xs: css` + ${tokens.borderRadius}: 0.375rem; + ${tokens.spinnerSize}: 0.75rem; + `, + }, + disabled: { + true: css` + ${tokens.disabledOpacity}: 0.4; + `, + }, + }, +}; diff --git a/packages/sdds-insol-next/src/components/_beta/EmbeddedButton/EmbeddedButton.stories.tsx b/packages/sdds-insol-next/src/components/_beta/EmbeddedButton/EmbeddedButton.stories.tsx new file mode 100644 index 00000000000..580ef4a0ad6 --- /dev/null +++ b/packages/sdds-insol-next/src/components/_beta/EmbeddedButton/EmbeddedButton.stories.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import type { ComponentProps } from 'react'; +import type { Meta } from '@storybook/react-vite'; +import { getEmbeddedButtonStories } from '@salutejs/plasma-sb-utils'; + +import { EmbeddedButton } from './EmbeddedButton'; +import { config } from './EmbeddedButton.config'; + +type EmbeddedButtonProps = ComponentProps; + +const { meta: META, Default } = getEmbeddedButtonStories({ + component: EmbeddedButton, + componentConfig: config, +}); + +const meta: Meta = { + ...META, + title: '_Beta/Data Entry/EmbeddedButton', +}; + +export default meta; + +export { Default }; diff --git a/packages/sdds-insol-next/src/components/_beta/EmbeddedButton/EmbeddedButton.ts b/packages/sdds-insol-next/src/components/_beta/EmbeddedButton/EmbeddedButton.ts new file mode 100644 index 00000000000..18a84ca13f6 --- /dev/null +++ b/packages/sdds-insol-next/src/components/_beta/EmbeddedButton/EmbeddedButton.ts @@ -0,0 +1,6 @@ +import { _beta_embeddedButtonConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './EmbeddedButton.config'; + +const mergedConfig = mergeConfig(_beta_embeddedButtonConfig, config); +export const EmbeddedButton = component(mergedConfig); diff --git a/packages/sdds-insol-next/src/components/_beta/EmbeddedButton/index.ts b/packages/sdds-insol-next/src/components/_beta/EmbeddedButton/index.ts new file mode 100644 index 00000000000..a9c95bc52e7 --- /dev/null +++ b/packages/sdds-insol-next/src/components/_beta/EmbeddedButton/index.ts @@ -0,0 +1 @@ +export { EmbeddedButton } from './EmbeddedButton'; diff --git a/packages/sdds-insol-next/src/components/_beta/index.ts b/packages/sdds-insol-next/src/components/_beta/index.ts index cdff6db3c67..3e8d0d09dac 100644 --- a/packages/sdds-insol-next/src/components/_beta/index.ts +++ b/packages/sdds-insol-next/src/components/_beta/index.ts @@ -1,2 +1,3 @@ export * from './Popover'; export * from './Tooltip'; +export * from './EmbeddedButton';