Merge pull request #1813 from natura-cosmeticos/DSY-4312

Dsy 4312 added natura_v3 theme
natura-cosmeticos · Mar 13, 2024 · 8a817e3 · 8a817e3
2 parents 46b4a63 + 494dcea
commit 8a817e3
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 5 deletions.
diff --git a/packages/web/.storybook/decorators/ThemeProviderDecorator/index.js b/packages/web/.storybook/decorators/ThemeProviderDecorator/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-filename-extension */
 import * as React from 'react'
 import { CssBaseline } from '../../../src/Components/CssBaseline'
 import { Provider, buildTheme } from '../../../src/Provider'
@@ -11,6 +12,8 @@ const getTheme = (themeKey) => {
     avonV2Light: { brand: 'avon_v2', mode: 'light' },
     naturaDark: { brand: 'natura', mode: 'dark' },
     naturaLight: { brand: 'natura', mode: 'light' },
+    naturaV3Dark: { brand: 'natura_v3', mode: 'dark' },
+    naturaV3Light: { brand: 'natura_v3', mode: 'light' },
     theBodyShopDark: { brand: 'theBodyShop', mode: 'dark' },
     theBodyShopLight: { brand: 'theBodyShop', mode: 'light' },
     aesopDark: { brand: 'aesop', mode: 'dark' },

diff --git a/packages/web/.storybook/globalTypes/index.ts b/packages/web/.storybook/globalTypes/index.ts
@@ -11,6 +11,8 @@ export const globalTypes = {
         { right: '☀️', title: 'Avon_v2 Light', value: 'avonV2Light' },
         { right: '🌑', title: 'Natura Dark', value: 'naturaDark' },
         { right: '☀️', title: 'Natura Light', value: 'naturaLight' },
+        { right: '🌑', title: 'Natura_v3 Dark', value: 'naturaV3Dark' },
+        { right: '☀️', title: 'Natura_v3 Light', value: 'naturaV3Light' },
         { right: '🌑', title: 'The Body Shop Dark', value: 'theBodyShopDark' },
         { right: '☀️', title: 'The Body Shop Light', value: 'theBodyShopLight' },
         { right: '🌑', title: 'Aesop Dark', value: 'aesopDark' },

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -2,7 +2,7 @@
   "name": "@naturacosmeticos/natds-web",
   "displayName": "NatDS React Web",
   "description": "A collection of components from Natura Design System for React websites and webapps",
-  "version": "4.6.3",
+  "version": "4.7.0-alpha.DSY-4312.2.0",
   "private": false,
   "keywords": [
     "design-system",

diff --git a/packages/web/src/Components/Button/Button.props.ts b/packages/web/src/Components/Button/Button.props.ts
@@ -54,6 +54,8 @@ export interface IButtonProps extends Omit<ButtonProps, 'translate'> {
    */
   disabled?: ButtonProps['disabled']
 
+  textTransform?:'uppercase' | 'lowercase' | 'capitalize'
+
   /**
    * If `true`, no elevation is used.
    *

diff --git a/packages/web/src/Components/Button/Button.styles.ts b/packages/web/src/Components/Button/Button.styles.ts
@@ -23,10 +23,10 @@ export const getRootStyles: (theme: IThemeWeb) => (ButtonRootStyles) = (theme) =
   if (typeof theme === 'undefined' || typeof theme.sizes === 'undefined' || typeof theme.sizes.small === 'undefined') {
     return {} as ButtonRootStyles
   }
-
   return {
     paddingLeft: theme?.sizes?.small,
-    paddingRight: theme?.sizes?.small
+    paddingRight: theme?.sizes?.small,
+    borderRadius: theme?.shape?.buttonBorderRadius
   } as ButtonRootStyles
 }
 

diff --git a/packages/web/src/Components/Button/Button.tsx b/packages/web/src/Components/Button/Button.tsx
@@ -15,18 +15,24 @@ export { IButtonProps } from './Button.props'
  */
 export const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
   (props: IButtonProps, ref) => {
-    const { classes, disableElevation, ...otherProps } = props
+    const {
+      classes, disableElevation, textTransform, ...otherProps
+    } = props
 
     const mergedClasses = {
       ...classes,
       ...useStyles()
     }
+    const style = {
+      textTransform
+    }
 
     return (
       <MaterialButton
         classes={mergedClasses}
         disableElevation={disableElevation}
         ref={ref}
+        style={style}
         {...otherProps}
       />
     )

diff --git a/packages/web/src/Components/Button/__snapshots__/Button.test.tsx.snap b/packages/web/src/Components/Button/__snapshots__/Button.test.tsx.snap
@@ -15,6 +15,11 @@ exports[`Button component when size is large should match snapshot 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
+  style={
+    Object {
+      "textTransform": undefined,
+    }
+  }
   tabIndex={0}
   type="button"
 >
@@ -41,6 +46,11 @@ exports[`Button component when size is medium should match snapshot 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
+  style={
+    Object {
+      "textTransform": undefined,
+    }
+  }
   tabIndex={0}
   type="button"
 >
@@ -70,6 +80,11 @@ exports[`Button component when size is small should match snapshot 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
+  style={
+    Object {
+      "textTransform": undefined,
+    }
+  }
   tabIndex={0}
   type="button"
 >
@@ -96,6 +111,11 @@ exports[`Button component when variant is contained should match snapshot 1`] =
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
+  style={
+    Object {
+      "textTransform": undefined,
+    }
+  }
   tabIndex={0}
   type="button"
 >
@@ -125,6 +145,11 @@ exports[`Button component when variant is outlined should match snapshot 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
+  style={
+    Object {
+      "textTransform": undefined,
+    }
+  }
   tabIndex={0}
   type="button"
 >
@@ -151,6 +176,11 @@ exports[`Button component when variant is text should match snapshot 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
+  style={
+    Object {
+      "textTransform": undefined,
+    }
+  }
   tabIndex={0}
   type="button"
 >

diff --git a/packages/web/src/Components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap b/packages/web/src/Components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap
@@ -19,6 +19,11 @@ exports[`ButtonGroup component when size is large should match snapshot 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >
@@ -42,6 +47,11 @@ exports[`ButtonGroup component when size is large should match snapshot 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >
@@ -73,6 +83,11 @@ exports[`ButtonGroup component when size is medium should match snapshot 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >
@@ -99,6 +114,11 @@ exports[`ButtonGroup component when size is medium should match snapshot 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >
@@ -133,6 +153,11 @@ exports[`ButtonGroup component when size is small should match snapshot 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >
@@ -156,6 +181,11 @@ exports[`ButtonGroup component when size is small should match snapshot 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >
@@ -187,6 +217,11 @@ exports[`ButtonGroup component when variant is contained should match snapshot 1
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >
@@ -213,6 +248,11 @@ exports[`ButtonGroup component when variant is contained should match snapshot 1
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >
@@ -247,6 +287,11 @@ exports[`ButtonGroup component when variant is outlined should match snapshot 1`
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >
@@ -270,6 +315,11 @@ exports[`ButtonGroup component when variant is outlined should match snapshot 1`
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >
@@ -301,6 +351,11 @@ exports[`ButtonGroup component when variant is text should match snapshot 1`] =
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >
@@ -327,6 +382,11 @@ exports[`ButtonGroup component when variant is text should match snapshot 1`] =
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >

diff --git a/packages/web/src/Components/Card/__snapshots__/Card.test.tsx.snap b/packages/web/src/Components/Card/__snapshots__/Card.test.tsx.snap
@@ -24,6 +24,11 @@ exports[`Card components should match to snapshot - with children: Card empty sn
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >

diff --git a/packages/web/src/Components/Counter/__snapshots__/Counter.test.tsx.snap b/packages/web/src/Components/Counter/__snapshots__/Counter.test.tsx.snap
@@ -28,6 +28,11 @@ exports[`Counter component renders correctly with label: Counter component rende
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      style={
+        Object {
+          "textTransform": undefined,
+        }
+      }
       tabIndex={-1}
       type="button"
     >
@@ -81,6 +86,11 @@ exports[`Counter component renders correctly with label: Counter component rende
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      style={
+        Object {
+          "textTransform": undefined,
+        }
+      }
       tabIndex={0}
       type="button"
     >
@@ -119,6 +129,11 @@ exports[`Counter component renders correctly: Counter component renders correctl
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      style={
+        Object {
+          "textTransform": undefined,
+        }
+      }
       tabIndex={-1}
       type="button"
     >
@@ -172,6 +187,11 @@ exports[`Counter component renders correctly: Counter component renders correctl
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
       onTouchStart={[Function]}
+      style={
+        Object {
+          "textTransform": undefined,
+        }
+      }
       tabIndex={0}
       type="button"
     >

diff --git a/packages/web/src/Components/Menu/__snapshots__/Menu.test.tsx.snap b/packages/web/src/Components/Menu/__snapshots__/Menu.test.tsx.snap
@@ -16,6 +16,11 @@ exports[`Menu component when closed should match snapshot 1`] = `
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
   onTouchStart={[Function]}
+  style={
+    Object {
+      "textTransform": undefined,
+    }
+  }
   tabIndex={0}
   type="button"
 >

diff --git a/packages/web/src/Components/Popover/__snapshots__/Popover.test.tsx.snap b/packages/web/src/Components/Popover/__snapshots__/Popover.test.tsx.snap
@@ -19,6 +19,11 @@ exports[`Popover component when closed should match snapshot 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
+    style={
+      Object {
+        "textTransform": undefined,
+      }
+    }
     tabIndex={0}
     type="button"
   >

diff --git a/packages/web/src/Themes/ThemeBrandName.ts b/packages/web/src/Themes/ThemeBrandName.ts
@@ -1 +1 @@
-export type ThemeBrandName = 'avon' | 'avon_v2'| 'natura' | 'theBodyShop' | 'aesop' | 'biome';
+export type ThemeBrandName = 'avon' | 'avon_v2'| 'natura' | 'natura_v3' | 'theBodyShop' | 'aesop' | 'biome';
-Original file line number
+Diff line change
@@ Expand Up @@
        */
       disabled?: ButtonProps['disabled']
+      textTransform?:'uppercase' | 'lowercase' | 'capitalize'
       /**
        * If `true`, no elevation is used.
        *
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export type ThemeBrandName = 'avon' \| 'avon_v2'\| 'natura' \| 'theBodyShop' \| 'aesop' \| 'biome';
		export type ThemeBrandName = 'avon' \| 'avon_v2'\| 'natura' \| 'natura_v3' \| 'theBodyShop' \| 'aesop' \| 'biome';