feat(card): add Card component

example/src/ExamplesScreen.tsx

@@ -34,7 +34,7 @@ const ExamplesScreen = () => {
       </ScrollPanel>
       <Panel variant='outside' style={styles.panel}>
         <Divider />
-        <Cutout style={styles.cutout}>
+        <Cutout style={[styles.cutout, {backgroundColor: currentTheme.canvas}]}>
           <ScrollView
             style={styles.scrollView}
             contentContainerStyle={styles.content}
@@ -91,7 +91,6 @@ const styles = StyleSheet.create({
     paddingTop: 12,
   },
   cutout: {
-    backgroundColor: 'white',
     flexGrow: 1,
     marginTop: 8,
   },

example/src/examples/CardExample.tsx

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+import { Card, Text } from 'react95-native';
+
+import Container from '../util/Container';
+import { LocalThemeContext } from '../util/LocalThemeContext';
+
+const TextExample = () => {
+  const { theme } = useContext(LocalThemeContext);
+  return (
+    <Container style={[{ backgroundColor: theme.materialDark }]}>
+      <Container.Section title='Default:'>
+        <Card style={[{ height: 300 }]}>
+          <Card.Content>
+            <Text>Simple text</Text>
+          </Card.Content>
+        </Card>
+      </Container.Section>
+
+      <Container.Section title='High elevation:'>
+        <Card elevation={8} style={[{ height: 100 }]}>
+          <Card.Content>
+            <Text>Simple text</Text>
+          </Card.Content>
+        </Card>
+      </Container.Section>
+
+      <Container.Section title='No elevation:'>
+        <Card elevation={0} style={[{ height: 100 }]}>
+          <Card.Content>
+            <Text linkUrl='https://react95.io'>React95 website</Text>
+          </Card.Content>
+        </Card>
+      </Container.Section>
+    </Container>
+  );
+};
+
+export default TextExample;

example/src/examples/index.tsx

@@ -1,5 +1,6 @@
 import AppBarExample from './AppBarExample';
 import ButtonExample from './ButtonExample';
+import CardExample from './CardExample';
 import CheckboxExample from './CheckboxExample';
 import CutoutExample from './CutoutExample';
 import DesktopExample from './DesktopExample';
@@ -52,6 +53,7 @@ export default [
     title: 'Layout',
     items: [
       { name: 'AppBarExample', component: AppBarExample, title: 'AppBar' },
+      { name: 'CardExample', component: CardExample, title: 'Card' },
       { name: 'CutoutExample', component: CutoutExample, title: 'Cutout' },
       {
         name: 'DividerExample',

example/src/util/Container.tsx

@@ -23,10 +23,11 @@ const styles = StyleSheet.create({
 
 type ContainerProps = {
   children: React.ReactNode;
+  style: any
 };
 
-const Container = ({ children }: ContainerProps) => (
-  <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+const Container = ({ children, style }: ContainerProps) => (
+  <ScrollView style={[styles.container, style]} contentContainerStyle={styles.content}>
     {children}
   </ScrollView>
 );

src/Card/Card.tsx

@@ -0,0 +1,75 @@
+import React, { useContext } from 'react';
+import { StyleProp, StyleSheet, ViewStyle, View } from 'react-native';
+import { ThemeContext } from '../common/theming/Theme';
+
+import CardContent from './CardContent';
+
+type Props = {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  elevation?: number;
+};
+
+const Card = ({ children, style = {}, elevation = 2 }: Props) => {
+  const theme = useContext(ThemeContext);
+  return (
+    <View style={[styles.wrapper, style]}>
+      <View
+        style={[
+          styles.inner,
+          {
+            marginRight: elevation,
+            marginBottom: elevation,
+          },
+        ]}
+      >
+        {elevation !== 0 && (
+          <View
+            style={[
+              styles.shadow,
+              {
+                top: elevation,
+                left: elevation,
+                width: '100%',
+                height: '100%',
+                backgroundColor: theme.borderDarkest,
+              },
+            ]}
+          />
+        )}
+        <View
+          style={[
+            styles.card,
+            {
+              backgroundColor: theme.canvas,
+              borderColor: theme.borderDarkest,
+            },
+          ]}
+        >
+          {children}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    position: 'relative',
+  },
+  inner: {
+    flexGrow: 1,
+  },
+  card: {
+    borderWidth: 2,
+    flexGrow: 1,
+  },
+  shadow: {
+    position: 'absolute',
+  },
+});
+
+Card.Content = CardContent;
+
+export default Card;

src/Card/CardContent.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { StyleProp, StyleSheet, ViewStyle, View } from 'react-native';
+
+type Props = {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const CardContent = ({ children, style = {} }: Props) => {
+  return (
+    <View style={[styles.wrapper, style]}>
+        {children}
+    </View>
+  );
+};
+
+
+
+const styles = StyleSheet.create({
+  wrapper: {
+    padding: 8,
+  },
+});
+
+export default CardContent;

src/Card/index.ts

@@ -0,0 +1 @@
+export default from './Card';

src/index.ts

@@ -18,5 +18,6 @@ export { default as ScrollView } from './ScrollView';
 export { default as Hourglass } from './Hourglass';
 export { default as List } from './List';
 export { default as ScrollPanel } from './ScrollPanel';
+export { default as Card } from './Card';
 
 export * from './common/theming';