@salutejs/plasma-new-hope 0.133.1-dev.0 → 0.134.0-canary.1352.10591857563.0

package/emotion/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx

@@ -71,6 +71,47 @@ const IconPlaceholder = styled.div`
     background: ${tertiary};
 `;
 
+const StoryRequired = (props: StoryTextAreaProps) => {
+    const [value, setValue] = useState('Значение поля');
+
+    return (
+        <div
+            style={{
+                display: 'grid',
+                gap: '1.5rem',
+            }}
+        >
+            <TextArea
+                value={value}
+                label="Лейбл"
+                required
+                contentRight={props.enableContentRight ? <IconPlaceholder /> : undefined}
+                onChange={(e) => {
+                    setValue(e.target.value);
+                    onChange(e);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...props}
+            />
+            <TextArea
+                value={value}
+                label="Лейбл"
+                required
+                requiredAlign="right"
+                contentRight={props.enableContentRight ? <IconPlaceholder /> : undefined}
+                onChange={(e) => {
+                    setValue(e.target.value);
+                    onChange(e);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...props}
+            />
+        </div>
+    );
+};
+
 const StoryDefault = (props: StoryTextAreaProps) => {
     const [value, setValue] = useState('Значение поля');
 
@@ -89,6 +130,10 @@ const StoryDefault = (props: StoryTextAreaProps) => {
     );
 };
 
+export const Required: StoryObj<StoryTextAreaProps> = {
+    render: (args) => <StoryRequired {...args} />,
+};
+
 export const Default: StoryObj<StoryTextAreaProps> = {
     render: (args) => <StoryDefault {...args} />,
 };