From aef257a925561698c31e2215e91da6d4d2a1b940 Mon Sep 17 00:00:00 2001
From: Braian Mellor <braianj@gmail.com>
Date: Wed, 3 Apr 2024 14:44:28 -0300
Subject: [PATCH] feat: add LoadingText component (#526)

* feat: add LoadingText component

* style: change classname
---
 src/components/Loader/LoadingText.css         | 57 +++++++++++++++++++
 src/components/Loader/LoadingText.stories.css |  5 ++
 src/components/Loader/LoadingText.stories.tsx | 33 +++++++++++
 src/components/Loader/LoadingText.tsx         | 34 +++++++++++
 4 files changed, 129 insertions(+)
 create mode 100644 src/components/Loader/LoadingText.css
 create mode 100644 src/components/Loader/LoadingText.stories.css
 create mode 100644 src/components/Loader/LoadingText.stories.tsx
 create mode 100644 src/components/Loader/LoadingText.tsx

diff --git a/src/components/Loader/LoadingText.css b/src/components/Loader/LoadingText.css
new file mode 100644
index 00000000..d5cd3fd8
--- /dev/null
+++ b/src/components/Loader/LoadingText.css
@@ -0,0 +1,57 @@
+.dui-loading-text.dui-loading-text__small,
+.dui-loading-text.dui-loading-text__medium,
+.dui-loading-text.dui-loading-text__large,
+.dui-loading-text.dui-loading-text__full {
+  background: linear-gradient(
+    110deg,
+    var(--secondary-hover) 8%,
+    var(--secondary) 18%,
+    var(--secondary-hover) 33%
+  );
+  background-size: 200% 100%;
+  animation: 1.5s dui-loading-text linear infinite;
+  border-radius: 8px;
+  margin-bottom: 10px;
+}
+
+.dui-loading-text.span {
+  height: 15px;
+}
+
+.dui-loading-text.h1 {
+  height: 2em;
+}
+
+.dui-loading-text.h2 {
+  height: 1.71em;
+}
+
+.dui-loading-text.h3 {
+  height: 1.29em;
+}
+
+.dui-loading-text.p {
+  height: 1em;
+}
+
+.dui-loading-text.dui-loading-text__small {
+  width: 20%;
+}
+
+.dui-loading-text.dui-loading-text__medium {
+  width: 45%;
+}
+
+.dui-loading-text.dui-loading-text__large {
+  width: 75%;
+}
+
+.dui-loading-text.dui-loading-text__full {
+  width: 100%;
+}
+
+@keyframes dui-loading-text {
+  to {
+    background-position-x: -200%;
+  }
+}
diff --git a/src/components/Loader/LoadingText.stories.css b/src/components/Loader/LoadingText.stories.css
new file mode 100644
index 00000000..15e7dfd8
--- /dev/null
+++ b/src/components/Loader/LoadingText.stories.css
@@ -0,0 +1,5 @@
+.loading-container {
+  width: 300px;
+  height: 300px;
+  padding: 10px;
+}
diff --git a/src/components/Loader/LoadingText.stories.tsx b/src/components/Loader/LoadingText.stories.tsx
new file mode 100644
index 00000000..5647d906
--- /dev/null
+++ b/src/components/Loader/LoadingText.stories.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import LoadingText from './LoadingText'
+
+import './LoadingText.stories.css'
+
+storiesOf('LoadingText', module)
+  .add('h1 small', () => (
+    <div className="loading-container">
+      <LoadingText type="h1" size="small" />
+    </div>
+  ))
+  .add('h2 medium', () => (
+    <div className="loading-container">
+      <LoadingText type="h2" size="medium" />
+    </div>
+  ))
+  .add('h3 large', () => (
+    <div className="loading-container">
+      <LoadingText type="h3" size="large" />
+    </div>
+  ))
+  .add('span full', () => (
+    <div className="loading-container">
+      <LoadingText type="span" size="full" />
+    </div>
+  ))
+  .add('p full 2 lines', () => (
+    <div className="loading-container">
+      <LoadingText type="p" size="full" lines={2} />
+    </div>
+  ))
diff --git a/src/components/Loader/LoadingText.tsx b/src/components/Loader/LoadingText.tsx
new file mode 100644
index 00000000..b39596af
--- /dev/null
+++ b/src/components/Loader/LoadingText.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+import classNames from 'classnames'
+
+import './LoadingText.css'
+
+export type LoadingTextProps = {
+  type: 'span' | 'h1' | 'h2' | 'h3' | 'p'
+  size: 'small' | 'medium' | 'large' | 'full'
+  className?: string
+  lines?: number
+}
+
+export default React.memo(function LoadingText(props: LoadingTextProps) {
+  const { type, size, lines, className: classNameProps } = props
+  return (
+    <>
+      {Array.from(Array(lines || 1), (_, index) => (
+        <div
+          key={index}
+          className={classNames([
+            'dui-loading-text',
+            classNameProps,
+            type,
+            size === 'small' && 'dui-loading-text__small',
+            size === 'medium' && 'dui-loading-text__medium',
+            size === 'large' && 'dui-loading-text__large',
+            size === 'full' && 'dui-loading-text__full'
+          ])}
+        />
+      ))}
+    </>
+  )
+})