Merge pull request #1797 from natura-cosmeticos/DSY-3753

Dsy 3753 - Establish a component technical documentation standard using "Button"
natura-cosmeticos · Oct 3, 2023 · a4c8451 · a4c8451
2 parents 25fe624 + 7db2da2
commit a4c8451
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 53 deletions.
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.53.2](https://github.com/natura-cosmeticos/natds-js/compare/@naturacosmeticos/[email protected]...@naturacosmeticos/[email protected]) (2023-10-03)
+
+* **natds-react:** Change status doc button snackbar
+* **natds-react:** Change status doc button button
+
+
 
 # [2.53.0](https://github.com/natura-cosmeticos/natds-js/compare/@naturacosmeticos/[email protected]...@naturacosmeticos/[email protected]) (2023-09-18)
 

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -2,7 +2,7 @@
   "name": "@naturacosmeticos/natds-react",
   "displayName": "NatDS-React",
   "description": "A collection of components from Natura Design System for React",
-  "version": "2.53.0",
+  "version": "2.54.0-alpha.DSY-3753.14.0",
   "private": false,
   "keywords": [
     "design-system",

diff --git a/packages/react/src/components/Button/Button.props.ts b/packages/react/src/components/Button/Button.props.ts
@@ -8,31 +8,31 @@ export type ButtonVariant = 'contained' | 'outlined' | 'text'
 export type ButtonType = 'button' | 'reset' | 'submit'
 export interface ButtonBaseProps {
   /**
-   * Specify a description to your button.
+   * Specifies a description to your button.
    * Use it in cases where a text label is not visible on the screen.
    */
   ariaLabel?: string
   /**
-   * Specify an optional brand to be added to your Button
+   * Specifies an optional brand to be added to your Button
    */
   brand?: BrandTypes
   /**
-   * Specify an optional textTransform to be added to your Button
+   * Specifies an optional textTransform to be added to your Button
    */
   textTransform?: 'uppercase' | 'lowercase' | 'capitalize'
   /**
-   * Specify whether the Button should be disabled, or not
+   * Specifies whether the Button should be disabled, or not
    * @default false
    */
   disabled?: boolean;
 
   /**
-   * Specify the content of your Button
+   * Specifies the content of your Button
    */
   children: React.ReactNode
 
   /**
-   * Specify an optional className to be added to your Button
+   * Specifies an optional className to be added to your Button
    */
   className?: string
 
@@ -43,12 +43,12 @@ export interface ButtonBaseProps {
   fullWidth?: boolean;
 
   /**
-   * Provide a function to be called when the button element is clicked
+   * Provides a function to be called when the button element is clicked
    */
   onClick: () => void;
 
   /**
-  * Specify the size of the button, from a list of available sizes.
+  * Specifies the size of the button, from a list of available sizes.
   * If no size is specified, the 'semiX' size will be applied as default.
   * @default semiX
   */
@@ -60,13 +60,13 @@ export interface ButtonBaseProps {
   testID?: string;
 
   /**
-   * Optional prop to specify the type of the Button
+   * Optional prop to specifies the type of the Button
    * @default 'button'
    */
   type?: ButtonType;
 
   /**
-   * Specify the variant of Button you want to create.
+   * Specifies the variant of Button you want to create.
    * If no variant is specified, a 'contained' button will be rendered.
    * @default contained
    */
@@ -82,7 +82,7 @@ export type ButtonWithIcon = ButtonBaseProps & {
   showIcon: true
 
   /**
-   * Specify the icon position
+   * Specifies the icon position
    * @default 'right'
    */
   iconPosition?: IconPosition

diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
@@ -4,39 +4,28 @@ import { Button, ButtonProps } from '.'
 import StoryContainer from '../../helpers/StoryContainer'
 
 const componentStatus = `
----
 
-**NOTE FOR UXs**: This component is available in the following variants:
+> Buttons allow users to take actions, and make choices, with a single tap.
 
-  - ✅ \`contained\`
-  - ✅ \`outlined\`
-  - ✅ \`text\`
+## Properties
+| Property         | Values                                                                          |    Status           |
+|---               |                                                                              ---|                  ---|
+| **variant**      | contained, outlined, text                                                       | ✅ Available        |
+| **textTranform** | uppercase, lowercase,  capitalize                                               | ✅ Available        |
+| **size**         | semi, semiX, medium                                                             | ✅ Available        |
+| **iconName**     | 'icon_name'                                                                     | ✅ Available        |
+| **disabled**     | true, false                                                                     | ✅ Available        |
+| **fullWidth**    | true, false                                                                     | ✅ Available        |
+| **brand**        | aesop, avon, avon_v2, natura <br /> consultoriaDeBeleza, natura_v2, casaEestilo | ✅ Available        |
 
-With the following attribute status:
-
-- **textTransform**
-    - ✅ \`uppercase\`
-    - ✅ \`lowercase\`
-    - ✅ \`capitalize\`
-
-- **Size**
-    - ✅ \`semi\`
-    - ✅ \`semiX\`
-    - ✅ \`medium\`
-- ✅ **Icon**
-- ✅ **Disabled**
-- **Display**
-    - ✅ \`inline\`
-    - ✅ \`block\`
-
----
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/Button',
   component: Button,
   parameters: {
-    componentSubtitle: 'Buttons allow users to take actions, and make choices, with a single tap',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } },
     actions: { argTypesRegex: '^on.*' }
   }

diff --git a/packages/react/src/components/Snackbar/Snackbar.stories.tsx b/packages/react/src/components/Snackbar/Snackbar.stories.tsx
@@ -6,26 +6,23 @@ import Button from '../Button'
 import Icon from '../Icon'
 
 const componentStatus = `
-- - -
 
-**NOTE FOR UXs**: This component is available in the following variants:
+> Snackbar component is used for instant notifications
 
-- ✅ Standard
+## Properties
+| Property              | Values                                                                      |    Status           |
+|---                    |                                                                          ---|                  ---|
+| **variant**           | Standard                                                                    | ✅ Available        |
+| **Title**             | any string                                                                  | ✅ Available        |
+| **Icon**              | Component Icon                                                              | ✅ Available        |
+| **directionButton**   | none, inlineButton, blockButton                                             | ✅ Available        |
+| **Feedback**          | default, success, error, warning, info,                                     | ✅ Available        |
+| **Position**          | topLeft, topCenter, topRight, <br />bottomLeft, bottomCenter, bottomRight   | ✅ Available        |
+| **Timer**             | number                                                                      | ✅ Available        |
+| **Animation**         | true/false                                                                  | ✅ Available        |
+| **buttonComponent**   | Component Button                                                            | ✅ Available        |
 
-With the following attribute statuses:
-
-  - **Attributes:**
-  - ✅ Title
-  - ✅ Icon
-  - ✅ directionButton
-  - ✅ Feedback
-  - ✅ Position
-  - ✅ Timer
-  - ✅ Animation
-  - ✅ buttonComponent
-
-
-- - -
+## Technical Usages Examples
 `
 
 export default {