Merge pull request #1792 from natura-cosmeticos/DSY-3710

feat(natds-react): add stories search IconButton

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.15.0/dist/natds-icons.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@1.16.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" />

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/[email protected]...@naturacosmeticos/[email protected]) (2023-09-05)
+
+* **natds-react:** Add stories search IconButton
+
 ## [2.51.1](https://github.com/natura-cosmeticos/natds-js/compare/@naturacosmeticos/[email protected]...@naturacosmeticos/[email protected]) (2023-08-22)
 
 * **natds-react:** Fix color Logo Avon-v2-v-Custom 

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.3.0",
   "private": false,
   "keywords": [
     "design-system",
@@ -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": {

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<IconButtonProps> = (args) => (
   </StoryContainer>
 )
 Disabled.args = { ...Playground.args, disabled: true }
+
+export const SearchIconButton: Story<IconButtonProps> = (args) => {
+  const [value, setValue] = useState(iconNames[0])
+  const [filterOptionsN] = useState<OptionProps[]>(iconNames.map((icon) => ({ value: icon, label: icon })))
+  const [filterOptions, setFilterOptions] = useState<OptionProps[]>(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 (
+    <StoryContainer>
+      <div style={{ display: 'flex', gap: 20 }}>
+        <div style={{ minWidth: 280 }}>
+          <Autocomplete
+            onChange={(e) => handleChange(e.target.value)}
+            options={filterOptions}
+            value={value}
+            handleSelect={handleSelect}
+          />
+
+        </div>
+        <div style={{
+          display: 'flex', gap: 20, width: '480px', flexWrap: 'wrap'
+        }}
+        >
+
+          {
+        filterOptions.map((names) => (
+
+          <IconButton {...args} backgroundStyle="float" ariaLabel={names.label} onClick={() => ''} IconComponent={<Icon color="primary" name={names.value as IconName} />} />
+
+        ))
+      }
+        </div>
+
+      </div>
+    </StoryContainer>
+  )
+}
+SearchIconButton.args = { ...Playground.args }

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/[email protected]":
   version "0.58.5"
@@ -2707,10 +2707,10 @@
     svg2vectordrawable "2.6.26"
     webp-converter "^2.3.3"
 
-"@naturacosmeticos/[email protected].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/[email protected].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"