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

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@digigov/react-core",
-  "version": "2.0.0-af1b5f33",
+  "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-af1b5f33",
-    "@digigov/react-icons": "2.0.0-af1b5f33",
+    "@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/Aside/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the Aside with no props 1`] = `
 <ForwardRef(Aside)>
   <ForwardRef(Grid)
     as="aside"
-    className="ds-aside"
+    className="ds-aside--sticky ds-aside"
     item={true}
     md={4}
     spacing={4}
@@ -12,10 +12,10 @@ exports[`renders the Aside with no props 1`] = `
   >
     <ForwardRef(Base)
       as="aside"
-      className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
+      className="ds-aside--sticky ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
     >
       <aside
-        className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
+        className="ds-aside--sticky ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
       >
         hello
       </aside>

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