Fix button and update checkbox layout

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ooni-components",
-  "version": "0.6.0-alpha.3",
+  "version": "0.6.0-alpha.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -26,13 +26,13 @@
     "@rollup/plugin-terser": "^0.4.3",
     "@rollup/plugin-typescript": "^11.1.2",
     "@rollup/plugin-url": "^8.0.1",
-    "@storybook/addon-essentials": "^7.5.1",
-    "@storybook/addon-interactions": "^7.5.1",
-    "@storybook/addon-links": "^7.5.1",
-    "@storybook/addon-mdx-gfm": "^7.5.1",
-    "@storybook/blocks": "^7.5.1",
-    "@storybook/react": "^7.5.1",
-    "@storybook/react-webpack5": "^7.5.1",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-mdx-gfm": "^7.6.7",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
     "@storybook/testing-library": "^0.2.2",
     "@svgr/rollup": "^8.0.1",
     "@testing-library/dom": "^9.3.1",
@@ -77,7 +77,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.35.0",
     "rollup-plugin-visualizer": "^5.9.2",
-    "storybook": "^7.5.1",
+    "storybook": "^7.6.7",
     "styled-components": "^6.0.8",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.1",

src/components/Button.tsx

@@ -78,7 +78,6 @@ const Button = forwardRef(
           appearance: 'none',
           display: 'inline-block',
           textAlign: 'center',
-          lineHeight: 'inherit',
           textDecoration: 'none',
           fontWeight: 'body',
           fontSize: 'inherit',

src/components/Checkbox.tsx

@@ -1,27 +1,14 @@
 import React, { forwardRef } from 'react'
-import { CheckboxProps as CP, LabelProps } from 'types'
-// import { props as systemProps } from '@styled-system/should-forward-prop'
+import { CheckboxProps as CP } from 'types'
+import { getMarginProps, omitMarginProps } from '../utils'
 import Box from './Box'
-import Label from './Label'
-
-// const rebassProps = [...systemProps, 'sx', 'variant']
-
-// const PRE = new RegExp(`^(${rebassProps.join('|')})$`)
-
-// const getProps = (test) => (props) => {
-//   const next = {}
-//   for (const key in props) {
-//     if (test(key || '')) next[key] = props[key]
-//   }
-//   return next
-// }
-
-// const getSystemProps = getProps((k) => PRE.test(k))
+import Flex from './Flex'
 
 export interface CheckboxProps extends CP {
-  // error?: string | undefined
+  error?: string | undefined
   name: string
   label: string
+  reverse?: boolean
 }
 
 const Checkbox = forwardRef(
@@ -32,27 +19,31 @@ const Checkbox = forwardRef(
       name,
       label,
       variant = 'checkbox',
+      reverse = false,
+      error,
       ...props
     }: CheckboxProps,
     ref,
   ) => (
-    <Label
-      htmlFor={name}
-      css={{
-        gap: '0.5em',
-        display: 'grid',
-        gridTemplateColumns: '1em auto',
-        alignItems: 'center',
+    <Flex
+      sx={{
+        ...(reverse && {
+          flexDirection: 'row-reverse',
+          justifyContent: 'flex-end',
+        }),
+        gap: 2,
       }}
-      // {...props}
+      {...getMarginProps(props)}
     >
       <Box
         as="input"
         ref={ref}
         type="checkbox"
         id={name}
-        {...props}
+        {...omitMarginProps(props)}
         __css={{
+          flexShrink: 0,
+          flexGrow: 0,
           color: 'blue5',
           appearance: 'none',
           margin: 0,
@@ -79,47 +70,17 @@ const Checkbox = forwardRef(
           },
         }}
       />
-      {label}
-    </Label>
+      <Box
+        as="label"
+        htmlFor={name}
+        css={{
+          overflowWrap: 'anywhere',
+        }}
+      >
+        {label}
+      </Box>
+    </Flex>
   ),
 )
 
 export default Checkbox
-
-// <Box>
-//   <Box
-//     ref={ref}
-//     as="input"
-//     type="checkbox"
-//     {...props}
-//     sx={{
-//       position: 'absolute',
-//       opacity: 0,
-//       zIndex: -1,
-//       width: 1,
-//       height: 1,
-//       overflow: 'hidden',
-//     }}
-//   />
-//   <Box
-//     as={CheckboxIcon}
-//     aria-hidden="true"
-//     tx="forms"
-//     variant={variant}
-//     className={className}
-//     sx={sx}
-//     {...getSystemProps(props)}
-//     __css={{
-//       mr: 2,
-//       borderRadius: 4,
-//       color: 'gray',
-//       'input:checked ~ &': {
-//         color: 'primary',
-//       },
-//       'input:focus ~ &': {
-//         color: 'primary',
-//         bg: 'highlight',
-//       },
-//     }}
-//   />
-// </Box>

src/theme/index.ts

@@ -129,7 +129,7 @@ const theme = {
       '-webkit-tap-highlight-color': 'transparent',
       transition: '.2s ease-out',
       outline: 0,
-      borderRadius: '32px',
+      borderRadius: '60px',
     },
     default: {
       color: 'white',
@@ -222,33 +222,40 @@ const theme = {
     },
     small: {
       fontSize: 14,
-      height: 32,
+      lineHeight: "20px",
+      // height: 32,
       px: 3,
+      py: "6px",
       '.icon': {
         fontSize: 20,
       },
     },
     medium: {
       fontSize: 1,
-      height: 40,
+      lineHeight: "22px",
+      // height: 40,
       px: 24,
+      py: 9,
       '.icon': {
         fontSize: 22,
       },
     },
     large: {
       fontSize: 2,
-      height: 48,
+      lineHeight: "26px",
+      // height: 48,
       px: 4,
+      py: 11,
       '.icon': {
         fontSize: 26,
       },
     },
     xLarge: {
       fontSize: 2,
-      height: 60,
-      borderRadius: 48,
+      lineHeight: "26px",
+      // height: 60,
       px: 5,
+      py: 17,
       '.icon': {
         fontSize: 26,
       },

stories/Button.stories.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
-import { MdShare } from 'react-icons/md'
+import React from 'react'
 import { BsTwitter } from 'react-icons/bs'
+import Box from '../src/components/Box'
 import Button from '../src/components/Button'
 
 const meta = {
@@ -63,3 +63,11 @@ export const Hollow: Story = {
     children: 'Button',
   },
 }
+
+export const LongButton = () => {
+  return (
+    <Box width="300px">
+      <Button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Button>
+    </Box>
+  )
+}

stories/Checkbox.stories.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import Box from '../src/components/Box'
 import Checkbox from '../src/components/Checkbox'
 
 const meta = {
@@ -20,3 +21,13 @@ export const Default: Story = {
     label: 'Label',
   },
 }
+
+export const Example = () => {
+  return (
+    <Box width="200px">
+      <Checkbox mb={2} name="checkbox1" label="Checkbox1 checkbox1 checkbox1 checkbox1 checkbox1" />
+      <Checkbox mb={4} name="checkbox2" label="Checkbox2 checkbox2 checkbox2 checkbox2 checkbox2" />
+      <Checkbox name="checkbox3" label="Checkbox3 checkbox3 checkbox3 checkbox3 checkbox3" reverse />
+    </Box>
+  )
+}