@tactics/toddle-styleguide 5.0.4 → 5.0.5

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

@@ -0,0 +1,24 @@
+export function Stylesheet(
+  context: any,
+  disabled: any
+): {
+  container: {
+    borderWidth: number;
+    borderColor: any;
+    borderRadius: number;
+    paddingVertical: number;
+    paddingHorizontal: number;
+    minWidth: number;
+    color: any;
+    display: 'flex';
+    alignItems: 'center';
+    justifyContent: 'center';
+    flex: number;
+    backgroundColor: any;
+  };
+  text: {
+    width: 'auto';
+    fontSize: number;
+    color: any;
+  };
+};

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

@@ -0,0 +1,33 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale';
+
+export const Stylesheet = (context, disabled) =>
+  StyleSheet.create({
+    container: {
+      borderWidth: 1,
+      borderColor:
+        disabled === true
+          ? context.colors.ui.xlightgrey
+          : context.colors.main['1'],
+      borderRadius: 20,
+      paddingVertical: Scale.xs,
+      paddingHorizontal: Scale.m,
+      minWidth: Scale.xxxl,
+      color:
+        disabled === true ? context.colors.ui.grey : context.colors.main['2'],
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flex: 0,
+      backgroundColor:
+        disabled === true
+          ? context.colors.ui.xlightgrey
+          : context.colors.ui.white,
+    },
+    text: {
+      width: 'auto',
+      fontSize: Scale.m,
+      color:
+        disabled === true ? context.colors.ui.grey : context.colors.main['2'],
+    },
+  });

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

@@ -0,0 +1,6 @@
+import React from 'react';
+type FooterProps = {
+    children: React.ReactNode;
+};
+declare const Footer: ({ children }: FooterProps) => React.JSX.Element;
+export { Footer as Footer };

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import {useContext} from 'react';
+import {View} from 'react-native';
+
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './footer.styles';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+
+type FooterProps = {
+  children: React.ReactNode;
+};
+
+const Footer = ({children}: FooterProps) => {
+  const context = useContext(ThemeCtx);
+  const insets = useSafeAreaInsets();
+  const styles = Stylesheet(context, insets);
+
+  return (
+    <View
+      style={styles.container}
+      testID="footer-container"
+    >
+      {children}
+    </View>
+  );
+};
+
+export {Footer as Footer};

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

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

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Footer} from './footer.component';
+import {Icon} from '../../../icons/index';
+import {Pressable, View} from 'react-native';
+
+export const FooterPreview = ({}: {}) => {
+  return (
+    <View style={{flex: 1, justifyContent: 'flex-end'}}>
+      <Footer>
+        <Pressable
+          style={{
+            width: 42,
+            height: 42,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+          onPress={() => console.log('pressed icon')}
+        >
+          <Icon style={'regular'} name={'qrcode'} />
+        </Pressable>
+      </Footer>
+    </View>
+  );
+};

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

@@ -0,0 +1,17 @@
+export function Stylesheet(
+  context: any,
+  insets: any
+): {
+  container: {
+    flexDirection: 'row';
+    alignItems: 'center';
+    justifyContent: 'center';
+    backgroundColor: any;
+    borderTopColor: any;
+    borderStyle: 'solid';
+    borderTopWidth: number;
+    minHeight: any;
+    paddingBottom: any;
+    width: '100%';
+  };
+};

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

@@ -0,0 +1,18 @@
+import {Platform, StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context, insets) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: Platform.OS === 'web' ? 'space-around' : 'center',
+      backgroundColor: context.colors.ui.xlightgrey,
+      borderTopColor: context.colors.ui.lightgrey,
+      borderStyle: 'solid',
+      borderTopWidth: 1,
+      minHeight: Scale.xxxl + insets.bottom,
+      paddingBottom: insets.bottom,
+      width: '100%',
+    },
+  });

package/src/components/atoms/heading-components/all-caps-heading/__snapshots__/all-caps-heading.test.js.snap

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test for the all caps heading component should render an all caps heading component, huge font, bold, a custom color and only accepts strings as children 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "textAlignVertical": "bottom",
+          "textTransform": "uppercase",
+        },
+        {
+          "fontFamily": "MontserratBold",
+          "fontSize": 13,
+          "lineHeight": 20.4,
+        },
+      ],
+      {
+        "color": "#888888",
+        "textAlign": undefined,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  All caps heading bold with a specified color
+</Text>
+`;
+
+exports[`Test for the all caps heading component should render an all caps heading component, huge font, bold, and only accepts strings as children 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "textAlignVertical": "bottom",
+          "textTransform": "uppercase",
+        },
+        {
+          "fontFamily": "MontserratBold",
+          "fontSize": 13,
+          "lineHeight": 20.4,
+        },
+      ],
+      {
+        "color": "#1F2933",
+        "textAlign": undefined,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  All caps heading bold
+</Text>
+`;
+
+exports[`Test for the all caps heading component should render an all caps heading component, huge font, not bold, and only accepts strings as children 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "textAlignVertical": "bottom",
+          "textTransform": "uppercase",
+        },
+        {
+          "fontFamily": "Montserrat",
+          "fontSize": 13,
+          "lineHeight": 20.4,
+        },
+      ],
+      {
+        "color": "#1F2933",
+        "textAlign": undefined,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  All caps heading
+</Text>
+`;
+
+exports[`Test for the all caps heading component should render an all caps heading component, huge font, not bold, only accepts strings as children and gets another color 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "textAlignVertical": "bottom",
+          "textTransform": "uppercase",
+        },
+        {
+          "fontFamily": "Montserrat",
+          "fontSize": 13,
+          "lineHeight": 20.4,
+        },
+      ],
+      {
+        "color": "#c2c2c2",
+        "textAlign": undefined,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  All caps heading with a specified color
+</Text>
+`;

package/src/components/atoms/heading-components/all-caps-heading/all-caps-heading.component.d.ts

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

package/src/components/atoms/heading-components/all-caps-heading/all-caps-heading.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 '../heading.styles';
+import {ThemeCtx} from '../../../../context/theme.context';
+
+export const AllCapsHeading = ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  numberOfLines,
+  ellipsizeMode,
+  addStyle,
+}: TextProperties) => {
+  const Context = useContext(ThemeCtx);
+  const styles = Stylesheet(Context, bold, textColor, textAlign);
+
+  return (
+    <Text
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      style={[styles.allCaps, styles.main, addStyle]}
+    >
+      {children}
+    </Text>
+  );
+};

package/src/components/atoms/heading-components/all-caps-heading/all-caps-heading.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {AllCapsHeading} from './all-caps-heading.component';
+
+describe('Test for the all caps heading component', () => {
+  it('should render an all caps heading component, huge font, not bold, and only accepts strings as children', function () {
+    const tree = renderer
+      .create(<AllCapsHeading>All caps heading</AllCapsHeading>)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render an all caps heading component, huge font, not bold, only accepts strings as children and gets another color', function () {
+    const tree = renderer
+      .create(
+        <AllCapsHeading textColor={'#c2c2c2'}>
+          All caps heading with a specified color
+        </AllCapsHeading>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render an all caps heading component, huge font, bold, and only accepts strings as children', function () {
+    const tree = renderer
+      .create(
+        <AllCapsHeading bold={true}>All caps heading bold</AllCapsHeading>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render an all caps heading component, huge font, bold, a custom color and only accepts strings as children', function () {
+    const tree = renderer
+      .create(
+        <AllCapsHeading bold={true} textColor={'#888888'}>
+          All caps heading bold with a specified color
+        </AllCapsHeading>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/heading-components/heading.styles.d.ts

@@ -0,0 +1,48 @@
+export function Stylesheet(
+  Context: any,
+  bold: any,
+  textColor: any,
+  textAlign: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      main: {
+        width: string;
+        textAlign: any;
+        color: any;
+      };
+      heading1: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+      }[];
+      heading2: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+      }[];
+      heading3: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+      }[];
+      heading4: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+      }[];
+      allCaps: (
+        | {
+            textTransform: string;
+            textAlignVertical: string;
+          }
+        | {
+            fontFamily: string;
+            fontSize: number;
+            lineHeight: number;
+            textTransform?: undefined;
+            textAlignVertical?: undefined;
+          }
+      )[];
+    }>;
+import {StyleSheet} from 'react-native';

package/src/components/atoms/heading-components/heading.styles.js

@@ -0,0 +1,63 @@
+import {StyleSheet} from 'react-native';
+import {Font} from '../../../theme/font/index';
+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(),
+    },
+    heading1: [
+      !bold
+        ? {
+            ...Font.huge,
+          }
+        : {
+            ...Font.hugeBold,
+          },
+    ],
+    heading2: [
+      !bold
+        ? {
+            ...Font.big,
+          }
+        : {
+            ...Font.bigBold,
+          },
+    ],
+    heading3: [
+      !bold
+        ? {
+            ...Font.large,
+          }
+        : {
+            ...Font.largeBold,
+          },
+    ],
+    heading4: [
+      !bold
+        ? {
+            ...Font.medium,
+          }
+        : {
+            ...Font.mediumBold,
+          },
+    ],
+    allCaps: [
+      {
+        textTransform: 'uppercase',
+        textAlignVertical: 'bottom',
+      },
+      !bold
+        ? {
+            ...Font.small,
+          }
+        : {
+            ...Font.smallBold,
+          },
+    ],
+  });

package/src/components/atoms/heading-components/heading1/__snapshots__/heading1.test.js.snap

@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test for Heading1 should render a Heading 1 component, huge font, bold 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "fontFamily": "SourceSansProBold",
+          "fontSize": 38,
+          "lineHeight": 47.8,
+        },
+      ],
+      {
+        "color": "#1F2933",
+        "textAlign": undefined,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  Heading 1 bold
+</Text>
+`;
+
+exports[`Test for Heading1 should render a Heading 1 component, huge font, bold and a custom color 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "fontFamily": "SourceSansProBold",
+          "fontSize": 38,
+          "lineHeight": 47.8,
+        },
+      ],
+      {
+        "color": "#888888",
+        "textAlign": undefined,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  Heading 1 bold with a specified color
+</Text>
+`;
+
+exports[`Test for Heading1 should render a Heading 1 component, huge font, bold and a custom color and its alignment is justified 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "fontFamily": "SourceSansProBold",
+          "fontSize": 38,
+          "lineHeight": 47.8,
+        },
+      ],
+      {
+        "color": "#888888",
+        "textAlign": "justify",
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  Heading 1 bold with a specified color
+</Text>
+`;
+
+exports[`Test for Heading1 should render a Heading 1 component, huge font, not bold 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "fontFamily": "SourceSansPro",
+          "fontSize": 38,
+          "lineHeight": 47.8,
+        },
+      ],
+      {
+        "color": "#1F2933",
+        "textAlign": undefined,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  Heading 1 
+</Text>
+`;
+
+exports[`Test for Heading1 should render a Heading 1 component, huge font, not bold and gets another color 1`] = `
+<Text
+  style={
+    [
+      [
+        {
+          "fontFamily": "SourceSansPro",
+          "fontSize": 38,
+          "lineHeight": 47.8,
+        },
+      ],
+      {
+        "color": "#c2c2c2",
+        "textAlign": undefined,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  Heading 1 with a specified color
+</Text>
+`;

package/src/components/atoms/heading-components/heading1/heading1.component.d.ts

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

package/src/components/atoms/heading-components/heading1/heading1.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 '../heading.styles';
+import {ThemeCtx} from '../../../../context/theme.context';
+
+export const Heading1 = ({
+  bold,
+  children,
+  textColor,
+  textAlign,
+  addStyle,
+  ellipsizeMode,
+  numberOfLines,
+}: TextProperties) => {
+  const Context = useContext(ThemeCtx);
+  const styles = Stylesheet(Context, bold, textColor, textAlign);
+
+  return (
+    <Text
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      style={[styles.heading1, styles.main, addStyle]}
+    >
+      {children}
+    </Text>
+  );
+};

package/src/components/atoms/heading-components/heading1/heading1.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {Heading1} from './heading1.component';
+
+describe('Test for Heading1', () => {
+  it('should render a Heading 1 component, huge font, not bold', function () {
+    const tree = renderer.create(<Heading1>Heading 1 </Heading1>).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a Heading 1 component, huge font, not bold and gets another color', function () {
+    const tree = renderer
+      .create(
+        <Heading1 textColor={'#c2c2c2'}>
+          Heading 1 with a specified color
+        </Heading1>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a Heading 1 component, huge font, bold', function () {
+    const tree = renderer
+      .create(<Heading1 bold={true}>Heading 1 bold</Heading1>)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a Heading 1 component, huge font, bold and a custom color', function () {
+    const tree = renderer
+      .create(
+        <Heading1 bold={true} textColor={'#888888'}>
+          Heading 1 bold with a specified color
+        </Heading1>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a Heading 1 component, huge font, bold and a custom color and its alignment is justified', function () {
+    const tree = renderer
+      .create(
+        <Heading1 bold={true} textColor={'#888888'} textAlign={'justify'}>
+          Heading 1 bold with a specified color
+        </Heading1>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});