Initial Commit

src/components/forms/Checkbox.tsx

@@ -0,0 +1,81 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import React, {ChangeEvent, MouseEvent} from 'react';
+import styled from 'styled-components';
+
+import {Label} from 'components/label';
+import {theme} from 'components/shared/theme';
+
+const {colors, spacing} = theme;
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  label {
+    margin-left: ${spacing.xxSmall};
+    margin-right: ${spacing.xxSmall};
+  }
+`;
+const CheckboxContainer = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  outline: none;
+  height: 1rem;
+`;
+const Icon = styled.svg`
+  fill: none;
+  stroke: ${colors.black};
+  stroke-width: 2px;
+`;
+const HiddenCheckbox = styled.input.attrs({type: 'checkbox'})`
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+const StyledCheckbox = styled.div<{checked?: boolean}>`
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  background: ${({checked}) => (checked ? colors.red : colors.transparent)};
+  border-radius: 3px;
+  transition: all 150ms;
+  outline: none;
+  border: 1px solid ${({checked}) => (checked ? 'none' : colors.gray400)};
+
+  ${Icon} {
+    visibility: ${({checked}) => (checked ? 'visible' : 'hidden')};
+  }
+`;
+const Checkbox = (props: {
+  value: string;
+  id?: string;
+  checked?: boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLDivElement>) => void;
+  label?: string;
+}): React.JSX.Element => {
+  const {checked, onChange, label, id} = props;
+
+  return (
+    <Container>
+      <CheckboxContainer>
+        <HiddenCheckbox {...props} />
+        <StyledCheckbox onClick={onChange} checked={checked}>
+          <Icon viewBox="0 0 24 24">
+            <polyline points="20 6 9 17 4 12" />
+          </Icon>
+        </StyledCheckbox>
+      </CheckboxContainer>
+      {label && <Label htmlFor={id || label} text={label} />}
+    </Container>
+  );
+};
+
+export default Checkbox;