@digigov/react-core 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/react-core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "MIT",
@@ -17,7 +17,7 @@
     "prepublish": "digigov build --subpackages"
   },
   "peerDependencies": {
-    "@digigov/css": "0.3.0",
+    "@digigov/css": "0.4.0",
     "clsx": "~1.1.1",
     "react": "16.14.0",
     "react-dom": "16.14.0"

package/react-core.build.log

@@ -3,15 +3,15 @@ Invoking: digigov build --subpackages
 Running  /Users/dimitristsironis/grnet/digigov-sdk/tooling/cli-build/node_modules/.bin/rimraf dist
 Running  /Users/dimitristsironis/grnet/digigov-sdk/tooling/cli-build/node_modules/.bin/tsc --emitDeclarationOnly --outDir dist
 Running  /Users/dimitristsironis/grnet/digigov-sdk/tooling/cli-build/node_modules/.bin/babel --config-file /Users/dimitristsironis/grnet/digigov-sdk/tooling/cli-build/babel.config.js src --extensions .tsx,.ts,.js,.jsx --copy-files --out-dir dist/esm
-Successfully compiled 221 files with Babel (8162ms).
+Successfully compiled 229 files with Babel (5506ms).
 Running  /Users/dimitristsironis/grnet/digigov-sdk/tooling/cli-build/node_modules/.bin/babel --config-file /Users/dimitristsironis/grnet/digigov-sdk/tooling/cli-build/babel.config.js src --extensions .tsx,.ts,.js,.jsx --copy-files --out-dir dist/es
-Successfully compiled 221 files with Babel (5968ms).
+Successfully compiled 229 files with Babel (3622ms).
 Created package.json in /Users/dimitristsironis/grnet/digigov-sdk/ui/react-core/dist/package.json
+Copied /Users/dimitristsironis/grnet/digigov-sdk/LICENSE to /Users/dimitristsironis/grnet/digigov-sdk/ui/react-core/dist/LICENSE
 Copied /Users/dimitristsironis/grnet/digigov-sdk/ui/react-core/README.md to /Users/dimitristsironis/grnet/digigov-sdk/ui/react-core/dist/README.md
 Copied /Users/dimitristsironis/grnet/digigov-sdk/ui/react-core/CHANGELOG.md to /Users/dimitristsironis/grnet/digigov-sdk/ui/react-core/dist/CHANGELOG.md
-Copied /Users/dimitristsironis/grnet/digigov-sdk/LICENSE to /Users/dimitristsironis/grnet/digigov-sdk/ui/react-core/dist/LICENSE
 Skipped license for ./index.js
-Skipped license for ./umd/digigov-ui.development.js
 Skipped license for ./umd/digigov-ui.production.min.js
+Skipped license for ./umd/digigov-ui.development.js
 Running  /Users/dimitristsironis/grnet/digigov-sdk/tooling/cli-build/node_modules/.bin/babel --config-file /Users/dimitristsironis/grnet/digigov-sdk/tooling/cli-build/babel.config.js src --extensions .tsx,.ts,.js,.jsx --copy-files --out-dir dist
-Successfully compiled 221 files with Babel (5440ms).
+Successfully compiled 229 files with Babel (3906ms).

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

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Card with border props 1`] = `
+<ForwardRef(Card)
+  border={true}
+>
+  <div
+    className="govgr-card--border govgr-card"
+  >
+    <div
+      className="govgr-card__body"
+    >
+      hello
+    </div>
+  </div>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with no props 1`] = `
+<ForwardRef(Card)>
+  <div
+    className="govgr-card"
+  >
+    <div
+      className="govgr-card__body"
+    >
+      hello
+    </div>
+  </div>
+</ForwardRef(Card)>
+`;

package/src/Card/index.test.tsx

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

package/src/Card/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type DivElementAttributes = JSX.IntrinsicElements['div'];
+export interface CardProps extends DivElementAttributes {
+  /**
+   * By default, we recommend using Cards without border style. Card border increases the contrast to its background.
+   * `border` property is optional.
+   */
+  border?: boolean;
+}
+/**
+ * Cards can be used to divide and organise interface content for better understandability and readability.
+ * Cards can help your users to scan through vast amounts of information quicker.
+ * Use Card as parent component to wrap CardHeading, CardText and CartAction components
+ */
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(
+  { border, className, children, ...props },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={clsx(className, {
+        'govgr-card': true,
+        'govgr-card--border': border === true,
+      })}
+      {...props}
+    >
+      <div
+        className={clsx({
+          'govgr-card__body': true,
+        })}
+      >
+        {children}
+      </div>
+    </div>
+  );
+});
+
+export default Card;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CardAction with no props 1`] = `
+<ForwardRef(CardText)>
+  <div
+    className="govgr-card__action"
+  >
+    hello
+  </div>
+</ForwardRef(CardText)>
+`;

package/src/CardAction/index.test.tsx

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

package/src/CardAction/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type DivElementAttributes = JSX.IntrinsicElements['div'];
+export interface CardActionProps extends DivElementAttributes {}
+/**
+ * CardAction contains the action behavior for Card Component.
+ * We can use links, Buttons or ButtonGroup with max of two buttons
+ * Use CardAction inside Card component as childern
+ */
+export const CardAction = React.forwardRef<HTMLDivElement, CardActionProps>(
+  function CardText({ className, children, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={clsx({
+          className,
+          'govgr-card__action': true,
+        })}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+export default CardAction;

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CardAction with no props 1`] = `
+<ForwardRef(CardHeading)>
+  <div
+    aria-level={2}
+    className="govgr-card__heading"
+    role="heading"
+  >
+    hello
+  </div>
+</ForwardRef(CardHeading)>
+`;

package/src/CardHeading/index.test.tsx

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

package/src/CardHeading/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type DivElementAttributes = JSX.IntrinsicElements['div'];
+export interface CardHeadingProps extends DivElementAttributes { }
+/**
+ * CardHeading gives header title to Card Component
+ * Use CardHeading inside Card component as children
+ */
+export const CardHeading = React.forwardRef<HTMLDivElement, CardHeadingProps>(
+  function CardHeading({ className, children, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        role="heading"
+        aria-level={2}
+        className={clsx({
+          className,
+          'govgr-card__heading': true,
+        })}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+export default CardHeading;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CardAction with no props 1`] = `
+<ForwardRef(CardText)>
+  <div
+    className="govgr-card__text"
+  >
+    hello
+  </div>
+</ForwardRef(CardText)>
+`;

package/src/CardText/index.test.tsx

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

package/src/CardText/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type DivElementAttributes = JSX.IntrinsicElements['div'];
+export interface CardTextProps extends DivElementAttributes { }
+/**
+ * CardText contains the text for Card Component
+ * Use CardText inside Card component as children
+ */
+export const CardText = React.forwardRef<HTMLDivElement, CardTextProps>(
+  function CardText({ className, children, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={clsx({
+          className,
+          'govgr-card__text': true,
+        })}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+export default CardText;

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

@@ -8,7 +8,7 @@ exports[`renders the FileUpload with name prop 1`] = `
     className="upload-file"
   >
     <input
-      className="input-file secondary-label"
+      className="govgr-file-upload"
       name="some-name"
       type="file"
     />
@@ -22,7 +22,7 @@ exports[`renders the FileUpload with no props 1`] = `
     className="upload-file"
   >
     <input
-      className="input-file secondary-label"
+      className="govgr-file-upload"
       type="file"
     />
   </div>

package/src/FileUpload/index.tsx

@@ -27,8 +27,7 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
           type="file"
           name={name}
           className={clsx({
-            'input-file': true,
-            'secondary-label': true,
+            'govgr-file-upload': true,
           })}
         ></input>
       </div>

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

@@ -3,7 +3,7 @@
 exports[`renders the HeaderLogo with no props 1`] = `
 <ForwardRef(HeaderLogo)>
   <a
-    className=""
+    className="govuk-header-link"
     href="https://www.gov.gr/"
   >
     <img

package/src/HeaderLogo/index.tsx

@@ -12,7 +12,9 @@ export const HeaderLogo = React.forwardRef<HTMLAnchorElement, HeaderLogoProps>(
       <a
         href="https://www.gov.gr/"
         ref={ref}
-        className={clsx(className, {})}
+        className={clsx(className, {
+          'govuk-header-link': true,
+        })}
         {...props}
       >
         <img

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

@@ -5,7 +5,7 @@ exports[`renders the HeaderSecondaryLogo with src 1`] = `
   src="https://dilosi.services.gov.gr/minedu-logo.svg"
 >
   <a
-    className=""
+    className="govuk-header-link"
   >
     <img
       className="govgr-header-secondary-logo"
@@ -21,7 +21,7 @@ exports[`renders the HeaderSecondaryLogo with src and href 1`] = `
   src="https://dilosi.services.gov.gr/minedu-logo.svg"
 >
   <a
-    className=""
+    className="govuk-header-link"
     href="https://www.minedu.gov.gr/"
   >
     <img

package/src/HeaderSecondaryLogo/index.tsx

@@ -21,7 +21,14 @@ export const HeaderSecondaryLogo = React.forwardRef<
   HeaderSecondaryLogoProps
 >(function HeaderSecondaryLogo({ href, src, className, ...props }, ref) {
   return (
-    <a href={href} ref={ref} className={clsx(className, {})} {...props}>
+    <a
+      href={href}
+      ref={ref}
+      className={clsx(className, {
+        'govuk-header-link': true,
+      })}
+      {...props}
+    >
       <img
         src={src}
         className={clsx(className, {

package/src/Layout/index.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import clsx from 'clsx';
 
 type DivElementAttributes = JSX.IntrinsicElements['div'];
-export interface LayoutProps extends DivElementAttributes {}
+export interface LayoutProps extends DivElementAttributes { }
 /**
- * Wrapper component for the entire page.
+ * Wrapper component for the entire page except the Header and the Footer.
  */
 export const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(
   function Layout({ className, children, ...props }, ref) {

package/src/index.ts

@@ -12,6 +12,10 @@ export { default as BurgerIcon } from '@digigov/react-core/BurgerIcon';
 export { default as Button } from '@digigov/react-core/Button';
 export { default as ButtonGroup } from '@digigov/react-core/ButtonGroup';
 export { default as CallToAction } from '@digigov/react-core/CallToAction';
+export { default as Card } from '@digigov/react-core/Card';
+export { default as CardHeading } from '@digigov/react-core/CardHeading';
+export { default as CardText } from '@digigov/react-core/CardText';
+export { default as CardAction } from '@digigov/react-core/CardAction';
 export { default as Checkbox } from '@digigov/react-core/Checkbox';
 export { default as CheckboxItem } from '@digigov/react-core/CheckboxItem';
 export { default as CheckboxConditional } from '@digigov/react-core/CheckboxConditional';