feat(plasma-web/b2c/new-hope): Add Radiobox component with new design and core

packages/plasma-b2c/api/plasma-b2c.api.md

@@ -183,9 +183,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';
@@ -665,9 +663,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"> & Pick<BaseboxProps, "size" | "view" | "id" | "focused" | "label" | "description" | "singleLine"> & 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-b2c/src/components/Radiobox/Radiobox.config.ts

@@ -0,0 +1,75 @@
+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-size: 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-size: 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-fill-color: 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-b2c/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 { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
@@ -37,7 +37,7 @@ const items = [
     { langName, value: 'elixir', label: 'Elixir', disabled: true },
 ];
 
-export const Live = () => {
+export const Live = (props) => {
     const [value, setValue] = React.useState('c');
 
     return items.map((item) => (
@@ -57,11 +57,28 @@ export const Live = () => {
             }}
             onFocus={onFocus}
             onBlur={onBlur}
+            {...props}
         />
     ));
 };
 
-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-b2c/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-b2c/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';

packages/plasma-hope/api/plasma-hope.api.md

@@ -24,7 +24,6 @@ import { AsProps } from '@salutejs/plasma-core';
 import { BadgeProps as BadgeProps_2 } from '@salutejs/plasma-core';
 import { BadgeSize } from '@salutejs/plasma-core';
 import { badgeSizes } from '@salutejs/plasma-core';
-import type { BaseboxProps } from '@salutejs/plasma-core';
 import { BlurProps } from '@salutejs/plasma-core';
 import { blurs } from '@salutejs/plasma-core';
 import { Body1 } from '@salutejs/plasma-core';
@@ -489,16 +488,6 @@ export interface CellProps {
     description: string;
 }
 
-// @public
-export const Checkbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<HTMLInputElement>>;
-
-// Warning: (ae-forgotten-export) The symbol "SizeProps" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export interface CheckboxProps extends Omit<BaseboxProps, 'size'>, Partial<SizeProps> {
-    indeterminate?: boolean;
-}
-
 // @public (undocumented)
 export function clearSelection(): void;
 
@@ -1056,20 +1045,6 @@ export interface ProgressProps {
     value: number;
 }
 
-// @public
-export const Radiobox: React_2.ForwardRefExoticComponent<RadioboxProps & React_2.RefAttributes<HTMLInputElement>>;
-
-// Warning: (ae-forgotten-export) The symbol "SizeProps_2" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export interface RadioboxProps extends Omit<BaseboxProps, 'size'>, Partial<SizeProps_2> {
-}
-
-// Warning: (ae-forgotten-export) The symbol "RadioGroupProps" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export const RadioGroup: React_2.ForwardRefExoticComponent<RadioGroupProps & React_2.RefAttributes<HTMLInputElement>>;
-
 export { radiuses }
 
 export { Ratio }