feat: add blockquote

components/Blockquote/Blockquote.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+
+import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
+import { Blockquote, BlockquoteProps, BlockquoteVariants } from './Blockquote';
+
+const BaseBlockquote = (props: BlockquoteProps): JSX.Element => <Blockquote {...props} />;
+
+const BlockquoteForStory = modifyVariantsForStory<BlockquoteVariants, BlockquoteProps>(
+  BaseBlockquote,
+);
+
+const Component: Meta<typeof BlockquoteForStory> = {
+  title: 'Components/Blockquote',
+  component: BlockquoteForStory,
+};
+
+const Template: StoryFn<typeof BlockquoteForStory> = (args) => (
+  <Blockquote {...args}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Blockquote>
+);
+
+export const Basic: StoryFn<typeof BlockquoteForStory> = Template.bind({});
+
+export default Component;

components/Blockquote/Blockquote.tsx

@@ -0,0 +1,10 @@
+import { CSS, styled, VariantProps } from '../../stitches.config';
+import { Text } from '../Text';
+
+export const Blockquote = styled(Text, {
+  borderLeft: '2px solid $textDefault',
+  p: '$2 $3',
+});
+
+export type BlockquoteVariants = VariantProps<typeof Blockquote>;
+export type BlockquoteProps = BlockquoteVariants & { css?: CSS };

components/Blockquote/index.ts

@@ -0,0 +1 @@
+export * from './Blockquote';

components/List/List.stories.tsx

@@ -25,6 +25,27 @@ const Template: StoryFn<typeof Ul> = (args) => (
 
 export const Basic: StoryFn<typeof Ul> = Template.bind({});
 
+export const Checkboxes: StoryFn<typeof Ul> = (args) => (
+  <Ul {...args}>
+    <Li>
+      <input type="checkbox" disabled />
+      Dashboard
+    </Li>
+    <Li>
+      <input type="checkbox" disabled />
+      Profile
+    </Li>
+    <Li>
+      <input type="checkbox" disabled />
+      Settings
+    </Li>
+    <Li>
+      <input type="checkbox" disabled />
+      Help
+    </Li>
+  </Ul>
+);
+
 export const Ordered: StoryFn<typeof Ol> = (args) => (
   <Ol {...args}>
     <Li>Dashboard</Li>

components/List/List.tsx

@@ -19,6 +19,7 @@ const StyledSpan = styled('span', Flex, {
   ...LIST_ITEM_CONTENT_STYLES,
   // CUSTOM
   p: '$1',
+  gap: '$1',
 });
 
 const StyledListItemButton = styled('button', Flex, {
@@ -86,19 +87,31 @@ const StyledLi = styled('li', {
 });
 
 const StyledUl = styled('ul', {
-  m: 0,
+  m: '0 0 0 8px',
   p: 0,
-  color: '$hiContrast',
+  color: '$textDefault',
+
+  '&:has(li > span > input[type="checkbox"])': {
+    m: 0,
+    listStyle: 'none',
+    li: {
+      marginLeft: 0,
+      span: {
+        input: {
+          margin: '0 3px 0 0',
+        },
+      },
+    },
+  },
 });
 
 const StyledOl = styled('ol', {
-  m: 0,
+  m: '0 0 0 8px',
   p: 0,
-  color: '$hiContrast',
+  color: '$textDefault',
 
   '> li::marker': {
     fontSize: '$3',
-    color: '$hiContrast',
     fontFamily: '$rubik',
   },
 });
@@ -175,7 +188,7 @@ export const Li = React.forwardRef<React.ElementRef<typeof StyledLi>, ListItemPr
           </StyledListItemButton>
         ) : (
           <StyledSpan
-            align={align}
+            align={align || 'center'}
             justify={justify}
             direction={direction}
             gap={gap}

index.ts

@@ -18,6 +18,7 @@ export {
 } from './components/AriaTable';
 export { Avatar } from './components/Avatar';
 export { Badge } from './components/Badge';
+export { Blockquote } from './components/Blockquote';
 export { Box } from './components/Box';
 export { Bubble } from './components/Bubble';
 export { Button } from './components/Button';