Solution

.storybook/preview-head.html

@@ -1,5 +1,5 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" />
 <link
-  href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
   rel="stylesheet"
 />

README.md

@@ -1 +1,45 @@
 # Component Library Workshop
+
+In this workshop, we'll build 3 components from scratch:
+
+1. ProgressBar
+2. Select
+3. IconInput
+
+Most of the pertinent information will be stored in the Figma document (https://www.figma.com/file/u0wCdLXheiN9f2FmAuPsE9/Mini-Component-Library), but this README will contain some additional information to help you on your mission!
+
+Two fully-formed components have already been included, to be used as-needed in your work:
+
+- `Icon`, an icon component that uses `react-feather` to render various icons
+- `VisuallyHidden`, a component that allows us to make text available to screen-reader users, but not to sighted users.
+
+All components in this project use [the `Roboto` font](https://fonts.google.com/specimen/Roboto). This font is already included in the Storybook environment, and is already applied to all elements. It comes in two weights:
+
+- 400 (default)
+- 700 (bold)
+
+## ProgressBar
+
+The figma document mentions that this component should be "accessible". You can learn how to build a semantically-valid, accessible progress-bar component by reading this doc: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role
+
+This component uses a **box shadow**. We haven't seen this property yet! For now, you can achieve this effect by copying the following CSS declaration into your component:
+
+```css
+box-shadow: inset 0px 2px 4px ${COLORS.transparentGray35};
+```
+
+We'll learn much more about the `box-shadow` property in future modules =)
+
+## Select
+
+The Select component will need a down-arrow icon! You can use the `chevron-down` ID with the `Icon` component.
+
+We want to use a native `<select>` tag in this component, so a bit of precursory HTML has been provided.
+
+This component also includes a function, `getDisplayedValue`. This component uses some React APIs to work out the text that should be displayed. The value isn't currently used, but you can make use of it if needed, depending on your implementation.
+
+## IconInput
+
+This component also uses the `Icon` component — the specific ID will be provided as a prop.
+
+This component requires bold text. You can achieve this look by using `font-weight: 700`.

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "component-library",
+  "name": "mini-component-library",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -16,12 +16,8 @@
     "web-vitals": "^0.2.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
+    "start": "start-storybook -p 6006 -s public"
   },
   "eslintConfig": {
     "extends": [

src/components/Icon/Icon.js

@@ -14,7 +14,7 @@ const icons = {
   'chevron-down': ChevronDown,
 };
 
-const Icon = ({ id, size, strokeWidth, ...delegated }) => {
+const Icon = ({ id, size, strokeWidth = 1, ...delegated }) => {
   const Component = icons[id];
 
   if (!Component) {

src/components/IconInput/IconInput.js

@@ -4,9 +4,71 @@ import styled from 'styled-components';
 import { COLORS } from '../../constants';
 
 import Icon from '../Icon';
+import VisuallyHidden from '../VisuallyHidden';
 
-const IconInput = ({ icon, width = 250, size, ...delegated }) => {
-  return 'TODO';
+const IconInput = ({
+  label,
+  icon,
+  width = 250,
+  size,
+  placeholder,
+}) => {
+  const styles = STYLES[size];
+
+  // TODO: validate size
+
+  return (
+    <Wrapper>
+      <VisuallyHidden>{label}</VisuallyHidden>
+      <IconWrapper style={{ '--size': styles.iconSize + 'px' }}>
+        <Icon id={icon} size={styles.iconSize} />
+      </IconWrapper>
+      <TextInput
+        {...delegated}
+        style={{
+          '--width': width + 'px',
+          '--height': styles.height + 'px',
+          '--border-thickness': styles.borderThickness + 'px',
+          '--font-size': styles.fontSize + 'px',
+        }}
+      />
+    </Wrapper>
+  );
 };
 
+const Wrapper = styled.label`
+  display: block;
+  position: relative;
+  color: ${COLORS.gray700};
+
+  &:hover {
+    color: ${COLORS.black};
+  }
+`;
+
+const IconWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  height: var(--size);
+`;
+
+const TextInput = styled.input`
+  width: var(--width);
+  height: var(--height);
+  font-size: var(--font-size);
+  border: none;
+  border-bottom: var(--border-thickness) solid ${COLORS.black};
+  padding-left: var(--height);
+  color: inherit;
+  font-weight: 700;
+  outline-offset: 2px;
+
+  &::placeholder {
+    font-weight: 400;
+    color: ${COLORS.gray500};
+  }
+`;
+
 export default IconInput;

src/components/IconInput/IconInput.stories.mdx

@@ -22,6 +22,11 @@ import IconInput from './IconInput';
         options: ['small', 'large'],
       },
     },
+    label: {
+      control: {
+        type: 'text',
+      },
+    },
   }}
 />
 
@@ -31,7 +36,12 @@ export const Template = (args) => <IconInput {...args} />;
 
 <Story
   name="Default"
-  args={{ placeholder: 'Search…', icon: 'search', size: 'small' }}
+  args={{
+    placeholder: 'Search…',
+    label: 'Search',
+    icon: 'search',
+    size: 'small',
+  }}
 >
   {Template.bind({})}
 </Story>