@tactics/toddle-styleguide 5.0.1 → 5.0.2

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

@@ -1,94 +0,0 @@
-import React from 'react';
-import {Paragraph} from './paragraph/paragraph.component';
-import {SmallText} from './small-text/small-text.component';
-import {TinyText} from './tiny-text/tiny-text.component';
-import {SafeAreaView, ScrollView, Text} from 'react-native';
-
-export const ParagraphComponentsPreview = ({}: {}) => {
-  return (
-    <SafeAreaView style={{flex: 1, padding: 16}}>
-      <ScrollView>
-        {/*
-       //// PARAGRAPH ////
-       */}
-        <Text
-          style={{
-            fontSize: 24,
-            fontWeight: 'bold',
-            textDecorationLine: 'underline',
-          }}
-        >
-          Paragraphs
-          {'\n'}
-        </Text>
-        <Paragraph>
-          Why did the paragraph component in React Native have trouble sleeping
-          at night?
-          {'\n'}
-        </Paragraph>
-        <Paragraph bold={true}>
-          Because it was always worried about keeping its text alignment!
-          {'\n'}
-          {'\n'}
-        </Paragraph>
-        <Paragraph bold={true} textColor={'#0077c9'}>
-          Why do web developers always mix up their HTML tags?
-          {'\n'}
-        </Paragraph>
-        <Paragraph textColor={'#FF0000'} textAlign={'right'}>
-          Because they always get their head and body tags mixed up!
-        </Paragraph>
-        {/*
-       //// SMALL TEXT ////
-       */}
-        <Text
-          style={{
-            fontSize: 24,
-            fontWeight: 'bold',
-            textDecorationLine: 'underline',
-          }}
-        >
-          Small text
-          {'\n'}
-        </Text>
-        <SmallText>
-          Why did the small man put his money in the freezer?{'\n'}
-        </SmallText>
-        <SmallText bold={true} textAlign={'right'}>
-          So he could have cold hard cash!{'\n'}
-          {'\n'}
-        </SmallText>
-        <SmallText textColor={'#4f14b3'}>
-          Why did the small bird go to school?{'\n'}
-        </SmallText>
-        <SmallText textColor={'#ff353d'} bold={true} textAlign={'center'}>
-          To learn big words!{'\n'}
-        </SmallText>
-        {/*
-       //// TINY TEXT ////
-       */}
-        <Text
-          style={{
-            fontSize: 24,
-            fontWeight: 'bold',
-            textDecorationLine: 'underline',
-          }}
-        >
-          Tiny text
-          {'\n'}
-        </Text>
-        <TinyText>Why did the tiny mouse join a band?{'\n'}</TinyText>
-        <TinyText bold={true} textAlign={'right'}>
-          Because it wanted to play the big drum!{'\n'}
-          {'\n'}
-        </TinyText>
-        <TinyText textColor={'#4f14b3'}>
-          Why did the tiny dog always bark?{'\n'}
-        </TinyText>
-        <TinyText textColor={'#ff353d'} bold={true} textAlign={'center'}>
-          Because it had a big bark and a small bite!
-        </TinyText>
-      </ScrollView>
-    </SafeAreaView>
-  );
-};

package/src/components/atoms/paragraph-components/paragraph-text.styles.d.ts

@@ -1,30 +0,0 @@
-export function Stylesheet(
-  Context: any,
-  bold: any,
-  textColor: any,
-  textAlign: any
-):
-  | StyleSheet.NamedStyles<any>
-  | StyleSheet.NamedStyles<{
-      main: {
-        width: string;
-        textAlign: any;
-        color: any;
-      };
-      paragraph: {
-        fontFamily: string;
-        fontSize: number;
-        lineHeight: number;
-      }[];
-      smallText: {
-        fontFamily: string;
-        fontSize: number;
-        lineHeight: number;
-      }[];
-      tinyText: {
-        fontFamily: string;
-        fontSize: number;
-        lineHeight: number;
-      }[];
-    }>;
-import {StyleSheet} from 'react-native';

package/src/components/atoms/paragraph-components/paragraph-text.styles.js

@@ -1,41 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Font} from '../../../theme/font';
-import {HexColor} from '../../../models/hex-color.model';
-
-export const Stylesheet = (Context, bold, textColor, textAlign) =>
-  StyleSheet.create({
-    main: {
-      width: '100%',
-      textAlign: textAlign,
-      color: !textColor
-        ? Context.colors.ui.black
-        : HexColor.of(textColor).toString(),
-    },
-    paragraph: [
-      !bold
-        ? {
-            ...Font.regular,
-          }
-        : {
-            ...Font.regularBold,
-          },
-    ],
-    smallText: [
-      !bold
-        ? {
-            ...Font.small,
-          }
-        : {
-            ...Font.smallBold,
-          },
-    ],
-    tinyText: [
-      !bold
-        ? {
-            ...Font.tiny,
-          }
-        : {
-            ...Font.tinyBold,
-          },
-    ],
-  });

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

@@ -1,121 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tests for the small text component should render a small text component, regular font, bold, a custom color and aligned to the right 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "MontserratBold",
-          "fontSize": 13,
-          "lineHeight": 20.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 small text component should render a small text component, regular font, bold, a custom color and no specific alignment 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "MontserratBold",
-          "fontSize": 13,
-          "lineHeight": 20.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 small text component should render a small text component, regular font, bold, no specific color and no alignment 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "MontserratBold",
-          "fontSize": 13,
-          "lineHeight": 20.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 small text component should render a small text component, regular font, not bold, no textAlignment, no specified color 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "Montserrat",
-          "fontSize": 13,
-          "lineHeight": 20.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 small text component should render a small text component, regular font, not bold, with a self defined text color 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "Montserrat",
-          "fontSize": 13,
-          "lineHeight": 20.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/small-text/small-text.component.d.ts

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

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

@@ -1,28 +0,0 @@
-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 SmallText = ({
-  bold,
-  textColor,
-  textAlign,
-  children,
-  addStyle,
-  ellipsizeMode,
-  numberOfLines,
-}: TextProperties) => {
-  const Context = useContext(ThemeCtx);
-  const styles = Stylesheet(Context, bold, textColor, textAlign);
-
-  return (
-    <Text
-      style={[styles.smallText, styles.main, addStyle]}
-      ellipsizeMode={ellipsizeMode}
-      numberOfLines={numberOfLines}
-    >
-      {children}
-    </Text>
-  );
-};

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

@@ -1,76 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {SmallText} from './small-text.component';
-
-describe('Tests for the small text component', () => {
-  it('should render a small text component, regular font, not bold, no textAlignment, no specified color', function () {
-    const tree = renderer
-      .create(
-        <SmallText>
-          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.
-        </SmallText>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a small text component, regular font, not bold, with a self defined text color', function () {
-    const tree = renderer
-      .create(
-        <SmallText 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.
-        </SmallText>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a small text component, regular font, bold, no specific color and no alignment', function () {
-    const tree = renderer
-      .create(
-        <SmallText 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.
-        </SmallText>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a small text component, regular font, bold, a custom color and no specific alignment', function () {
-    const tree = renderer
-      .create(
-        <SmallText 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.
-        </SmallText>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a small text component, regular font, bold, a custom color and aligned to the right', function () {
-    const tree = renderer
-      .create(
-        <SmallText 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.
-        </SmallText>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

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

@@ -1,121 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tests for the tiny text component should render a tiny text component, regular font, bold, a custom color and aligned to the right 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "MontserratBold",
-          "fontSize": 11,
-          "lineHeight": 17.9,
-        },
-      ],
-      {
-        "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 tiny text component should render a tiny text component, regular font, bold, a custom color and no specific alignment 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "MontserratBold",
-          "fontSize": 11,
-          "lineHeight": 17.9,
-        },
-      ],
-      {
-        "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 tiny text component should render a tiny text component, regular font, bold, no specific color and no alignment 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "MontserratBold",
-          "fontSize": 11,
-          "lineHeight": 17.9,
-        },
-      ],
-      {
-        "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 tiny text component should render a tiny text component, regular font, not bold, no textAlignment, no specified color 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "Montserrat",
-          "fontSize": 11,
-          "lineHeight": 17.9,
-        },
-      ],
-      {
-        "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 tiny text component should render a tiny text component, regular font, not bold, with a self defined text color 1`] = `
-<Text
-  style={
-    [
-      [
-        {
-          "fontFamily": "Montserrat",
-          "fontSize": 11,
-          "lineHeight": 17.9,
-        },
-      ],
-      {
-        "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/tiny-text/tiny-text.component.d.ts

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

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

@@ -1,28 +0,0 @@
-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 TinyText = ({
-  bold,
-  children,
-  textColor,
-  textAlign,
-  addStyle,
-  numberOfLines,
-  ellipsizeMode,
-}: TextProperties) => {
-  const Context = useContext(ThemeCtx);
-  const styles = Stylesheet(Context, bold, textColor, textAlign);
-
-  return (
-    <Text
-      style={[styles.tinyText, styles.main, addStyle]}
-      numberOfLines={numberOfLines}
-      ellipsizeMode={ellipsizeMode}
-    >
-      {children}
-    </Text>
-  );
-};

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

@@ -1,76 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {TinyText} from './tiny-text.component';
-
-describe('Tests for the tiny text component', () => {
-  it('should render a tiny text component, regular font, not bold, no textAlignment, no specified color', function () {
-    const tree = renderer
-      .create(
-        <TinyText>
-          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.
-        </TinyText>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a tiny text component, regular font, not bold, with a self defined text color', function () {
-    const tree = renderer
-      .create(
-        <TinyText 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.
-        </TinyText>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a tiny text component, regular font, bold, no specific color and no alignment', function () {
-    const tree = renderer
-      .create(
-        <TinyText 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.
-        </TinyText>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a tiny text component, regular font, bold, a custom color and no specific alignment', function () {
-    const tree = renderer
-      .create(
-        <TinyText 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.
-        </TinyText>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('should render a tiny text component, regular font, bold, a custom color and aligned to the right', function () {
-    const tree = renderer
-      .create(
-        <TinyText 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.
-        </TinyText>
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});