@digigov/react-core 2.0.0-b3ec0588 → 2.0.0-cbc56209

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@digigov/react-core",
-  "version": "2.0.0-b3ec0588",
+  "version": "2.0.0-cbc56209",
   "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-b3ec0588",
-    "@digigov/react-icons": "2.0.0-b3ec0588",
+    "@digigov/css": "2.0.0-cbc56209",
+    "@digigov/react-icons": "2.0.0-cbc56209",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

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/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}
     >

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

@@ -4,10 +4,10 @@ exports[`renders the FooterContentLogos with no props 1`] = `
 <ForwardRef(FooterContentLogos)>
   <ForwardRef(Base)
     as="div"
-    className="ds-footer__content--logos"
+    className="ds-footer__content__logos"
   >
     <div
-      className="ds-footer__content--logos"
+      className="ds-footer__content__logos"
     >
       hello
     </div>

package/src/FooterContentLogos/index.tsx

@@ -17,7 +17,7 @@ export const FooterContentLogos = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'ds-footer__content--logos': true,
+        'ds-footer__content__logos': true,
       })}
       {...props}
     >

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

@@ -10,7 +10,7 @@ exports[`renders the Hidden with \`lgUp\` props 1`] = `
     xsUpHidden={false}
   >
     <div
-      className="ds-hidden-lg--up"
+      className="ds-hidden-lg-up"
     >
       <div>
         hello
@@ -30,7 +30,7 @@ exports[`renders the Hidden with \`mdUp\` props 1`] = `
     xsUpHidden={false}
   >
     <div
-      className="ds-hidden-md--up"
+      className="ds-hidden-md-up"
     >
       <div>
         hello
@@ -50,7 +50,7 @@ exports[`renders the Hidden with \`smUp\` props 1`] = `
     xsUpHidden={false}
   >
     <div
-      className="ds-hidden-sm--up"
+      className="ds-hidden-sm-up"
     >
       <div>
         hello
@@ -70,7 +70,7 @@ exports[`renders the Hidden with \`xlUp\` props 1`] = `
     xsUpHidden={false}
   >
     <div
-      className="ds-hidden-xl--up"
+      className="ds-hidden-xl-up"
     >
       <div>
         hello
@@ -89,7 +89,7 @@ exports[`renders the Hidden with \`xsUp\` props 1`] = `
     xsUpHidden={true}
   >
     <div
-      className="ds-hidden-xs--up"
+      className="ds-hidden-xs-up"
     >
       <div>
         hello

package/src/Hint/index.tsx

@@ -29,8 +29,8 @@ export const Hint = React.forwardRef<HTMLParagraphElement, HintProps>(
         className={clsx(className, {
           'ds-hint': true,
           'ds-hint--break-words': breakWords,
-          'ds-hint-lg': size === 'lg',
-          'ds-hint-sm': size === 'sm',
+          'ds-hint--lg': size === 'lg',
+          'ds-hint--sm': size === 'sm',
         })}
         {...props}
       >

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

@@ -7,12 +7,12 @@ exports[`renders the Hint with  variant and src props 1`] = `
 >
   <ForwardRef(Base)
     as="img"
-    className="ds-image-logo--dark"
+    className="ds-image-logo-dark"
     printHidden={true}
     src="logo.png"
   >
     <img
-      className="ds-image-logo--dark ds-print-hidden"
+      className="ds-image-logo-dark ds-print-hidden"
       src="logo.png"
     />
   </ForwardRef(Base)>

package/src/ImageLogo/index.tsx

@@ -33,7 +33,7 @@ export const ImageLogo = React.forwardRef<HTMLImageElement, ImageLogoProps>(
           printHidden
           className={clsx(className, {
             'ds-image-logo': variant === undefined,
-            [`ds-image-logo--${variant}`]: variant !== undefined,
+            [`ds-image-logo-${variant}`]: variant !== undefined,
           })}
           {...props}
         />

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

@@ -17,12 +17,12 @@ exports[`renders the Hint with  variants=[light, dark] and src props 1`] = `
   >
     <ForwardRef(Base)
       as="img"
-      className="ds-image-logo--light"
+      className="ds-image-logo-light"
       printHidden={true}
       src="logo--light.png"
     >
       <img
-        className="ds-image-logo--light ds-print-hidden"
+        className="ds-image-logo-light ds-print-hidden"
         src="logo--light.png"
       />
     </ForwardRef(Base)>
@@ -34,12 +34,12 @@ exports[`renders the Hint with  variants=[light, dark] and src props 1`] = `
   >
     <ForwardRef(Base)
       as="img"
-      className="ds-image-logo--dark"
+      className="ds-image-logo-dark"
       printHidden={true}
       src="logo--dark.png"
     >
       <img
-        className="ds-image-logo--dark ds-print-hidden"
+        className="ds-image-logo-dark ds-print-hidden"
         src="logo--dark.png"
       />
     </ForwardRef(Base)>
@@ -63,12 +63,12 @@ exports[`renders the Hint with  variants=[light] and src props 1`] = `
   >
     <ForwardRef(Base)
       as="img"
-      className="ds-image-logo--light"
+      className="ds-image-logo-light"
       printHidden={true}
       src="logo--light.png"
     >
       <img
-        className="ds-image-logo--light ds-print-hidden"
+        className="ds-image-logo-light ds-print-hidden"
         src="logo--light.png"
       />
     </ForwardRef(Base)>
@@ -87,12 +87,12 @@ exports[`renders the Hint with src prop 1`] = `
   >
     <ForwardRef(Base)
       as="img"
-      className="ds-image-logo--dark"
+      className="ds-image-logo-dark"
       printHidden={true}
       src="logo--dark.png"
     >
       <img
-        className="ds-image-logo--dark ds-print-hidden"
+        className="ds-image-logo-dark ds-print-hidden"
         src="logo--dark.png"
       />
     </ForwardRef(Base)>
@@ -104,12 +104,12 @@ exports[`renders the Hint with src prop 1`] = `
   >
     <ForwardRef(Base)
       as="img"
-      className="ds-image-logo--light"
+      className="ds-image-logo-light"
       printHidden={true}
       src="logo--light.png"
     >
       <img
-        className="ds-image-logo--light ds-print-hidden"
+        className="ds-image-logo-light ds-print-hidden"
         src="logo--light.png"
       />
     </ForwardRef(Base)>