feat(SmartLabel): new comp (#55)

alexdisdier · web-flow · commit 97f772cb449e · 2022-02-20T18:59:23.000+01:00
* feat(SmartLabel): new comp

* Add unit tests

* Add SmartLabel to index

* Add more tests to smartLabel

* Remove enum STATUS and add snapshot unit test

* Revert unit test
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
@@ -3,5 +3,6 @@ export { default as Check } from './check';
 export { default as ErrorMessage } from './errorMessage';
 export { default as Invisible } from './invisible';
 export { default as Label } from './label';
+export { default as SmartLabel } from './smartLabel';
 export { default as Snackbars } from './snackbars';
 export { default as TextInput } from './textInput';
diff --git a/src/components/atoms/smartLabel/README.md b/src/components/atoms/smartLabel/README.md
@@ -0,0 +1,40 @@
+# SmartLabel
+
+<!-- STORY -->
+
+<hr>
+
+A label that only displays when the input has a value.
+
+##### Import
+
+```js
+import { SmartLabel } from 'react-helium';
+```
+
+##### Usage
+
+```jsx
+<SmartLabel forId="1" text="Hello" inputHasFocus={false} inputHasValue>
+  <input type="text" id="1" value="world" />
+</SmartLabel>
+```
+
+##### Required props
+
+| Name            | Type           | Description                                         |
+| --------------- | -------------- | --------------------------------------------------- |
+| `children`      | `ReactElement` | e.g: any html tags                                  |
+| `forId`         | `string`       | to specify which form element the label is bound to |
+| `text`          | `string`       | the smart label text                                |
+| `inputHasFocus` | `boolean`      |                                                     |
+| `inputHasValue` | `boolean`      |                                                     |
+
+##### Optional props
+
+| Name        | Type      | Default | Description                                              |
+| ----------- | --------- | ------- | -------------------------------------------------------- |
+| `status`    | `string`  | `null`  | can be of type "invalid", "valid", "modified", "caution" |
+| `maxWidth`  | `boolean` | `false` |                                                          |
+| `required`  | `boolean` | `false` |                                                          |
+| `hideLabel` | `boolean` | `false` |                                                          |
diff --git a/src/components/atoms/smartLabel/index.tsx b/src/components/atoms/smartLabel/index.tsx
@@ -0,0 +1,68 @@
+import React, { FC, ReactElement, JSXElementConstructor } from 'react';
+
+import Invisible from '../invisible';
+
+import useStyles from './smartLabel.style';
+
+import {
+  STATUS_INVALID,
+  STATUS_CAUTION,
+  STATUS_VALID,
+  STATUS_MODIFIED,
+} from '../../../constant/status';
+
+interface Props {
+  children: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
+  forId: string;
+  text: string;
+  inputHasFocus: boolean;
+  inputHasValue: boolean;
+  status?:
+    | typeof STATUS_INVALID
+    | typeof STATUS_CAUTION
+    | typeof STATUS_VALID
+    | typeof STATUS_MODIFIED;
+  maxWidth?: boolean;
+  required?: boolean;
+  hideLabel?: boolean;
+}
+
+export const SmartLabel: FC<Props> = ({
+  children,
+  forId,
+  text,
+  inputHasFocus,
+  inputHasValue,
+  status = null,
+  maxWidth = false,
+  required = false,
+  hideLabel = false,
+}) => {
+  const classes = useStyles();
+
+  const rootProps = {
+    className: classes.root,
+    'data-input-has-focus': inputHasFocus,
+    'data-input-has-value': inputHasValue,
+    'data-input-is-required': required,
+    'data-input-is-invalid': status === STATUS_INVALID,
+    'data-input-is-caution': status === STATUS_CAUTION,
+    'data-input-is-valid': status === STATUS_VALID,
+    'data-input-is-modified': status === STATUS_MODIFIED,
+    'data-is-max-width': maxWidth,
+    'data-testid': 'smartlabel',
+  };
+
+  return (
+    <label {...rootProps} htmlFor={forId}>
+      <Invisible visible={!hideLabel}>
+        <div className={classes.label}>
+          <span>{text}</span>
+        </div>
+      </Invisible>
+      {children}
+    </label>
+  );
+};
+
+export default SmartLabel;
diff --git a/src/components/atoms/smartLabel/smartLabel.stories.tsx b/src/components/atoms/smartLabel/smartLabel.stories.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import {
+  boolean,
+  text,
+  withKnobs,
+  optionsKnob as options,
+} from '@storybook/addon-knobs';
+import {
+  STATUS_INVALID,
+  STATUS_CAUTION,
+  STATUS_VALID,
+  STATUS_MODIFIED,
+} from '../../../constant/status';
+
+import SmartLabel from '.';
+
+import README from './README.md';
+
+const stories = storiesOf('Atoms/SmartLabel', module);
+
+stories.addDecorator(withKnobs);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+const statusOptions = {
+  Invalid: STATUS_INVALID,
+  Caution: STATUS_CAUTION,
+  Valid: STATUS_VALID,
+  Modified: STATUS_MODIFIED,
+};
+
+stories.add('default', () => {
+  const statusValue: unknown = options('Status', statusOptions, STATUS_VALID, {
+    display: 'inline-radio',
+  });
+
+  return (
+    <SmartLabel
+      forId="1"
+      text={text('label text', '')}
+      inputHasFocus={boolean('inputHasFocus', false)}
+      inputHasValue={boolean('inputHasValue', false)}
+      status={statusValue as any}
+      maxWidth={boolean('maxWidth', false)}
+      required={boolean('required', false)}
+      hideLabel={boolean('hideLabel', false)}
+    >
+      <p>{text('Child', 'I am child')}</p>
+    </SmartLabel>
+  );
+});
diff --git a/src/components/atoms/smartLabel/smartLabel.style.ts b/src/components/atoms/smartLabel/smartLabel.style.ts
@@ -0,0 +1,86 @@
+import { createUseStyles, Styles } from 'react-jss';
+
+type Theme = {
+  [key: string]: string;
+};
+
+export default createUseStyles(
+  (theme: Theme) =>
+    ({
+      root: {
+        display: 'flex',
+        boxSizing: 'border-box',
+        position: 'relative',
+        width: '100%',
+        backgroundColor: theme.white,
+        borderRadius: 2,
+        '&[data-is-max-width="true"]': {
+          maxWidth: 300,
+        },
+      },
+      label: {
+        boxSizing: 'border-box',
+        position: 'absolute',
+        zIndex: 2,
+        top: -6,
+        left: 4,
+        height: 13,
+        lineHeight: `13px`,
+        paddingLeft: 3,
+        paddingRight: 3,
+        fontSize: 10,
+        fontWeight: 400,
+        color: theme.grey3,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        transition: 'color 150ms linear 0ms',
+        '& > span': {
+          opacity: 0,
+          transition: 'opacity 150ms linear 0ms',
+        },
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          top: 6,
+          height: 1,
+          left: 0,
+          right: 0,
+          backgroundColor: theme.white1,
+          zIndex: -1,
+          opacity: 0,
+          transform: `scaleX(0)`,
+          transition: 'opacity 0ms linear 200ms, transform 50ms linear 150ms',
+        },
+        '[data-input-has-value="true"] > &': {
+          '&::after': {
+            opacity: 1,
+            transform: `scaleX(1)`,
+            transitionDelay: '0ms, 0ms',
+          },
+          '& > span': {
+            opacity: 1,
+            transitionDelay: '100ms',
+          },
+        },
+        '[data-input-has-focus="true"]:not([data-input-is-invalid="true"]):not([data-input-is-caution="true"]):not([data-input-is-valid="true"]):not([data-input-is-modified="true"]) > &':
+          {
+            color: theme.teal1,
+          },
+        '[data-input-is-required="true"] > &::before': {
+          content: '"* "',
+        },
+        '[data-input-is-invalid="true"] > &': {
+          color: theme.warningRed,
+        },
+        '[data-input-is-caution="true"] > &': {
+          color: theme.cautionOrange,
+        },
+        '[data-input-is-valid="true"] > &': {
+          color: theme.validGreen,
+        },
+        '[data-input-is-modified="true"] > &': {
+          color: theme.teal1,
+        },
+      },
+    } as Styles)
+);
diff --git a/src/components/atoms/smartLabel/smartLabel.test.tsx b/src/components/atoms/smartLabel/smartLabel.test.tsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { SmartLabel } from '.';
+
+import {
+  STATUS_VALID,
+  STATUS_INVALID,
+  STATUS_CAUTION,
+  STATUS_MODIFIED,
+} from '../../../constant/status';
+
+describe('SmartLabel', () => {
+  let props;
+
+  beforeEach(() => {
+    props = {
+      text: 'Label text',
+      forId: 'input_id_001',
+      inputHasFocus: false,
+      inputHasValue: false,
+      required: false,
+    };
+  });
+
+  it('renders the component', () => {
+    const { getByTestId, queryByTestId } = render(
+      <SmartLabel {...props}>Hello world</SmartLabel>
+    );
+
+    expect(queryByTestId('invisible-wrapper')).not.toBeInTheDocument();
+
+    expect(getByTestId('smartlabel')).toBeInTheDocument();
+  });
+
+  it('renders a label in focus', () => {
+    props.inputHasFocus = true;
+    const { getByTestId } = render(
+      <SmartLabel {...props}>Hello world</SmartLabel>
+    );
+
+    expect(getByTestId('smartlabel').getAttribute('data-input-has-focus')).toBe(
+      'true'
+    );
+  });
+
+  it('renders a label with a value', () => {
+    props.inputHasValue = true;
+    const { getByTestId } = render(
+      <SmartLabel {...props}>Hello world</SmartLabel>
+    );
+
+    expect(getByTestId('smartlabel').getAttribute('data-input-has-value')).toBe(
+      'true'
+    );
+  });
+
+  it('renders a required label', () => {
+    props.required = true;
+    const { getByTestId } = render(
+      <SmartLabel {...props}>Hello world</SmartLabel>
+    );
+
+    expect(
+      getByTestId('smartlabel').getAttribute('data-input-is-required')
+    ).toBe('true');
+  });
+
+  it('renders a valid status', () => {
+    props.status = STATUS_VALID;
+    const { getByTestId } = render(
+      <SmartLabel {...props}>Hello world</SmartLabel>
+    );
+
+    expect(getByTestId('smartlabel').getAttribute('data-input-is-valid')).toBe(
+      'true'
+    );
+  });
+
+  it('renders an invalid status', () => {
+    props.status = STATUS_INVALID;
+    const { getByTestId } = render(
+      <SmartLabel {...props}>Hello world</SmartLabel>
+    );
+
+    expect(
+      getByTestId('smartlabel').getAttribute('data-input-is-invalid')
+    ).toBe('true');
+  });
+
+  it('renders an caution status', () => {
+    props.status = STATUS_CAUTION;
+    const { getByTestId } = render(
+      <SmartLabel {...props}>Hello world</SmartLabel>
+    );
+
+    expect(
+      getByTestId('smartlabel').getAttribute('data-input-is-caution')
+    ).toBe('true');
+  });
+
+  it('renders a modified status', () => {
+    props.status = STATUS_MODIFIED;
+    const { getByTestId } = render(
+      <SmartLabel {...props}>Hello world</SmartLabel>
+    );
+
+    expect(
+      getByTestId('smartlabel').getAttribute('data-input-is-modified')
+    ).toBe('true');
+  });
+
+  it('renders with maxWidth', () => {
+    props.maxWidth = true;
+    const { getByTestId } = render(
+      <SmartLabel {...props}>Hello world</SmartLabel>
+    );
+
+    expect(getByTestId('smartlabel').getAttribute('data-is-max-width')).toBe(
+      'true'
+    );
+  });
+
+  it('does not render the label text', () => {
+    props.hideLabel = true;
+    const { queryByTestId } = render(
+      <SmartLabel {...props}>Hello world</SmartLabel>
+    );
+
+    expect(queryByTestId('invisible-wrapper')).toBeInTheDocument();
+  });
+});
diff --git a/src/constant/status.ts b/src/constant/status.ts
@@ -1,3 +1,4 @@
 export const STATUS_INVALID = 'invalid';
 export const STATUS_CAUTION = 'caution';
 export const STATUS_VALID = 'valid';
+export const STATUS_MODIFIED = 'modified';
