Merge pull request #1798 from natura-cosmeticos/DSY-3779

Dsy 3779 Add technical documentation template for the 31 components in React + Tagging pattern
natura-cosmeticos · Oct 30, 2023 · 262607f · 262607f
2 parents c13de32 + fb1922c
commit 262607f
Show file tree

Hide file tree

Showing 99 changed files with 743 additions and 813 deletions.
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.54.0",
+  "version": "2.55.0-alpha.DSY-3779.1.0",
   "private": false,
   "keywords": [
     "design-system",

diff --git a/packages/react/src/components/AccordionGroup/AccordionGroup.stories.tsx b/packages/react/src/components/AccordionGroup/AccordionGroup.stories.tsx
@@ -5,13 +5,15 @@ import StoryContainer from '../../helpers/StoryContainer'
 import { AccordionGroup, AccordionGroupProps } from '.'
 
 const componentStatus = `
-- - -
+> AccordionGroup allows groups of several accordion components, allowing collective management and control of multiple expandable panels..
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property         | Values             |    Status           |
+|---               |                 ---|                  ---|
+| **variant**      | standard           | ✅ Available        |
 
-  - ✅ Standard
 
-- - -
+## Technical Usages Examples
 `
 
 const Item = () => {

diff --git a/packages/react/src/components/AccordionGroup/AccordionGroup.tsx b/packages/react/src/components/AccordionGroup/AccordionGroup.tsx
@@ -12,7 +12,7 @@ const AccordionGroup = React.forwardRef<HTMLDivElement, AccordionGroupProps>(
 
     return (
       <div
-        className={`${className} ${wrapper}`}
+        className={`${className} ${wrapper} AccordionGroup-gaya`}
         ref={ref}
         {...rest}
       >

diff --git a/packages/react/src/components/AccordionGroup/__snapshots__/AccordionGroup.test.tsx.snap b/packages/react/src/components/AccordionGroup/__snapshots__/AccordionGroup.test.tsx.snap
@@ -9,7 +9,7 @@ Array [
 }",
   <div>
     <div
-      class=" wrapper-0-2-1"
+      class=" wrapper-0-2-1 AccordionGroup-gaya"
     />
   </div>,
 ]

diff --git a/packages/react/src/components/AccordionItem/AccordionItem.stories.tsx b/packages/react/src/components/AccordionItem/AccordionItem.stories.tsx
@@ -5,23 +5,22 @@ import StoryContainer from '../../helpers/StoryContainer'
 import { AccordionItem, AccordionItemProps } from '.'
 
 const componentStatus = `
-- - -
-
-**NOTE FOR UXs**: This component is available in the following variants:
-
-  - ✅ Standard
-
-With the following attribute statuses:
-
-  - **Attributes:**
-    - ✅ Title
-    - ✅ Legend
-    - ✅ Color
-    - ✅ IsActive
-    - ✅ IsDisabled
-    - ✅ OnClick
-    
-- - -
+> AccordionItem representing an individual item that can be expanded or collapsed in response to user interaction.
+
+## Properties
+| Property         | Values                |    Status           |
+|---               |                    ---|                  ---|
+| **variant**      | standard              | ✅ Available        |
+| **title**        | string                | ✅ Available        |
+| **legend**       | string                | ✅ Available        |
+| **color**        | regular, primary'     | ✅ Available        |
+| **isActive**     | true/false            | ✅ Available        |
+| **isDisabled**   | true/false            | ✅ Available        |
+| **onClick**      | function              | ✅ Available        |
+| **brand**        | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo              | ✅ Available        |
+
+
+## Technical Usages Examples
 `
 
 export default {

diff --git a/packages/react/src/components/AccordionItem/AccordionItem.tsx b/packages/react/src/components/AccordionItem/AccordionItem.tsx
@@ -34,7 +34,7 @@ const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
 
     return (
       <div
-        className={`${className} ${wrapper}`}
+        className={`${className} ${wrapper} AccordionItem-gaya`}
         ref={ref}
         {...rest}
       >

diff --git a/packages/react/src/components/AccordionItem/__snapshots__/AccordionItem.test.tsx.snap b/packages/react/src/components/AccordionItem/__snapshots__/AccordionItem.test.tsx.snap
@@ -77,7 +77,7 @@ Array [
 }",
   <div>
     <div
-      class=" wrapper-0-2-1 wrapper-d0-0-2-5"
+      class=" wrapper-0-2-1 wrapper-d0-0-2-5 AccordionItem-gaya"
     >
       <div
         class="header-0-2-2 header-d1-0-2-6"
@@ -86,7 +86,7 @@ Array [
           Lorem
           <i
             aria-hidden="true"
-            class=" icon-0-2-8 icon-d0-0-2-9 natds-icons natds-icons-outlined-navigation-arrowbottom"
+            class=" icon-0-2-8 icon-d0-0-2-9 natds-icons natds-icons-outlined-navigation-arrowbottom Icon-gaya"
             data-testid="icon-outlined-navigation-arrowbottom"
             role="img"
           />

diff --git a/packages/react/src/components/Alert/Alert.stories.tsx b/packages/react/src/components/Alert/Alert.stories.tsx
@@ -3,26 +3,25 @@ import { Story, Meta } from '@storybook/react'
 import { Alert, AlertProps } from '.'
 
 const componentStatus = `
-- - -
+> Alert allows you to display notification or warning messages on the user interface
 
-**NOTE FOR UXs**: This component is available in the following variants:
+## Properties
+| Property                      | Values                                 |    Status           |
+|---                            |                                     ---|                  ---|
+| **variant**                   | standard                               | ✅ Available        |
+| **type**                      | contained, outlined                    | ✅ Available        |
+| **color**                     | info, success, error, warning, custom  | ✅ Available        |
+| **title**                     | string                                 | ✅ Available        |
+| **customIcon**                | icon-name                              | ✅ Available        |
+| **showIcon**                  | true/false                             | ✅ Available        |
+| **customBackgroundColor**     | string                                 | ✅ Available        |
+| **customTextColor**           | string                                 | ✅ Available        |
+| **customIconColor**           | string                                 | ✅ Available        |
+| **customBorderColor**         | string                                 | ✅ Available        |
 
-  - ✅ Standard
 
-With the following attribute statuses:
+## Technical Usages Examples
 
-  - **Attributes:**
-    - ✅ Color
-    - ✅ Type
-    - ✅ Title
-    - ✅ CustomIcon
-    - ✅ ShowIcon
-    - ✅ CustomBackgroundColor
-    - ✅ CustomTextColor
-    - ✅ CustomIconColor
-    - ✅ CustomBorderColor
-
-- - -
 `
 
 export default {

diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
@@ -56,7 +56,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
 
     return (
       <div
-        className={`${className} ${wrapper}`}
+        className={`${className} ${wrapper} Alert-gaya`}
         ref={ref}
         {...rest}
       >

diff --git a/packages/react/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/packages/react/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -31,11 +31,11 @@ Array [
 }",
   <div>
     <div
-      class=" wrapper-0-2-1 wrapper-d0-0-2-3"
+      class=" wrapper-0-2-1 wrapper-d0-0-2-3 Alert-gaya"
     >
       <i
         aria-hidden="true"
-        class=" icon-0-2-5 icon-d0-0-2-6 natds-icons natds-icons-outlined-alert-info"
+        class=" icon-0-2-5 icon-d0-0-2-6 natds-icons natds-icons-outlined-alert-info Icon-gaya"
         data-testid="icon-outlined-alert-info"
         role="img"
       />

diff --git a/packages/react/src/components/AppBarTop/AppBarTop.stories.tsx b/packages/react/src/components/AppBarTop/AppBarTop.stories.tsx
@@ -8,39 +8,29 @@ import { AppBarTop, AppBarProps } from '.'
 import { Logo } from '../Logo'
 
 const componentStatus = `
----
-
-**NOTE FOR UX**: This component is available in the following variants:
-
-  - ✅ \`base\`
-  - ✅ \`standard\`
-
-With the following attribute status:
-
-  - **Color**
-      - ✅ \`default\`
-      - ✅ \`primary\`
-      - ✅ \`inverse\`
-      - ✅ \`none\`
-  - ✅ **Elevation**
-  - ✅ **Content Position** (available but with alternative composition)
-  - ✅ **Content Type** (available but with alternative composition)
-  - ✅ **Content Proeminent** (available but with alternative composition)
-  - **Behaviour**
-      - ✅  \`fixed\`
-      - ✅  \`scroll\`
-  - **Action**
-      - ✅ \`left\` (available but with alternative composition)
-      - ✅ \`right\` (available but with alternative composition)
-
----
+> The App Bar Top displays information and actions relating to the current screen.
+
+## Properties
+| Property                      | Values                                 |    Status           |
+|---                            |                                     ---|                  ---|
+| **variant(no prop)**                   | base/standard                 | ✅ Available        |
+| **color**                     | default, primary, inverse, none        | ✅ Available        |
+| **elevation**                 | true/false                             | ✅ Available        |
+| **behaviour**                 | fixed, scroll, absolute                | ✅ Available        |
+| **action**                    | left, right                            | ✅ (available but with alternative composition)        |
+| **Content Position**          | (available but with alternative composition) | ✅ (available but with alternative composition)        |
+| **Content Type**              | (available but with alternative composition) | ✅ (available but with alternative composition)        |
+| **Content Proeminent**        | (available but with alternative composition) | ✅ (available but with alternative composition)        |
+
+
+## Technical Usages Examples
 `
 
 export default {
   title: 'Components/AppBarTop',
   component: AppBarTop,
   parameters: {
-    componentSubtitle: 'The App Bar Top displays information and actions relating to the current screen.',
+    componentSubtitle: '',
     docs: { description: { component: componentStatus } }
   }
 } as Meta

diff --git a/packages/react/src/components/AppBarTop/AppBarTop.tsx b/packages/react/src/components/AppBarTop/AppBarTop.tsx
@@ -47,7 +47,7 @@ const AppBarTop = React.forwardRef<HTMLElement, AppBarProps>(
     })
 
     return (
-      <header ref={ref} className={`${className} ${container}`} {...props} role={role} data-testid={testID}>
+      <header ref={ref} className={`${className} ${container} AppBarTop-gaya`} {...props} role={role} data-testid={testID}>
         <div className={appBar}>
           {children}
         </div>

diff --git a/packages/react/src/components/AppBarTop/__snapshots__/AppBarTop.spec.tsx.snap b/packages/react/src/components/AppBarTop/__snapshots__/AppBarTop.spec.tsx.snap
@@ -33,7 +33,7 @@ Array [
 }",
   <div>
     <header
-      class=" container-0-2-1 container-d0-0-2-3"
+      class=" container-0-2-1 container-d0-0-2-3 AppBarTop-gaya"
     >
       <div
         class="appBar-0-2-2 appBar-d1-0-2-4"
@@ -78,7 +78,7 @@ Array [
 }",
   <div>
     <header
-      class=" container-0-2-1 container-d0-0-2-3"
+      class=" container-0-2-1 container-d0-0-2-3 AppBarTop-gaya"
     >
       <div
         class="appBar-0-2-2 appBar-d1-0-2-4"
@@ -123,7 +123,7 @@ Array [
 }",
   <div>
     <header
-      class=" container-0-2-1 container-d0-0-2-3"
+      class=" container-0-2-1 container-d0-0-2-3 AppBarTop-gaya"
     >
       <div
         class="appBar-0-2-2 appBar-d1-0-2-4"
@@ -168,7 +168,7 @@ Array [
 }",
   <div>
     <header
-      class=" container-0-2-1 container-d0-0-2-3"
+      class=" container-0-2-1 container-d0-0-2-3 AppBarTop-gaya"
     >
       <div
         class="appBar-0-2-2 appBar-d1-0-2-4"
@@ -213,7 +213,7 @@ Array [
 }",
   <div>
     <header
-      class=" container-0-2-1 container-d0-0-2-3"
+      class=" container-0-2-1 container-d0-0-2-3 AppBarTop-gaya"
     >
       <div
         class="appBar-0-2-2 appBar-d1-0-2-4"

diff --git a/packages/react/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/components/Autocomplete/Autocomplete.stories.tsx
@@ -6,31 +6,31 @@ import { Autocomplete, AutocompleteProps } from '.'
 import { OptionProps } from './Autocomplete.props'
 
 const componentStatus = `
-- - -
-
-**NOTE FOR UXs**: This component is available in the following variants:
-
-  - ✅ Standard
-
-With the following attribute statuses:
-
-  - **Attributes:**
-    - ✅ Label
-    - ✅ Name
-    - ✅ Placeholder
-    - ✅ Options
-    - ✅ Size
-    - ✅ HelperText
-    - ✅ Feedback
-    - ✅ Required
-    - ✅ Disabled
-    - ✅ Readonly
-    - ✅ Position
-    - ✅ handleSelect
-    - ✅ NotFound
-    - ✅ Placeholder
-
-- - -
+> Autocomplete offers an interactive text box that suggests options as the user types
+
+## Properties
+| Property                      | Values                                 |    Status           |
+|---                            |                                     ---|                  ---|
+| **variant**                   | standard                               | ✅ Available        |
+| **label**                     | string                                 | ✅ Available        |
+| **name**                      | string                                 | ✅ Available        |
+| **placeholder**               | string                                 | ✅ Available        |
+| **options**                   | [{value: string, label: string}]       | ✅ Available        |
+| **size**                      | medium, mediumX                        | ✅ Available        |
+| **helperText**                | string                                 | ✅ Available        |
+| **feedback**                  | success, error                         | ✅ Available        |
+| **required**                  | true/false                             | ✅ Available        |
+| **disabled**                  | true/false                             | ✅ Available        |
+| **readonly**                  | true/false                             | ✅ Available        |
+| **Position**                  | bottom, top                            | ✅ Available        |
+| **handleSelect**              | function                               | ✅ Available        |
+| **notFound**                  | string                                 | ✅ Available        |
+| **onChange**                  | function                               | ✅ Available        |
+| **brand**                   | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo            | ✅ Available        |
+
+
+
+## Technical Usages Examples
 `
 
 const options: OptionProps[] = [{

diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx
@@ -53,7 +53,7 @@ const Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>(
 
     return (
       <div
-        className={`${className} ${wrapper}`}
+        className={`${className} ${wrapper} Autocomplete-gaya`}
         data-testid={testID}
         {...rest}
       >
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ Array [ @@
     }",
       <div>
         <div
-          class=" wrapper-0-2-1"
+          class=" wrapper-0-2-1 AccordionGroup-gaya"
         />
       </div>,
     ]
@@ Expand Down @@