@ornikar/kitt-universal 1.0.0 → 1.0.1

package/src/Loader/LargeLoader.tsx

@@ -1,12 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import type { LoaderProps } from './Loader';
-import { Loader } from './Loader';
-
-export interface LargeLoaderProps {
-  color?: LoaderProps['color'];
-}
-
-export function LargeLoader({ color = 'primary' }: LargeLoaderProps): ReactElement {
-  return <Loader color={color} size={60} />;
-}

package/src/Loader/LargeLoader.web.module.css

@@ -1,103 +0,0 @@
-@keyframes LargeLoaderInit {
-  /**
-   * 169.64 is the perimeter of each svg circle with a 27 radius
-   * P = 2 * Pi * radius
-   */
-  0% {
-    stroke-dashoffset: 169.64px;
-  }
-
-  /* Edges needs a px value */
-  100% {
-    /* stylelint-disable */
-    stroke-dashoffset: 0;
-    /* stylelint-enable */
-  }
-}
-
-/** Blaze circle animation **/
-@keyframes LargeLoaderOffset {
-  0% {
-    stroke-dashoffset: 169.64px;
-  }
-
-  /**
-   * 34 equals 20% of this radius and represent the min offset part of the animated circle
-   */
-  100% {
-    stroke-dashoffset: 34px;
-  }
-}
-
-@keyframes LargeLoaderRotation {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.LargeLoader {
-  width: 60px;
-  height: 60px;
-
-  /* Needed to make the animation starting from the top of the circles */
-  transform: scale(-1) rotate(90deg);
-}
-
-.LargeLoader circle,
-.LargeLoader g {
-  transform-origin: center center;
-}
-
-.LargeLoader circle {
-  stroke-width: 3px;
-  stroke-dasharray: 169.64px;
-  stroke-dashoffset: 169.64px;
-  stroke-linecap: round;
-}
-
-.LargeLoaderFill {
-  transform-origin: center center;
-  animation: LargeLoaderRotation 1.8s linear 0.5s infinite;
-}
-.LargeLoaderFill circle {
-  stroke: #4c34e0;
-  animation: LargeLoaderOffset 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s infinite alternate,
-    LargeLoaderRotation 2.16s linear 0.5s infinite;
-}
-
-.LargeLoaderBase circle {
-  stroke: #ccc;
-  animation: LargeLoaderInit 1s cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s forwards;
-}
-
-/*
- * Targets IE 11
- */
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .LargeLoader svg {
-    display: none;
-  }
-
-  .LargeLoader {
-    border-radius: 50%;
-  }
-
-  .LargeLoader::after {
-    content: '';
-    left: 0;
-    top: 0;
-    width: calc(100% - 6px);
-    height: calc(100% - 6px);
-    border-radius: 50%;
-    display: block;
-    position: absolute;
-    animation: rotation 2s linear 0.5s infinite;
-    border: 3px solid #4c34e0;
-    border-bottom-color: #ccc;
-    transform-origin: center center;
-  }
-}

package/src/Loader/LargeLoader.web.module.css.d.ts

@@ -1,11 +0,0 @@
-declare const styles: {
-  readonly "LargeLoader": string;
-  readonly "LargeLoaderFill": string;
-  readonly "LargeLoaderRotation": string;
-  readonly "LargeLoaderOffset": string;
-  readonly "LargeLoaderBase": string;
-  readonly "LargeLoaderInit": string;
-  readonly "rotation": string;
-};
-export = styles;
-

package/src/Loader/LargeLoader.web.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { renderWithProviders } from '../utils/tests/renderWithProvidersUtils';
-import { LargeLoader } from './LargeLoader.web';
-
-describe('LargeLoader web', () => {
-  it('should render LargeLoader', () => {
-    const largeLoader = renderWithProviders(<LargeLoader />);
-    expect(largeLoader).toMatchSnapshot();
-  });
-});

package/src/Loader/LargeLoader.web.tsx

@@ -1,18 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import styles from './LargeLoader.web.module.css';
-
-export function LargeLoader(props: Record<string, never>): ReactElement {
-  return (
-    <div className={styles.LargeLoader}>
-      <svg width="60" height="60">
-        <g className={styles.LargeLoaderBase}>
-          <circle cx="30" cy="30" r="27" fill="none" />
-        </g>
-        <g className={styles.LargeLoaderFill}>
-          <circle cx="30" cy="30" r="27" fill="none" />
-        </g>
-      </svg>
-    </div>
-  );
-}

package/src/Loader/Loader.stories.tsx

@@ -1,47 +0,0 @@
-import { storiesOf } from '@storybook/react-native';
-import { Section, Story, StoryGrid } from '@ornikar/kitt-universal';
-import React from 'react';
-import { LargeLoader } from './LargeLoader';
-import { Loader } from './Loader';
-
-storiesOf('kitt-universal/Feedback', module).add(
-  'Loader',
-  () => (
-    <Story title="Loader">
-      <Section.DemoSection>
-        <Loader color="primary" />
-      </Section.DemoSection>
-
-      <Section title="Color">
-        <StoryGrid.Row>
-          {(['primary', 'black-light'] as const).map((color) => (
-            <StoryGrid.Col key={color} title={color}>
-              <Loader color={color} />
-            </StoryGrid.Col>
-          ))}
-        </StoryGrid.Row>
-      </Section>
-
-      <Section title="Size">
-        <StoryGrid.Row>
-          {([undefined, 40, 60, 80] as const).map((size) => (
-            <StoryGrid.Col key={size || 'default'} title={size ? `${size}` : 'default'}>
-              <Loader color="primary" size={size} />
-            </StoryGrid.Col>
-          ))}
-        </StoryGrid.Row>
-      </Section>
-
-      <Section title="Large Loader">
-        <LargeLoader />
-      </Section>
-    </Story>
-  ),
-  {
-    jest: {
-      createBeforeAfterEachCallbacks: () => ({
-        before: () => jest.useFakeTimers(),
-      }),
-    },
-  },
-);

package/src/Loader/Loader.tsx

@@ -1,21 +0,0 @@
-import type { ReactElement } from 'react';
-import React from 'react';
-import { ActivityIndicator, Platform } from 'react-native';
-import { useTheme } from 'styled-components/native';
-import type { TypographyIconProps } from '../typography/TypographyIcon';
-
-export interface LoaderProps {
-  color?: TypographyIconProps['color'];
-  size?: TypographyIconProps['size'];
-}
-
-function getActivityIndicatorSize(size: number): number | 'small' | 'large' {
-  if (Platform.OS === 'android') return size;
-  return size < 36 ? 'small' : 'large';
-}
-
-export function Loader({ color = 'primary', size = 20 }: LoaderProps): ReactElement {
-  const theme = useTheme();
-  const colorHex = theme.kitt.typography.colors[color];
-  return <ActivityIndicator testID="ActivityIndicator" color={colorHex} size={getActivityIndicatorSize(size)} />;
-}

package/src/Loader/Loader.web.test.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { renderWithProviders } from '../utils/tests/renderWithProvidersUtils';
-import { Loader } from './Loader.web';
-
-describe('Loader web', () => {
-  it('should render Loader with no props', () => {
-    const largeLoader = renderWithProviders(<Loader />);
-    expect(largeLoader).toMatchSnapshot();
-  });
-
-  it('should render Loader with black color', () => {
-    const largeLoader = renderWithProviders(<Loader color="black" />);
-    expect(largeLoader).toMatchSnapshot();
-  });
-
-  it('should render Loader with 80 size', () => {
-    const largeLoader = renderWithProviders(<Loader size={80} />);
-    expect(largeLoader).toMatchSnapshot();
-  });
-});

package/src/Loader/Loader.web.tsx

@@ -1,14 +0,0 @@
-import { LoaderIcon } from '@ornikar/kitt-icons';
-import type { ReactElement } from 'react';
-import React from 'react';
-import type { TypographyIconProps } from '../typography/TypographyIcon';
-import { TypographyIcon } from '../typography/TypographyIcon';
-
-export interface LoaderProps {
-  color?: TypographyIconProps['color'];
-  size?: TypographyIconProps['size'];
-}
-
-export function Loader({ color = 'primary', size = 20 }: LoaderProps): ReactElement {
-  return <TypographyIcon spin color={color} size={size} icon={<LoaderIcon />} />;
-}

package/src/Loader/__snapshots__/LargeLoader.web.test.tsx.snap

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LargeLoader web should render LargeLoader 1`] = `
-<div
-  className="LargeLoader"
->
-  <svg
-    height="60"
-    width="60"
-  >
-    <g
-      className="LargeLoaderBase"
-    >
-      <circle
-        cx="30"
-        cy="30"
-        fill="none"
-        r="27"
-      />
-    </g>
-    <g
-      className="LargeLoaderFill"
-    >
-      <circle
-        cx="30"
-        cy="30"
-        fill="none"
-        r="27"
-      />
-    </g>
-  </svg>
-</div>
-`;