@digigov/react-core 2.0.0-rc.6 → 2.0.0-rc.8

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@digigov/react-core",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0-rc.8",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
   "main": "./cjs/index.js",
   "module": "./index.js",
   "peerDependencies": {
-    "@digigov/css": "2.0.0-rc.6",
-    "@digigov/react-icons": "2.0.0-rc.6",
+    "@digigov/css": "2.0.0-rc.8",
+    "@digigov/react-icons": "2.0.0-rc.8",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

package/registry/index.js

@@ -191,6 +191,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';
@@ -451,6 +452,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),

package/registry.d.ts

@@ -192,6 +192,7 @@ declare const _default: {
     '@digigov/react-core/SelectOption': {};
     '@digigov/react-core/SingleCharacterInput': {};
     '@digigov/react-core/SingleCharacterInputs': {};
+    '@digigov/react-core/Skeleton': {};
     '@digigov/react-core/SkipLink': {};
     '@digigov/react-core/Stack': {};
     '@digigov/react-core/StepNav': {};

package/src/AdminAside/__snapshots__/index.test.tsx.snap

@@ -4,15 +4,19 @@ exports[`renders the AdminAside with no prop 1`] = `
 <ForwardRef(AdminAside)>
   <ForwardRef(Grid)
     as="aside"
-    className="ds-admin-side-content"
+    className="ds-admin-aside"
     item={true}
+    lg={3}
+    md={4}
+    spacing={4}
+    xs={12}
   >
     <ForwardRef(Base)
       as="aside"
-      className="ds-admin-side-content"
+      className="ds-admin-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4 lg:ds-grid__col-span-3"
     >
       <aside
-        className="ds-admin-side-content"
+        className="ds-admin-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4 lg:ds-grid__col-span-3"
       >
         hello
       </aside>

package/src/AdminAside/index.tsx

@@ -12,10 +12,14 @@ export const AdminAside = React.forwardRef<HTMLElement, AdminAsideProps>(
     return (
       <Grid
         as="aside"
-        ref={ref}
         item
+        xs={12}
+        md={4}
+        lg={3}
+        spacing={4}
+        ref={ref}
         className={clsx(className, {
-          'ds-admin-side-content': true,
+          'ds-admin-aside': true,
         })}
         {...props}
       >

package/src/AdminContainer/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the AdminContainer with no props 1`] = `
-<ForwardRef(AdminContainer)>
+exports[`renders the AdminContainer with no grid 1`] = `
+<ForwardRef(AdminContainer)
+  grid={false}
+>
   <ForwardRef(Container)
     fullWidth={true}
     grid={false}
@@ -17,11 +19,37 @@ exports[`renders the AdminContainer with no props 1`] = `
         <div
           className="ds-container--full-width ds-container"
         >
-          <div
-            className="ds-admin-main-wrapper"
-          >
-            hello
-          </div>
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
+  </ForwardRef(Container)>
+</ForwardRef(AdminContainer)>
+`;
+
+exports[`renders the AdminContainer with no props 1`] = `
+<ForwardRef(AdminContainer)>
+  <ForwardRef(Container)
+    fullWidth={true}
+    grid={true}
+  >
+    <ForwardRef(Grid)
+      className="ds-container--full-width ds-container"
+      container={true}
+      spacing={
+        Object {
+          "sm": 12,
+        }
+      }
+    >
+      <ForwardRef(Base)
+        as="div"
+        className="ds-container--full-width ds-container ds-gap-sm-12 ds-grid"
+      >
+        <div
+          className="ds-container--full-width ds-container ds-gap-sm-12 ds-grid"
+        >
+          hello
         </div>
       </ForwardRef(Base)>
     </ForwardRef(Grid)>

package/src/AdminContainer/index.test.tsx

@@ -6,3 +6,6 @@ import AdminContainer from '@digigov/react-core/AdminContainer';
 it('renders the AdminContainer with no props', () => {
   expect(mount(<AdminContainer>hello</AdminContainer>)).toMatchSnapshot();
 });
+it('renders the AdminContainer with no grid', () => {
+  expect(mount(<AdminContainer grid={false}>hello</AdminContainer>)).toMatchSnapshot();
+});

package/src/AdminContainer/index.tsx

@@ -1,8 +1,15 @@
 import React from 'react';
-import clsx from 'clsx';
 import Container, { ContainerProps } from '@digigov/react-core/Container';
 
-export interface AdminContainerProps extends Omit<ContainerProps, 'grid'> { }
+export interface AdminContainerProps extends Omit<ContainerProps, 'grid'> {
+  /**
+   * grid is optional. Set to false if you don't need grid layout.
+   * @value true
+   * @value false
+   * @default true
+   */
+  grid?: boolean;
+}
 /**
  * AdminContainer is a wrapper for the content of the page
  * Use AdminContainer inside AdminLayout component
@@ -10,22 +17,16 @@ export interface AdminContainerProps extends Omit<ContainerProps, 'grid'> { }
 export const AdminContainer = React.forwardRef<
   HTMLDivElement,
   AdminContainerProps
->(function AdminContainer({ className, children, ...props }, ref) {
+>(function AdminContainer({ grid = true, className, children, ...props }, ref) {
   return (
     <Container
       ref={ref}
       fullWidth={true}
-      grid={false}
+      grid={grid}
       className={className}
       {...props}
     >
-      <div
-        className={clsx({
-          'ds-admin-main-wrapper': true,
-        })}
-      >
-        {children}
-      </div>
+      {children}
     </Container>
   );
 });

package/src/AdminMain/__snapshots__/index.test.tsx.snap

@@ -4,15 +4,18 @@ exports[`renders the AdminMain with no prop 1`] = `
 <ForwardRef(AdminMain)>
   <ForwardRef(Grid)
     as="main"
-    className="ds-admin-main-content"
+    className="ds-admin-main"
     item={true}
+    lg={9}
+    md={8}
+    xs={12}
   >
     <ForwardRef(Base)
       as="main"
-      className="ds-admin-main-content"
+      className="ds-admin-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8 lg:ds-grid__col-span-9"
     >
       <main
-        className="ds-admin-main-content"
+        className="ds-admin-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8 lg:ds-grid__col-span-9"
       >
         hello
       </main>

package/src/AdminMain/index.tsx

@@ -7,14 +7,17 @@ export interface AdminMainProps extends GridProps { }
  * Use this inside AdminContainer component for placing the main content of the page
  */
 export const AdminMain = React.forwardRef<HTMLDivElement, AdminMainProps>(
-  function AdminMain({ className, children, ...props }, ref) {
+  function AdminMain({ className, children, id = 'main-content', ...props }, ref) {
     return (
       <Grid
         item
         as="main"
+        xs={12}
+        md={8}
+        lg={9}
         ref={ref}
         className={clsx(className, {
-          'ds-admin-main-content': true,
+          'ds-admin-main': true,
         })}
         {...props}
       >

package/src/AutoCompleteInput/__snapshots__/index.test.tsx.snap

@@ -1,87 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the AutoCompleteInput with no props 1`] = `
-<ForwardRef(AutoCompleteInput)>
-  <ForwardRef(Base)
-    as="input"
-    className="ds-autocomplete__input--default ds-autocomplete__input"
-    type="text"
-  >
-    <input
-      className="ds-autocomplete__input--default ds-autocomplete__input"
-      type="text"
-    />
-  </ForwardRef(Base)>
-</ForwardRef(AutoCompleteInput)>
-`;
-
-exports[`renders the AutoCompleteInput with showAllValues 1`] = `
-<ForwardRef(AutoCompleteInput)
-  showAllValues={true}
->
-  <ForwardRef(Base)
-    as="input"
-    className="ds-autocomplete__input--show-all-values ds-autocomplete__input"
-    type="text"
-  >
-    <input
-      className="ds-autocomplete__input--show-all-values ds-autocomplete__input"
-      type="text"
-    />
-  </ForwardRef(Base)>
-</ForwardRef(AutoCompleteInput)>
-`;
-
-exports[`renders the AutoCompleteInput with showAllValues 2`] = `
+exports[`renders the AutoCompleteInput with isFocused 1`] = `
 <ForwardRef(AutoCompleteInput)
-  showAllValues={true}
+  isFocused={true}
 >
   <ForwardRef(Base)
     as="input"
-    className="ds-autocomplete__input--show-all-values ds-autocomplete__input"
+    className="ds-autocomplete__input--focused ds-autocomplete__input"
     type="text"
   >
     <input
-      className="ds-autocomplete__input--show-all-values ds-autocomplete__input"
+      className="ds-autocomplete__input--focused ds-autocomplete__input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(AutoCompleteInput)>
 `;
 
-exports[`renders the AutoCompleteInput with showAllValues isFocused 1`] = `
+exports[`renders the AutoCompleteInput with isFocused and name props 1`] = `
 <ForwardRef(AutoCompleteInput)
   isFocused={true}
-  showAllValues={true}
+  name="some-name"
 >
   <ForwardRef(Base)
     as="input"
-    className="ds-autocomplete__input--show-all-values ds-autocomplete__input--focused ds-autocomplete__input"
+    className="ds-autocomplete__input--focused ds-autocomplete__input"
+    name="some-name"
     type="text"
   >
     <input
-      className="ds-autocomplete__input--show-all-values ds-autocomplete__input--focused ds-autocomplete__input"
+      className="ds-autocomplete__input--focused ds-autocomplete__input"
+      name="some-name"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(AutoCompleteInput)>
 `;
 
-exports[`renders the AutoCompleteInput with showAllValues isFocused name props 1`] = `
-<ForwardRef(AutoCompleteInput)
-  isFocused={true}
-  name="some-name"
-  showAllValues={true}
->
+exports[`renders the AutoCompleteInput with no props 1`] = `
+<ForwardRef(AutoCompleteInput)>
   <ForwardRef(Base)
     as="input"
-    className="ds-autocomplete__input--show-all-values ds-autocomplete__input--focused ds-autocomplete__input"
-    name="some-name"
+    className="ds-autocomplete__input"
     type="text"
   >
     <input
-      className="ds-autocomplete__input--show-all-values ds-autocomplete__input--focused ds-autocomplete__input"
-      name="some-name"
+      className="ds-autocomplete__input"
       type="text"
     />
   </ForwardRef(Base)>

package/src/AutoCompleteResultList/__snapshots__/index.test.tsx.snap

@@ -1,51 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the AutoCompleteResultList with isVisible  displayMenu="inline props 1`] = `
-<ForwardRef(List)
-  displayMenu="inline"
-  isVisible={true}
->
-  <ForwardRef(Base)
-    as="ul"
-    className="ds-autocomplete__menu--inline ds-autocomplete__menu--visible ds-autocomplete__menu"
-  >
-    <ul
-      className="ds-autocomplete__menu--inline ds-autocomplete__menu--visible ds-autocomplete__menu"
-    >
-      Hello
-    </ul>
-  </ForwardRef(Base)>
-</ForwardRef(List)>
-`;
-
-exports[`renders the AutoCompleteResultList with isVisible displayMenu="overlay props 1`] = `
-<ForwardRef(List)
-  displayMenu="overlay"
-  isVisible={true}
->
-  <ForwardRef(Base)
-    as="ul"
-    className="ds-autocomplete__menu--overlay ds-autocomplete__menu--visible ds-autocomplete__menu"
-  >
-    <ul
-      className="ds-autocomplete__menu--overlay ds-autocomplete__menu--visible ds-autocomplete__menu"
-    >
-      Hello
-    </ul>
-  </ForwardRef(Base)>
-</ForwardRef(List)>
-`;
-
 exports[`renders the AutoCompleteResultList with isVisible props 1`] = `
 <ForwardRef(List)
   isVisible={true}
 >
   <ForwardRef(Base)
     as="ul"
-    className="ds-autocomplete__menu--visible ds-autocomplete__menu"
+    className="ds-autocomplete__menu"
   >
     <ul
-      className="ds-autocomplete__menu--visible ds-autocomplete__menu"
+      className="ds-autocomplete__menu"
     >
       Hello
     </ul>

package/src/DropdownContent/index.tsx

@@ -11,6 +11,14 @@ export interface DropdownContentProps extends BaseProps<'div'> {
    * @default true
    */
   fullWidth?: boolean;
+  /**
+   * scrollable prop is optional.
+   * If true, the dropdown content will have limited scrollable height.
+   * @value true
+   * @value false
+   * @default false
+   */
+  scrollable?: boolean;
 }
 /**
  * You should use DropdownContent component inside Dropdown component.
@@ -19,7 +27,7 @@ export const DropdownContent = React.forwardRef<
   HTMLDivElement,
   DropdownContentProps
 >(function DropdownContent(
-  { className, children, fullWidth = true, ...props },
+  {fullWidth = true, scrollable, className, children, ...props },
   ref
 ) {
   return (
@@ -29,6 +37,7 @@ export const DropdownContent = React.forwardRef<
       className={clsx(className, {
         'ds-dropdown__content': true,
         'ds-dropdown__content--full-width': fullWidth,
+        'ds-dropdown__content--scrollable': scrollable,
       })}
       {...props}
     >

package/src/ModalContainer/index.tsx

@@ -15,6 +15,13 @@ export interface ModalContainerProps extends BaseProps<'div'> {
    * @default false
    */
   dense?: boolean;
+  /**
+   * gaps is optional.
+   * @value false there will be no extra gaps among children components.
+   * @value true
+   * @default true
+   */
+  gaps?: boolean;
 }
 /**
  * Modals can be used to open a pop-up dialog box and provide critical information
@@ -25,9 +32,10 @@ export interface ModalContainerProps extends BaseProps<'div'> {
 export const ModalContainer = React.forwardRef<
   HTMLDivElement,
   ModalContainerProps
->(function ModalContainer({ className, children, open, dense, ...props }, ref) {
+>(function ModalContainer({ className, gaps = true, children, open, dense, ...props }, ref) {
   return (
     <Base
+      ref={ref}
       as="div"
       className={clsx(className, {
         'ds-modal': true,
@@ -36,19 +44,15 @@ export const ModalContainer = React.forwardRef<
       })}
       {...props}
     >
-      <div
-        className={clsx({
-          'ds-modal__body': true,
-        })}
-      >
-        <div
-          ref={ref}
-          className={clsx({
-            'ds-modal__container': true,
-          })}
-        >
-          {children}
-        </div>
+      <div className='ds-modal__body'>
+        {gaps ?
+          <div
+            className='ds-modal__container'
+          >
+            {children}
+          </div>
+          :
+          children}
       </div>
     </Base>
   );

package/src/ModalHeading/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Heading, { HeadingProps } from '@digigov/react-core/Heading';
 
-export interface ModalHeadingProps extends HeadingProps {}
+export interface ModalHeadingProps extends HeadingProps { }
 /**
  * ModalHeading gives header title to Modal Component
  * Use ModalHeading inside Modal component as children
@@ -10,7 +10,7 @@ export interface ModalHeadingProps extends HeadingProps {}
 export const ModalHeading = React.forwardRef<HTMLDivElement, ModalHeadingProps>(
   function ModalHeading({ children, ...props }, ref) {
     return (
-      <Heading ref={ref} size="md" element="h2" marginBottom={0} {...props}>
+      <Heading ref={ref} size="md" element="h2" {...props}>
         {children}
       </Heading>
     );

package/src/Skeleton/index.tsx

@@ -0,0 +1,99 @@
+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%').
+   * @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,
+      ...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,
+          'ds-skeleton--animate': !!animation,
+          'ds-skeleton--width-fit-content': !!children && !width,
+        })}
+        {...props}
+        style={{
+          width: typeof width === 'number' ? `${width}px` : width,
+          maxWidth: !!width ? '100%' : undefined,
+          height: typeof height === 'number' ? `${height}px` : height,
+        }}
+      >
+        {variant === 'button' && (
+          <span
+            className={clsx({
+              'ds-skeleton__line': true,
+              'ds-skeleton__line--size-default':
+                width === undefined && height === undefined,
+            })}
+          ></span>
+        )}
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Skeleton;

package/src/SummaryList/index.tsx

@@ -12,13 +12,23 @@ export interface SummaryListProps extends BaseProps<'dl'> {
    * @default true
    */
   border?: boolean;
+  /**
+   * noLastBorder is optional.
+   * By default, SummaryList has borders. You can remove last border by using noLastBorder prop.
+   * By default is true
+   * @value true
+   * @value false
+   * @default false
+   */
+  noLastBorder?: boolean
+
 }
 /**
  * SummaryList used as a table with summary informations.
  * It must contain a list of SummaryListItem components.
  */
 export const SummaryList = React.forwardRef<HTMLDListElement, SummaryListProps>(
-  function SummaryList({ className, border = true, children, ...props }, ref) {
+  function SummaryList({ className, noLastBorder = false, border = true, children, ...props }, ref) {
     return (
       <Base
         as="dl"
@@ -26,6 +36,7 @@ export const SummaryList = React.forwardRef<HTMLDListElement, SummaryListProps>(
         className={clsx(className, {
           'ds-summary-list': true,
           'ds-summary-list--no-border': !border,
+          'ds-summary-list--no-last-border': noLastBorder
         })}
         {...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>
   );