@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/src/components/List/List.tsx

@@ -4,7 +4,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Card } from '../Card';
 import { ListContext } from './List.context';
 import type ListProps from './List.props';
-import { ListHeading } from './ListHeading';
+import { SectionHeader } from '../SectionHeader';
 import { ListItem, ListItemProps } from './ListItem';
 
 const markFirstListItem = (children: ReactNode): ViewProps['children'] => {
@@ -43,26 +43,27 @@ const markFirstListItem = (children: ReactNode): ViewProps['children'] => {
 
 const List = ({
   children,
-  headingText,
-  headingHelperText,
-  headingLinkText,
-  headingLinkHref,
-  headingLinkOnPress,
-  headingLinkTarget,
-  headingLinkDisabled,
-  headingLinkIcon,
-  headingLinkIconPosition,
-  headingLinkShowIcon,
+  heading,
+  helperText,
+  linkText,
+  linkHref,
+  linkIcon,
+  linkIconPosition,
+  linkOnPress,
+  linkTarget,
+  linkShowIcon,
   ...props
 }: ListProps) => {
   const { loading, disabled, divider = true, container = 'none' } = props;
   const containerToCard: {
     variant: 'subtle' | 'emphasis';
-    colorScheme: 'white' | 'warmWhite';
+    colorScheme: 'neutralStrong' | 'neutralSubtle';
   } = {
     variant: container === 'subtleWhite' || container === 'subtleWarmWhite' ? 'subtle' : 'emphasis',
     colorScheme:
-      container === 'subtleWhite' || container === 'emphasisWhite' ? 'white' : 'warmWhite',
+      container === 'subtleWhite' || container === 'emphasisWhite'
+        ? 'neutralStrong'
+        : 'neutralSubtle',
   };
   const updatedChildren = markFirstListItem(children);
   const value = useMemo(
@@ -73,18 +74,17 @@ const List = ({
   return (
     <ListContext.Provider value={value}>
       <View {...props} style={[styles.container, props.style]}>
-        {headingText ? (
-          <ListHeading
-            text={headingText}
-            helperText={headingHelperText}
-            linkText={headingLinkText}
-            linkHref={headingLinkHref}
-            linkOnPress={headingLinkOnPress}
-            linkTarget={headingLinkTarget}
-            linkDisabled={headingLinkDisabled}
-            linkIcon={headingLinkIcon}
-            linkIconPosition={headingLinkIconPosition}
-            linkShowIcon={headingLinkShowIcon}
+        {heading ? (
+          <SectionHeader
+            heading={heading}
+            helperText={helperText}
+            linkText={linkText}
+            linkHref={linkHref}
+            linkOnPress={linkOnPress}
+            linkTarget={linkTarget}
+            linkIcon={linkIcon}
+            linkIconPosition={linkIconPosition}
+            linkShowIcon={linkShowIcon}
           />
         ) : null}
         {container === 'none' ? (

package/src/components/List/ListItem/ListItemHelperText.tsx

@@ -14,7 +14,7 @@ ListItemHelperText.displayName = 'ListItemHelperText';
 
 const styles = StyleSheet.create(theme => ({
   text: {
-    color: theme.components.text.colorSecondary,
+    color: theme.color.text.secondary,
   },
 }));
 

package/src/components/List/ListItem/ListItemIcon.tsx

@@ -22,7 +22,7 @@ ListItemIcon.displayName = 'ListItemIcon';
 
 const styles = StyleSheet.create(theme => ({
   icon: {
-    color: theme.components.icon.color,
+    color: theme.color.icon.primary,
     width: 24,
     height: 24,
   },

package/src/components/List/ListItem/ListItemRoot.tsx

@@ -125,8 +125,8 @@ ListItemRoot.displayName = 'ListItemRoot';
 
 const styles = StyleSheet.create(theme => ({
   container: {
-    paddingVertical: theme.components.list.item.padding,
-    paddingHorizontal: theme.components.list.item.padding,
+    paddingVertical: theme.components.list.item.functional.padding,
+    paddingHorizontal: theme.components.list.item.functional.padding,
     flexDirection: 'row',
     gap: theme.components.list.item.gap,
     variants: {
@@ -143,10 +143,10 @@ const styles = StyleSheet.create(theme => ({
       },
       variant: {
         subtle: {
-          borderTopColor: theme.components.list.item.subtle.borderColor,
+          borderTopColor: theme.color.border.subtle,
         },
         emphasis: {
-          borderTopColor: theme.components.list.item.emphasis.borderColor,
+          borderTopColor: theme.color.border.strong,
         },
       },
       disabled: {
@@ -160,7 +160,16 @@ const styles = StyleSheet.create(theme => ({
         },
       },
       showPressed: {
-        true: {},
+        true: {
+          _web: {
+            _hover: {
+              backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+            },
+            _active: {
+              backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+            },
+          },
+        },
         false: {
           cursor: 'auto',
         },
@@ -183,7 +192,7 @@ const styles = StyleSheet.create(theme => ({
         showPressed: true,
         active: true,
         styles: {
-          backgroundColor: theme.components.list.item.backgroundColorActive,
+          backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
         },
       },
     ],

package/src/components/List/ListItem/ListItemTrailingIcon.tsx

@@ -23,7 +23,7 @@ ListItemTrailingIcon.displayName = 'ListItemTrailingIcon';
 
 const styles = StyleSheet.create(theme => ({
   icon: {
-    color: theme.components.icon.color,
+    color: theme.color.icon.primary,
     width: 24,
     height: 24,
   },

package/src/components/List/index.ts

@@ -1,4 +1,3 @@
 export { default as List } from './List';
 export { useListContext } from './List.context';
 export * from './ListItem';
-export * from './ListHeading';