Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dsy 4495 #1817

Merged
merged 4 commits into from
Apr 9, 2024
Merged

Dsy 4495 #1817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6415f83
chore(natds-react): update lib icons
vagnerbarbosant Apr 9, 2024
76e4dd9
test(natds-react): update snapshot
vagnerbarbosant Apr 9, 2024
65103c6
feat(natds-react): update storie iconButtonSearch
affects: @naturacos…
vagnerbarbosant Apr 9, 2024
e80f1cd
chore(release): bump natds-js packages via lerna [skip-ci]
Design-System-Natura Apr 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react/.storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" />
Expand Down
2 changes: 1 addition & 1 deletion packages/react/.storybook/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions packages/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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": {
Expand Down
296 changes: 274 additions & 22 deletions packages/react/src/ThemeProvider/__snapshots__/buildTheme.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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,
Expand Down
25 changes: 23 additions & 2 deletions packages/react/src/components/IconButton/IconButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

</>

))
}
Expand Down
Loading
Loading