Merge pull request #61 from BeeInventor/develop

feature: add checkbox with light style

Author: steven11329

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beeinventor/dasiot-react-component-lib",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [

src/components/Checkbox/CheckboxLight/CheckboxLight.stories.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Meta, Story } from '@storybook/react';
+import CheckboxLight, { CheckboxLightProps } from './CheckboxLight';
+
+export default {
+  title: 'Components/Checkbox/CheckboxLight',
+  component: CheckboxLight,
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+} as Meta;
+
+const Template: Story<CheckboxLightProps> = (args) => {
+  const [checked1, setChecked1] = useState(false);
+  const [checked, setChecked] = useState(false);
+  return (
+    <div>
+      <div>
+        <CheckboxLight
+          {...args}
+          checked={checked1}
+          onChange={(c) => setChecked1(c)}
+        />
+      </div>
+      <div>
+        <CheckboxLight
+          {...args}
+          checked={checked}
+          label="This is checkbox light"
+          onChange={(c) => setChecked(c)}
+        />
+      </div>
+      <div>
+        <CheckboxLight label="This is checkbox light with checked" checked />
+      </div>
+      <div>
+        <CheckboxLight label="This is disabled checkbox light" disabled />
+      </div>
+    </div>
+  );
+};
+
+export const Default: Story<CheckboxLightProps> = Template.bind({});
+
+Default.parameters = {
+  backgrounds: {
+    default: null,
+  },
+};
+Default.args = {
+  disabled: false,
+};

src/components/Checkbox/CheckboxLight/CheckboxLight.tsx

@@ -0,0 +1,129 @@
+import React, { useRef } from 'react';
+import { styled, Box, BoxProps } from '@mui/material';
+
+import CheckBoxSvgIcon from '../../../svg/CheckboxSvgIcon';
+
+interface ContainerProps {
+  disabled: boolean;
+  isSelected: boolean;
+  selectType: 'none' | 'one' | 'partial' | 'all';
+}
+
+const Container = styled(Box, {
+  shouldForwardProp: (prop) => {
+    switch (prop) {
+      case 'isSelected':
+      case 'selectType':
+      case 'sx':
+        return false;
+      default:
+        return true;
+    }
+  },
+})<ContainerProps>`
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+
+  &:hover {
+    & > .checkbox {
+      border-color: ${({ theme }) => theme.color.primary.$60};
+    }
+  }
+
+  & > .checkbox {
+    display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 2px solid ${({ theme }) => theme.color.secondary.$40};
+    border-radius: 4px;
+    margin: 8px;
+    background: ${({ disabled, theme }) =>
+      disabled ? theme.color.secondary.$40 : '#fff'};
+    color: ${({ theme }) => theme.color.primary.$100};
+    opacity: ${({ disabled }) => (disabled ? 0.3 : 1)};
+
+    ${({ isSelected, selectType }) => {
+      if (isSelected && selectType !== 'partial') {
+        return {
+          border: 'none',
+        };
+      }
+      return undefined;
+    }}
+
+    ${({ theme, isSelected, selectType }) => {
+      if (isSelected) {
+        if (selectType === 'partial') {
+          return {
+            padding: '4px',
+            '&:before': {
+              display: 'block',
+              content: '""',
+              width: '100%',
+              height: '100%',
+              background: theme.color.primary.$100,
+              borderRadius: '1px',
+            },
+          };
+        }
+      }
+      return undefined;
+    }};
+  }
+
+  & > label {
+    cursor: pointer;
+    display: inline-block;
+    margin-left: 8px;
+    opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+  }
+`;
+
+export interface CheckboxLightProps extends Omit<BoxProps, 'onChange'> {
+  name?: string;
+  label?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  selectType?: 'none' | 'one' | 'partial' | 'all';
+  onChange?: (checked: boolean) => void;
+}
+
+const CheckboxLight: React.FC<CheckboxLightProps> = ({
+  name,
+  label,
+  sx,
+  checked = false,
+  disabled = false,
+  selectType = 'none',
+  onChange,
+}) => {
+  const checkboxRef = useRef<HTMLInputElement>(null);
+
+  const handleOnClick = () => {
+    onChange?.(!checked);
+  };
+
+  return (
+    <Container
+      ref={checkboxRef}
+      sx={sx}
+      isSelected={checked}
+      disabled={disabled}
+      selectType={selectType}
+      onClick={handleOnClick}
+      data-cy={`checkbox-list-device-item${disabled ? 'disabled' : ''}`}
+    >
+      <div className="checkbox">
+        {checked && selectType !== 'partial' && (
+          <CheckBoxSvgIcon sx={{ width: '1.5rem', height: '1.5rem' }} />
+        )}
+      </div>
+      {label && <label htmlFor={name}>{label}</label>}
+    </Container>
+  );
+};
+
+export default CheckboxLight;

src/components/Checkbox/CheckboxLight/index.ts

@@ -0,0 +1 @@
+export { default } from './CheckboxLight';

src/components/index.ts

@@ -12,3 +12,4 @@ export { default as Step } from './Step';
 export { default as SearchTextField } from './TextField/SearchTextField';
 export { default as OrgText } from './OrgText';
 export { default as StatusDropdown } from './Dropdown/StatusDropdown';
+export { default as CheckboxLight } from './Checkbox/CheckboxLight';

src/svg/CheckboxSvgIcon.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import * as React from 'react';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const CheckboxSvgIcon = (props: SvgIconProps) => (
+  <SvgIcon
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <rect width="24" height="24" rx="4" fill="#E6A600" />
+    <path
+      d="M7 12.6951L10.3049 16L17.5 9"
+      stroke="white"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </SvgIcon>
+);
+
+export default CheckboxSvgIcon;