feat(plasma-web): Replace Radiobox from plasma-new-hope and update …

…snapshots

packages/plasma-web/api/plasma-web.api.md

@@ -177,9 +177,7 @@ import { PriceProps } from '@salutejs/plasma-hope';
 import { Progress } from '@salutejs/plasma-hope';
 import { ProgressProps } from '@salutejs/plasma-hope';
 import { PropsType } from '@salutejs/plasma-new-hope/types/engines/types';
-import { Radiobox } from '@salutejs/plasma-hope';
-import { RadioboxProps } from '@salutejs/plasma-hope';
-import { RadioGroup } from '@salutejs/plasma-hope';
+import { RadioGroup } from '@salutejs/plasma-new-hope/styled-components';
 import { radiuses } from '@salutejs/plasma-core';
 import { Ratio } from '@salutejs/plasma-hope';
 import { default as React_2 } from 'react';
@@ -647,9 +645,27 @@ export { Progress }
 
 export { ProgressProps }
 
-export { Radiobox }
+// @public
+export const Radiobox: FunctionComponent<PropsType<    {
+size: {
+s: string;
+m: string;
+};
+view: {
+accent: string;
+};
+disabled: {
+true: string;
+};
+focused: {
+true: string;
+};
+}> & Filter<InputHTMLAttributes<HTMLInputElement>, "size"> & BaseboxProps & RefAttributes<HTMLInputElement>>;
 
-export { RadioboxProps }
+// Warning: (ae-forgotten-export) The symbol "RadioboxComponent" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export type RadioboxProps = typeof RadioboxComponent;
 
 export { RadioGroup }
 

packages/plasma-web/src/components/Radiobox/Radiobox.config.ts

@@ -0,0 +1,77 @@
+import { css } from '@salutejs/plasma-new-hope/styled-components';
+
+export const config = {
+    defaults: {
+        view: 'accent',
+        size: 'm',
+        focused: 'true',
+    },
+    variations: {
+        /**
+         * Размер контрола.
+         */
+        size: {
+            s: css`
+                --plasma-radiobox-trigger-width: 1rem;
+                --plasma-radiobox-trigger-height: 1rem;
+                --plasma-radiobox-trigger-border-radius 1.125rem;
+                --plasma-radiobox-ellipse-size 0.5rem;
+                --plasma-radiobox-content-top-offset: 0.1rem;
+                --plasma-radiobox-content-left-offset 0.5rem;
+                --plasma-radiobox-label-font-family: var(--plasma-typo-footnote1-font-family);
+                --plasma-radiobox-label-font-size: var(--plasma-typo-footnote1-font-size);
+                --plasma-radiobox-label-font-style: var(--plasma-typo-footnote1-font-style);
+                --plasma-radiobox-label-font-weight: var(--plasma-typo-footnote1-font-weight);
+                --plasma-radiobox-label-letter-spacing: var(--plasma-typo-footnote1-letter-spacing);
+                --plasma-radiobox-label-line-height: var(--plasma-typo-footnote1-line-height);
+                --plasma-radiobox-description-font-family: var(--plasma-typo-caption-font-family);
+                --plasma-radiobox-description-font-size: var(--plasma-typo-caption-font-size);
+                --plasma-radiobox-description-font-style: var(--plasma-typo-caption-font-style);
+                --plasma-radiobox-description-font-weight: var(--plasma-typo-caption-font-weight);
+                --plasma-radiobox-description-letter-spacing: var(--plasma-typo-caption-letter-spacing);
+                --plasma-radiobox-description-line-height: var(--plasma-typo-caption-line-height);
+            `,
+            m: css`
+                --plasma-radiobox-trigger-width: 1.375rem;
+                --plasma-radiobox-trigger-height: 1.375rem;
+                --plasma-radiobox-trigger-border-radius 1.125rem;
+                --plasma-radiobox-ellipse-size 0.625rem;
+                --plasma-radiobox-content-top-offset: 0.25rem;
+                --plasma-radiobox-content-left-offset 0.6875rem;
+                --plasma-radiobox-label-font-family: var(--plasma-typo-body1-font-family);
+                --plasma-radiobox-label-font-size: var(--plasma-typo-body1-font-size);
+                --plasma-radiobox-label-font-style: var(--plasma-typo-body1-font-style);
+                --plasma-radiobox-label-font-weight: var(--plasma-typo-body1-font-weight);
+                --plasma-radiobox-label-letter-spacing: var(--plasma-typo-body1-letter-spacing);
+                --plasma-radiobox-label-line-height: var(--plasma-typo-body1-line-height);
+                --plasma-radiobox-description-font-family: var(--plasma-typo-footnote1-font-family);
+                --plasma-radiobox-description-font-size: var(--plasma-typo-footnote1-font-size);
+                --plasma-radiobox-description-font-style: var(--plasma-typo-footnote1-font-style);
+                --plasma-radiobox-description-font-weight: var(--plasma-typo-footnote1-font-weight);
+                --plasma-radiobox-description-letter-spacing: var(--plasma-typo-footnote1-letter-spacing);
+                --plasma-radiobox-description-line-height: var(--plasma-typo-footnote1-line-height);
+            `,
+        },
+        /**
+         * Вид контрола.
+         */
+        view: {
+            accent: css`
+                --plasma-radiobox-view: var(--plasma-colors-accent);
+                --plasma-radiobox-ellipse-color: var(--plasma-colors-white);
+                --plasma-radiobox-description-color: var(--plasma-colors-secondary);
+                --plasma-radiobox-trigger-border-color: var(--plasma-colors-secondary);
+            `,
+        },
+        disabled: {
+            true: css`
+                --plasma-radiobox-disabled-opacity: 0.4;
+            `,
+        },
+        focused: {
+            true: css`
+                --plasma-radiobox-focus-color: var(--plasma-colors-accent);
+            `,
+        },
+    },
+};

packages/plasma-web/src/components/Radiobox/Radiobox.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import { SSRProvider } from '../SSRProvider';
@@ -46,7 +46,7 @@ const items = [
     { name: 'language', value: 'elixir', label: 'Elixir', disabled: true },
 ];
 
-export const Live = () => {
+export const Live = (props) => {
     const [value, setValue] = React.useState('c');
 
     return (
@@ -74,6 +74,7 @@ export const Live = () => {
                                 }}
                                 onFocus={onFocus}
                                 onBlur={onBlur}
+                                {...props}
                             />
                         </ListItem>
                     ))}
@@ -83,7 +84,23 @@ export const Live = () => {
     );
 };
 
-export const Default: Story<RadioboxProps> = ({ name, label, description, disabled, singleLine, size }) => {
+Live.argTypes = {
+    size: {
+        options: sizes,
+        control: {
+            type: 'inline-radio',
+        },
+    },
+};
+
+Live.args = {
+    size: 'm',
+    view: 'accent',
+    singleLine: false,
+    focused: true,
+};
+
+export const Default: ComponentStory<RadioboxProps> = ({ name, label, description, disabled, singleLine, size }) => {
     const value = 0;
     const [checked, setChecked] = React.useState(true);
 

packages/plasma-web/src/components/Radiobox/Radiobox.ts

@@ -0,0 +1,15 @@
+import { radioboxConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+
+import { config } from './Radiobox.config';
+
+const mergedConfig = mergeConfig(radioboxConfig, config);
+const RadioboxComponent = component(mergedConfig);
+
+export type RadioboxProps = typeof RadioboxComponent;
+
+/**
+ * Переключатель, или *радиокнопка*.
+ */
+export const Radiobox = RadioboxComponent;
+
+export { RadioGroup } from '@salutejs/plasma-new-hope/styled-components';

packages/plasma-web/src/components/Radiobox/index.ts

@@ -1,2 +1,2 @@
-export { Radiobox, RadioGroup } from '@salutejs/plasma-hope';
-export type { RadioboxProps } from '@salutejs/plasma-hope';
+export { Radiobox, RadioGroup } from './Radiobox';
+export type { RadioboxProps } from './Radiobox';