feat: Add InputGroup component (#48)

packages/fuselage/.storybook/jest-results.json

@@ -1 +1 @@
-{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":18,"numPassedTests":18,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTodoTests":0,"numTotalTestSuites":18,"numTotalTests":18,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1565919581530,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919617443,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Page/Header/spec.js","startTime":1565919609461,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919617468,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/MenuItem/spec.js","startTime":1565919609461,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919617514,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/Header/spec.js","startTime":1565919609460,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919617588,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ToggleSwitch/spec.js","startTime":1565919609460,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919617742,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ButtonGroup/spec.js","startTime":1565919609461,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919617776,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ScrollableArea/spec.js","startTime":1565919609461,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919617907,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Drawer/spec.js","startTime":1565919609461,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919618165,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Tabs/spec.js","startTime":1565919617666,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919618173,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Input/spec.js","startTime":1565919617582,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919618394,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/Menu/spec.js","startTime":1565919617608,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919618395,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Grid/spec.js","startTime":1565919617876,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919618409,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/spec.js","startTime":1565919617628,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919618452,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/RadioButton/spec.js","startTime":1565919617802,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919618471,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Page/spec.js","startTime":1565919618021,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919618531,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Tab/spec.js","startTime":1565919618300,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919618636,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Icon/spec.js","startTime":1565919618453,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919618778,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Button/spec.js","startTime":1565919618455,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565919619049,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/CheckBox/spec.js","startTime":1565919618455,"status":"passed","summary":""}],"wasInterrupted":false}
+{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":19,"numPassedTests":19,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTodoTests":0,"numTotalTestSuites":19,"numTotalTests":19,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1565982083177,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982085758,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ToggleSwitch/spec.js","startTime":1565982084496,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982085822,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/Header/spec.js","startTime":1565982084594,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982085864,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Page/Header/spec.js","startTime":1565982084585,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982085883,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/CheckBox/spec.js","startTime":1565982084642,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982086101,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Tab/spec.js","startTime":1565982085960,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982086156,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ButtonGroup/spec.js","startTime":1565982084630,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982086441,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Tabs/spec.js","startTime":1565982086133,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982086450,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/RadioButton/spec.js","startTime":1565982086175,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982086461,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ScrollableArea/spec.js","startTime":1565982085838,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982086468,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/Menu/spec.js","startTime":1565982086109,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982086538,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Drawer/spec.js","startTime":1565982084506,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982086877,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/InputGroup/spec.js","startTime":1565982086468,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982088043,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/spec.js","startTime":1565982086448,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982088227,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Grid/spec.js","startTime":1565982085785,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982088502,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Button/spec.js","startTime":1565982086559,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982088609,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Page/spec.js","startTime":1565982086484,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982088613,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/MenuItem/spec.js","startTime":1565982086458,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982088647,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Input/spec.js","startTime":1565982084702,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565982088764,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Icon/spec.js","startTime":1565982086886,"status":"passed","summary":""}],"wasInterrupted":false}

packages/fuselage/src/components/Input/styles.scss

@@ -57,6 +57,7 @@ $default-theme: (
 .rcx-input__container {
   @include reset;
   @include hideable;
+  @include used-in('../InputGroup/styles.scss');
 
   display: flex;
 

packages/fuselage/src/components/InputGroup/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { useStyle } from '../../hooks/styles';
+import styles from './styles.scss';
+
+
+export const InputGroup = React.forwardRef(function InputGroup({
+  className,
+  invisible,
+  ...props
+}, ref) {
+  const inputGroupClassName = useStyle(styles, 'rcx-input-group', {
+    invisible,
+  }, className);
+
+  return <fieldset className={inputGroupClassName} role='group' ref={ref} {...props}/>;
+});

packages/fuselage/src/components/InputGroup/spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { InputGroup } from './index';
+
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<InputGroup />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

packages/fuselage/src/components/InputGroup/stories.js

@@ -0,0 +1,60 @@
+import centered from '@storybook/addon-centered/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { jsxDecorator } from 'storybook-addon-jsx';
+
+import { Document, TextSection, ShowCaseSection, createPropsFromKnobs } from '../../helpers/storybook';
+import { InputGroup } from './index';
+import { Input } from '../Input';
+
+
+storiesOf('Collections|InputGroup', module)
+  .lokiSkip('InputGroup', () => <Document>
+    <TextSection>
+      <h1>InputGroup</h1>
+      <p>A container for grouping inputs that semantically share a common data context.</p>
+    </TextSection>
+    <ShowCaseSection>
+      <InputGroup>
+        <Input
+          type='email'
+          label='Email'
+        />
+        <Input
+          type='password'
+          label='Password'
+        />
+      </InputGroup>
+    </ShowCaseSection>
+  </Document>);
+
+const props = createPropsFromKnobs({
+  hidden: false,
+  invisible: false,
+});
+
+const Inputs = ({ count }) => new Array(count).fill(undefined).map((_, i) =>
+  <Input key={i} placeholder={String(i + 1)} />
+);
+
+storiesOf('Collections|InputGroup', module)
+  .addDecorator(jsxDecorator)
+  .addDecorator(withKnobs)
+  .addDecorator(centered)
+  .addParameters({ jest: ['spec'] })
+  .add('default', () =>
+    <InputGroup {...props()}>
+      <Inputs count={3} />
+    </InputGroup>
+  )
+  .add('hidden', () =>
+    <InputGroup {...props({ hidden: true })}>
+      <Inputs count={3} />
+    </InputGroup>
+  )
+  .add('invisible', () =>
+    <InputGroup {...props({ invisible: true })}>
+      <Inputs count={3} />
+    </InputGroup>
+  );

packages/fuselage/src/components/InputGroup/styles.scss

@@ -0,0 +1,31 @@
+@import '../../helpers/mixins.scss';
+@import '../../helpers/theme-var.scss';
+@import '../../styles/dimensions.scss';
+
+$name: 'rcx-input-group';
+
+$default-theme: (
+  'gutter': 1.5rem,
+);
+
+.rcx-input-group {
+  @include reset;
+  @include hideable;
+
+  display: flex;
+
+  margin-top: calc(-1 * #{theme-var('gutter')});
+
+  transition: all var-dimension('short-transition-duration');
+
+  align-items: center;
+
+  flex-flow: column nowrap;
+  justify-content: center;
+
+  & > .rcx-input {
+    flex: 0 0 auto;
+
+    margin-top: theme-var('gutter');
+  }
+}

packages/fuselage/src/helpers/mixins.scss

@@ -3,6 +3,8 @@
   margin: 0;
   padding: 0;
 
+  border: none;
+
   font-weight: normal;
 
   appearance: none;