From 90e30f3ad6d4be50feeaeaf92486c5dd9ce42f75 Mon Sep 17 00:00:00 2001 From: vagnerbarbosant Date: Mon, 4 Sep 2023 08:58:37 -0300 Subject: [PATCH 1/5] feat(natds-react): add stories search IconButton affects: @naturacosmeticos/natds-react DSY-3710 --- packages/react/.storybook/preview-head.html | 2 +- packages/react/package.json | 4 +- .../IconButton/IconButton.stories.tsx | 60 ++++++++++++++++++- yarn.lock | 16 ++--- 4 files changed, 70 insertions(+), 12 deletions(-) diff --git a/packages/react/.storybook/preview-head.html b/packages/react/.storybook/preview-head.html index 757bfcd6df..238f8b42fa 100644 --- a/packages/react/.storybook/preview-head.html +++ b/packages/react/.storybook/preview-head.html @@ -1,5 +1,5 @@ - + diff --git a/packages/react/package.json b/packages/react/package.json index a8ed3d0925..7faa255480 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -57,8 +57,8 @@ "generate": "yarn plop --plopfile ./generators/plopfile.js" }, "dependencies": { - "@naturacosmeticos/natds-icons": "1.15.0", - "@naturacosmeticos/natds-themes": "0.59.10", + "@naturacosmeticos/natds-icons": "1.16.1", + "@naturacosmeticos/natds-themes": "0.59.11", "react-jss": "10.9.0" }, "devDependencies": { diff --git a/packages/react/src/components/IconButton/IconButton.stories.tsx b/packages/react/src/components/IconButton/IconButton.stories.tsx index 0098e9097e..c5d626e921 100644 --- a/packages/react/src/components/IconButton/IconButton.stories.tsx +++ b/packages/react/src/components/IconButton/IconButton.stories.tsx @@ -1,8 +1,12 @@ -import React from 'react' +/* eslint-disable max-len */ +import React, { useState } from 'react' import { Story, Meta } from '@storybook/react' +import { iconNames, IconName } from '@naturacosmeticos/natds-icons' import { IconButton, IconButtonProps } from '.' import StoryContainer from '../../helpers/StoryContainer' import { Icon } from '../Icon' +import Autocomplete from '../Autocomplete/Autocomplete' +import { OptionProps } from '../Autocomplete/Autocomplete.props' const componentStatus = ` --- @@ -106,3 +110,57 @@ export const Disabled: Story = (args) => ( ) Disabled.args = { ...Playground.args, disabled: true } + +export const SearchIconButton: Story = (args) => { + const [value, setValue] = useState(iconNames[0]) + const [filterOptionsN] = useState(iconNames.map((icon) => ({ value: icon, label: icon }))) + const [filterOptions, setFilterOptions] = useState(iconNames.map((icon) => ({ value: icon, label: icon }))) + + const handleSelect = (values: OptionProps) => { + setValue(values.label) + handleChange(values.label) + } + const handleChange = (values: string) => { + setValue(values) + + const newFilter = filterOptionsN.filter( + (opt) => opt.label.toLowerCase().includes(values.toLowerCase()) + ) + + if (newFilter.length > 0) { + setFilterOptions(newFilter) + } else { + setFilterOptions([{ value: 'false', label: 'false' }]) + } + } + return ( + +
+
+ handleChange(e.target.value)} + options={filterOptions} + value={value} + handleSelect={handleSelect} + /> + +
+
+ + { + filterOptions.map((names) => ( + + ''} IconComponent={} /> + + )) + } +
+ +
+ + ) +} +SearchIconButton.args = { ...Playground.args, disabled: true } diff --git a/yarn.lock b/yarn.lock index 52d8a866de..121ff0d18d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2693,10 +2693,10 @@ resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-icons/-/natds-icons-1.11.3.tgz#e7de13d8fde2c44f9c68e73de75f02906fefdfb8" integrity sha512-NQVrs5aUaCc7eyrPRh5TlgRYZqT0SXDHq/VVcWUG/R7j9wzFFvCs/IbcAjeNJR4cVNDqq2ruAIl9ZnHanw5Qpw== -"@naturacosmeticos/natds-icons@1.15.0": - version "1.15.0" - resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-icons/-/natds-icons-1.15.0.tgz#dc9e660e8f7579f6597df1c082b3687fbafac4c5" - integrity sha512-SMLh6f2PLmJoEiHVpDv8P05hGjU4ycQEn28SDc+M7VX5Vv37oI/7+WAKVk0yUZX01dT971B0YJevyhYa6XO69w== +"@naturacosmeticos/natds-icons@1.16.1": + version "1.16.1" + resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-icons/-/natds-icons-1.16.1.tgz#b7c98999ca811fd57a1e31c702deec0f6a04ecbc" + integrity sha512-d8vBZ0rebrS64e9WRCaPr5wPN0peOX/bcineXo/rQg8HAmwwDew3FlXeEOOWXw+N0lGpFkIescs5yuaEIERjfg== "@naturacosmeticos/natds-themes@0.58.5": version "0.58.5" @@ -2707,10 +2707,10 @@ svg2vectordrawable "2.6.26" webp-converter "^2.3.3" -"@naturacosmeticos/natds-themes@0.59.10": - version "0.59.10" - resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-themes/-/natds-themes-0.59.10.tgz#ce3d590b779ae539490dc084344a262a31819894" - integrity sha512-I0DIiZtyusvT1UoV5cCqT6P3DFEw6ENxku0F5soFP6er24NZeeVUcOIsbybZ9Jc5w6DA5Xsh9RFlc3RD5wUT+A== +"@naturacosmeticos/natds-themes@0.59.11": + version "0.59.11" + resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-themes/-/natds-themes-0.59.11.tgz#21a008541179a6651476f7d14ccd97494cc89cd0" + integrity sha512-QjBZn1tDIrhIqYHUy3QOBUKPl2DozDS01uIedJlgfoUFNSgx5QLg8a2qYFxOEoONUXRK7Qyw8Z0w32uDmBwkkw== dependencies: open-color "^1.8.0" svg2vectordrawable "2.6.26" From 996462aea86d8d63c95842adebfdcf147a753297 Mon Sep 17 00:00:00 2001 From: Natura Design System Team Date: Mon, 4 Sep 2023 12:03:02 +0000 Subject: [PATCH 2/5] chore(release): bump natds-js packages via lerna [skip-ci] - @naturacosmeticos/natds-react@2.52.0-alpha.DSY-3710.1.0 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 7faa255480..474278a8d9 100644 --- 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.51.1", + "version": "2.52.0-alpha.DSY-3710.1.0", "private": false, "keywords": [ "design-system", From 76461971402df66b960bd2a69f88f663422a3e72 Mon Sep 17 00:00:00 2001 From: vagnerbarbosant Date: Mon, 4 Sep 2023 09:25:24 -0300 Subject: [PATCH 3/5] fix(natds-react): fix stories default no-disabled affects: @naturacosmeticos/natds-react DSY-3710 --- packages/react/src/components/IconButton/IconButton.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/IconButton/IconButton.stories.tsx b/packages/react/src/components/IconButton/IconButton.stories.tsx index c5d626e921..4a42038e97 100644 --- a/packages/react/src/components/IconButton/IconButton.stories.tsx +++ b/packages/react/src/components/IconButton/IconButton.stories.tsx @@ -163,4 +163,4 @@ export const SearchIconButton: Story = (args) => { ) } -SearchIconButton.args = { ...Playground.args, disabled: true } +SearchIconButton.args = { ...Playground.args } From 500f42761a609ce8bb2f75bd03291f067a147707 Mon Sep 17 00:00:00 2001 From: Natura Design System Team Date: Mon, 4 Sep 2023 12:29:56 +0000 Subject: [PATCH 4/5] chore(release): bump natds-js packages via lerna [skip-ci] - @naturacosmeticos/natds-react@2.52.0-alpha.DSY-3710.3.0 --- packages/react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/package.json b/packages/react/package.json index 474278a8d9..e2d058c7f9 100644 --- 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.52.0-alpha.DSY-3710.1.0", + "version": "2.52.0-alpha.DSY-3710.3.0", "private": false, "keywords": [ "design-system", From 49b0e62755bacdbd233891341b87b0486448f6dc Mon Sep 17 00:00:00 2001 From: Design-System-Natura <65979129+Design-System-Natura@users.noreply.github.com> Date: Tue, 5 Sep 2023 10:05:05 -0300 Subject: [PATCH 5/5] Update CHANGELOG.md --- packages/react/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index d9940656b0..969d6e9ef2 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.51.2](https://github.com/natura-cosmeticos/natds-js/compare/@naturacosmeticos/natds-react@2.51.2-alpha.DSY-3710.1.0...@naturacosmeticos/natds-react@2.51.2) (2023-09-05) + +* **natds-react:** Add stories search IconButton + ## [2.51.1](https://github.com/natura-cosmeticos/natds-js/compare/@naturacosmeticos/natds-react@2.51.1-alpha.DSY-3704.1.0...@naturacosmeticos/natds-react@2.51.1) (2023-08-22) * **natds-react:** Fix color Logo Avon-v2-v-Custom