add input to components package (codesandbox#3280)

* add input

* small fixes

* only show invisible label if no label

Author: SaraVieira

packages/common/src/design-language/theme.ts

@@ -8,6 +8,7 @@ const theme = {
 
   // we use a 4 point grid
   space: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40],
+  sizes: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40],
 
   // transition speeds in ms
   speeds: [0, '75ms', '100ms', '150ms', '200ms', '300ms', '500ms'],

packages/common/src/themes/codesandbox-black.js

@@ -134,7 +134,7 @@ const colors = {
     background: tokens.grays[500],
     foreground: tokens.white,
     border: tokens.grays[800],
-    placeholderForeground: tokens.grays[300],
+    placeholderForeground: tokens.grays[400],
   },
   inputOption: {
     activeBorder: tokens.blues[300],

packages/components/package.json

@@ -27,15 +27,18 @@
   "dependencies": {
     "@codesandbox/common": "^1.0.8",
     "@codesandbox/template-icons": "^1.1.0",
+    "@reach/visually-hidden": "^0.7.0",
     "@styled-system/css": "^5.1.4",
+    "add": "^2.0.6",
     "codesandbox-api": "0.0.23",
     "color": "3.1.2",
     "date-fns": "^2.8.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
     "styled-components": "^4.4.1",
-    "typeface-inter": "^3.11.2"
+    "typeface-inter": "^3.11.2",
+    "yarn": "^1.21.1"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^5.2.8",

packages/components/src/components/Example/index.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Input } from '.';
+
+export default {
+  title: 'components/Input',
+  component: Input,
+};
+
+// replace the text inside with Text variants when available
+export const Basic = () => <Input />;
+export const InvisibleLabel = () => <Input invisibleLabel="Fill your name" />;
+export const Placeholder = () => <Input placeholder="Your name" />;
+export const Label = () => (
+  <Input label="Your full name" placeholder="John Doe" />
+);

packages/components/src/components/Input/index.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+import css from '@styled-system/css';
+import VisuallyHidden from '@reach/visually-hidden';
+import { uniqueId } from 'lodash-es';
+
+const placeholderStyles = {
+  color: 'input.placeholderForeground',
+  fontSize: 3,
+};
+
+export const InputComponent = styled.input(
+  css({
+    height: 6,
+    paddingX: 2,
+    fontSize: 3,
+    borderRadius: 'small',
+    backgroundColor: 'input.background',
+    borderBottom: '1px solid',
+    borderColor: 'input.border',
+    color: 'input.foreground',
+    '::-webkit-input-placeholder': placeholderStyles,
+    '::-ms-input-placeholder': placeholderStyles,
+    '::placeholder': placeholderStyles,
+  })
+);
+
+const Label = styled.label(
+  css({
+    fontSize: 2,
+    paddingBottom: 2,
+    color: 'sidebar.foreground',
+    display: 'block',
+  })
+);
+
+interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+}
+
+export const Input: React.FC<IInputProps> = ({
+  type = 'text',
+  label,
+  ...props
+}) => {
+  const id = props.id || uniqueId('form_');
+
+  return (
+    <>
+      {props.placeholder && !label ? (
+        <VisuallyHidden>
+          <label htmlFor={id}>{props.placeholder}</label>
+        </VisuallyHidden>
+      ) : null}
+      {label ? <Label htmlFor={id}>{label}</Label> : null}
+      <InputComponent id={id} {...props} />
+    </>
+  );
+};

packages/components/src/components/Input/index.tsx

@@ -3860,6 +3860,11 @@
     react-lifecycles-compat "^3.0.4"
     warning "^3.0.0"
 
+"@reach/visually-hidden@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.7.0.tgz#6e5591fa2ca0431d88f230cbdf8584b57f4ea49e"
+  integrity sha512-a5iyXugsTO4U3o3NBHog9lrWYtqXKWZG6BhtSMVgjq1yEbdXHB0TOaK4Zu1VrlLq9/0FKpm87hfzFj13AVzn1Q==
+
 "@react-hook/hover@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@react-hook/hover/-/hover-1.0.1.tgz#71c7236a703fc36714e76e8d3072ea04f28bf487"
@@ -5345,13 +5350,6 @@
   resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-20.0.1.tgz#35cc15b9c4f30a18ef21852e255fdb02f6d59b89"
   integrity sha512-yALhelO3i0hqZwhjtcr6dYyaLoCHbAMshwtj6cGxTvHZAKXHsYGdff6E8EPw3xLKY0ELUTQ69Q1rQiJENnccMA==
 
-"@types/jest-diff@^24.3.0":
-  version "24.3.0"
-  resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-24.3.0.tgz#29e237a3d954babfe6e23cc59b57ecd8ca8d858d"
-  integrity sha512-vx1CRDeDUwQ0Pc7v+hS61O1ETA81kD04IMEC0hS1kPyVtHDdZrokAvpF7MT9VI/fVSzicelUZNCepDvhRV1PeA==
-  dependencies:
-    jest-diff "*"
-
 "@types/[email protected]":
   version "24.0.13"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.0.13.tgz#10f50b64cb05fb02411fbba49e9042a3a11da3f9"
@@ -5734,13 +5732,6 @@
     "@types/node" "*"
     "@types/unist" "*"
 
-"@types/vfile-message@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@types/vfile-message/-/vfile-message-2.0.0.tgz#690e46af0fdfc1f9faae00cd049cc888957927d5"
-  integrity sha512-GpTIuDpb9u4zIO165fUy9+fXcULdD8HFRNli04GehoMVbeNq7D6OBnqSmg3lxZnC+UvgUhEWKxdKiwYUkGltIw==
-  dependencies:
-    vfile-message "*"
-
 "@types/vfile@^3.0.0":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@types/vfile/-/vfile-3.0.2.tgz#19c18cd232df11ce6fa6ad80259bc86c366b09b9"
@@ -6304,6 +6295,11 @@ [email protected]:
   dependencies:
     object-assign "4.x"
 
+add@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
+  integrity sha1-JI8Kn25aUo7yKV2+7DBTITCuIjU=
+
 [email protected]:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.0.2.tgz#480081e82b587ba319459fef512f516fe03d58af"
@@ -18067,16 +18063,6 @@ jest-config@^24.9.0:
     pretty-format "^24.9.0"
     realpath-native "^1.1.0"
 
-jest-diff@*, jest-diff@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
-  integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
-  dependencies:
-    chalk "^2.0.1"
-    diff-sequences "^24.9.0"
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
-
 jest-diff@^20.0.3:
   version "20.0.3"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-20.0.3.tgz#81f288fd9e675f0fb23c75f1c2b19445fe586617"
@@ -18106,6 +18092,16 @@ jest-diff@^23.6.0:
     jest-get-type "^22.1.0"
     pretty-format "^23.6.0"
 
+jest-diff@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
+  integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
+  dependencies:
+    chalk "^2.0.1"
+    diff-sequences "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
 [email protected], jest-docblock@^24.3.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
@@ -20332,21 +20328,6 @@ meow@^5.0.0:
     trim-newlines "^2.0.0"
     yargs-parser "^10.0.0"
 
-meow@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-5.0.0.tgz#dfc73d63a9afc714a5e371760eb5c88b91078aa4"
-  integrity sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==
-  dependencies:
-    camelcase-keys "^4.0.0"
-    decamelize-keys "^1.0.0"
-    loud-rejection "^1.0.0"
-    minimist-options "^3.0.1"
-    normalize-package-data "^2.3.4"
-    read-pkg-up "^3.0.0"
-    redent "^2.0.0"
-    trim-newlines "^2.0.0"
-    yargs-parser "^10.0.0"
-
 merge-anything@^2.2.4:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.0.tgz#86959caf02bb8969d1ae5e1b652862bc5fe54e44"
@@ -30865,14 +30846,6 @@ vfile-location@^2.0.0:
   resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.5.tgz#c83eb02f8040228a8d2b3f10e485be3e3433e0a2"
   integrity sha512-Pa1ey0OzYBkLPxPZI3d9E+S4BmvfVwNAAXrrqGbwTVXWaX2p9kM1zZ+n35UtVM06shmWKH4RPRN8KI80qE3wNQ==
 
-vfile-message@*:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.2.tgz#75ba05090ec758fa8420f2c11ce049bcddd8cf3e"
-  integrity sha512-gNV2Y2fDvDOOqq8bEe7cF3DXU6QgV4uA9zMR2P8tix11l1r7zju3zry3wZ8sx+BEfuO6WQ7z2QzfWTvqHQiwsA==
-  dependencies:
-    "@types/unist" "^2.0.0"
-    unist-util-stringify-position "^2.0.0"
-
 vfile-message@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.1.1.tgz#5833ae078a1dfa2d96e9647886cd32993ab313e1"