@digigov/react-core 1.0.0-871b6be5 → 1.0.0-8ae63a77

package/index.js

@@ -1525,15 +1525,28 @@ Object.keys(_SvgIcon).forEach(function (key) {
   });
 });
 
-var _Icon = require("@digigov/react-core/Icon");
+var _ImageLogo = require("@digigov/react-core/ImageLogo");
 
-Object.keys(_Icon).forEach(function (key) {
+Object.keys(_ImageLogo).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Icon[key]) return;
+  if (key in exports && exports[key] === _ImageLogo[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Icon[key];
+      return _ImageLogo[key];
+    }
+  });
+});
+
+var _ImageLogoSet = require("@digigov/react-core/ImageLogoSet");
+
+Object.keys(_ImageLogoSet).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ImageLogoSet[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ImageLogoSet[key];
     }
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/react-core",
-  "version": "1.0.0-871b6be5",
+  "version": "1.0.0-8ae63a77",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -11,8 +11,8 @@
     "directory": "dist"
   },
   "peerDependencies": {
-    "@digigov/css": "1.0.0-871b6be5",
-    "@digigov/react-icons": "1.0.0-871b6be5",
+    "@digigov/css": "1.0.0-8ae63a77",
+    "@digigov/react-icons": "1.0.0-8ae63a77",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

package/registry.d.ts

@@ -122,7 +122,8 @@ declare var _default: {
     '@digigov/react-core/HellenicRepublicLogo/logo-inverted-en': {};
     '@digigov/react-core/Hidden': {};
     '@digigov/react-core/Hint': {};
-    '@digigov/react-core/Icon': {};
+    '@digigov/react-core/ImageLogo': {};
+    '@digigov/react-core/ImageLogoSet': {};
     '@digigov/react-core': {};
     '@digigov/react-core/KitchenSinkAllComponents': {};
     '@digigov/react-core/KitchenSinkCard': {};

package/registry.js

@@ -253,7 +253,9 @@ var _digigov_react_core_Hidden = _interopRequireWildcard(require("@digigov/react
 
 var _digigov_react_core_Hint = _interopRequireWildcard(require("@digigov/react-core/Hint"));
 
-var _digigov_react_core_Icon = _interopRequireWildcard(require("@digigov/react-core/Icon"));
+var _digigov_react_core_ImageLogo = _interopRequireWildcard(require("@digigov/react-core/ImageLogo"));
+
+var _digigov_react_core_ImageLogoSet = _interopRequireWildcard(require("@digigov/react-core/ImageLogoSet"));
 
 var _digigov_react_core = _interopRequireWildcard(require("@digigov/react-core"));
 
@@ -644,7 +646,8 @@ var _default = {
   '@digigov/react-core/HellenicRepublicLogo/logo-inverted-en': lazyImport(_digigov_react_core_HellenicRepublicLogo_logo_inverted_en),
   '@digigov/react-core/Hidden': lazyImport(_digigov_react_core_Hidden),
   '@digigov/react-core/Hint': lazyImport(_digigov_react_core_Hint),
-  '@digigov/react-core/Icon': lazyImport(_digigov_react_core_Icon),
+  '@digigov/react-core/ImageLogo': lazyImport(_digigov_react_core_ImageLogo),
+  '@digigov/react-core/ImageLogoSet': lazyImport(_digigov_react_core_ImageLogoSet),
   '@digigov/react-core': lazyImport(_digigov_react_core),
   '@digigov/react-core/KitchenSinkAllComponents': lazyImport(_digigov_react_core_KitchenSinkAllComponents),
   '@digigov/react-core/KitchenSinkCard': lazyImport(_digigov_react_core_KitchenSinkCard),

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

@@ -4,10 +4,10 @@ exports[`renders the Accordion with no props 1`] = `
 <ForwardRef(Accordion)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-accordion"
+    className="govgr-accordion--border-top govgr-accordion"
   >
     <div
-      className="govgr-accordion"
+      className="govgr-accordion--border-top govgr-accordion"
     >
       hello
     </div>

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

@@ -2,19 +2,29 @@
 
 exports[`renders the AdminContainer with no props 1`] = `
 <ForwardRef(AdminContainer)>
-  <ForwardRef(Base)
-    as="div"
-    className="govgr-admin-width-container"
+  <ForwardRef(Container)
+    fullWidth={true}
+    grid={false}
   >
-    <div
-      className="govgr-admin-width-container"
+    <ForwardRef(Grid)
+      className="govgr-container--full-width govgr-container"
+      container={false}
     >
-      <div
-        className="govgr-admin-main-wrapper"
+      <ForwardRef(Base)
+        as="div"
+        className="govgr-container--full-width govgr-container"
       >
-        hello
-      </div>
-    </div>
-  </ForwardRef(Base)>
+        <div
+          className="govgr-container--full-width govgr-container"
+        >
+          <div
+            className="govgr-admin-main-wrapper"
+          >
+            hello
+          </div>
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
+  </ForwardRef(Container)>
 </ForwardRef(AdminContainer)>
 `;

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

@@ -2,15 +2,24 @@
 
 exports[`renders the Aside with no props 1`] = `
 <ForwardRef(Aside)>
-  <ForwardRef(Base)
+  <ForwardRef(Grid)
     as="aside"
-    className="govgr-aside govgr-grid-column-one-third"
+    className="govgr-aside"
+    item={true}
+    md={4}
+    spacing={4}
+    xs={12}
   >
-    <aside
-      className="govgr-aside govgr-grid-column-one-third"
+    <ForwardRef(Base)
+      as="aside"
+      className="govgr-aside xs:govgr-grid__col-span-12 md:govgr-grid__col-span-4"
     >
-      hello
-    </aside>
-  </ForwardRef(Base)>
+      <aside
+        className="govgr-aside xs:govgr-grid__col-span-12 md:govgr-grid__col-span-4"
+      >
+        hello
+      </aside>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Aside)>
 `;

package/src/Aside/index.tsx

@@ -1,28 +1,31 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Grid, { GridProps } from '@digigov/react-core/Grid';
 
-export interface AsideProps extends BaseProps<'aside'> {}
+export interface AsideProps extends GridProps {}
 /**
- * Use this inside the Content component for additional content
- * that will be shown on the left one third of the page
+ * Use this inside the Container component for additional content.
+ * that will be shown on the left one third of the page.
  */
 export const Aside = React.forwardRef<HTMLElement, AsideProps>(function Aside(
   { className, children, ...props },
   ref
 ) {
   return (
-    <Base
+    <Grid
+      item
+      xs={12}
+      md={4}
+      spacing={4}
       as="aside"
       ref={ref}
       className={clsx(className, {
         'govgr-aside': true,
-        'govgr-grid-column-one-third': true,
       })}
       {...props}
     >
       {children}
-    </Base>
+    </Grid>
   );
 });
 

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

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the Blockquote with dense props 1`] = `
+<ForwardRef(Blockquote)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="blockquote"
+    className="govgr-blockquote--dense govgr-blockquote"
+  >
+    <blockquote
+      className="govgr-blockquote--dense govgr-blockquote"
+    >
+      hello
+    </blockquote>
+  </ForwardRef(Base)>
+</ForwardRef(Blockquote)>
+`;
+
 exports[`renders the Blockquote with no props 1`] = `
 <ForwardRef(Blockquote)>
   <ForwardRef(Base)

package/src/Blockquote/index.test.tsx

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

package/src/Blockquote/index.tsx

@@ -2,18 +2,27 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BlockquoteProps extends BaseProps<'blockquote'> {}
+export interface BlockquoteProps extends BaseProps<'blockquote'> {
+  /**
+   * dense is optional.
+   * @value true Blockquote will be dense.
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
+}
 /**
  * Use Blockquote to differentiate a block of text from the content that surrounds it.
  */
 export const Blockquote = React.forwardRef<HTMLElement, BlockquoteProps>(
-  function Blockquote({ className, children, ...props }, ref) {
+  function Blockquote({ className, dense, children, ...props }, ref) {
     return (
       <Base
         as="blockquote"
         ref={ref}
         className={clsx(className, {
           'govgr-blockquote': true,
+          'govgr-blockquote--dense': dense,
         })}
         {...props}
       >

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

@@ -5,25 +5,21 @@ exports[`renders the BottomInfo with no props 1`] = `
   <ForwardRef(Container)
     className="govgr-bottom-info"
   >
-    <ForwardRef(Base)
-      as="div"
+    <ForwardRef(Grid)
       className="govgr-bottom-info govgr-container"
+      container={true}
     >
-      <div
-        className="govgr-bottom-info govgr-container"
+      <ForwardRef(Base)
+        as="div"
+        className="govgr-bottom-info govgr-container govgr-grid"
       >
-        <ForwardRef(Base)
-          as="div"
-          className="govgr-main-wrapper"
+        <div
+          className="govgr-bottom-info govgr-container govgr-grid"
         >
-          <div
-            className="govgr-main-wrapper"
-          >
-            hello
-          </div>
-        </ForwardRef(Base)>
-      </div>
-    </ForwardRef(Base)>
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
   </ForwardRef(Container)>
 </ForwardRef(BottomInfo)>
 `;

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

@@ -5,25 +5,21 @@ exports[`renders the BottomInfoContainer with no props 1`] = `
   <ForwardRef(Container)
     className="govgr-bottom-info__container"
   >
-    <ForwardRef(Base)
-      as="div"
+    <ForwardRef(Grid)
       className="govgr-bottom-info__container govgr-container"
+      container={true}
     >
-      <div
-        className="govgr-bottom-info__container govgr-container"
+      <ForwardRef(Base)
+        as="div"
+        className="govgr-bottom-info__container govgr-container govgr-grid"
       >
-        <ForwardRef(Base)
-          as="div"
-          className="govgr-main-wrapper"
+        <div
+          className="govgr-bottom-info__container govgr-container govgr-grid"
         >
-          <div
-            className="govgr-main-wrapper"
-          >
-            hello
-          </div>
-        </ForwardRef(Base)>
-      </div>
-    </ForwardRef(Base)>
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
   </ForwardRef(Container)>
 </ForwardRef(BottomInfoContainer)>
 `;

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

@@ -5,17 +5,14 @@ exports[`renders the BottomInfoContent with no props 1`] = `
   <ForwardRef(Grid)
     className="govgr-bottom-info__content"
     item={true}
-    lg={3}
-    md={3}
-    xl={3}
-    xs={3}
+    xs={12}
   >
     <ForwardRef(Base)
       as="div"
-      className="govgr-bottom-info__content xs:govgr-grid__col-span-3 md:govgr-grid__col-span-3 lg:govgr-grid__col-span-3 xl:govgr-grid__col-span-3"
+      className="govgr-bottom-info__content xs:govgr-grid__col-span-12"
     >
       <div
-        className="govgr-bottom-info__content xs:govgr-grid__col-span-3 md:govgr-grid__col-span-3 lg:govgr-grid__col-span-3 xl:govgr-grid__col-span-3"
+        className="govgr-bottom-info__content xs:govgr-grid__col-span-12"
       >
         hello
       </div>

package/src/BottomInfoContent/index.tsx

@@ -11,16 +11,13 @@ export const BottomInfoContent = React.forwardRef<
   HTMLDivElement,
   BottomInfoContentProps
 >(function BottomInfoContent(
-  { className, xs = 3, md = 3, lg = 3, xl = 3, children, ...props },
+  { className, xs = 12, children, ...props },
   ref
 ) {
   return (
     <Grid
       item
       xs={xs}
-      md={md}
-      lg={lg}
-      xl={xl}
       ref={ref}
       className={clsx(className, {
         'govgr-bottom-info__content': true,

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

@@ -21,6 +21,27 @@ exports[`renders the Card with callToActon props 1`] = `
 </ForwardRef(Card)>
 `;
 
+exports[`renders the Card with dense props 1`] = `
+<ForwardRef(Card)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card--dense govgr-card"
+  >
+    <div
+      className="govgr-card--dense govgr-card"
+    >
+      <div
+        className="govgr-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

@@ -10,6 +10,9 @@ it('renders the Card with no props', () => {
 it('renders the Card with callToActon props', () => {
   expect(mount(<Card callToAction>hello</Card>)).toMatchSnapshot();
 });
+it('renders the Card with dense props', () => {
+  expect(mount(<Card dense>hello</Card>)).toMatchSnapshot();
+});
 it('renders the Card with variant="border" props', () => {
   expect(mount(<Card variant="border">hello</Card>)).toMatchSnapshot();
 });

package/src/Card/index.tsx

@@ -30,6 +30,13 @@ export interface CardProps extends BaseProps<'div'> {
   * @value false
   */
   callToAction?: boolean;
+  /**
+   * dense is optional.
+   * @value true Card will be dense.
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
 }
 /**
  * Cards can be used to divide and organise interface content for better understandability and readability.
@@ -37,7 +44,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, className, children, ...props },
+  { variant, borderColor, callToAction, dense, className, children, ...props },
   ref
 ) {
   return (
@@ -46,6 +53,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(
       ref={ref}
       className={clsx(className, {
         'govgr-card': true,
+        'govgr-card--dense': dense,
         'govgr-card--border': variant === 'border',
         'govgr-card--border-top': variant === 'border-top',
         'govgr-card--divider': variant === 'divider',

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

@@ -6,16 +6,21 @@ exports[`renders the ChipHeading with no props 1`] = `
     element="h2"
     size="xs"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h2"
       className="govgr-heading-xs"
     >
-      <h2
+      <ForwardRef(Base)
+        as="h2"
         className="govgr-heading-xs"
       >
-        hello
-      </h2>
-    </ForwardRef(Base)>
+        <h2
+          className="govgr-heading-xs"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(ChipHeading)>
 `;

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

@@ -16,11 +16,11 @@ exports[`renders the CircularProgress 1`] = `
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -47,11 +47,11 @@ exports[`renders the CircularProgress with color=secondary and size lg props 1`]
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -78,11 +78,11 @@ exports[`renders the CircularProgress with color=secondary and size sm props 1`]
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -108,11 +108,11 @@ exports[`renders the CircularProgress with color=secondary prop 1`] = `
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -138,11 +138,11 @@ exports[`renders the CircularProgress with size lg 1`] = `
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -168,11 +168,11 @@ exports[`renders the CircularProgress with size sm 1`] = `
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>

package/src/CircularProgress/index.tsx

@@ -49,11 +49,11 @@ export const CircularProgress = React.forwardRef<
       {...props}
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </Base>