docs: fixed docs

gravity-ui · Aug 26, 2024 · 5faa6c4 · 5faa6c4
1 parent 44ef301
commit 5faa6c4
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 20 deletions.
diff --git a/src/components/controls/PasswordInput/README.md b/src/components/controls/PasswordInput/README.md
@@ -1,29 +1,59 @@
+<!--GITHUB_BLOCK-->
+
 ## Password Input
 
+<!--/GITHUB_BLOCK-->
+
 ```tsx
 import {PasswordInput} from '@gravity-ui/uikit';
 ```
 
-Password Input display component
+`TextInput` for typing passwords and other sensitive information. It can be rendered with copy and reveal buttons for more convinient usage.
+
+### Copy button
+
+The `showCopyButton` prop displays a "Copy" button next to the input field when a value is entered. This button allows users to easily copy the input value to their clipboard.
+
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={` <PasswordInput showCopyButton={true} /> `}
+>
+  <UIKit.PasswordInput showRevealButton={true}  />
+</ExampleBlock>
+LANDING_BLOCK-->
+
+### Reveal button
 
-### PropTypes
+The `showRevealButton` prop allows users to toggle the visibility of the password.
 
-Same as [TextInput component](https://github.com/gravity-ui/uikit/blob/main/src/components/controls/TextInput/README.md), with some exceptions:
+<!--LANDING_BLOCK
+<ExampleBlock
+    code={` <PasswordInput showRevealButton={true} /> `}
+>
+  <UIKit.PasswordInput showRevealButton={true}  />
+</ExampleBlock>
+LANDING_BLOCK-->
+
+### Properties
+
+`TextInput` [properties](https://github.com/gravity-ui/uikit/blob/main/src/components/controls/TextInput/README.md#properties), with some exceptions and additions:
 
 - `value` is required property;
 - `onUpdate` is required property;
 - `type` is omitted;
 
-| Property         | Type      | Required | Default | Description                                                                  |
-| :--------------- | :-------- | :------- | :------ | :--------------------------------------------------------------------------- |
-| showCopyButton   | `boolean` |          |         | Show copy button                                                             |
-| showRevealButton | `boolean` |          |         | Show reveal button                                                           |
-| hasCopyTooltip   | `boolean` |          | `true`  | Disable the tooltip for the copy button. The tooltip will not be displayed   |
-| hasRevealTooltip | `boolean` |          | `true`  | Disable the tooltip for the reveal button. The tooltip will not be displayed |
+| Name             | Description                                                                  |   Type    | Default |
+| :--------------- | :--------------------------------------------------------------------------- | :-------: | :-----: |
+| showCopyButton   | Show copy button                                                             | `boolean` | `false` |
+| showRevealButton | Show reveal button                                                           | `boolean` | `false` |
+| hasCopyTooltip   | Disable the tooltip for the copy button. The tooltip will not be displayed   | `boolean` | `true`  |
+| hasRevealTooltip | Disable the tooltip for the reveal button. The tooltip will not be displayed | `boolean` | `true`  |
+
+<!--GITHUB_BLOCK-->
 
 #### Usage example
 
-```jsx harmony
+```tsx
 function MyComponent() {
   const [value, setValue] = React.useState('');
 
@@ -37,3 +67,5 @@ function MyComponent() {
   );
 }
 ```
+
+<!--GITHUB_BLOCK-->
diff --git a/src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx b/src/components/controls/PasswordInput/__stories__/PasswordInput.stories.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import type {Meta, StoryFn} from '@storybook/react';
 
 import {Button} from '../../../Button';
+import {Flex} from '../../../layout/Flex/Flex';
 import {cn} from '../../../utils/cn';
 import type {PasswordInputProps} from '../PasswordInput';
 import {PasswordInput} from '../PasswordInput';
@@ -49,12 +50,12 @@ const WithGenerateRandomValueTemplate: StoryFn<PasswordInputProps> = (args) => {
     }, []);
 
     return (
-        <div className={b()}>
+        <Flex>
             <PasswordInput {...args} onUpdate={setValue} value={value} />
             <Button onClick={generateRandomValue} className={b('button-generate-random-value')}>
                 Generate random value
             </Button>
-        </div>
+        </Flex>
     );
 };
 

diff --git a/src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss b/src/components/controls/PasswordInput/__stories__/PasswordInputStories.scss
@@ -1,6 +1,4 @@
 .password-input-stories {
-    display: flex;
-
     &__button-generate-random-value {
         margin-inline-start: 8px;
     }

diff --git a/src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx b/src/components/controls/PasswordInput/__tests__/PasswordInput.visual.test.tsx
@@ -10,10 +10,4 @@ test.describe('PasswordInputStories', () => {
 
         await expectScreenshot();
     });
-
-    test('render story: <WithGenerateRandomValue>', async ({mount, expectScreenshot}) => {
-        await mount(<PasswordInputStories.WithGenerateRandomValue />);
-
-        await expectScreenshot();
-    });
 });