@tactics/toddle-styleguide 5.3.1 → 5.4.0

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

@@ -1,113 +0,0 @@
-// 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.test.js

@@ -1,16 +0,0 @@
-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/paragraph/__snapshots__/paragraph.test.js.snap

@@ -1,121 +0,0 @@
-// 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.test.js

@@ -1,76 +0,0 @@
-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/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.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>
-`;