@digigov/react-core 1.3.0-dcbd7ded → 2.0.0-0edebf87

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/AutoCompleteResultList/index.test.tsx

@@ -14,23 +14,3 @@ it('renders the AutoCompleteResultList with isVisible props', () => {
     mount(<AutoCompleteResultList isVisible>Hello</AutoCompleteResultList>)
   ).toMatchSnapshot();
 });
-
-it('renders the AutoCompleteResultList with isVisible  displayMenu="inline props', () => {
-  expect(
-    mount(
-      <AutoCompleteResultList isVisible displayMenu="inline">
-        Hello
-      </AutoCompleteResultList>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the AutoCompleteResultList with isVisible displayMenu="overlay props', () => {
-  expect(
-    mount(
-      <AutoCompleteResultList isVisible displayMenu="overlay">
-        Hello
-      </AutoCompleteResultList>
-    )
-  ).toMatchSnapshot();
-});

package/src/AutoCompleteResultList/index.tsx

@@ -13,15 +13,6 @@ export interface AutoCompleteResultListProps extends BaseProps<'ul'> {
    * @default false
    */
   isVisible?: boolean;
-  /**
-   * displayMenu is optional.
-   * Use displayMenu to choose the display of the manue
-   * default value is inline.
-   *
-   * @value 'inline'
-   * @value 'overlay'
-   */
-  displayMenu?: 'inline' | 'overlay';
 }
 /**
  * AutoCompleteResultList component is used for listing items.
@@ -31,7 +22,7 @@ export const AutoCompleteResultList = React.forwardRef<
   HTMLUListElement,
   AutoCompleteResultListProps
 >(function List(
-  { isVisible = false, displayMenu, className, children, ...props },
+  { isVisible = false, className, children, ...props },
   ref
 ) {
   return (
@@ -40,9 +31,6 @@ export const AutoCompleteResultList = React.forwardRef<
       ref={ref}
       className={clsx(className, {
         'ds-autocomplete__menu': true,
-        'ds-autocomplete__menu--inline': displayMenu === 'inline',
-        'ds-autocomplete__menu--overlay': displayMenu === 'overlay',
-        'ds-autocomplete__menu--visible': isVisible,
         'ds-autocomplete__menu--hidden': isVisible === false,
       })}
       {...props}

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the AdminContainer with no props 1`] = `
-<ForwardRef(AutoCompleteStatusWrapper)>
+<ForwardRef(AutoCompleteStatusContainer)>
   <ForwardRef(Base)
     aria-atomic="true"
     aria-live="polite"
@@ -18,5 +18,5 @@ exports[`renders the AdminContainer with no props 1`] = `
       hello
     </div>
   </ForwardRef(Base)>
-</ForwardRef(AutoCompleteStatusWrapper)>
+</ForwardRef(AutoCompleteStatusContainer)>
 `;

package/src/AutoCompleteStatus/index.tsx

@@ -5,12 +5,12 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 export interface AutoCompleteStatusProps extends BaseProps<'div'> { }
 /**
  * AutoCompleteStatus is a div element for displaying the autocomplete status.
- * Use AutoCompleteStatus inside AutoCompleteStatusWrapper wrapper.
+ * Use AutoCompleteStatus inside AutoCompleteStatusContainer wrapper.
  */
 export const AutoCompleteStatus = React.forwardRef<
   HTMLDivElement,
   AutoCompleteStatusProps
->(function AutoCompleteStatusWrapper({ className, children, ...props }, ref) {
+>(function AutoCompleteStatusContainer({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the AdminContainer with no props 1`] = `
+<ForwardRef(AutoCompleteStatusContainer)>
+  <ForwardRef(Base)
+    as="div"
+    className="ds-autocomplete__status__container"
+  >
+    <div
+      className="ds-autocomplete__status__container"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(AutoCompleteStatusContainer)>
+`;

package/src/AutoCompleteStatusContainer/index.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusContainer';
+
+it('renders the AdminContainer with no props', () => {
+  expect(
+    mount(<AutoCompleteStatusContainer>hello</AutoCompleteStatusContainer>)
+  ).toMatchSnapshot();
+});

package/src/AutoCompleteStatusContainer/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface AutoCompleteStatusContainerProps extends BaseProps<'div'> {}
+/**
+ * AutoCompleteStatusContainer is a wrapper for autocomplete element.
+ * Use AutoCompleteStatusContainer to wrap autocomplete elements.
+ */
+export const AutoCompleteStatusContainer = React.forwardRef<
+  HTMLDivElement,
+  AutoCompleteStatusContainerProps
+>(function AutoCompleteStatusContainer({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'ds-autocomplete__status__container': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AutoCompleteStatusContainer;

package/src/Base/index.tsx

@@ -10,77 +10,139 @@ type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
 // This is the first reusable type utility we built
 type PolymorphicComponentProp<
   C extends React.ElementType,
-  Props = Record<string, unknown>
+  Props = Record<string, unknown>,
 > = React.PropsWithChildren<Props & AsProp<C>> &
   Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
 
 // This is a new type utitlity with ref!
 type PolymorphicComponentPropWithRef<
   C extends React.ElementType,
-  Props = Record<string, unknown>
+  Props = Record<string, unknown>,
 > = PolymorphicComponentProp<C, Props> & { ref?: any };
 
 // This is the type for the "ref" only
-type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<
-  C
->['ref'];
+type PolymorphicRef<C extends React.ElementType> =
+  React.ComponentPropsWithRef<C>['ref'];
 
 /**
  * This is the updated component props using PolymorphicComponentPropWithRef
  */
-export type BaseProps<
-  C extends React.ElementType
-> = PolymorphicComponentPropWithRef<
-  C,
-  {
-    /** margin is optional. It has not a default value. */
-    margin?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** marginTop is optional. It has not a default value. */
-    marginTop?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** marginBottom is optional. It has not a default value. */
-    marginBottom?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** marginLeft is optional. It has not a default value. */
-    marginLeft?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** marginRight is optional. It has not a default value. */
-    marginRight?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** padding is optional. It has not a default value. */
-    padding?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** paddingTop is optional. It has not a default value. */
-    paddingTop?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** paddingBottom is optional. It has not a default value. */
-    paddingBottom?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** paddingLeft is optional. It has not a default value. */
-    paddingLeft?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** paddingRight is optional. It has not a default value. */
-    paddingRight?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */
-    printHidden?: boolean;
-    /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/
-    printVisible?: 'block' | 'inline';
-    /** Components will be hidden at all screen sizes. */
-    hidden?: boolean;
-    /** Components will be hidden from 'xs' screen size and up. */
-    xsUpHidden?: boolean;
-    /** Components will be hidden from 'sm' screen size and up. */
-    smUpHidden?: boolean;
-    /** Components will be hidden from 'md' screen size and up. */
-    mdUpHidden?: boolean;
-    /** Components will be hidden from 'lg' screen size and up. */
-    lgUpHidden?: boolean;
-    /** Components will be hidden from 'xl' screen size and up. */
-    xlUpHidden?: boolean;
-    /** Components will be hidden between xs and sm screen size. */
-    xsHidden?: boolean;
-    /** Components will be hidden between sm and md screen size. */
-    smHidden?: boolean;
-    /** Components will be hidden between md and lg screen size. */
-    mdHidden?: boolean;
-    /** Components will be hidden between lg and xl screen size. */
-    lgHidden?: boolean;
-    /** Components will be hidden between xl and 2xl screen size. */
-    xlHidden?: boolean;
-  }
->;
+export type BaseProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<
+    C,
+    {
+      /** margin is optional. It has not a default value. */
+      margin?: spacingValues;
+      /** marginTop is optional. It has not a default value. */
+      marginTop?: spacingValues;
+      /** marginBottom is optional. It has not a default value. */
+      marginBottom?: spacingValues;
+      /** marginLeft is optional. It has not a default value. */
+      marginLeft?: spacingValues;
+      /** marginRight is optional. It has not a default value. */
+      marginRight?: spacingValues;
+      /** Alternative for margin. Margin is optional. It has not a default value. */
+      m?: spacingValues;
+      /** Alternative for marginTop. MarginTop is optional. It has not a default value. */
+      mt?: spacingValues;
+      /** Alternative for marginBottom. MarginBottom is optional. It has not a default value. */
+      mb?: spacingValues;
+      /** Alternative for marginLeft. MarginLeft is optional. It has not a default value. */
+      ml?: spacingValues;
+      /** Alternative for marginRight. MarginRight is optional. It has not a default value. */
+      mr?: spacingValues;
+      /** Alternative for marginX. MarginX is optional. It has not a default value. */
+      mx?: spacingValues;
+      /** Alternative for marginY. MarginY is optional. It has not a default value. */
+      my?: spacingValues;
+      /** padding is optional. It has not a default value. */
+      padding?: spacingValues;
+      /** paddingTop is optional. It has not a default value. */
+      paddingTop?: spacingValues;
+      /** paddingBottom is optional. It has not a default value. */
+      paddingBottom?: spacingValues;
+      /** paddingLeft is optional. It has not a default value. */
+      paddingLeft?: spacingValues;
+      /** paddingRight is optional. It has not a default value. */
+      paddingRight?: spacingValues;
+      /** Alternative for padding. Padding is optional. It has not a default value. */
+      p?: spacingValues;
+      /** Alternative for paddingTop. PaddingTop is optional. It has not a default value. */
+      pt?: spacingValues;
+      /** Alternative for paddingBottom. PaddingBottom is optional. It has not a default value. */
+      pb?: spacingValues;
+      /** Alternative for paddingLeft. PaddingLeft is optional. It has not a default value. */
+      pl?: spacingValues;
+      /** Alternative for paddingRight. PaddingRight is optional. It has not a default value. */
+      pr?: spacingValues;
+      /** Alternative for paddingX. PaddingX is optional. It has not a default value. */
+      px?: spacingValues;
+      /** Alternative for paddingY. PaddingY is optional. It has not a default value. */
+      py?: spacingValues;
+      /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */
+      printHidden?: boolean;
+      /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/
+      printVisible?: 'block' | 'inline';
+      /** Components will be hidden at all screen sizes. */
+      hidden?: boolean;
+      /** Components will be hidden from 'xs' screen size and up. */
+      xsUpHidden?: boolean;
+      /** Components will be hidden from 'sm' screen size and up. */
+      smUpHidden?: boolean;
+      /** Components will be hidden from 'md' screen size and up. */
+      mdUpHidden?: boolean;
+      /** Components will be hidden from 'lg' screen size and up. */
+      lgUpHidden?: boolean;
+      /** Components will be hidden from 'xl' screen size and up. */
+      xlUpHidden?: boolean;
+      /** Components will be hidden between xs and sm screen size. */
+      xsHidden?: boolean;
+      /** Components will be hidden between sm and md screen size. */
+      smHidden?: boolean;
+      /** Components will be hidden between md and lg screen size. */
+      mdHidden?: boolean;
+      /** Components will be hidden between lg and xl screen size. */
+      lgHidden?: boolean;
+      /** Components will be hidden between xl and 2xl screen size. */
+      xlHidden?: boolean;
+    }
+  >;
+
+type spacingValues =
+  | 0
+  | 0.5
+  | 1
+  | 1.5
+  | 2
+  | 2.5
+  | 3
+  | 3.5
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 14
+  | 16
+  | 20
+  | 24
+  | 28
+  | 32
+  | 36
+  | 40
+  | 44
+  | 48
+  | 52
+  | 56
+  | 60
+  | 64
+  | 72
+  | 80
+  | 96;
 
 /**
  * This is the type used in the type annotation for the component
@@ -90,7 +152,7 @@ type BaseComponent = <C extends React.ElementType = 'span'>(
 ) => React.ReactElement | null;
 
 export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span'
+  C extends React.ElementType = 'span',
 >(
   {
     as,
@@ -99,11 +161,25 @@ export const Base: BaseComponent = React.forwardRef(function Base<
     marginBottom,
     marginLeft,
     marginRight,
+    m,
+    mt,
+    mb,
+    ml,
+    mr,
+    mx,
+    my,
     padding,
     paddingTop,
     paddingBottom,
     paddingLeft,
     paddingRight,
+    p,
+    pt,
+    pb,
+    pr,
+    pl,
+    px,
+    py,
     printHidden,
     printVisible,
     hidden,
@@ -134,6 +210,13 @@ export const Base: BaseComponent = React.forwardRef(function Base<
           marginBottom !== undefined ? true : undefined,
         [`ds-mr-${marginRight}`]: marginRight !== undefined ? true : undefined,
         [`ds-ml-${marginLeft}`]: marginLeft !== undefined ? true : undefined,
+        [`ds-m-${m}`]: m !== undefined ? true : undefined,
+        [`ds-mt-${mt}`]: mt !== undefined ? true : undefined,
+        [`ds-mb-${mb}`]: mb !== undefined ? true : undefined,
+        [`ds-mr-${mr}`]: mr !== undefined ? true : undefined,
+        [`ds-ml-${ml}`]: ml !== undefined ? true : undefined,
+        [`ds-mx-${mx}`]: mx !== undefined ? true : undefined,
+        [`ds-my-${my}`]: my !== undefined ? true : undefined,
         [`ds-p-${padding}`]: padding !== undefined ? true : undefined,
         [`ds-pt-${paddingTop}`]: paddingTop !== undefined ? true : undefined,
         [`ds-pb-${paddingBottom}`]:
@@ -141,15 +224,22 @@ export const Base: BaseComponent = React.forwardRef(function Base<
         [`ds-pr-${paddingRight}`]:
           paddingRight !== undefined ? true : undefined,
         [`ds-pl-${paddingLeft}`]: paddingLeft !== undefined ? true : undefined,
+        [`ds-p-${p}`]: p !== undefined ? true : undefined,
+        [`ds-pt-${pt}`]: pt !== undefined ? true : undefined,
+        [`ds-pb-${pb}`]: pb !== undefined ? true : undefined,
+        [`ds-pr-${pr}`]: pr !== undefined ? true : undefined,
+        [`ds-pl-${pl}`]: pl !== undefined ? true : undefined,
+        [`ds-px-${px}`]: px !== undefined ? true : undefined,
+        [`ds-py-${py}`]: py !== undefined ? true : undefined,
         'ds-print-hidden': !!printHidden,
         'ds-print-visible-block': printVisible === 'block',
         'ds-print-visible-inline': printVisible === 'inline',
         'ds-hidden': !!hidden,
-        'ds-hidden-xs--up': !!xsUpHidden,
-        'ds-hidden-sm--up': !!smUpHidden,
-        'ds-hidden-md--up': !!mdUpHidden,
-        'ds-hidden-lg--up': !!lgUpHidden,
-        'ds-hidden-xl--up': !!xlUpHidden,
+        'ds-hidden-xs-up': !!xsUpHidden,
+        'ds-hidden-sm-up': !!smUpHidden,
+        'ds-hidden-md-up': !!mdUpHidden,
+        'ds-hidden-lg-up': !!lgUpHidden,
+        'ds-hidden-xl-up': !!xlUpHidden,
         'ds-hidden-xs': !!xsHidden,
         'ds-hidden-sm': !!smHidden,
         'ds-hidden-md': !!mdHidden,

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

@@ -17,29 +17,29 @@ exports[`renders the CallToAction with no props 1`] = `
         hello
         <ChevronIcon>
           <ForwardRef(Icon)
-            icon="arrow"
+            icon="chevron"
           >
             <ForwardRef(SvgIcon)
-              className="ds-svg-icon--arrow"
+              className="ds-svg-icon--chevron"
             >
               <ForwardRef(Base)
                 aria-hidden="true"
                 as="svg"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
                 <svg
                   aria-hidden="true"
-                  className="ds-svg-icon--arrow ds-svg-icon"
+                  className="ds-svg-icon--chevron ds-svg-icon"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
-                  <arrow>
+                  <chevron>
                     <path
                       d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
                     />
-                  </arrow>
+                  </chevron>
                 </svg>
               </ForwardRef(Base)>
             </ForwardRef(SvgIcon)>

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

@@ -42,6 +42,48 @@ exports[`renders the Card with dense props 1`] = `
 </ForwardRef(Card)>
 `;
 
+exports[`renders the Card with dense" prop 1`] = `
+<ForwardRef(Card)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="ds-card--dense ds-card"
+  >
+    <div
+      className="ds-card--dense ds-card"
+    >
+      <div
+        className="ds-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with fullHeight" prop 1`] = `
+<ForwardRef(Card)
+  fullHeight={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="ds-card--full-height ds-card"
+  >
+    <div
+      className="ds-card--full-height ds-card"
+    >
+      <div
+        className="ds-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
 exports[`renders the Card with no props 1`] = `
 <ForwardRef(Card)>
   <ForwardRef(Base)

package/src/Card/index.test.tsx

@@ -22,6 +22,12 @@ it('renders the Card with variant="divider" props', () => {
 it('renders the Card with variant="border-top" props', () => {
   expect(mount(<Card variant="border-top">hello</Card>)).toMatchSnapshot();
 });
+it('renders the Card with dense" prop', () => {
+  expect(mount(<Card dense>hello</Card>)).toMatchSnapshot();
+});
+it('renders the Card with fullHeight" prop', () => {
+  expect(mount(<Card fullHeight>hello</Card>)).toMatchSnapshot();
+});
 it('renders the Card with variant="border" and borderColor="dark" props', () => {
   expect(
     mount(

package/src/Card/index.tsx

@@ -37,6 +37,13 @@ export interface CardProps extends BaseProps<'div'> {
    * @default false
    * */
   dense?: boolean;
+  /**
+   * fullHeight is optional.
+   * @value true Card will be have it's full height.
+   * @value false
+   * @default false
+   * */
+  fullHeight?: boolean;
 }
 /**
  * Cards can be used to divide and organise interface content for better understandability and readability.
@@ -44,7 +51,7 @@ export interface CardProps extends BaseProps<'div'> {
  * Use Card as parent component to wrap CardHeading, CardContent and CartAction components
  */
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(
-  { variant, borderColor, callToAction, dense, className, children, ...props },
+  { variant, borderColor, callToAction, dense, fullHeight, className, children, ...props },
   ref
 ) {
   return (
@@ -60,6 +67,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(
         'ds-card--cta': callToAction,
         'ds-card--border-light': borderColor === 'light',
         'ds-card--border-dark': borderColor === 'dark',
+        'ds-card--full-height': fullHeight,
       })}
       {...props}
     >