Polishing

css-for-js · Jan 20, 2021 · 459f751 · 459f751
1 parent 39e9141
commit 459f751
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 177 deletions.
diff --git a/README.md b/README.md
@@ -13,6 +13,8 @@ Two fully-formed components have already been included, to be used as-needed in
 - `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.
 
+Additionally, all of the colors you'll need are indexed in `constants.js`.
+
 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)

diff --git a/src/components/IconInput/IconInput.js b/src/components/IconInput/IconInput.js
@@ -13,62 +13,7 @@ const IconInput = ({
   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>
-  );
+  return 'TODO';
 };
 
-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;
diff --git a/src/components/ProgressBar/ProgressBar.js b/src/components/ProgressBar/ProgressBar.js
@@ -4,74 +4,8 @@ import styled from 'styled-components';
 import { COLORS } from '../../constants';
 import VisuallyHidden from '../VisuallyHidden';
 
-const STYLES = {
-  small: {
-    height: 8,
-    padding: 0,
-    radius: 4,
-  },
-  medium: {
-    height: 12,
-    padding: 0,
-    radius: 4,
-  },
-  large: {
-    height: 16,
-    padding: 4,
-    radius: 8,
-  },
-};
-
 const ProgressBar = ({ value, size }) => {
-  const styles = STYLES[size];
-
-  if (!styles) {
-    throw new Error(`Unknown size passed to ProgressBar: ${size}`);
-  }
-
-  return (
-    <Wrapper
-      role="progressbar"
-      aria-valuenow={value}
-      aria-valuemin="0"
-      aria-valuemax="100"
-      style={{
-        '--padding': styles.padding + 'px',
-        '--radius': styles.radius + 'px',
-      }}
-    >
-      <VisuallyHidden>{value}%</VisuallyHidden>
-      <BarWrapper>
-        <Bar
-          style={{
-            '--width': value + '%',
-            '--height': styles.height + 'px',
-          }}
-        />
-      </BarWrapper>
-    </Wrapper>
-  );
+  return <strong>{value}</strong>;
 };
 
-const Wrapper = styled.div`
-  background-color: ${COLORS.transparentGray15};
-  box-shadow: inset 0px 2px 4px ${COLORS.transparentGray35};
-  border-radius: var(--radius);
-  padding: var(--padding);
-`;
-
-const BarWrapper = styled.div`
-  border-radius: 4px;
-
-  /* Trim off corners when progress bar is near-full. */
-  overflow: hidden;
-`;
-
-const Bar = styled.div`
-  width: var(--width);
-  height: var(--height);
-  background-color: ${COLORS.primary};
-  border-radius: 4px 0 0 4px;
-`;
-
 export default ProgressBar;
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -9,61 +9,10 @@ const Select = ({ label, value, onChange, children }) => {
   const displayedValue = getDisplayedValue(value, children);
 
   return (
-    <Wrapper>
-      <NativeSelect value={value} onChange={onChange}>
-        {children}
-      </NativeSelect>
-      <PresentationalBit>
-        {displayedValue}
-        <IconWrapper style={{ '--size': 24 + 'px' }}>
-          <Icon id="chevron-down" strokeWidth={1} size={24} />
-        </IconWrapper>
-      </PresentationalBit>
-    </Wrapper>
+    <select value={value} onChange={onChange}>
+      {children}
+    </select>
   );
 };
 
-const Wrapper = styled.div`
-  position: relative;
-  width: max-content;
-`;
-
-const NativeSelect = styled.select`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-`;
-
-const PresentationalBit = styled.div`
-  color: ${COLORS.gray700};
-  background-color: ${COLORS.transparentGray15};
-  font-size: ${16 / 16}rem;
-  padding: 12px 16px;
-  padding-right: 52px;
-  border-radius: 8px;
-
-  ${NativeSelect}:focus + & {
-    outline: 1px dotted #212121;
-    outline: 5px auto -webkit-focus-ring-color;
-  }
-
-  ${NativeSelect}:hover + & {
-    color: ${COLORS.black};
-  }
-`;
-
-const IconWrapper = styled.div`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 10px;
-  margin: auto;
-  width: var(--size);
-  height: var(--size);
-  pointer-events: none;
-`;
-
 export default Select;