From 42e38cc3235bf6c40d572cb23bd23ff6562e6161 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Fri, 22 Sep 2023 21:53:15 +0600 Subject: [PATCH] feat(plasma-web): Replace `Checkbox` from plasma-new-hope --- packages/plasma-web/api/plasma-web.api.md | 25 ++++++- .../components/Checkbox/Checkbox.config.tsx | 75 +++++++++++++++++++ .../components/Checkbox/Checkbox.stories.tsx | 30 +++++++- .../src/components/Checkbox/Checkbox.tsx | 13 ++++ .../src/components/Checkbox/index.ts | 4 +- 5 files changed, 137 insertions(+), 10 deletions(-) create mode 100644 packages/plasma-web/src/components/Checkbox/Checkbox.config.tsx create mode 100644 packages/plasma-web/src/components/Checkbox/Checkbox.tsx diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index b7b50b54e4..36397a0c58 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -34,6 +34,7 @@ import { BadgeSize } from '@salutejs/plasma-hope'; import { badgeSizes } from '@salutejs/plasma-hope'; import { BadgeView } from '@salutejs/plasma-hope'; import { badgeViews } from '@salutejs/plasma-hope'; +import { BaseboxProps } from '@salutejs/plasma-new-hope/types/components/Checkbox/Checkbox'; import { BlurProps } from '@salutejs/plasma-core'; import { blurs } from '@salutejs/plasma-core'; import { Body1 } from '@salutejs/plasma-hope'; @@ -80,8 +81,6 @@ import { CarouselItemProps } from '@salutejs/plasma-hope'; import { CarouselProps } from '@salutejs/plasma-hope'; import { Cell } from '@salutejs/plasma-hope'; import { CellProps } from '@salutejs/plasma-hope'; -import { Checkbox } from '@salutejs/plasma-hope'; -import { CheckboxProps } from '@salutejs/plasma-hope'; import { clearSelection } from '@salutejs/plasma-hope'; import { closeNotification } from '@salutejs/plasma-hope'; import { Col } from '@salutejs/plasma-hope'; @@ -431,9 +430,27 @@ export { Cell } export { CellProps } -export { Checkbox } +// @public +export const Checkbox: FunctionComponent & Pick, "checked" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "pattern" | "list" | "step" | "readOnly" | "required" | "minLength" | "maxLength" | "accept" | "alt" | "autoComplete" | "capture" | "crossOrigin" | "enterKeyHint" | "height" | "max" | "min" | "multiple" | "src" | "width"> & BaseboxProps & RefAttributes>; -export { CheckboxProps } +// Warning: (ae-forgotten-export) The symbol "CheckboxComponent" needs to be exported by the entry point index.d.ts +// +// @public (undocumented) +export type CheckboxProps = typeof CheckboxComponent; export { clearSelection } diff --git a/packages/plasma-web/src/components/Checkbox/Checkbox.config.tsx b/packages/plasma-web/src/components/Checkbox/Checkbox.config.tsx new file mode 100644 index 0000000000..f2cb2b20e3 --- /dev/null +++ b/packages/plasma-web/src/components/Checkbox/Checkbox.config.tsx @@ -0,0 +1,75 @@ +import { css } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'accent', + stories: 'm', + focused: 'true', + }, + variations: { + /** + * Размер контрола. + */ + size: { + s: css` + --plasma-checkbox-trigger-width: 0.875rem; + --plasma-checkbox-trigger-height: 0.875rem; + --plasma-checkbox-trigger-border-radius: 0.25rem; + --plasma-checkbox-content-top-offset: 0.063rem; + --plasma-checkbox-content-left-offset: 0.563rem; + --plasma-checkbox-label-font-family: var(--plasma-typo-body-s-font-family); + --plasma-checkbox-label-font-size: var(--plasma-typo-body-s-font-size); + --plasma-checkbox-label-font-style: var(--plasma-typo-body-s-font-style); + --plasma-checkbox-label-font-weight: var(--plasma-typo-body-s-font-weight); + --plasma-checkbox-label-letter-spacing: var(--plasma-typo-body-s-letter-spacing); + --plasma-checkbox-label-line-height: var(--plasma-typo-body-s-line-height); + --plasma-checkbox-description-font-family: var(--plasma-typo-body-xs-font-family); + --plasma-checkbox-description-font-size: var(--plasma-typo-body-xs-font-size); + --plasma-checkbox-description-font-style: var(--plasma-typo-body-xs-font-style); + --plasma-checkbox-description-font-weight: var(--plasma-typo-body-xs-font-weight); + --plasma-checkbox-description-letter-spacing: var(--plasma-typo-body-xs-letter-spacing); + --plasma-checkbox-description-line-height: var(--plasma-typo-body-xs-line-height); + `, + m: css` + --plasma-checkbox-trigger-width: 1.25rem; + --plasma-checkbox-trigger-height: 1.25rem; + --plasma-checkbox-trigger-border-radius: 0.375rem; + --plasma-checkbox-content-top-offset: 0.188rem; + --plasma-checkbox-content-left-offset: 0.75rem; + --plasma-checkbox-label-font-family: var(--plasma-typo-body-m-font-family); + --plasma-checkbox-label-font-size: var(--plasma-typo-body-m-font-size); + --plasma-checkbox-label-font-style: var(--plasma-typo-body-m-font-style); + --plasma-checkbox-label-font-weight: var(--plasma-typo-body-m-font-weight); + --plasma-checkbox-label-letter-spacing: var(--plasma-typo-body-m-letter-spacing); + --plasma-checkbox-label-line-height: var(--plasma-typo-body-m-line-height); + --plasma-checkbox-description-font-family: var(--plasma-typo-body-s-font-family); + --plasma-checkbox-description-font-size: var(--plasma-typo-body-s-font-size); + --plasma-checkbox-description-font-style: var(--plasma-typo-body-s-font-style); + --plasma-checkbox-description-font-weight: var(--plasma-typo-body-s-font-weight); + --plasma-checkbox-description-letter-spacing: var(--plasma-typo-body-s-letter-spacing); + --plasma-checkbox-description-line-height: var(--plasma-typo-body-s-line-height); + `, + }, + /** + * Вид контрола. + */ + view: { + accent: css` + --plasma-checkbox-view: var(--plasma-colors-accent); + --plasma-checkbox-icon-color: var(--plasma-colors-white); + --plasma-checkbox-description-color: var(--plasma-colors-secondary); + --plasma-checkbox-trigger-border-color: var(--plasma-colors-secondary); + `, + }, + disabled: { + true: css` + --plasma-checkbox-disabled-opacity: 0.4; + `, + }, + focused: { + true: css` + --plasma-checkbox-focus-color: var(--plasma-colors-accent); + `, + }, + }, +}; diff --git a/packages/plasma-web/src/components/Checkbox/Checkbox.stories.tsx b/packages/plasma-web/src/components/Checkbox/Checkbox.stories.tsx index a3098f0989..3819b9ceca 100644 --- a/packages/plasma-web/src/components/Checkbox/Checkbox.stories.tsx +++ b/packages/plasma-web/src/components/Checkbox/Checkbox.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Story, Meta } from '@storybook/react'; +import { Meta, ComponentStory } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { SSRProvider } from '../SSRProvider'; @@ -10,6 +10,7 @@ import { List, ListItem } from '../List'; import { Checkbox, CheckboxProps } from '.'; const propsToDisable = [ + 'view', 'name', 'indeterminate', 'id', @@ -117,7 +118,7 @@ const items = [ ]; const getChildren = (value: string) => items.filter((item) => item.parent === value); -const getState = (values: Record, value: string) => { +const getState = (values: Record, value: string) => { const allChildren = getChildren(value); if (!allChildren.length) { @@ -137,7 +138,7 @@ const getState = (values: Record, value: string) => { return { checked: true, indeterminate: false }; }; -export const Live = () => { +export const Live = (args) => { const [values, setValues] = React.useState({ russian: true, english: true, @@ -181,6 +182,7 @@ export const Live = () => { }} onFocus={onFocus} onBlur={onBlur} + {...args} /> ))} @@ -189,7 +191,25 @@ export const Live = () => { ); }; -export const Default: Story = (args) => { +Live.argTypes = { + ...disableProps([...propsToDisable, 'label', 'description']), + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, +}; + +Live.args = { + size: 'm', + view: 'accent', + disabled: false, + singleLine: false, + focused: true, +}; + +export const Default: ComponentStory = (args) => { const value = 0; const [checked, setChecked] = React.useState(true); @@ -219,6 +239,8 @@ Default.args = { disabled: false, singleLine: false, size: 'm', + view: 'accent', + focused: true, }; Default.argTypes = { diff --git a/packages/plasma-web/src/components/Checkbox/Checkbox.tsx b/packages/plasma-web/src/components/Checkbox/Checkbox.tsx new file mode 100644 index 0000000000..e1352afd2f --- /dev/null +++ b/packages/plasma-web/src/components/Checkbox/Checkbox.tsx @@ -0,0 +1,13 @@ +import { checkboxConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Checkbox.config'; + +const mergedConfig = mergeConfig(checkboxConfig, config); +const CheckboxComponent = component(mergedConfig); + +export type CheckboxProps = typeof CheckboxComponent; + +/** + * Флажок или чекбокс. Позволяет пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ отключено. + */ +export const Checkbox = CheckboxComponent; diff --git a/packages/plasma-web/src/components/Checkbox/index.ts b/packages/plasma-web/src/components/Checkbox/index.ts index bfe0220fcd..43aaf92503 100644 --- a/packages/plasma-web/src/components/Checkbox/index.ts +++ b/packages/plasma-web/src/components/Checkbox/index.ts @@ -1,2 +1,2 @@ -export { Checkbox } from '@salutejs/plasma-hope'; -export type { CheckboxProps } from '@salutejs/plasma-hope'; +export { Checkbox } from './Checkbox'; +export type { CheckboxProps } from './Checkbox';