@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/components/atoms/increment-input/increment-input.styles.d.ts

@@ -0,0 +1,35 @@
+export function Stylesheet(Context: any): {
+  container: {
+    width: '100%';
+    flexDirection: 'row';
+    alignItems: 'center';
+  };
+  buttonContainer: {
+    width: number;
+    height: number;
+    backgroundColor: any;
+    alignItems: 'center';
+    justifyContent: 'center';
+    borderRadius: number;
+  };
+  numberContainer: {
+    width: number;
+    height: number;
+    display: 'flex';
+    justifyContent: 'center';
+    alignItems: 'center';
+    marginRight: number;
+    marginLeft: number;
+    backgroundColor: any;
+    borderWidth: number;
+    borderStyle: 'solid';
+    borderColor: any;
+    borderRadius: number;
+  };
+  number: {
+    textAlignVertical: 'center';
+    justifyContent: 'center';
+    alignItems: 'center';
+    display: 'flex';
+  };
+};

package/src/components/atoms/increment-input/increment-input.styles.js

@@ -0,0 +1,39 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    buttonContainer: {
+      width: Scale.xl,
+      height: Scale.xl,
+      backgroundColor: Context.colors.main['0'],
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 50,
+    },
+    numberContainer: {
+      width: Scale.xxl,
+      height: Scale.xxl,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: Scale.xs,
+      marginLeft: Scale.xs,
+      backgroundColor: Context.colors.ui.white,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: Context.colors.ui.lightgrey,
+      borderRadius: Scale.xs,
+    },
+    number: {
+      textAlignVertical: 'center',
+      justifyContent: 'center',
+      alignItems: 'center',
+      display: 'flex',
+    },
+  });

package/src/components/atoms/increment-input/increment-input.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {IncrementInput} from './increment-input.component';
+
+describe('Increment input test', () => {
+  it('renders an increment input component', function () {
+    const tree = render
+      .create(
+        <IncrementInput value={0} onPress={() => console.log('change value')} />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/line/line.component.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+type Orientation = 'horizontal' | 'vertical';
+interface LineProps {
+    color?: string;
+    thickness?: number;
+    orientation?: Orientation;
+}
+export declare const Line: ({ color, thickness, orientation, }: LineProps) => React.JSX.Element;
+export {};

package/src/components/atoms/line/line.component.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {View} from 'react-native';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './line.styles';
+
+type Orientation = 'horizontal' | 'vertical';
+
+interface LineProps {
+  color?: string;
+  thickness?: number;
+  orientation?: Orientation;
+}
+
+export const Line = ({
+  color,
+  thickness = 1,
+  orientation = 'horizontal',
+}: LineProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, color, orientation, thickness);
+  return <View style={styles.container} />;
+};

package/src/components/atoms/line/line.preview.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LinePreview: () => React.JSX.Element;

package/src/components/atoms/line/line.preview.tsx

@@ -0,0 +1,55 @@
+import {View} from 'react-native';
+import {Line} from './line.component';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import React from 'react';
+
+export const LinePreview = () => {
+  const context = useContext(ThemeCtx);
+  return (
+    <View style={{flex: 1, gap: 24, padding: 32, backgroundColor: 'white'}}>
+      <Line />
+      <Line
+        color={context.colors.main[5]}
+        orientation={'horizontal'}
+        thickness={2}
+      />
+      <Line
+        color={context.colors.main[9]}
+        orientation={'horizontal'}
+        thickness={3}
+      />
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          justifyContent: 'space-around',
+          alignItems: 'center',
+        }}
+      >
+        <Line
+          color={context.colors.main[7]}
+          orientation={'vertical'}
+          thickness={14}
+        />
+        <Line
+          color={context.colors.main[0]}
+          orientation={'vertical'}
+          thickness={6}
+        />
+      </View>
+      <View style={{flex: 1, gap: 24}}>
+        <Line
+          color={context.colors.main[5]}
+          orientation={'horizontal'}
+          thickness={6}
+        />
+        <Line
+          color={context.colors.main[9]}
+          orientation={'horizontal'}
+          thickness={12}
+        />
+      </View>
+    </View>
+  );
+};

package/src/components/atoms/line/line.styles.d.ts

@@ -0,0 +1,12 @@
+export function Stylesheet(
+  context: any,
+  color: any,
+  orientation: any,
+  thickness: any
+): {
+  container: {
+    backgroundColor: any;
+    height: any;
+    width: any;
+  };
+};

package/src/components/atoms/line/line.styles.js

@@ -0,0 +1,10 @@
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (context, color, orientation, thickness) =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: color ? color : context.colors.ui.xlightgrey,
+      height: orientation === 'horizontal' ? thickness : '100%',
+      width: orientation === 'vertical' ? thickness : '100%',
+    },
+  });

package/src/components/atoms/logo/__snapshots__/logo.test.js.snap

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test logo renders correct when big is true  1`] = `
+<View>
+  <RNSVGSvgView
+    align="xMidYMid"
+    bbHeight="31"
+    bbWidth="142"
+    fill="none"
+    focusable={false}
+    height="31"
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        {
+          "flex": 0,
+          "height": 31,
+          "width": 142,
+        },
+      ]
+    }
+    vbHeight={18}
+    vbWidth={69}
+    width="142"
+  >
+    <RNSVGGroup
+      fill={null}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    >
+      <RNSVGPath
+        d="M0.928125 3.92H6.49612V17H9.73613V3.92H15.3041V0.92H0.928125V3.92ZM17.7094 17.24C21.3574 17.24 23.9494 14.672 23.9494 11C23.9494 7.352 21.3574 4.76 17.7094 4.76C14.0614 4.76 11.4694 7.352 11.4694 11C11.4694 14.672 14.0614 17.24 17.7094 17.24ZM17.7094 14.36C15.8134 14.36 14.5894 13.04 14.5894 11C14.5894 8.96 15.8134 7.64 17.7094 7.64C19.6054 7.64 20.8294 8.96 20.8294 11C20.8294 13.04 19.6054 14.36 17.7094 14.36ZM30.9047 17.24C32.1047 17.24 33.1607 16.88 34.0247 16.232V17H37.1447V0.92H34.0247V5.768C33.1607 5.12 32.1047 4.76 30.9047 4.76C27.2567 4.76 24.6647 7.352 24.6647 11C24.6647 14.672 27.2567 17.24 30.9047 17.24ZM30.9047 14.36C29.0087 14.36 27.7847 13.04 27.7847 11C27.7847 8.96 29.0087 7.64 30.9047 7.64C32.8007 7.64 34.0247 8.96 34.0247 11C34.0247 13.04 32.8007 14.36 30.9047 14.36ZM44.3344 17.24C45.5344 17.24 46.5904 16.88 47.4544 16.232V17H50.5744V0.92H47.4544V5.768C46.5904 5.12 45.5344 4.76 44.3344 4.76C40.6864 4.76 38.0944 7.352 38.0944 11C38.0944 14.672 40.6864 17.24 44.3344 17.24ZM44.3344 14.36C42.4384 14.36 41.2144 13.04 41.2144 11C41.2144 8.96 42.4384 7.64 44.3344 7.64C46.2304 7.64 47.4544 8.96 47.4544 11C47.4544 13.04 46.2304 14.36 44.3344 14.36ZM54.8841 17V0.92H51.7641V17H54.8841ZM68.3166 11C68.3166 7.352 65.7246 4.76 62.0766 4.76C58.4286 4.76 55.8366 7.352 55.8366 11C55.8366 14.672 58.4286 17.24 62.0766 17.24C64.8606 17.24 67.3086 15.824 67.9086 13.4H64.4526C63.9246 14.24 63.0606 14.48 62.0766 14.48C60.5646 14.48 59.4846 13.616 59.1006 12.2H68.1966C68.2686 11.816 68.3166 11.408 68.3166 11ZM62.0766 7.52C63.4926 7.52 64.5486 8.288 64.9806 9.56H59.1726C59.6046 8.288 60.6606 7.52 62.0766 7.52Z"
+        fill={
+          {
+            "payload": 4280232243,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "fill",
+          ]
+        }
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+</View>
+`;
+
+exports[`test logo renders correctly when colorIsWhite is true 1`] = `
+<View>
+  <RNSVGSvgView
+    align="xMidYMid"
+    bbHeight="18"
+    bbWidth="69"
+    fill="none"
+    focusable={false}
+    height="18"
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        {
+          "flex": 0,
+          "height": 18,
+          "width": 69,
+        },
+      ]
+    }
+    vbHeight={18}
+    vbWidth={69}
+    width="69"
+  >
+    <RNSVGGroup
+      fill={null}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    >
+      <RNSVGPath
+        d="M0.928125 3.92H6.49612V17H9.73613V3.92H15.3041V0.92H0.928125V3.92ZM17.7094 17.24C21.3574 17.24 23.9494 14.672 23.9494 11C23.9494 7.352 21.3574 4.76 17.7094 4.76C14.0614 4.76 11.4694 7.352 11.4694 11C11.4694 14.672 14.0614 17.24 17.7094 17.24ZM17.7094 14.36C15.8134 14.36 14.5894 13.04 14.5894 11C14.5894 8.96 15.8134 7.64 17.7094 7.64C19.6054 7.64 20.8294 8.96 20.8294 11C20.8294 13.04 19.6054 14.36 17.7094 14.36ZM30.9047 17.24C32.1047 17.24 33.1607 16.88 34.0247 16.232V17H37.1447V0.92H34.0247V5.768C33.1607 5.12 32.1047 4.76 30.9047 4.76C27.2567 4.76 24.6647 7.352 24.6647 11C24.6647 14.672 27.2567 17.24 30.9047 17.24ZM30.9047 14.36C29.0087 14.36 27.7847 13.04 27.7847 11C27.7847 8.96 29.0087 7.64 30.9047 7.64C32.8007 7.64 34.0247 8.96 34.0247 11C34.0247 13.04 32.8007 14.36 30.9047 14.36ZM44.3344 17.24C45.5344 17.24 46.5904 16.88 47.4544 16.232V17H50.5744V0.92H47.4544V5.768C46.5904 5.12 45.5344 4.76 44.3344 4.76C40.6864 4.76 38.0944 7.352 38.0944 11C38.0944 14.672 40.6864 17.24 44.3344 17.24ZM44.3344 14.36C42.4384 14.36 41.2144 13.04 41.2144 11C41.2144 8.96 42.4384 7.64 44.3344 7.64C46.2304 7.64 47.4544 8.96 47.4544 11C47.4544 13.04 46.2304 14.36 44.3344 14.36ZM54.8841 17V0.92H51.7641V17H54.8841ZM68.3166 11C68.3166 7.352 65.7246 4.76 62.0766 4.76C58.4286 4.76 55.8366 7.352 55.8366 11C55.8366 14.672 58.4286 17.24 62.0766 17.24C64.8606 17.24 67.3086 15.824 67.9086 13.4H64.4526C63.9246 14.24 63.0606 14.48 62.0766 14.48C60.5646 14.48 59.4846 13.616 59.1006 12.2H68.1966C68.2686 11.816 68.3166 11.408 68.3166 11ZM62.0766 7.52C63.4926 7.52 64.5486 8.288 64.9806 9.56H59.1726C59.6046 8.288 60.6606 7.52 62.0766 7.52Z"
+        fill={
+          {
+            "payload": 4294967295,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "fill",
+          ]
+        }
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+</View>
+`;

package/src/components/atoms/logo/logo.component.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type logoProps = {
+    colorIsWhite?: boolean;
+    big?: boolean;
+};
+declare const Logo: ({ colorIsWhite, big }: logoProps) => React.JSX.Element;
+export { Logo as Logo };

package/src/components/atoms/logo/logo.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {View} from 'react-native';
+
+type logoProps = {
+  colorIsWhite?: boolean;
+  big?: boolean;
+};
+
+const Logo = ({colorIsWhite, big}: logoProps) => {
+  const context = useContext(ThemeCtx);
+
+  return big ? (
+    <View>
+      <Svg width="142" height="31" viewBox="0 0 69 18" fill="none">
+        <Path
+          fill={
+            colorIsWhite ? context.colors.ui.white : context.colors.ui.black
+          }
+          d="M0.928125 3.92H6.49612V17H9.73613V3.92H15.3041V0.92H0.928125V3.92ZM17.7094 17.24C21.3574 17.24 23.9494 14.672 23.9494 11C23.9494 7.352 21.3574 4.76 17.7094 4.76C14.0614 4.76 11.4694 7.352 11.4694 11C11.4694 14.672 14.0614 17.24 17.7094 17.24ZM17.7094 14.36C15.8134 14.36 14.5894 13.04 14.5894 11C14.5894 8.96 15.8134 7.64 17.7094 7.64C19.6054 7.64 20.8294 8.96 20.8294 11C20.8294 13.04 19.6054 14.36 17.7094 14.36ZM30.9047 17.24C32.1047 17.24 33.1607 16.88 34.0247 16.232V17H37.1447V0.92H34.0247V5.768C33.1607 5.12 32.1047 4.76 30.9047 4.76C27.2567 4.76 24.6647 7.352 24.6647 11C24.6647 14.672 27.2567 17.24 30.9047 17.24ZM30.9047 14.36C29.0087 14.36 27.7847 13.04 27.7847 11C27.7847 8.96 29.0087 7.64 30.9047 7.64C32.8007 7.64 34.0247 8.96 34.0247 11C34.0247 13.04 32.8007 14.36 30.9047 14.36ZM44.3344 17.24C45.5344 17.24 46.5904 16.88 47.4544 16.232V17H50.5744V0.92H47.4544V5.768C46.5904 5.12 45.5344 4.76 44.3344 4.76C40.6864 4.76 38.0944 7.352 38.0944 11C38.0944 14.672 40.6864 17.24 44.3344 17.24ZM44.3344 14.36C42.4384 14.36 41.2144 13.04 41.2144 11C41.2144 8.96 42.4384 7.64 44.3344 7.64C46.2304 7.64 47.4544 8.96 47.4544 11C47.4544 13.04 46.2304 14.36 44.3344 14.36ZM54.8841 17V0.92H51.7641V17H54.8841ZM68.3166 11C68.3166 7.352 65.7246 4.76 62.0766 4.76C58.4286 4.76 55.8366 7.352 55.8366 11C55.8366 14.672 58.4286 17.24 62.0766 17.24C64.8606 17.24 67.3086 15.824 67.9086 13.4H64.4526C63.9246 14.24 63.0606 14.48 62.0766 14.48C60.5646 14.48 59.4846 13.616 59.1006 12.2H68.1966C68.2686 11.816 68.3166 11.408 68.3166 11ZM62.0766 7.52C63.4926 7.52 64.5486 8.288 64.9806 9.56H59.1726C59.6046 8.288 60.6606 7.52 62.0766 7.52Z"
+        />
+      </Svg>
+    </View>
+  ) : (
+    <View>
+      <Svg width="69" height="18" viewBox="0 0 69 18" fill="none">
+        <Path
+          fill={
+            colorIsWhite ? context.colors.ui.white : context.colors.ui.black
+          }
+          d="M0.928125 3.92H6.49612V17H9.73613V3.92H15.3041V0.92H0.928125V3.92ZM17.7094 17.24C21.3574 17.24 23.9494 14.672 23.9494 11C23.9494 7.352 21.3574 4.76 17.7094 4.76C14.0614 4.76 11.4694 7.352 11.4694 11C11.4694 14.672 14.0614 17.24 17.7094 17.24ZM17.7094 14.36C15.8134 14.36 14.5894 13.04 14.5894 11C14.5894 8.96 15.8134 7.64 17.7094 7.64C19.6054 7.64 20.8294 8.96 20.8294 11C20.8294 13.04 19.6054 14.36 17.7094 14.36ZM30.9047 17.24C32.1047 17.24 33.1607 16.88 34.0247 16.232V17H37.1447V0.92H34.0247V5.768C33.1607 5.12 32.1047 4.76 30.9047 4.76C27.2567 4.76 24.6647 7.352 24.6647 11C24.6647 14.672 27.2567 17.24 30.9047 17.24ZM30.9047 14.36C29.0087 14.36 27.7847 13.04 27.7847 11C27.7847 8.96 29.0087 7.64 30.9047 7.64C32.8007 7.64 34.0247 8.96 34.0247 11C34.0247 13.04 32.8007 14.36 30.9047 14.36ZM44.3344 17.24C45.5344 17.24 46.5904 16.88 47.4544 16.232V17H50.5744V0.92H47.4544V5.768C46.5904 5.12 45.5344 4.76 44.3344 4.76C40.6864 4.76 38.0944 7.352 38.0944 11C38.0944 14.672 40.6864 17.24 44.3344 17.24ZM44.3344 14.36C42.4384 14.36 41.2144 13.04 41.2144 11C41.2144 8.96 42.4384 7.64 44.3344 7.64C46.2304 7.64 47.4544 8.96 47.4544 11C47.4544 13.04 46.2304 14.36 44.3344 14.36ZM54.8841 17V0.92H51.7641V17H54.8841ZM68.3166 11C68.3166 7.352 65.7246 4.76 62.0766 4.76C58.4286 4.76 55.8366 7.352 55.8366 11C55.8366 14.672 58.4286 17.24 62.0766 17.24C64.8606 17.24 67.3086 15.824 67.9086 13.4H64.4526C63.9246 14.24 63.0606 14.48 62.0766 14.48C60.5646 14.48 59.4846 13.616 59.1006 12.2H68.1966C68.2686 11.816 68.3166 11.408 68.3166 11ZM62.0766 7.52C63.4926 7.52 64.5486 8.288 64.9806 9.56H59.1726C59.6046 8.288 60.6606 7.52 62.0766 7.52Z"
+        />
+      </Svg>
+    </View>
+  );
+};
+export {Logo as Logo};

package/src/components/atoms/logo/logo.preview.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LogoPreview: ({}: {}) => React.JSX.Element;

package/src/components/atoms/logo/logo.preview.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {View} from 'react-native';
+
+import {Logo} from './logo.component';
+
+export const LogoPreview = ({}: {}) => {
+  return (
+    <View>
+      <Logo />
+      <Logo colorIsWhite={true} />
+      <Logo big={true} />
+      <Logo big={true} colorIsWhite={true} />
+    </View>
+  );
+};

package/src/components/atoms/logo/logo.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {Logo} from './logo.component';
+
+describe('test logo', () => {
+  it('renders correctly when colorIsWhite is true', () => {
+    const tree = renderer.create(<Logo colorIsWhite={true} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders correct when big is true ', () => {
+    const tree = renderer.create(<Logo big={true} />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/paragraph-components/index.d.ts

@@ -0,0 +1,4 @@
+import { Paragraph } from './paragraph/paragraph.component';
+import { SmallText } from './small-text/small-text.component';
+import { TinyText } from './tiny-text/tiny-text.component';
+export { Paragraph, SmallText, TinyText };

package/src/components/atoms/paragraph-components/index.tsx

@@ -0,0 +1,5 @@
+import {Paragraph} from './paragraph/paragraph.component';
+import {SmallText} from './small-text/small-text.component';
+import {TinyText} from './tiny-text/tiny-text.component';
+
+export {Paragraph, SmallText, TinyText};

package/src/components/atoms/paragraph-components/paragraph/__snapshots__/paragraph.test.js.snap

@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tests for the paragraph component should render a Paragraph component, regular font, bold, a custom color and aligned to the right 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "fontFamily": "MontserratBold",
+          "fontSize": 14,
+          "lineHeight": 22.4,
+        },
+      ],
+      {
+        "color": "#888888",
+        "textAlign": "right",
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  The sun was setting over the mountains, casting a warm golden glow over the landscape. The sky was painted with shades of pink, orange, and purple, creating a beautiful backdrop for the rolling hills and green fields below.
+</Text>
+`;
+
+exports[`Tests for the paragraph component should render a Paragraph component, regular font, bold, a custom color and no specific alignment 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "fontFamily": "MontserratBold",
+          "fontSize": 14,
+          "lineHeight": 22.4,
+        },
+      ],
+      {
+        "color": "#888888",
+        "textAlign": undefined,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  The sun was setting over the mountains, casting a warm golden glow over the landscape. The sky was painted with shades of pink, orange, and purple, creating a beautiful backdrop for the rolling hills and green fields below.
+</Text>
+`;
+
+exports[`Tests for the paragraph component should render a Paragraph component, regular font, bold, no specific color and no alignment 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "fontFamily": "MontserratBold",
+          "fontSize": 14,
+          "lineHeight": 22.4,
+        },
+      ],
+      {
+        "color": "#1F2933",
+        "textAlign": undefined,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  The sun was setting over the mountains, casting a warm golden glow over the landscape. The sky was painted with shades of pink, orange, and purple, creating a beautiful backdrop for the rolling hills and green fields below.
+</Text>
+`;
+
+exports[`Tests for the paragraph component should render a Paragraph component, regular font, not bold, no textAlignment, no specified color 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "fontFamily": "Montserrat",
+          "fontSize": 14,
+          "lineHeight": 22.4,
+        },
+      ],
+      {
+        "color": "#1F2933",
+        "textAlign": undefined,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  The sun was setting over the mountains, casting a warm golden glow over the landscape. The sky was painted with shades of pink, orange, and purple, creating a beautiful backdrop for the rolling hills and green fields below.
+</Text>
+`;
+
+exports[`Tests for the paragraph component should render a Paragraph component, regular font, not bold, with a self defined text color 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "fontFamily": "Montserrat",
+          "fontSize": 14,
+          "lineHeight": 22.4,
+        },
+      ],
+      {
+        "color": "#c2c2c2",
+        "textAlign": undefined,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  The sun was setting over the mountains, casting a warm golden glow over the landscape. The sky was painted with shades of pink, orange, and purple, creating a beautiful backdrop for the rolling hills and green fields below.
+</Text>
+`;

package/src/components/atoms/paragraph-components/paragraph/paragraph.component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TextProperties } from '../../../../types/text-properties.type';
+export declare const Paragraph: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => React.JSX.Element;

package/src/components/atoms/paragraph-components/paragraph/paragraph.component.tsx

@@ -0,0 +1,28 @@
+import React, {useContext} from 'react';
+import {Text} from 'react-native';
+import {TextProperties} from '../../../../types/text-properties.type';
+import {Stylesheet} from '../paragraph-text.styles';
+import {ThemeCtx} from '../../../../context/theme.context';
+
+export const Paragraph = ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  addStyle,
+  numberOfLines,
+  ellipsizeMode,
+}: TextProperties) => {
+  const Context = useContext(ThemeCtx);
+  const styles = Stylesheet(Context, bold, textColor, textAlign);
+
+  return (
+    <Text
+      style={[styles.paragraph, styles.main, addStyle]}
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+    >
+      {children}
+    </Text>
+  );
+};

package/src/components/atoms/paragraph-components/paragraph/paragraph.test.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {Paragraph} from './paragraph.component';
+
+describe('Tests for the paragraph component', () => {
+  it('should render a Paragraph component, regular font, not bold, no textAlignment, no specified color', function () {
+    const tree = renderer
+      .create(
+        <Paragraph>
+          The sun was setting over the mountains, casting a warm golden glow
+          over the landscape. The sky was painted with shades of pink, orange,
+          and purple, creating a beautiful backdrop for the rolling hills and
+          green fields below.
+        </Paragraph>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a Paragraph component, regular font, not bold, with a self defined text color', function () {
+    const tree = renderer
+      .create(
+        <Paragraph textColor={'#c2c2c2'}>
+          The sun was setting over the mountains, casting a warm golden glow
+          over the landscape. The sky was painted with shades of pink, orange,
+          and purple, creating a beautiful backdrop for the rolling hills and
+          green fields below.
+        </Paragraph>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a Paragraph component, regular font, bold, no specific color and no alignment', function () {
+    const tree = renderer
+      .create(
+        <Paragraph bold={true}>
+          The sun was setting over the mountains, casting a warm golden glow
+          over the landscape. The sky was painted with shades of pink, orange,
+          and purple, creating a beautiful backdrop for the rolling hills and
+          green fields below.
+        </Paragraph>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a Paragraph component, regular font, bold, a custom color and no specific alignment', function () {
+    const tree = renderer
+      .create(
+        <Paragraph bold={true} textColor={'#888888'}>
+          The sun was setting over the mountains, casting a warm golden glow
+          over the landscape. The sky was painted with shades of pink, orange,
+          and purple, creating a beautiful backdrop for the rolling hills and
+          green fields below.
+        </Paragraph>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a Paragraph component, regular font, bold, a custom color and aligned to the right', function () {
+    const tree = renderer
+      .create(
+        <Paragraph bold={true} textColor={'#888888'} textAlign={'right'}>
+          The sun was setting over the mountains, casting a warm golden glow
+          over the landscape. The sky was painted with shades of pink, orange,
+          and purple, creating a beautiful backdrop for the rolling hills and
+          green fields below.
+        </Paragraph>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/paragraph-components/paragraph-components.preview.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ParagraphComponentsPreview: ({}: {}) => React.JSX.Element;