@digigov/react-core 2.0.0-b3ec0588 → 2.0.0-rc.0

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@digigov/react-core",
-  "version": "2.0.0-b3ec0588",
+  "version": "2.0.0-rc.0",
   "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": "1.3.0-rc.0",
+    "@digigov/react-icons": "2.0.0-rc.0",
     "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,6 +224,13 @@ 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',

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

@@ -19,6 +19,29 @@ exports[`renders the SvgIcon with no props 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
+exports[`renders the SvgIcon with prop color=base-content 1`] = `
+<ForwardRef(SvgIcon)
+  color="base-content"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="ds-svg-icon--base-content ds-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="ds-svg-icon--base-content ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
 exports[`renders the SvgIcon with prop color=dark 1`] = `
 <ForwardRef(SvgIcon)
   color="dark"
@@ -135,20 +158,20 @@ exports[`renders the SvgIcon with prop color=gray 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=light 1`] = `
+exports[`renders the SvgIcon with prop color=primary 1`] = `
 <ForwardRef(SvgIcon)
-  color="light"
+  color="primary"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--light ds-svg-icon"
+    className="ds-svg-icon--primary ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--light ds-svg-icon"
+      className="ds-svg-icon--primary ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -158,20 +181,20 @@ exports[`renders the SvgIcon with prop color=light 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=primary 1`] = `
+exports[`renders the SvgIcon with prop color=success 1`] = `
 <ForwardRef(SvgIcon)
-  color="primary"
+  color="success"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--primary ds-svg-icon"
+    className="ds-svg-icon--success ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--primary ds-svg-icon"
+      className="ds-svg-icon--success ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -181,20 +204,20 @@ exports[`renders the SvgIcon with prop color=primary 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=success 1`] = `
+exports[`renders the SvgIcon with prop color=warning 1`] = `
 <ForwardRef(SvgIcon)
-  color="success"
+  color="warning"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--success ds-svg-icon"
+    className="ds-svg-icon--warning ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--success ds-svg-icon"
+      className="ds-svg-icon--warning ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -204,20 +227,21 @@ exports[`renders the SvgIcon with prop color=success 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=warning 1`] = `
+exports[`renders the SvgIcon with prop color=warning and size=sm 1`] = `
 <ForwardRef(SvgIcon)
   color="warning"
+  size="sm"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--warning ds-svg-icon"
+    className="ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--warning ds-svg-icon"
+      className="ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -227,21 +251,20 @@ exports[`renders the SvgIcon with prop color=warning 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop color=warning and size=sm 1`] = `
+exports[`renders the SvgIcon with prop color=white 1`] = `
 <ForwardRef(SvgIcon)
-  color="warning"
-  size="sm"
+  color="white"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+    className="ds-svg-icon--white ds-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+      className="ds-svg-icon--white ds-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >

package/src/SvgIcon/index.test.tsx

@@ -21,11 +21,14 @@ it('renders the SvgIcon with prop size=lg', () => {
 it('renders the SvgIcon with prop size=xl', () => {
   expect(mount(<SvgIcon size="xl">hello</SvgIcon>)).toMatchSnapshot();
 });
+it('renders the SvgIcon with prop color=base-content', () => {
+  expect(mount(<SvgIcon color="base-content">hello</SvgIcon>)).toMatchSnapshot();
+});
 it('renders the SvgIcon with prop color=dark', () => {
   expect(mount(<SvgIcon color="dark">hello</SvgIcon>)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop color=light', () => {
-  expect(mount(<SvgIcon color="light">hello</SvgIcon>)).toMatchSnapshot();
+it('renders the SvgIcon with prop color=white', () => {
+  expect(mount(<SvgIcon color="white">hello</SvgIcon>)).toMatchSnapshot();
 });
 it('renders the SvgIcon with prop color=gray', () => {
   expect(mount(<SvgIcon color="gray">hello</SvgIcon>)).toMatchSnapshot();

package/src/SvgIcon/index.tsx

@@ -18,20 +18,22 @@ export interface SvgIconProps extends BaseProps<'svg'> {
   /**
    * color property styles svg icon with Gov.gr palette's basic colors.
    * color property is optional.
-   * @value 'dark'
-   * @value 'light'
+   * @value 'base-content' 
+   * @value 'dark', always dark, among all themes
+   * @value 'white', always white, among all themes
    * @value 'gray'
    * @value 'primary'
    * @value 'success'
    * @value 'warning'
    * @value 'error'
-   * @value 'focus'
+   * @value 'focus', use only in focus state, in dark background
    * @value 'info'
    * @value 'link'
    */
   color?:
+    | 'base-content'
     | 'dark'
-    | 'light'
+    | 'white'
     | 'gray'
     | 'primary'
     | 'success'

package/src/Unpurge/index.tsx

@@ -179,6 +179,74 @@ function Unpurge() {
     ds-mb-1.5
     ds-mb-2.5
     ds-mb-3.5
+    ds-mx-0
+    ds-mx-1
+    ds-mx-2
+    ds-mx-3
+    ds-mx-4
+    ds-mx-5
+    ds-mx-6
+    ds-mx-7
+    ds-mx-8
+    ds-mx-9
+    ds-mx-10
+    ds-mx-11
+    ds-mx-12
+    ds-mx-14
+    ds-mx-16
+    ds-mx-20
+    ds-mx-24
+    ds-mx-28
+    ds-mx-32
+    ds-mx-36
+    ds-mx-40
+    ds-mx-44
+    ds-mx-48
+    ds-mx-52
+    ds-mx-56
+    ds-mx-60
+    ds-mx-64
+    ds-mx-72
+    ds-mx-80
+    ds-mx-96
+    ds-mx-0.5
+    ds-mx-1.5
+    ds-mx-2.5
+    ds-mx-3.5
+    ds-my-0
+    ds-my-1
+    ds-my-2
+    ds-my-3
+    ds-my-4
+    ds-my-5
+    ds-my-6
+    ds-my-7
+    ds-my-8
+    ds-my-9
+    ds-my-10
+    ds-my-11
+    ds-my-12
+    ds-my-14
+    ds-my-16
+    ds-my-20
+    ds-my-24
+    ds-my-28
+    ds-my-32
+    ds-my-36
+    ds-my-40
+    ds-my-44
+    ds-my-48
+    ds-my-52
+    ds-my-56
+    ds-my-60
+    ds-my-64
+    ds-my-72
+    ds-my-80
+    ds-my-96
+    ds-my-0.5
+    ds-my-1.5
+    ds-my-2.5
+    ds-my-3.5
     ds-p-0
     ds-p-1
     ds-p-2
@@ -354,6 +422,74 @@ function Unpurge() {
     ds-pb-1.5
     ds-pb-2.5
     ds-pb-3.5
+    ds-px-0
+    ds-px-1
+    ds-px-2
+    ds-px-3
+    ds-px-4
+    ds-px-5
+    ds-px-6
+    ds-px-7
+    ds-px-8
+    ds-px-9
+    ds-px-10
+    ds-px-11
+    ds-px-12
+    ds-px-14
+    ds-px-16
+    ds-px-20
+    ds-px-24
+    ds-px-28
+    ds-px-32
+    ds-px-36
+    ds-px-40
+    ds-px-44
+    ds-px-48
+    ds-px-52
+    ds-px-56
+    ds-px-60
+    ds-px-64
+    ds-px-72
+    ds-px-80
+    ds-px-96
+    ds-px-0.5
+    ds-px-1.5
+    ds-px-2.5
+    ds-px-3.5
+    ds-py-0
+    ds-py-1
+    ds-py-2
+    ds-py-3
+    ds-py-4
+    ds-py-5
+    ds-py-6
+    ds-py-7
+    ds-py-8
+    ds-py-9
+    ds-py-10
+    ds-py-11
+    ds-py-12
+    ds-py-14
+    ds-py-16
+    ds-py-20
+    ds-py-24
+    ds-py-28
+    ds-py-32
+    ds-py-36
+    ds-py-40
+    ds-py-44
+    ds-py-48
+    ds-py-52
+    ds-py-56
+    ds-py-60
+    ds-py-64
+    ds-py-72
+    ds-py-80
+    ds-py-96
+    ds-py-0.5
+    ds-py-1.5
+    ds-py-2.5
+    ds-py-3.5
     ds-gap-1
     ds-gap-2
     ds-gap-4