@digigov/react-core 2.0.0-rc.10 → 2.0.0-rc.12

package/src/Skeleton/index.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface SkeletonProps extends BaseProps<'span'> {
+  /**
+   * variant prop determines the style of the skeleton element.
+   * @value 'circular', it renders a circular skeleton.
+   * @value 'rectangular', it renders a rectangular skeleton.
+   * @value 'text', it renders a text skeleton.
+   * @value 'button', it renders a button skeleton.
+   * @default 'text'
+   */
+  variant?: 'circular' | 'rectangular' | 'text' | 'button';
+
+  /**
+   * width prop determines the width of the skeleton element.
+   * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').
+   * For better responsive experience, avoid using px and use percentage instead.
+   * @default undefined
+   */
+  width?: number | string;
+
+  /**
+   * height prop determines the height of the skeleton element.
+   * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').
+   * @default undefined
+   */
+  height?: number | string;
+
+  /**
+   * fontSize is optional. 'sm' is the default value.
+   * Use 'xl' when this Skeleton is for a main page title.
+   * The fontSize works only for variant 'text'.
+   * You don't need fontSize if you wrap Skeleton in a typography component.
+   * @value 'xl'
+   * @value 'lg'
+   * @value 'md'
+   * @value 'sm'
+   * @value 'xs'
+   * @default 'sm'
+   */
+  fontSize?: 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+  /**
+   * animation prop determines if the skeleton should animate or not.
+   * @default true
+   */
+  animation?: boolean;
+}
+/**
+ * Use Skeleton component while a page is loading.
+ */
+export const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(
+  function Skeleton(
+    {
+      width,
+      height,
+      fontSize,
+      variant = 'text',
+      animation = true,
+      className,
+      children,
+      style,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <Base
+        as="span"
+        ref={ref}
+        className={clsx(className, {
+          'ds-skeleton': true,
+          [`ds-skeleton--font-${fontSize}`]:
+            fontSize !== undefined && variant === 'text',
+          [`ds-skeleton--${variant}`]:
+            !!variant && (!children || typeof children === 'string'),
+          'ds-skeleton--animate': !!animation,
+          'ds-skeleton--width-fit-content': !!children && !width,
+        })}
+        {...props}
+        style={{
+          width:
+            typeof children === 'string'
+              ? Math.ceil(children.length * 0.5) + 'em'
+              : width,
+          maxWidth: !!width ? '100%' : undefined,
+          height: height,
+          ...style,
+        }}
+      >
+        {variant === 'button' && (
+          <span
+            className={clsx({
+              'ds-skeleton__line': true,
+              'ds-skeleton__line--size-default':
+                width === undefined && height === undefined,
+            })}
+          ></span>
+        )}
+        {typeof children != 'string' && children}
+      </Base>
+    );
+  }
+);
+
+export default Skeleton;

package/src/Tabs/index.tsx

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TabsProps extends BaseProps<'div'> {
-  direction?: 'vertical' | 'horizontal';
   /**
    * dense is optional.
    * @value true Tabs will be dense.
@@ -17,7 +16,7 @@ export interface TabsProps extends BaseProps<'div'> {
  * This component must contain TabsHeading, TabsList, and a list of TabsPanel component.
  */
 export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(
-  { direction, className, dense, children, ...props },
+  { className, dense, children, ...props },
   ref
 ) {
   return (
@@ -26,7 +25,6 @@ export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(
       ref={ref}
       className={clsx(className, {
         'ds-tabs': true,
-        'ds-tabs--vertical': direction === 'vertical',
         'ds-tabs--dense': dense,
       })}
       {...props}

package/src/Unpurge/index.tsx

@@ -692,6 +692,15 @@ function Unpurge() {
     ds-autocomplete__multi-input-container--1
     ds-autocomplete__multi-input-container--2
     ds-autocomplete__multi-input-container--3
+    ds-skeleton--text
+    ds-skeleton--circular
+    ds-skeleton--rectangular
+    ds-skeleton--button
+    ds-skeleton--font-xs
+    ds-skeleton--font-sm
+    ds-skeleton--font-md
+    ds-skeleton--font-lg
+    ds-skeleton--font-xl
     `}
     ></div>
   );

package/src/lazy.js

@@ -238,5 +238,6 @@ export default {
   'KitchenSinkLetterContent': lazy(() => import('@digigov/react-core/KitchenSinkLetterContent').then((module)=> ({default: module['KitchenSinkLetterContent']}))),
   'MastheadLogo': lazy(() => import('@digigov/react-core/MastheadLogo').then((module)=> ({default: module['MastheadLogo']}))),
   'PanelTitle': lazy(() => import('@digigov/react-core/PanelTitle').then((module)=> ({default: module['PanelTitle']}))),
+  'Skeleton': lazy(() => import('@digigov/react-core/Skeleton').then((module)=> ({default: module['Skeleton']}))),
 
 }

package/src/registry.js

@@ -192,6 +192,7 @@ import * as _digigov_react_core_SelectContainer from '@digigov/react-core/Select
 import * as _digigov_react_core_SelectOption from '@digigov/react-core/SelectOption';
 import * as _digigov_react_core_SingleCharacterInput from '@digigov/react-core/SingleCharacterInput';
 import * as _digigov_react_core_SingleCharacterInputs from '@digigov/react-core/SingleCharacterInputs';
+import * as _digigov_react_core_Skeleton from '@digigov/react-core/Skeleton';
 import * as _digigov_react_core_SkipLink from '@digigov/react-core/SkipLink';
 import * as _digigov_react_core_Stack from '@digigov/react-core/Stack';
 import * as _digigov_react_core_StepNav from '@digigov/react-core/StepNav';
@@ -457,6 +458,7 @@ export default {
   '@digigov/react-core/SelectOption': lazyImport(_digigov_react_core_SelectOption),
   '@digigov/react-core/SingleCharacterInput': lazyImport(_digigov_react_core_SingleCharacterInput),
   '@digigov/react-core/SingleCharacterInputs': lazyImport(_digigov_react_core_SingleCharacterInputs),
+  '@digigov/react-core/Skeleton': lazyImport(_digigov_react_core_Skeleton),
   '@digigov/react-core/SkipLink': lazyImport(_digigov_react_core_SkipLink),
   '@digigov/react-core/Stack': lazyImport(_digigov_react_core_Stack),
   '@digigov/react-core/StepNav': lazyImport(_digigov_react_core_StepNav),