Merge pull request #1817 from natura-cosmeticos/DSY-4495

Dsy 4495
natura-cosmeticos · Apr 9, 2024 · 3ab454f · 3ab454f
2 parents 04b68c9 + e80f1cd
commit 3ab454f
Show file tree

Hide file tree

Showing 6 changed files with 310 additions and 37 deletions.
diff --git a/packages/react/.storybook/preview-head.html b/packages/react/.storybook/preview-head.html
@@ -1,5 +1,5 @@
 <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@1.20.1/dist/natds-icons.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@1.22.1/dist/natds-icons.css" />
 
 <link href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-themes@latest/dist/assets/aesop_fonts.css" rel="stylesheet" />
 <link href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-themes@latest/dist/assets/avon_fonts.css" rel="stylesheet" />

diff --git a/packages/react/.storybook/theme.js b/packages/react/.storybook/theme.js
@@ -9,7 +9,7 @@ export const buildTheme = (theme, mode) => create({
   barBg: theme.color.surface,
   barTextColor: theme.color.highEmphasis,
   base: mode,
-  brandTitle: 'Natura Design System',
+  brandTitle: 'Gaya Natura Design System',
   colorPrimary: theme.color.primary,
   colorSecondary: theme.color.secondary,
   textColor: theme.color.highEmphasis,

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.58.1",
+  "version": "2.58.2-alpha.DSY-4495.1.0",
   "private": false,
   "keywords": [
     "design-system",
@@ -57,8 +57,8 @@
     "generate": "yarn plop --plopfile ./generators/plopfile.js"
   },
   "dependencies": {
-    "@naturacosmeticos/natds-icons": "1.20.1",
-    "@naturacosmeticos/natds-themes": "0.71.0",
+    "@naturacosmeticos/natds-icons": "1.22.1",
+    "@naturacosmeticos/natds-themes": "0.72.1",
     "react-jss": "10.9.0"
   },
   "devDependencies": {

diff --git a/packages/react/src/ThemeProvider/__snapshots__/buildTheme.test.ts.snap b/packages/react/src/ThemeProvider/__snapshots__/buildTheme.test.ts.snap
@@ -401,28 +401,6 @@ Object {
     "primaryDarkest": "#A67423",
     "primaryLight": "#f6b854",
     "primaryLightest": "#F8C675",
-    "primitiveBlack": "#000000",
-    "primitiveDarkGray100": "#7f7f7f",
-    "primitiveDarkGray200": "#737373",
-    "primitiveDarkGray300": "#676767",
-    "primitiveDarkGray400": "#4e4e4e",
-    "primitiveDarkGray50": "#8c8c8c",
-    "primitiveDarkGray500": "#424242",
-    "primitiveDarkGray600": "#363636",
-    "primitiveDarkGray700": "#2a2a2a",
-    "primitiveDarkGray800": "#1d1d1d",
-    "primitiveDarkGray900": "#111111",
-    "primitiveLightGray100": "#eeeeee",
-    "primitiveLightGray200": "#e1e1e1",
-    "primitiveLightGray300": "#d5d5d5",
-    "primitiveLightGray400": "#c9c9c9",
-    "primitiveLightGray50": "#fafafa",
-    "primitiveLightGray500": "#c3c3c3",
-    "primitiveLightGray600": "#bdbdbd",
-    "primitiveLightGray700": "#b0b0b0",
-    "primitiveLightGray800": "#a4a4a4",
-    "primitiveLightGray900": "#989898",
-    "primitiveWhite": "#ffffff",
     "secondary": "#ff6b0b",
     "secondaryDark": "#d65a09",
     "secondaryDarkest": "#ad4907",
@@ -743,6 +721,87 @@ Object {
     "letterSpacing": 1.92,
     "lineHeight": 1.5,
   },
+  "platform": Object {
+    "body1": Object {
+      "letterSpacing": 0.51,
+    },
+    "body2": Object {
+      "letterSpacing": 0.22,
+    },
+    "button": Object {
+      "letterSpacing": 1.23,
+    },
+    "caption": Object {
+      "letterSpacing": 0.38,
+    },
+    "heading1": Object {
+      "letterSpacing": 0,
+    },
+    "heading2": Object {
+      "letterSpacing": 0,
+    },
+    "heading3": Object {
+      "letterSpacing": 0,
+    },
+    "heading4": Object {
+      "letterSpacing": 0,
+    },
+    "heading5": Object {
+      "letterSpacing": 0,
+    },
+    "heading6": Object {
+      "letterSpacing": 0.24,
+    },
+    "overline": Object {
+      "letterSpacing": 1.92,
+    },
+    "subtitle1": Object {
+      "letterSpacing": 0.13,
+    },
+    "subtitle2": Object {
+      "letterSpacing": 0.11,
+    },
+    "typography": Object {
+      "fallback": Object {
+        "fontFamily": "Arial",
+        "fontWeight": 400,
+      },
+      "fontFamily": Object {
+        "code": "Roboto Mono",
+        "primary": "Roboto",
+      },
+    },
+  },
+  "private": Object {
+    "borderRadius": Object {
+      "circle": Object {
+        "huge": 48,
+        "hugeX": 64,
+        "hugeXX": 72,
+        "hugeXXX": 96,
+        "large": 32,
+        "largeX": 36,
+        "largeXX": 40,
+        "largeXXX": 44,
+        "medium": 24,
+        "mediumX": 28,
+        "micro": 2,
+        "none": 0,
+        "semi": 16,
+        "semiX": 20,
+        "small": 8,
+        "standard": 12,
+        "tiny": 4,
+        "veryHuge": 128,
+      },
+    },
+    "button": Object {
+      "borderRadius": 4,
+    },
+    "shortcut": Object {
+      "borderRadius": 28,
+    },
+  },
   "progressIndicator": Object {
     "color": Object {
       "layer": "#ffffff",
@@ -989,6 +1048,199 @@ Object {
     "tiny": 8,
     "xLarge": 64,
   },
+  "spectrum": Object {
+    "blue": Object {
+      "100": "#d0ebff",
+      "200": "#a5d8ff",
+      "300": "#74c0fc",
+      "400": "#4dabf7",
+      "50": "#e7f5ff",
+      "500": "#339af0",
+      "600": "#228be6",
+      "700": "#1c7ed6",
+      "800": "#1971c2",
+      "900": "#1864ab",
+    },
+    "color": Object {
+      "brand": Object {
+        "a": Object {
+          "dark": "#CD902C",
+          "darkest": "#A67423",
+          "light": "#F6B854",
+          "lightest": "#F8C675",
+          "main": "#F4AB34",
+        },
+        "b": Object {
+          "dark": "#D65A09",
+          "darkest": "#AD4907",
+          "light": "#FF8332",
+          "lightest": "#FF9A59",
+          "main": "#FF6B0B",
+        },
+        "c": Object {
+          "dark": "#D2D2D2",
+          "darkest": "#AAAAAA",
+          "light": "#FBFBFB",
+          "lightest": "#FCFCFC",
+          "main": "#FAFAFA",
+        },
+        "gradient": Object {
+          "primary": Object {
+            "angle": 101,
+            "end": "#FF6B0B",
+            "start": "#F4AB34",
+            "type": "linear",
+          },
+        },
+      },
+    },
+    "cyan": Object {
+      "100": "#c5f6fa",
+      "200": "#99e9f2",
+      "300": "#66d9e8",
+      "400": "#3bc9db",
+      "50": "#e3fafc",
+      "500": "#22b8cf",
+      "600": "#15aabf",
+      "700": "#1098ad",
+      "800": "#0c8599",
+      "900": "#0b7285",
+    },
+    "dark": "#000000",
+    "grape": Object {
+      "100": "#f3d9fa",
+      "200": "#eebefa",
+      "300": "#e599f7",
+      "400": "#da77f2",
+      "50": "#f8f0fc",
+      "500": "#cc5de8",
+      "600": "#be4bdb",
+      "700": "#ae3ec9",
+      "800": "#9c36b5",
+      "900": "#862e9c",
+    },
+    "gray": Object {
+      "100": "#f1f3f5",
+      "200": "#e9ecef",
+      "300": "#dee2e6",
+      "400": "#ced4da",
+      "50": "#f8f9fa",
+      "500": "#adb5bd",
+      "600": "#868e96",
+      "700": "#495057",
+      "800": "#343a40",
+      "900": "#212529",
+    },
+    "green": Object {
+      "100": "#d3f9d8",
+      "200": "#b2f2bb",
+      "300": "#8ce99a",
+      "400": "#69db7c",
+      "50": "#ebfbee",
+      "500": "#51cf66",
+      "600": "#40c057",
+      "700": "#37b24d",
+      "800": "#2f9e44",
+      "900": "#2b8a3e",
+    },
+    "indigo": Object {
+      "100": "#dbe4ff",
+      "200": "#bac8ff",
+      "300": "#91a7ff",
+      "400": "#748ffc",
+      "50": "#edf2ff",
+      "500": "#5c7cfa",
+      "600": "#4c6ef5",
+      "700": "#4263eb",
+      "800": "#3b5bdb",
+      "900": "#364fc7",
+    },
+    "light": "#ffffff",
+    "lime": Object {
+      "100": "#e9fac8",
+      "200": "#d8f5a2",
+      "300": "#c0eb75",
+      "400": "#a9e34b",
+      "50": "#f4fce3",
+      "500": "#94d82d",
+      "600": "#82c91e",
+      "700": "#74b816",
+      "800": "#66a80f",
+      "900": "#5c940d",
+    },
+    "orange": Object {
+      "100": "#ffe8cc",
+      "200": "#ffd8a8",
+      "300": "#ffc078",
+      "400": "#ffa94d",
+      "50": "#fff4e6",
+      "500": "#ff922b",
+      "600": "#fd7e14",
+      "700": "#f76707",
+      "800": "#e8590c",
+      "900": "#d9480f",
+    },
+    "pink": Object {
+      "100": "#ffdeeb",
+      "200": "#fcc2d7",
+      "300": "#faa2c1",
+      "400": "#f783ac",
+      "50": "#fff0f6",
+      "500": "#f06595",
+      "600": "#e64980",
+      "700": "#d6336c",
+      "800": "#c2255c",
+      "900": "#a61e4d",
+    },
+    "red": Object {
+      "100": "#ffe3e3",
+      "200": "#ffc9c9",
+      "300": "#ffa8a8",
+      "400": "#ff8787",
+      "50": "#fff5f5",
+      "500": "#ff6b6b",
+      "600": "#fa5252",
+      "700": "#f03e3e",
+      "800": "#e03131",
+      "900": "#c92a2a",
+    },
+    "teal": Object {
+      "100": "#c3fae8",
+      "200": "#96f2d7",
+      "300": "#63e6be",
+      "400": "#38d9a9",
+      "50": "#e6fcf5",
+      "500": "#20c997",
+      "600": "#12b886",
+      "700": "#0ca678",
+      "800": "#099268",
+      "900": "#087f5b",
+    },
+    "violet": Object {
+      "100": "#e5dbff",
+      "200": "#d0bfff",
+      "300": "#b197fc",
+      "400": "#9775fa",
+      "50": "#f3f0ff",
+      "500": "#845ef7",
+      "600": "#7950f2",
+      "700": "#7048e8",
+      "800": "#6741d9",
+      "900": "#5f3dc4",
+    },
+    "yellow": Object {
+      "100": "#fff3bf",
+      "200": "#ffec99",
+      "300": "#ffe066",
+      "400": "#ffd43b",
+      "50": "#fff9db",
+      "500": "#fcc419",
+      "600": "#fab005",
+      "700": "#f59f00",
+      "800": "#f08c00",
+      "900": "#e67700",
+    },
+  },
   "subtitle1": Object {
     "fontSize": 16,
     "fontWeight": 500,

diff --git a/packages/react/src/components/IconButton/IconButton.stories.tsx b/packages/react/src/components/IconButton/IconButton.stories.tsx
@@ -147,8 +147,29 @@ export const SearchIconButton: Story<IconButtonProps> = (args) => {
 
           {
         filterOptions.map((names) => (
-
-          <IconButton {...args} backgroundStyle="float" ariaLabel={names.label} onClick={() => ''} IconComponent={<Icon color="primary" name={names.value as IconName} />} />
+          <>
+            <div style={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center ',
+              padding: '8px',
+              backgroundColor: '#ffffff',
+              border: '1px solid #ccc',
+              width: '180px'
+            }}
+            >
+              <IconButton
+                {...args}
+                backgroundStyle="float"
+                ariaLabel={names.label}
+                onClick={() => ''}
+                IconComponent={<Icon color="primary" name={names.value as IconName} />}
+              />
+              <p>{names.value}</p>
+            </div>
+
+          </>
 
         ))
       }