feat(fieldset): add fieldset component

example/src/examples/FieldsetExample.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { Panel, Fieldset } from 'react95-native';
+
+const DividerExample = () => {
+  return (
+    <Panel style={{ flex: 1, padding: 20 }}>
+      <Text style={{ marginBottom: 20 }}>Default</Text>
+      <Fieldset label='Name:'>
+        <Text style={[{ fontSize: 16 }]}>Some text here</Text>
+      </Fieldset>
+      <Fieldset>
+        <Text style={[{ fontSize: 16 }]}>No label here</Text>
+      </Fieldset>
+    </Panel>
+  );
+};
+
+export default DividerExample;

example/src/examples/index.tsx

@@ -7,6 +7,7 @@ import TextExample from './TextExample';
 import DividerExample from './DividerExample';
 import CheckboxExample from './CheckboxExample';
 import WindowExample from './WindowExample';
+import FieldsetExample from './FieldsetExample';
 
 export default [
   { name: 'ButtonExample', component: ButtonExample, title: 'Button' },
@@ -18,6 +19,7 @@ export default [
   { name: 'DividerExample', component: DividerExample, title: 'Divider' },
   { name: 'CheckboxExample', component: CheckboxExample, title: 'Checkbox' },
   { name: 'WindowExample', component: WindowExample, title: 'Window' },
+  { name: 'FieldsetExample', component: FieldsetExample, title: 'Fieldset' },
 ].sort((a, b) => {
   /* Sort screens alphabetically */
   if (a.title < b.title) return -1;

src/Fieldset/Fieldset.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { original as theme } from '../common/themes';
+import { Border } from '../common/styleElements';
+
+export const testId = 'fieldset';
+
+type Props = {
+  label: React.ReactNode;
+  children: React.ReactNode;
+  style?: Object;
+};
+
+const Fieldset = ({ children, label, style = {} }: Props) => {
+  return (
+    <View style={[styles.wrapper, style]} testID={testId}>
+      <Border
+        variant='well'
+        invert
+        style={[
+          { marginLeft: 2, marginRight: 2, marginTop: 2, marginBottom: 2 },
+        ]}
+      />
+      <Border variant='well' />
+      {/* TODO: allow passing components to label (see web react95 checkbox example) */}
+      {label && <Text style={[styles.label]}>{label}</Text>}
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    marginTop: 8,
+    padding: 12,
+  },
+  label: {
+    position: 'absolute',
+    top: 0,
+    left: 8,
+    // TODO: how to properly center the label?
+    transform: [{ translateY: -8 }],
+    paddingHorizontal: 8,
+    backgroundColor: theme.material,
+    fontSize: 16,
+    lineHeight: 16,
+  },
+});
+
+export default Fieldset;

src/Fieldset/index.ts

@@ -0,0 +1 @@
+export { default } from './Fieldset';

src/common/styleElements.tsx

@@ -9,11 +9,13 @@ import { border } from './styles';
 type BorderProps = {
   invert?: boolean;
   variant?: 'default' | 'well' | 'outside' | 'cutout';
+  style?: object;
 };
 
 export const Border = ({
   invert = false,
   variant = 'default',
+  style = {},
 }: BorderProps) => {
   const wrapper = [];
   let outer;
@@ -34,7 +36,14 @@ export const Border = ({
 
   const sharedStyles = [borderStyles.position];
   return (
-    <View style={[sharedStyles, invert ? borderStyles.invert : {}, ...wrapper]}>
+    <View
+      style={[
+        sharedStyles,
+        invert ? borderStyles.invert : {},
+        ...wrapper,
+        style,
+      ]}
+    >
       {outer && (
         <View style={[sharedStyles, ...outer]}>
           {inner && <View style={[sharedStyles, ...inner]} />}

src/index.ts

@@ -7,5 +7,6 @@ export { default as Cutout } from './Cutout';
 export { default as Window } from './Window';
 export { default as Divider } from './Divider';
 export { default as Checkbox } from './Checkbox';
+export { default as Fieldset } from './Fieldset';
 
 export * from './common/themes';