Add opt-in features

Button, Select, and TextInput has now opt-in borders.

lib/components/Button/Button.test.tsx

@@ -60,9 +60,8 @@ describe('on unknown kinds', () => {
   })
 })
 
-
 it('should render a border', () => {
-  const wrapper = Enzyme.shallow(<Button />)
+  const wrapper = Enzyme.shallow(<Button border />)
   expect(wrapper.find('button').find('span')).toHaveLength(1)
 })
 

lib/components/Button/Button.tsx

@@ -149,6 +149,10 @@ const propTypes = {
    * The type of the button, if element is set to "button".
    */
   type: PropTypes.oneOf<ButtonType>(['submit', 'reset', 'button']),
+  /**
+   * Does the button display a border?
+   */
+  border: PropTypes.bool,
 }
 
 type Props = PropTypes.InferProps<typeof propTypes>
@@ -165,6 +169,7 @@ const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpan
       target,
       rel,
       type = 'button',
+      border = false,
     },
     ref,
   ) => {
@@ -175,7 +180,12 @@ const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpan
     }
     const buttonContent = (
       <React.Fragment>
-        <Border />
+        {
+          border
+          && (
+            <Border />
+          )
+        }
         {stringify(children)}
       </React.Fragment>
     )

lib/components/Select/Select.test.tsx

@@ -61,11 +61,11 @@ it('should render a hint for describing valid input values', () => {
       const renderedLabel = stringify(label)
 
       if (renderedLabel.length > 0) {
-        expect(wrapper.find('div').children()).toHaveLength(5)
+        expect(wrapper.find('div').children()).toHaveLength(4)
 
-        expect(wrapper.find('div').childAt(3)).toHaveText(`(${renderedLabel})`)
+        expect(wrapper.find('div').childAt(2)).toHaveText(`(${renderedLabel})`)
       } else {
-        expect(wrapper.find('div').children()).toHaveLength(3)
+        expect(wrapper.find('div').children()).toHaveLength(2)
       }
     }),
   )

lib/components/Select/Select.tsx

@@ -198,6 +198,22 @@ const propTypes = {
    * Name of the form field associated with this component.
    */
   name: PropTypes.string,
+  /**
+   * Does the button display a border?
+   */
+  border: PropTypes.bool,
+  /**
+   * Event handler triggered when the component changes value.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Event handler triggered when the component receives focus.
+   */
+  onFocus: PropTypes.func,
+  /**
+   * Event handler triggered when the component loses focus.
+   */
+  onBlur: PropTypes.func,
 }
 
 type Props = PropTypes.InferProps<typeof propTypes>
@@ -212,6 +228,11 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(
       disabled = false,
       name,
       children,
+      border = false,
+      onChange,
+      onFocus,
+      onBlur,
+      ...etcProps
     },
     ref,
   ) => {
@@ -221,7 +242,12 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(
           opacity: disabled ? 0.5 : undefined,
         }}
       >
-        <Border />
+        {
+          border
+          && (
+            <Border />
+          )
+        }
         <CaptureArea>
           <LabelWrapper
             style={{
@@ -235,6 +261,10 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(
           </LabelWrapper>
           {stringify(label).length > 0 && ' '}
           <Input
+            {...etcProps}
+            onChange={onChange as React.ChangeEventHandler}
+            onFocus={onFocus as React.FocusEventHandler}
+            onBlur={onBlur as React.FocusEventHandler}
             ref={ref}
             disabled={disabled!}
             multiple={multiple!}

lib/components/TextInput/TextInput.test.tsx

@@ -31,7 +31,7 @@ it('should render an indicator as additional description for the content', () =>
     fc.property(fc.string(1, 20), (indicator) => {
       const wrapper = Enzyme.shallow(<TextInput indicator={indicator} />)
 
-      expect(wrapper.find('div').childAt(2)).toHaveText(indicator)
+      expect(wrapper.find('div').childAt(1)).toHaveText(indicator)
     }),
   )
 })
@@ -44,11 +44,11 @@ it('should render a hint for describing valid input values', () => {
       const renderedLabel = stringify(label)
 
       if (renderedLabel.length > 0) {
-        expect(wrapper.find('div').children()).toHaveLength(4)
+        expect(wrapper.find('div').children()).toHaveLength(3)
 
-        expect(wrapper.find('div').childAt(3)).toHaveText(`(${renderedLabel})`)
+        expect(wrapper.find('div').childAt(2)).toHaveText(`(${renderedLabel})`)
       } else {
-        expect(wrapper.find('div').children()).toHaveLength(2)
+        expect(wrapper.find('div').children()).toHaveLength(1)
       }
     }),
   )

lib/components/TextInput/TextInput.tsx

@@ -234,6 +234,22 @@ const propTypes = {
    * How many rows should the component display if it accepts multiline input?
    */
   rows: PropTypes.number,
+  /**
+   * Does the button display a border?
+   */
+  border: PropTypes.bool,
+  /**
+   * Event handler triggered when the component changes value.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Event handler triggered when the component receives focus.
+   */
+  onFocus: PropTypes.func,
+  /**
+   * Event handler triggered when the component loses focus.
+   */
+  onBlur: PropTypes.func,
 }
 
 type Props = PropTypes.InferProps<typeof propTypes>
@@ -250,6 +266,11 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
       autoResize = false,
       placeholder = '',
       rows = 3,
+      border = false,
+      onChange,
+      onFocus,
+      onBlur,
+      ...etcProps
     },
     ref,
   ) => (
@@ -258,7 +279,12 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
         opacity: disabled ? 0.5 : undefined,
       }}
     >
-      <Border />
+      {
+        border
+        && (
+          <Border />
+        )
+      }
       <CaptureArea>
         <LabelWrapper
           style={{
@@ -273,6 +299,10 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
         {stringify(label).length > 0 && ' '}
         {multiline && (
           <TextArea
+            {...etcProps}
+            onChange={onChange as React.ChangeEventHandler}
+            onFocus={onFocus as React.FocusEventHandler}
+            onBlur={onBlur as React.FocusEventHandler}
             placeholder={placeholder!}
             ref={ref as React.Ref<HTMLTextAreaElement>}
             disabled={disabled!}
@@ -289,6 +319,10 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
         )}
         {!multiline && (
           <Input
+            {...etcProps}
+            onChange={onChange as React.ChangeEventHandler}
+            onFocus={onFocus as React.FocusEventHandler}
+            onBlur={onBlur as React.FocusEventHandler}
             placeholder={placeholder!}
             ref={ref as React.Ref<HTMLInputElement>}
             disabled={disabled!}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesseract-design/react-common",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Common front-end components for Web using the Tesseract design system, written in React.",
   "directories": {
     "lib": "dist"