feat: list dqa

Orfium · Oct 11, 2023 · d32bd15 · d32bd15
1 parent f28779a
commit d32bd15
Show file tree

Hide file tree

Showing 6 changed files with 1,909 additions and 508 deletions.
diff --git a/src/components/List/List.tokens.ts b/src/components/List/List.tokens.ts
@@ -7,14 +7,10 @@ import { Theme } from '../../theme';
 export type ListTokens = DotKeys<typeof menu>;
 export type ListItemTokens = DotKeys<typeof listItem>;
 
-export const getListTokens = (
-  theme: Theme
-): ((path: ListTokens, fn?: (val: string) => any) => string) => {
-  return getComponentTokens(menu, theme);
+export const getListTokens = (theme: Theme) => {
+  return getComponentTokens<ListTokens>(menu, theme);
 };
 
-export const getListItemTokens = (
-  theme: Theme
-): ((path: ListItemTokens, fn?: (val: string) => any) => string) => {
-  return getComponentTokens(listItem, theme);
+export const getListItemTokens = (theme: Theme) => {
+  return getComponentTokens<ListItemTokens>(listItem, theme);
 };
diff --git a/src/components/List/components/ListItemText/ListItemText.style.ts b/src/components/List/components/ListItemText/ListItemText.style.ts
@@ -2,6 +2,7 @@ import { SerializedStyles, css } from '@emotion/react';
 import { Theme } from 'index';
 
 import { getListItemTokens } from 'components/List/List.tokens';
+import { generateStylesFromTokens } from 'components/Typography/utils';
 
 export const listItemTextWrapperStyles =
   (isGroupItem?: boolean, isHighlighted?: boolean) =>
@@ -33,3 +34,14 @@ export const listItemTextWrapperStyles =
       }
     `;
   };
+
+export const descriptionStyles =
+  () =>
+  (theme: Theme): SerializedStyles => {
+    const tokens = getListItemTokens(theme);
+
+    return css`
+      ${generateStylesFromTokens(tokens('secondaryText'))};
+      color: ${tokens('textColor.secondary')};
+    `;
+  };
diff --git a/src/components/List/components/ListItemText/ListItemText.tsx b/src/components/List/components/ListItemText/ListItemText.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import { listItemTextWrapperStyles } from './ListItemText.style';
+import { descriptionStyles, listItemTextWrapperStyles } from './ListItemText.style';
 
 export type ListItemTextProps = {
   description?: string | JSX.Element;
@@ -10,7 +10,7 @@ const ListItemText: FC<ListItemTextProps> = (props) => {
   return (
     <div css={listItemTextWrapperStyles(false, false)}>
       <span>{props.children}</span>
-      {props.description && <p>{props.description}</p>}
+      {props.description && <p css={descriptionStyles()}>{props.description}</p>}
     </div>
   );
 };

diff --git a/src/components/List/stories/ListItem.stories.mdx b/src/components/List/stories/ListItem.stories.mdx
@@ -75,55 +75,87 @@ const MyComponent = () => {
           <>
             <Box mb={'3'}>
               <List label={'list'} selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
-                <ListItem key={'1'}>
+                <ListItem key={'1'} textValue={'Text Only'}>
+                  <ListItemText>Text only</ListItemText>
+                </ListItem>
+                <ListItem key={'2'} rowSize={'compact'} textValue={'Text Only'}>
+                  <ListItemText>Text only (compact)</ListItemText>
+                </ListItem>
+              </List>
+            </Box>
+            <Box mb={'3'}>
+              <List label={'list'} selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+                <ListItem key={'3'} textValue={'Text'}>
+                  <ListItemText description={'with Secondary Help Text'}>Text</ListItemText>
+                </ListItem>
+                <ListItem key={'4'} rowSize={'compact'} textValue={'Text'}>
+                  <ListItemText description={'with Secondary Help Text'}>
+                    Text (compact)
+                  </ListItemText>
+                </ListItem>
+              </List>
+            </Box>
+            <Box mb={'3'}>
+              <List label={'list'} selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+                <ListItem key={'5'}>
                   <ListItemAction>
-                    <Radio isChecked={selectedKeys.has(`1`)} />
+                    <Radio isChecked={selectedKeys.has(`5`)} />
                   </ListItemAction>
                   <ListItemText>Option Radio</ListItemText>
                 </ListItem>
+                <ListItem key={'6'} rowSize={'compact'}>
+                  <ListItemAction>
+                    <Radio isChecked={selectedKeys.has(`6`)} />
+                  </ListItemAction>
+                  <ListItemText>Option Radio (compact)</ListItemText>
+                </ListItem>
               </List>
             </Box>
             <Box mb={'3'}>
               <List label={'list'} selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
-                <ListItem key={'2'} textValue={'Option Checkbox'}>
+                <ListItem key={'7'} textValue={'Option Checkbox'}>
                   <ListItemAction>
-                    <CheckBox isFilled={false} isChecked={selectedKeys.has(`2`)} />
+                    <CheckBox isFilled={false} isChecked={selectedKeys.has(`7`)} />
                   </ListItemAction>
                   <ListItemText>Option Checkbox</ListItemText>
                 </ListItem>
+                <ListItem key={'8'} rowSize={'compact'} textValue={'Option Checkbox'}>
+                  <ListItemAction>
+                    <CheckBox isFilled={false} isChecked={selectedKeys.has(`8`)} />
+                  </ListItemAction>
+                  <ListItemText>Option Checkbox (compact)</ListItemText>
+                </ListItem>
               </List>
             </Box>
             <Box mb={'3'}>
               <List label={'list'} selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
-                <ListItem key={'3'} textValue={'Option Switch'}>
+                <ListItem key={'9'} textValue={'Option Switch'}>
                   <ListItemText>Option Switch</ListItemText>
                   <ListItemAction>
-                    <Switch isChecked={selectedKeys.has(`3`)} onChange={() => {}} />
+                    <Switch isChecked={selectedKeys.has(`9`)} onChange={() => {}} />
+                  </ListItemAction>
+                </ListItem>
+                <ListItem key={'10'} rowSize={'compact'} textValue={'Option Switch'}>
+                  <ListItemText>Option Switch (compact)</ListItemText>
+                  <ListItemAction>
+                    <Switch isChecked={selectedKeys.has(`10`)} onChange={() => {}} />
                   </ListItemAction>
                 </ListItem>
               </List>
             </Box>
             <Box mb={'3'}>
-              <List label={'list'} selectedKeys={selectedKeys}>
-                <ListItem key={'4'} textValue={'Option Icon/Avatar'}>
+              <List label={'list'} selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+                <ListItem key={'11'} textValue={'Option Icon/Avatar'}>
                   <ListItemAction>
                     <Avatar size={1} color={'blue'} iconName={'user'} />
                   </ListItemAction>
                   <ListItemText>Option Icon/Avatar</ListItemText>
                 </ListItem>
-              </List>
-            </Box>
-            <Box mb={'3'}>
-              <List label={'list'} selectedKeys={selectedKeys}>
-                <ListItem key={'5'} textValue={'Text Only'}>
-                  <ListItemText description={'Secondary Help Text'}>Text only</ListItemText>
-                </ListItem>
-              </List>
-            </Box>
-            <Box mb={'3'}>
-              <List label={'list'} selectedKeys={selectedKeys}>
-                <ListItem key={'6'} rowSize={'compact'}>
-                  <ListItemText>Compact size item</ListItemText>
+                <ListItem key={'12'} rowSize={'compact'} textValue={'Option Icon/Avatar'}>
+                  <ListItemAction>
+                    <Avatar size={1} color={'blue'} iconName={'user'} />
+                  </ListItemAction>
+                  <ListItemText>Option Icon/Avatar (compact)</ListItemText>
                 </ListItem>
               </List>
             </Box>
@@ -134,6 +166,50 @@ const MyComponent = () => {
   </Story>
 </Preview>
 
+### Disabled ListItem
+
+<Preview>
+  <Story name="Disabled ListItem">
+    <Function>
+      {() => {
+        return (
+          <Box mb={'3'}>
+            <List label={'list'} disabledKeys={['1', '2', '3', '4', '5', '6']}>
+              <ListItem key={'1'} textValue={'Text Only'}>
+                <ListItemText>This text option is disabled</ListItemText>
+              </ListItem>
+              <ListItem key={'3'} textValue={'Option Switch'}>
+                <ListItemText>This Switch Option is disabled</ListItemText>
+                <ListItemAction>
+                  <Switch isDisabled />
+                </ListItemAction>
+              </ListItem>
+              <ListItem key={'4'} rowSize={'compact'} textValue={'Option Icon/Avatar'}>
+                <ListItemAction>
+                  <Avatar size={1} color={'blue'} iconName={'user'} />
+                </ListItemAction>
+                <ListItemText>This Avatar Option is disabled</ListItemText>
+              </ListItem>
+              <ListItem key={'5'} textValue={'Option Checkbox'}>
+                <ListItemAction>
+                  <CheckBox isDisabled isFilled={false} />
+                </ListItemAction>
+                <ListItemText>This Checkbox Option is disabled</ListItemText>
+              </ListItem>
+              <ListItem key={'6'}>
+                <ListItemAction>
+                  <Radio isDisabled />
+                </ListItemAction>
+                <ListItemText>This Radio Option is disabled</ListItemText>
+              </ListItem>
+            </List>
+          </Box>
+        );
+      }}
+    </Function>
+  </Story>
+</Preview>
+
 ### References
 
 All references for a complete `<List>` with all component mentioned throughout the `<List>` section.