@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.50

package/src/Chip/Chip.story.tsx

@@ -1,242 +1,242 @@
-import { Chip } from './';
-import { Box } from '../Box';
-import { Text } from '../Text';
-import { RadioGroup } from '../RadioButton';
-import { ChoiceChip } from './ChoiceChip';
-import { LoremIpsum } from '../Text/LoremIpsum';
-
-export default {
-  title: 'components/Chip',
-};
-
-const CloseIcon = (props) => (
-  <Box
-    role="button"
-    tabIndex={0}
-    display="flex"
-    width={20}
-    height={20}
-    alignItems="center"
-    justifyContent="center"
-    sx={{
-      '& > svg': { display: 'block' },
-    }}
-  >
-    <svg viewBox="0 0 24 24" width={16} height={16} {...props}>
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path
-        fill="currentColor"
-        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-      />
-    </svg>
-  </Box>
-);
-
-const LeftIcon = ({ color }) => (
-  <Box
-    display="flex"
-    width={24}
-    height={24}
-    borderRadius="full"
-    alignItems="center"
-    justifyContent="center"
-    bg={color}
-    color={`on.${color}`}
-    ml="-4px"
-  >
-    L
-  </Box>
-);
-
-const Example = ({ variant, color = 'default' }) => {
-  const noop = (e) => {
-    console.log('I got clicked', e.target.innerText);
-  };
-
-  return (
-    <Box>
-      <Text variant="h6" mb={2}>
-        Variant: {variant}, Color: {color}
-      </Text>
-      <Box my={2} display="flex" sx={{ gap: 2 }}>
-        <Text as="span" mr={2}>
-          Non clickable
-        </Text>
-        <Chip variant={variant} color={color}>
-          Buy now
-        </Chip>
-        <Chip variant={variant} color={color}>
-          Close door
-        </Chip>
-        <Chip variant={variant} disabled color={color}>
-          Nothing
-        </Chip>
-      </Box>
-      <Box my={2} display="flex" sx={{ gap: 2 }}>
-        <Text as="span" mr={2}>
-          Button
-        </Text>
-        <Chip variant={variant} onClick={noop} color={color}>
-          John
-        </Chip>
-        <Chip variant={variant} onClick={noop} color={color}>
-          Max
-        </Chip>
-        <Chip variant={variant} onClick={noop} color={color}>
-          Jane
-        </Chip>
-        <Chip variant={variant} onClick={noop} disabled color={color}>
-          Off
-        </Chip>
-      </Box>
-      <Box my={2} display="flex" sx={{ gap: 2 }}>
-        <Text as="span" mr={2}>
-          CheckBox
-        </Text>
-        <ChoiceChip type="checkbox" variant={variant} color={color}>
-          Bookcase
-        </ChoiceChip>
-        <ChoiceChip type="checkbox" variant={variant} color={color}>
-          TVs
-        </ChoiceChip>
-        <ChoiceChip type="checkbox" variant={variant} color={color}>
-          Sofas
-        </ChoiceChip>
-        <ChoiceChip type="checkbox" variant={variant} color={color} disabled>
-          Disabled
-        </ChoiceChip>
-      </Box>
-      <RadioGroup
-        name={`test-radio-${variant}-${color}`}
-        my={2}
-        display="flex"
-        sx={{ gap: 2 }}
-      >
-        <Text as="span" mr={2}>
-          RadioGroup
-        </Text>
-        <ChoiceChip type="radio" variant={variant} color={color} value="soft">
-          Soft
-        </ChoiceChip>
-        <ChoiceChip type="radio" variant={variant} color={color} value="medium">
-          Medium
-        </ChoiceChip>
-        <ChoiceChip type="radio" variant={variant} color={color} value="hard">
-          Hard
-        </ChoiceChip>
-        <ChoiceChip
-          type="radio"
-          variant={variant}
-          color={color}
-          value="none"
-          disabled
-        >
-          Disabled
-        </ChoiceChip>
-      </RadioGroup>
-      <Box my={2} display="flex" sx={{ gap: 2 }}>
-        <Text as="span" mr={2}>
-          With icons
-        </Text>
-        <Chip variant={variant}>Hello please</Chip>
-        <Chip variant={variant} leadingIcon={<LeftIcon color={color} />}>
-          Hello please
-        </Chip>
-        <Chip variant={variant} trailingIcon={<CloseIcon />}>
-          Hello please
-        </Chip>
-        <Chip
-          variant={variant}
-          leadingIcon={<LeftIcon color={color} />}
-          trailingIcon={<CloseIcon />}
-        >
-          Hello please
-        </Chip>
-      </Box>
-    </Box>
-  );
-};
-
-const AllColors = ({ variant }) => (
-  <>
-    <Box p={3}>
-      <Example variant={variant} color="primary" />
-    </Box>
-    <Box p={3}>
-      <Example variant={variant} color="secondary" />
-    </Box>
-  </>
-);
-
-export const AllVariants = () => {
-  return (
-    <>
-      <AllColors variant="filled" />
-      <AllColors variant="outlined" />
-    </>
-  );
-};
-
-export const HorizontallyScrollableExample = () => {
-  const texts = [
-    'Temakis',
-    'Sushis',
-    'Beers',
-    'Wine',
-    'Soft drinks',
-    'Cold drinks',
-  ];
-  return (
-    <Box maxWidth="300px" sx={{ backgroundColor: '#ccc' }}>
-      <Box
-        as="nav"
-        sx={{
-          position: 'sticky',
-          top: 0,
-          overflowX: 'auto',
-          bg: 'surface',
-          py: 3,
-          zIndex: 1,
-          borderColor: '#aeaeae',
-          borderWidth: '1px',
-          borderStyle: 'solid',
-          scrollbarWidth: 'none',
-          MsOverflowStyle: 'none',
-          '::-webkit-scrollbar': {
-            display: 'none',
-          },
-        }}
-      >
-        <RadioGroup
-          sx={{
-            px: 3,
-            display: 'flex',
-            minWidth: 'auto',
-            overflow: 'visible',
-            '& > :not(:first-of-type)': {
-              marginLeft: 2,
-            },
-          }}
-        >
-          {texts.map((text) => (
-            <Box key={text} sx={{ minWidth: 'auto' }}>
-              <ChoiceChip
-                type="radio"
-                value={text}
-                key={text}
-                onClick={() => {
-                  /* noop */
-                }}
-              >
-                {text}
-              </ChoiceChip>
-            </Box>
-          ))}
-        </RadioGroup>
-      </Box>
-      <Box>
-        <LoremIpsum count={20} />
-      </Box>
-    </Box>
-  );
-};
+import { Chip } from './';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { RadioGroup } from '../RadioButton';
+import { ChoiceChip } from './ChoiceChip';
+import { LoremIpsum } from '../Text/LoremIpsum';
+
+export default {
+  title: 'components/Chip',
+};
+
+const CloseIcon = (props) => (
+  <Box
+    role="button"
+    tabIndex={0}
+    display="flex"
+    width={20}
+    height={20}
+    alignItems="center"
+    justifyContent="center"
+    sx={{
+      '& > svg': { display: 'block' },
+    }}
+  >
+    <svg viewBox="0 0 24 24" width={16} height={16} {...props}>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path
+        fill="currentColor"
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+      />
+    </svg>
+  </Box>
+);
+
+const LeftIcon = ({ color }) => (
+  <Box
+    display="flex"
+    width={24}
+    height={24}
+    borderRadius="full"
+    alignItems="center"
+    justifyContent="center"
+    bg={color}
+    color={`on.${color}`}
+    ml="-4px"
+  >
+    L
+  </Box>
+);
+
+const Example = ({ variant, color = 'default' }) => {
+  const noop = (e) => {
+    console.log('I got clicked', e.target.innerText);
+  };
+
+  return (
+    <Box>
+      <Text variant="title-small" mb={2}>
+        Variant: {variant}, Color: {color}
+      </Text>
+      <Box my={2} display="flex" sx={{ gap: 2 }}>
+        <Text as="span" mr={2}>
+          Non clickable
+        </Text>
+        <Chip variant={variant} color={color}>
+          Buy now
+        </Chip>
+        <Chip variant={variant} color={color}>
+          Close door
+        </Chip>
+        <Chip variant={variant} disabled color={color}>
+          Nothing
+        </Chip>
+      </Box>
+      <Box my={2} display="flex" sx={{ gap: 2 }}>
+        <Text as="span" mr={2}>
+          Button
+        </Text>
+        <Chip variant={variant} onClick={noop} color={color}>
+          John
+        </Chip>
+        <Chip variant={variant} onClick={noop} color={color}>
+          Max
+        </Chip>
+        <Chip variant={variant} onClick={noop} color={color}>
+          Jane
+        </Chip>
+        <Chip variant={variant} onClick={noop} disabled color={color}>
+          Off
+        </Chip>
+      </Box>
+      <Box my={2} display="flex" sx={{ gap: 2 }}>
+        <Text as="span" mr={2}>
+          CheckBox
+        </Text>
+        <ChoiceChip type="checkbox" variant={variant} color={color}>
+          Bookcase
+        </ChoiceChip>
+        <ChoiceChip type="checkbox" variant={variant} color={color}>
+          TVs
+        </ChoiceChip>
+        <ChoiceChip type="checkbox" variant={variant} color={color}>
+          Sofas
+        </ChoiceChip>
+        <ChoiceChip type="checkbox" variant={variant} color={color} disabled>
+          Disabled
+        </ChoiceChip>
+      </Box>
+      <RadioGroup
+        name={`test-radio-${variant}-${color}`}
+        my={2}
+        display="flex"
+        sx={{ gap: 2 }}
+      >
+        <Text as="span" mr={2}>
+          RadioGroup
+        </Text>
+        <ChoiceChip type="radio" variant={variant} color={color} value="soft">
+          Soft
+        </ChoiceChip>
+        <ChoiceChip type="radio" variant={variant} color={color} value="medium">
+          Medium
+        </ChoiceChip>
+        <ChoiceChip type="radio" variant={variant} color={color} value="hard">
+          Hard
+        </ChoiceChip>
+        <ChoiceChip
+          type="radio"
+          variant={variant}
+          color={color}
+          value="none"
+          disabled
+        >
+          Disabled
+        </ChoiceChip>
+      </RadioGroup>
+      <Box my={2} display="flex" sx={{ gap: 2 }}>
+        <Text as="span" mr={2}>
+          With icons
+        </Text>
+        <Chip variant={variant}>Hello please</Chip>
+        <Chip variant={variant} leadingIcon={<LeftIcon color={color} />}>
+          Hello please
+        </Chip>
+        <Chip variant={variant} trailingIcon={<CloseIcon />}>
+          Hello please
+        </Chip>
+        <Chip
+          variant={variant}
+          leadingIcon={<LeftIcon color={color} />}
+          trailingIcon={<CloseIcon />}
+        >
+          Hello please
+        </Chip>
+      </Box>
+    </Box>
+  );
+};
+
+const AllColors = ({ variant }) => (
+  <>
+    <Box p={3}>
+      <Example variant={variant} color="primary" />
+    </Box>
+    <Box p={3}>
+      <Example variant={variant} color="secondary" />
+    </Box>
+  </>
+);
+
+export const AllVariants = () => {
+  return (
+    <>
+      <AllColors variant="filled" />
+      <AllColors variant="outlined" />
+    </>
+  );
+};
+
+export const HorizontallyScrollableExample = () => {
+  const texts = [
+    'Temakis',
+    'Sushis',
+    'Beers',
+    'Wine',
+    'Soft drinks',
+    'Cold drinks',
+  ];
+  return (
+    <Box maxWidth="300px" sx={{ backgroundColor: '#ccc' }}>
+      <Box
+        as="nav"
+        sx={{
+          position: 'sticky',
+          top: 0,
+          overflowX: 'auto',
+          bg: 'surface',
+          py: 3,
+          zIndex: 1,
+          borderColor: '#aeaeae',
+          borderWidth: '1px',
+          borderStyle: 'solid',
+          scrollbarWidth: 'none',
+          MsOverflowStyle: 'none',
+          '::-webkit-scrollbar': {
+            display: 'none',
+          },
+        }}
+      >
+        <RadioGroup
+          sx={{
+            px: 3,
+            display: 'flex',
+            minWidth: 'auto',
+            overflow: 'visible',
+            '& > :not(:first-of-type)': {
+              marginLeft: 2,
+            },
+          }}
+        >
+          {texts.map((text) => (
+            <Box key={text} sx={{ minWidth: 'auto' }}>
+              <ChoiceChip
+                type="radio"
+                value={text}
+                key={text}
+                onClick={() => {
+                  /* noop */
+                }}
+              >
+                {text}
+              </ChoiceChip>
+            </Box>
+          ))}
+        </RadioGroup>
+      </Box>
+      <Box>
+        <LoremIpsum count={20} />
+      </Box>
+    </Box>
+  );
+};

package/src/Chip/Chip.tsx

@@ -1,5 +1,5 @@
-import { ButtonChip } from './ButtonChip';
-import type { ButtonChipProps } from './ButtonChip';
-
-export { ButtonChip as Chip };
-export type { ButtonChipProps as ChipProps };
+import { ButtonChip } from './ButtonChip';
+import type { ButtonChipProps } from './ButtonChip';
+
+export { ButtonChip as Chip };
+export type { ButtonChipProps as ChipProps };