refactor: add more examples in usages, fix typos, move spinner to sep…

…arate file

src/static/icons/index.ts

@@ -10,3 +10,4 @@ export { default as IconEyeOpened } from './eye-opened.svg';
 export { default as IconPlus } from './plus.svg';
 export { default as IconSearch } from './search.svg';
 export { default as IconFilledUnchecked } from './check-filled-unchecked.svg';
+export { default as IconSpinner } from './spinner.svg';

src/ui/atoms/loader/example.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Button, ListContainer, ListItem, Loader, Text } from 'ui';
+
+interface User {
+  id: number;
+  name: string;
+}
+
+interface ExampleState {
+  loading: boolean;
+  data: User[] | null;
+}
+
+const initialState: ExampleState = {
+  loading: false,
+  data: null,
+};
+
+export const ExampleDataFetching = () => {
+  const [{ loading, data }, setExampleState] = React.useState<ExampleState>(initialState);
+
+  const handleClick = () => {
+    const loadUsers = async () => {
+      setExampleState((current) => ({ ...current, loading: true }));
+
+      const response = await fetch('https://jsonplaceholder.typicode.com/users').then(
+        (response) => response.json() as Promise<User[]>,
+      );
+      setTimeout(() => {
+        setExampleState({
+          data: response,
+          loading: false,
+        });
+      }, 1500);
+    };
+
+    loadUsers();
+  };
+
+  const reset = () => {
+    setExampleState(initialState);
+  };
+
+  if (loading) {
+    return (
+      <div style={{ width: 300 }}>
+        <Loader
+          variant="primary"
+          description={<Text weight="medium">Fetching users, please wait</Text>}
+        />
+      </div>
+    );
+  }
+
+  if (!data) {
+    return <Button variant="primary" text="Fetch users" onClick={handleClick} />;
+  }
+
+  return (
+    <React.Fragment>
+      <ListContainer variant="primary" style={{ width: '100%' }}>
+        {data.map(({ id, name }) => (
+          <ListItem key={id} as="li" text={name} />
+        ))}
+      </ListContainer>
+      <Button text="Reset" onClick={reset} />
+    </React.Fragment>
+  );
+};

src/ui/atoms/loader/index.tsx

@@ -1,25 +1,24 @@
 import * as React from 'react';
 import styled, { StyledComponent, keyframes } from 'styled-components';
+import { IconSpinner } from 'static/icons';
 import { Variant } from 'lib/types';
 import { box } from 'ui/elements';
 
 interface LoaderProps {
-  description?: string;
+  description?: React.ReactChild;
   className?: string;
 }
 
 const LoaderBase = ({
   description = 'Loading...',
-  variant = 'primary',
+  variant = 'secondary',
   className,
 }: LoaderProps & Variant) => {
   return (
     <div className={className} data-variant={variant}>
       <div data-loader>
-        <svg viewBox="0 0 100 100" data-track>
-          <circle data-spinner cx={50} cy={50} r={45} strokeWidth={10} />
-        </svg>
-        <div data-text>{description}</div>
+        <IconSpinner data-track />
+        <div data-description>{description}</div>
       </div>
     </div>
   );
@@ -59,9 +58,8 @@ const spinnerAnimation = keyframes`
 
 export const Loader = styled(LoaderBase)`
   ${box}
-  --local-size: calc(
-    1px * var(--woly-component-level) * var(--woly-main-level) * 4
-  );
+  --local-track-size: 42px;
+  --local-vertical-gap: 12px;
   --local-track-color: var(--woly-canvas-default);
   --local-spinner-color: var(--woly-shape-default);
 
@@ -80,9 +78,9 @@ export const Loader = styled(LoaderBase)`
   }
 
   [data-track] {
-    width: var(--local-size);
-    height: var(--local-size);
-    margin-bottom: calc(var(--local-gap) * 2);
+    width: var(--local-track-size);
+    height: var(--local-track-size);
+    margin-bottom: var(--local-vertical-gap);
 
     transform-origin: 50% 50%;
 
@@ -96,17 +94,18 @@ export const Loader = styled(LoaderBase)`
 
     animation: 1.4s ease-in-out infinite both ${spinnerAnimation};
 
+    fill: none;
+
     stroke: var(--local-spinner-color);
     stroke-linecap: round;
     stroke-dashoffset: 280;
     stroke-dasharray: 283;
   }
 
-  [data-text] {
+  [data-description] {
     color: var(--woly-canvas-text-default);
     font-weight: 400;
-    font-size: var(--woly-font-size);
-    line-height: var(--woly-line-height);
+    font-size: 15px;
     line-height: 21px;
     text-align: center;
   }

src/ui/atoms/loader/usage.mdx

@@ -4,33 +4,42 @@ category: atoms
 package: 'woly'
 ---
 
-import {Loader} from 'ui';
-import {block, Playground} from 'lib/playground'
+import {Loader, Button, Text} from 'ui';
+import {Playground, State} from 'lib/playground';
+import {ExampleDataFetching} from './example';
 
-`Loader` component is used when retrieving data or performing slow computations, and help to notify users that loading is underway..
+`Loader` component is used when retrieving data or performing slow computations and helps to notify users that loading is underway.
 Description text below animated spinner provides more details on the current operation.
 
 Use a `Loader` component whenever the wait time is anticipated to be longer than three seconds.
 
 ### Example
 
 <Playground>
-  <block.H>
-    <div style={{ height: 300 }}>
-      <Loader description="Loading, please wait until all data is loaded" />
-    </div>
-  </block.H>
-  <block.S>
-    <div style={{ height: 100 }}>
-      <Loader variant="secondary" />
-    </div>
-  </block.S>
+  <State initial={false} change={(i) => !i}>
+    {(value, change) => (
+      <React.Fragment>
+        <Button text="Toggle loader" onClick={change} />
+        {value ? (
+          <div style={{ width: 300 }}>
+            <Loader description={<Text type="S">Some action in progress...</Text>} />
+          </div>
+        ) : null}
+      </React.Fragment>
+    )}
+  </State>
+</Playground>
+
+### Example with data fetching
+
+<Playground>
+  <ExampleDataFetching />
 </Playground>
 
 ### Props
 
-| Name          | Type             | Default      | Description                                     |
-| ------------- | ---------------- | ------------ | ----------------------------------------------- |
-| `description` | `string`         | 'Loading...' | Description text below the animated spinner     |
-| `variant`     | `string`         | `'primary'`  | Variant prop to style Input component           |
-| `...`         | `HTMLDivElement` | `{}`         | Other props are inherited from `HTMLDivElement` |
+| Name          | Type             | Default       | Description                                     |
+| ------------- | ---------------- | ------------- | ----------------------------------------------- |
+| `description` | `string`         | 'Loading...'  | Description text below the animated spinner     |
+| `variant`     | `string`         | `'secondary'` | Variant prop to style Loader component          |
+| `...`         | `HTMLDivElement` | `{}`          | Other props are inherited from `HTMLDivElement` |