diff --git a/package.json b/package.json index 21786e79a3..397bb50b9e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "0.0.16", + "version": "0.0.17", "description": "Official monday.com UI resources for application development in React.js", "main": "dist/main.js", "scripts": { diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index 7ce4fd08b5..e74c08c950 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -2,7 +2,7 @@ import React from "react"; import PropTypes from "prop-types"; import classNames from "classnames"; import "./Search.scss"; -import InputField from "../TextField/InputField"; +import TextField from "../TextField/TextField"; import { SIZES, TYPES } from "./SearchConstats"; const NOOP = () => {}; @@ -16,12 +16,13 @@ const TYPE_CLASSES = { function getType(type) { return TYPE_CLASSES[type] || ""; } + const ICON_NAMES = { primary: "Search", secondary: "Clear Search" }; -export const SearchComponent = ({ +const Search = ({ secondaryIconName, iconName, onChange, @@ -45,7 +46,7 @@ export const SearchComponent = ({ iconNames }) => { return ( - { return ( diff --git a/src/components/TextField/InputField-test.js b/src/components/TextField/TextField-test.js similarity index 93% rename from src/components/TextField/InputField-test.js rename to src/components/TextField/TextField-test.js index 2e535d895c..60c188e3a7 100644 --- a/src/components/TextField/InputField-test.js +++ b/src/components/TextField/TextField-test.js @@ -1,6 +1,6 @@ import React from "react"; import { sinon, expect } from "../../test/test-helpers"; -import InputField, { ARIA_LABELS } from "./InputField"; +import TextField, { ARIA_LABELS } from "./TextField"; import { render, fireEvent, @@ -9,7 +9,7 @@ import { act } from "@testing-library/react"; -describe("InputField Tests", () => { +describe("TextField Tests", () => { let inputComponent; let onChangeStub; let defaultPlaceHolder = "Place Holder Text"; @@ -20,7 +20,7 @@ describe("InputField Tests", () => { clock = sinon.useFakeTimers(); act(() => { inputComponent = render( - { const { rerender } = inputComponent; act(() => { inputComponent = rerender( - { const debounceTime = 200; act(() => { inputComponent = rerender( - { const { rerender } = inputComponent; act(() => { inputComponent = rerender( - { const title = "Title"; act(() => { rerender( - { const title = "My Awesome Title"; act(() => { rerender( - { const { rerender, queryByLabelText } = inputComponent; act(() => { rerender( - { const { rerender, queryByLabelText } = inputComponent; act(() => { rerender( - { const value = "hello"; act(() => { rerender( - { let value = "hello"; act(() => { rerender( - { describe("types", () => { it("default type should be text", () => { const input = screen.getByPlaceholderText(defaultPlaceHolder); - expect(input.type).to.equal(InputField.types.TEXT); + expect(input.type).to.equal(TextField.types.TEXT); }); it("type should be password", () => { const { rerender } = inputComponent; act(() => { inputComponent = rerender( - ); }); const input = screen.getByPlaceholderText(defaultPlaceHolder); - expect(input.type).to.equal(InputField.types.PASSWORD); + expect(input.type).to.equal(TextField.types.PASSWORD); }); }); describe("autocomplete", () => { it("should add autocomplete attr and set it to on", () => { const { container } = render( - { it("should add autocomplete attr and set it to off", () => { const { container } = render( - { const { rerender } = inputComponent; act(() => { inputComponent = rerender( - {}; const EMPTY_OBJECT = { primary: "", secondary: "", label: "" }; -const InputField = ({ +const TextField = ({ className, placeholder, autoComplete, @@ -203,7 +203,7 @@ const InputField = ({ ); }; -InputField.propTypes = { +TextField.propTypes = { className: PropTypes.string, placeholder: PropTypes.string, /* See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete for all of the available options */ @@ -245,12 +245,16 @@ InputField.propTypes = { secondary: PropTypes.string }), /* TEXT_TYPES is exposed on the component itself */ - type: PropTypes.oneOf([TEXT_TYPES.TEXT, TEXT_TYPES.PASSWORD, TEXT_TYPES.SEARCH]), + type: PropTypes.oneOf([ + TEXT_TYPES.TEXT, + TEXT_TYPES.PASSWORD, + TEXT_TYPES.SEARCH + ]), maxLength: PropTypes.number, trim: PropTypes.bool }; -InputField.defaultProps = { +TextField.defaultProps = { className: "", placeholder: "", autoComplete: "off", @@ -287,7 +291,8 @@ export const ARIA_LABELS = { VALIDATION_TEXT: "Additional helper text" }; -InputField.sizes = TEXT_FIELD_SIZE; -InputField.feedbacks = FEEDBACK_STATES; -InputField.types = TEXT_TYPES; -export default InputField; +TextField.sizes = TEXT_FIELD_SIZE; +TextField.feedbacks = FEEDBACK_STATES; +TextField.types = TEXT_TYPES; + +export default TextField; diff --git a/src/components/TextField/InputField.scss b/src/components/TextField/TextField.scss similarity index 100% rename from src/components/TextField/InputField.scss rename to src/components/TextField/TextField.scss diff --git a/src/components/TextField/__stories__/textField.stories.js b/src/components/TextField/__stories__/textField.stories.js index 15cb37b7b3..e06771a122 100644 --- a/src/components/TextField/__stories__/textField.stories.js +++ b/src/components/TextField/__stories__/textField.stories.js @@ -1,19 +1,14 @@ import React from "react"; -import { Story } from "@storybook/addon-docs/blocks"; -import InputField from "../InputField"; -import { - ComponentStateDescription, - FlexLayout, - Divider -} from "../../storybook-helpers"; import { text, boolean, number, select } from "@storybook/addon-knobs"; +import TextField from "../TextField"; +import { ComponentStateDescription, FlexLayout } from "../../storybook-helpers"; import StoryWrapper from "../../../StoryBookComponents/StoryWrapper/StoryWrapper"; import TextFieldStoryBookLine from "./TextFieldStoryBookLine"; export const Sandbox = () => { return (
- { return ( - + - + - + ); @@ -64,7 +59,7 @@ export const States = () => {
- {
- {
- {
- { />
- {
- { />
- {
- {
- { />
- { export default { title: "Components/Text Field", - component: InputField + component: TextField }; diff --git a/src/components/index.js b/src/components/index.js index e7ceb1559f..032e17f8b3 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,11 +1,12 @@ export { default as Loader } from "./Loader/Loader"; -export { default as SearchComponent } from "./Search/Search"; -export { default as InputField } from "./TextField/InputField"; +export { default as SearchComponent } from "./Search/Search"; // TODO: remove when bumping to version 1.0.0 +export { default as Search } from "./Search/Search"; +export { default as InputField } from "./TextField/TextField"; // TODO: remove when bumping to version 1.0.0 +export { default as TextField } from "./TextField/TextField"; export { default as Dialog } from "./Dialog/Dialog"; export { default as Tooltip } from "./Tooltip/Tooltip"; export { default as Button } from "./Button/Button"; export { default as FormattedNumber } from "./FormattedNumber/FormattedNumber"; export { default as LinearProgressBar } from "./ProgressBars/LinearProgressBar/LinearProgressBar"; - export { default as Link } from "./Link/Link"; export { default as CustomSvgIcon } from "./Icon/CustomSvgIcon"; diff --git a/src/published-components.js b/src/published-components.js index 042b983aa3..a3cddba618 100644 --- a/src/published-components.js +++ b/src/published-components.js @@ -2,8 +2,9 @@ const path = require("path"); const fs = require("fs"); const publishedComponents = { - SearchComponent: "/src/components/Search/Search.jsx", - TextField: "/src/components/TextField/InputField.jsx", + SearchComponent: "/src/components/Search/Search.jsx", // TODO: remove when bumping to version 1.0.0 + Search: "/src/components/Search/Search.jsx", + TextField: "/src/components/TextField/TextField.jsx", Tooltip: "/src/components/Tooltip/Tooltip.jsx", Button: "/src/components/Button/Button.jsx", Loader: "/src/components/Loader/Loader.jsx",