@moda/om 17.13.0 → 17.14.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [17.14.0](https://github.com/ModaOperandi/om/compare/v17.13.0...v17.14.0) (2022-11-15)
+
+
+### Features
+
+* **loading-shapes:** adds the component, imported from discovery and its stories ([#3055](https://github.com/ModaOperandi/om/issues/3055)) ([c242985](https://github.com/ModaOperandi/om/commit/c242985806107cc78e550f030cf0975301067c17))
+
 # [17.13.0](https://github.com/ModaOperandi/om/compare/v17.12.0...v17.13.0) (2022-11-14)
 
 

package/dist/src/components/LoadingShapes/LoadingShapes.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './LoadingShapes.scss';
+export declare const LoadingShapes: () => JSX.Element;

package/dist/src/components/LoadingShapes/LoadingShapes.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/dist/src/components/LoadingShapes/index.d.ts

@@ -0,0 +1 @@
+export * from './LoadingShapes';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "17.13.0",
+  "version": "17.14.0",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/LoadingShapes/LoadingShapes.scss

@@ -0,0 +1,9 @@
+@import '~om';
+
+.LoadingShapes__item--current {
+  // stylelint-disable-next-line plugin/selector-bem-pattern
+  path {
+    fill: color(snow);
+    transition: fill 1s;
+  }
+}

package/src/components/LoadingShapes/LoadingShapes.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { States } from 'storybook-states';
+import { LoadingShapes } from './LoadingShapes';
+
+export default { title: 'Components/LoadingShapes' };
+
+export const Default = () => (
+  <States>
+    <LoadingShapes />
+  </States>
+);

package/src/components/LoadingShapes/LoadingShapes.tsx

@@ -0,0 +1,37 @@
+import classNames from 'classnames';
+import React, { useEffect } from 'react';
+import { useCursor } from 'use-cursor';
+import { ArcWindow, Circle, Diamond, Triangle } from '../Shape';
+import { Stack } from '../Stack';
+
+import './LoadingShapes.scss';
+
+const INTERVAL = 100;
+
+export const LoadingShapes = () => {
+  const items = [Triangle, Diamond, ArcWindow, Circle];
+  const { index, handleNext } = useCursor({ max: items.length });
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      handleNext();
+    }, INTERVAL);
+
+    return () => clearInterval(interval);
+  }, [handleNext]);
+
+  return (
+    <Stack className='LoadingShapes' direction='horizontal' space={2}>
+      {items.map((Item, itemIndex) => (
+        <div
+          className={classNames('LoadingShapes__item', {
+            'LoadingShapes__item--current': itemIndex !== index
+          })}
+          key={itemIndex}
+        >
+          <Item />
+        </div>
+      ))}
+    </Stack>
+  );
+};

package/src/components/LoadingShapes/index.ts

@@ -0,0 +1 @@
+export * from './LoadingShapes';