feat: add LoadingText component (#526)

* feat: add LoadingText component

* style: change classname

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%;
+  }
+}

src/components/Loader/LoadingText.stories.css

@@ -0,0 +1,5 @@
+.loading-container {
+  width: 300px;
+  height: 300px;
+  padding: 10px;
+}

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>
+  ))

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'
+          ])}
+        />
+      ))}
+    </>
+  )
+})