[v9] Add IAM method to web ui (#690)

packages/design/src/Input/Input.jsx

@@ -31,7 +31,7 @@ function error({ hasError, theme }) {
 
 const Input = styled.input`
   appearance: none;
-  border:none;
+  border: none;
   border-radius: 4px;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, .24);
   box-sizing: border-box;
@@ -51,7 +51,7 @@ const Input = styled.input`
   }
 
   :read-only {
-    cursor: not-allowed
+    cursor: not-allowed;
   }
 
   ${color} ${space} ${width} ${height} ${error};

packages/shared/components/FieldInput/FieldInput.story.tsx

@@ -0,0 +1,56 @@
+/*
+Copyright 2022 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import FieldInput from './FieldInput';
+import Validation from '../../components/Validation';
+
+export default {
+  title: 'Shared',
+};
+
+export const Fields = () => (
+  <Validation>
+    {() => (
+      <>
+        <FieldInput
+          mb="6"
+          label="Label"
+          labelTip="Optional tabel tip"
+          name="optional name"
+          onChange={() => {}}
+          value={'value'}
+        />
+        <FieldInput
+          mb="6"
+          label="Label with placeholder"
+          name="optional name"
+          onChange={() => {}}
+          placeholder="placeholder"
+          value={''}
+        />
+        <FieldInput
+          mb="6"
+          placeholder="without label"
+          validator={() => false}
+          onChange={() => {}}
+        />
+      </>
+    )}
+  </Validation>
+);
+
+Fields.storyName = 'FieldInput';

packages/shared/components/FieldInput/FieldInput.test.tsx

@@ -19,6 +19,7 @@ import FieldInput from './FieldInput';
 import { render, fireEvent } from 'design/utils/testing';
 import * as useRule from '../Validation/useRule';
 import theme from 'design/theme';
+import { Fields } from './FieldInput.story';
 
 test('valid values, autofocus, onChange, onKeyPress', () => {
   const rule = jest.fn();
@@ -83,3 +84,8 @@ test('input validation error state', () => {
     'border-color': errorColor,
   });
 });
+
+test('snapshot tests', () => {
+  const fields = render(<Fields />);
+  expect(fields).toMatchSnapshot();
+});

packages/shared/components/FieldInput/FieldInput.tsx

@@ -15,11 +15,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import { Box, Input, LabelInput } from 'design';
+import { Box, Input, LabelInput, Text } from 'design';
 import { useRule } from 'shared/components/Validation';
 
 export default function FieldInput({
   label,
+  labelTip,
   value,
   onChange,
   onKeyPress,
@@ -37,7 +38,12 @@ export default function FieldInput({
   const labelText = hasError ? message : label;
   return (
     <Box mb="4" {...styles}>
-      {label && <LabelInput hasError={hasError}>{labelText}</LabelInput>}
+      {label && (
+        <LabelInput hasError={hasError}>
+          {labelText}
+          {labelTip && <LabelTip text={labelTip} />}
+        </LabelInput>
+      )}
       <Input
         type={type}
         autoFocus={autoFocus}
@@ -56,9 +62,14 @@ export default function FieldInput({
 
 const defaultRule = () => () => ({ valid: true });
 
+const LabelTip = ({ text }) => (
+  <Text as="span" style={{ fontWeight: 'normal' }}>{` - ${text}`}</Text>
+);
+
 type Props = {
   value?: string;
   label?: string;
+  labelTip?: string;
   placeholder?: string;
   autoFocus?: boolean;
   autoComplete?: 'off' | 'on' | 'one-time-code';