Selects (#3)

- Add selects
- Make form inputs inherit font information
- Document that checkboxes are React components

src/GlobalStyle.tsx

@@ -9,4 +9,15 @@ export const GlobalStyle = createGlobalStyle`
     font-size: 18px;
     line-height: 28px;
   }
+
+  body,
+  input,
+  select,
+  textarea,
+  button {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
 `;

src/Input.tsx

@@ -1,16 +1,18 @@
 import styled from "styled-components";
 
-import { Outline } from "./shared";
-
 export const Input = styled.input`
-  border: 1px solid blue;
+  border: 1px solid black;
   border-radius: 2px;
 
   outline: none;
 
   padding: 5px 8px;
 
+  &:hover {
+    border-color: #666;
+  }
+
   &:focus {
-    ${Outline};
+    border-color: lightBlue;
   }
 `;

src/Select.tsx

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+import { Input } from "./Input";
+
+export const Select = styled(Input.withComponent("select"))`
+  outline: none;
+  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
+  padding-right: 30px;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.7em top 50%;
+  background-size: 0.65em auto;
+
+  &::-ms-expand {
+    display: none;
+  }
+
+  option {
+    font-weight: normal;
+  }
+`;

src/index.ts

@@ -1,5 +1,6 @@
 export { Button, ButtonThemes } from "./Button";
 export { Input } from "./Input";
+export { Select } from "./Select";
 export { Checkbox } from "./Checkbox";
 export { Textarea, TextareaResizing } from "./Textarea";
 export { GlobalStyle } from "./GlobalStyle";

stories/index.stories.js

@@ -11,6 +11,7 @@ import {
   Textarea,
   TextareaResizing,
   Checkbox,
+  Select,
 } from "../src/index";
 
 function CheckboxWrapper({ isCheckedAtStart, ...props }) {
@@ -35,6 +36,23 @@ function InputWrapper({ isTextarea, valueAtStart, ...props }) {
   );
 }
 
+function SelectWrapper({ valueAtStart, placeholder, values, ...props }) {
+  const [value, setValue] = useState(valueAtStart);
+
+  return (
+    <Select
+      {...props}
+      value={value}
+      onChange={(ev) => setValue(ev.target.value)}
+    >
+      <option value="">{placeholder}</option>
+      {values.map(({ value, label }) => (
+        <option value={value}>{label}</option>
+      ))}
+    </Select>
+  );
+}
+
 storiesOf("Elements", module)
   .addDecorator(withKnobs)
   .add("GlobalStyle", () => (
@@ -97,6 +115,11 @@ storiesOf("Elements", module)
         disabled={boolean("`disabled`", false)}
         labelFirst={boolean("`labelFirst`", false)}
       />
+
+      <p>
+        Note: `Checkbox` outputs a React component, <em>not</em> a
+        styled-component element.
+      </p>
     </>
   ))
   .add("Input", () => (
@@ -110,6 +133,21 @@ storiesOf("Elements", module)
       />
     </>
   ))
+  .add("Select", () => (
+    <>
+      <GlobalStyle />
+
+      <SelectWrapper
+        valueAtStart=""
+        placeholder="-- Pick one of these to hodl --"
+        values={[
+          { value: "a", label: "Bird in hand" },
+          { value: "b", label: "Two birds in bush" },
+        ]}
+        disabled={boolean("disabled", false)}
+      />
+    </>
+  ))
   .add("Textarea", () => (
     <>
       <GlobalStyle />