@digigov/react-core 2.0.0-0c4be34e → 2.0.0-107d908d

package/src/NavListItemLinkBase/index.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { NavListItemLinkBase } from '@digigov/react-core/NavListItemLinkBase';
+
+it('renders the NavListItemLinkBase with no props', () => {
+  expect(
+    render(<NavListItemLinkBase>hello</NavListItemLinkBase>).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the NavListItemLinkBase with active=true', () => {
+  expect(
+    render(<NavListItemLinkBase active={true}>hello</NavListItemLinkBase>)
+      .baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the NavListItemLinkBase with active=false', () => {
+  expect(
+    render(<NavListItemLinkBase active={false}>hello</NavListItemLinkBase>)
+      .baseElement
+  ).toMatchSnapshot();
+});
+it('renders the NavListItemLinkBase with href and active=false', () => {
+  expect(
+    render(
+      <NavListItemLinkBase href="/" active={false}>
+        hello
+      </NavListItemLinkBase>
+    ).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the NavListItemLinkBase with href and active=true', () => {
+  expect(
+    render(
+      <NavListItemLinkBase href="/" active={false}>
+        hello
+      </NavListItemLinkBase>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/{NavListItemLink → NavListItemLinkBase}/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import clsx from 'clsx';
-import { BaseProps } from '@digigov/react-core/Base';
-import Link from '@digigov/react-core/LinkBase';
+import { LinkBase, LinkBaseProps } from '@digigov/react-core/LinkBase';
 
-export interface NavListItemLinkProps extends BaseProps<'a'> {
+export interface NavListItemLinkBaseProps extends LinkBaseProps {
   /**
    * When the NavListItemLink is active, that means that we are in this option / page of the Nav.
    * active is optional.
@@ -16,15 +15,15 @@ export interface NavListItemLinkProps extends BaseProps<'a'> {
 /**
  * NavListItemLink is an <a> element. It should be inside the NavListItem component.
  */
-export const NavListItemLink = React.forwardRef<
+export const NavListItemLinkBase = React.forwardRef<
   HTMLAnchorElement,
-  NavListItemLinkProps
->(function NavListItemLink(
+  NavListItemLinkBaseProps
+>(function NavListItemLinkBase(
   { active, href, className, children, ...props },
   ref
 ) {
   return (
-    <Link
+    <LinkBase
       href={href}
       ref={ref}
       className={clsx(className, {
@@ -34,8 +33,8 @@ export const NavListItemLink = React.forwardRef<
       {...props}
     >
       {children}
-    </Link>
+    </LinkBase>
   );
 });
 
-export default NavListItemLink;
+export default NavListItemLinkBase;

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

@@ -8,7 +8,7 @@ exports[`renders the NavMenuContainer with active prop 1`] = `
       class="ds-nav-menu ds-nav-menu--horizontal"
     >
       <div
-        class="ds-container ds-grid ds-gap-4"
+        class="ds-container ds-grid ds-grid-item ds-gap-4"
       >
         hello
       </div>
@@ -25,7 +25,7 @@ exports[`renders the NavMenuContainer with layout="horizontal" prop 1`] = `
       class="ds-nav-menu ds-nav-menu--horizontal ds-nav-menu--hidden"
     >
       <div
-        class="ds-container ds-grid ds-gap-4"
+        class="ds-container ds-grid ds-grid-item ds-gap-4"
       >
         hello
       </div>
@@ -42,7 +42,7 @@ exports[`renders the NavMenuContainer with layout="vertical" prop 1`] = `
       class="ds-nav-menu ds-nav-menu--vertical ds-nav-menu--hidden"
     >
       <div
-        class="ds-container"
+        class="ds-container ds-grid-item"
       >
         hello
       </div>
@@ -59,7 +59,7 @@ exports[`renders the NavMenuContainer with no props 1`] = `
       class="ds-nav-menu ds-nav-menu--horizontal ds-nav-menu--hidden"
     >
       <div
-        class="ds-container ds-grid ds-gap-4"
+        class="ds-container ds-grid ds-grid-item ds-gap-4"
       >
         hello
       </div>

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

@@ -4,7 +4,7 @@ exports[`renders the NavMenuContainerContent with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-nav-menu__content xs:ds-grid__col-span-12 sm:ds-grid__col-span-8"
+      class="ds-nav-menu__content ds-grid-item xs:ds-grid__col-span-12 sm:ds-grid__col-span-8"
     >
       hello
     </div>

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

@@ -4,7 +4,7 @@ exports[`renders the NavMenuTitle with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-nav-menu__title xs:ds-grid__col-span-12 sm:ds-grid__col-span-4"
+      class="ds-nav-menu__title ds-grid-item xs:ds-grid__col-span-12 sm:ds-grid__col-span-4"
     >
       <h3
         class="ds-nav-menu__title-heading ds-heading-md"

package/src/NotificationBannerContainer/index.tsx

@@ -9,9 +9,10 @@ export interface NotificationBannerContainerProps extends BaseProps<'div'> {
    * @value 'info'
    * @value 'success'
    * @value 'error'
+   * @value 'error-group'
    * @default 'info'.
    */
-  variant?: 'info' | 'success' | 'error';
+  variant?: 'info' | 'success' | 'error' | 'error-group';
   /**
    * dense is optional.
    * @value true NotificationBannerContainer will be dense.

package/src/NotificationBannerContent/index.tsx

@@ -1,8 +1,32 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import { WarningTextAssistive } from '@digigov/react-core/WarningTextAssistive';
 
-export interface NotificationBannerContentProps extends BaseProps<'div'> {}
+export interface NotificationBannerContentProps extends BaseProps<'div'> {
+  /**
+   * assistiveText is optional.
+   * Default value is "Προσοχή".
+   * assistiveText is used to provide a textual warning for assistive technologies like screen readers.
+   */
+  assistiveText?: string;
+  /**
+   * variant is optional.
+   * variant is used to display red line on the left side of the component and exclamation mark icon with light red as background.
+   * @value 'error'
+   * @value 'error-group'
+   * @default 'error'.
+   */
+  /**
+   * variant is optional.
+   * variant error is used to change the color of the NotificationBannerContainer.
+   * variant error-group is used to display red line on the left side of the component and exclamation mark icon with light red as background.
+   * @value 'error'
+   * @value 'error-group'
+   * @default 'error'.
+   */
+  variant?: 'error' | 'error-group';
+}
 /**
  * Details for the NotificationBannerContent.
  * NotificationBannerContent component is used as a content for
@@ -12,17 +36,39 @@ export interface NotificationBannerContentProps extends BaseProps<'div'> {}
 export const NotificationBannerContent = React.forwardRef<
   HTMLDivElement,
   NotificationBannerContentProps
->(function NotificationBannerContent({ className, children, ...props }, ref) {
+>(function NotificationBannerContent(
+  { className, assistiveText, variant, children, ...props },
+  ref
+) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
-        'ds-notification-banner__content': true,
+        'ds-notification-banner__content': variant !== 'error-group',
+        'ds-notification-error-group-banner__content':
+          variant === 'error-group',
       })}
       {...props}
     >
-      {children}
+      {variant === 'error-group' ? (
+        <>
+          <Base
+            as="div"
+            className={clsx({
+              'ds-notification-banner__icon--error-group': true,
+            })}
+          >
+            !
+          </Base>
+          <WarningTextAssistive>{assistiveText}</WarningTextAssistive>
+          <Base as="div" className="ds-notification-banner__text-error-group">
+            {children}
+          </Base>
+        </>
+      ) : (
+        children
+      )}
     </Base>
   );
 });

package/src/NotificationBannerLink/index.native.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import CoreNotificationBannerLink, {
   NotificationBannerLinkProps,
 } from '@digigov/react-core/NotificationBannerLink/index.web';
-import { extend } from '@digigov/react-core/utils/extend.native';
+import { extend } from '@digigov/react-core/utils/index.native';
 
 interface AdditionalProps {
   variant?: 'error' | 'success';

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

@@ -7,7 +7,7 @@ exports[`renders the Blockquote with no props 1`] = `
       class="ds-radios__conditional"
     >
       <div
-        class="ds-field xs:ds-grid__col-span-12"
+        class="ds-field ds-grid-item xs:ds-grid__col-span-12"
       >
         <label
           class="ds-label"

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

@@ -18,7 +18,6 @@ exports[`renders the RadioItem  \`dividerText\` props 1`] = `
         <input
           class="ds-radios__input"
           type="radio"
-          value=""
         />
       </label>
     </div>
@@ -89,7 +88,6 @@ exports[`renders the RadioItem with disabled prop 1`] = `
           class="ds-radios__input"
           disabled=""
           type="radio"
-          value=""
         />
       </label>
     </div>
@@ -111,7 +109,6 @@ exports[`renders the RadioItem with name  props 1`] = `
           class="ds-radios__input"
           name="name"
           type="radio"
-          value=""
         />
       </label>
     </div>
@@ -177,7 +174,6 @@ exports[`renders the RadioItem with no props 1`] = `
         <input
           class="ds-radios__input"
           type="radio"
-          value=""
         />
       </label>
     </div>

package/src/Skeleton/index.tsx

@@ -90,13 +90,14 @@ export const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(
         }}
       >
         {variant === 'button' && (
-          <span
+          <Base
+            as="span"
             className={clsx({
               'ds-skeleton__line': true,
               'ds-skeleton__line--size-default':
                 width === undefined && height === undefined,
             })}
-          ></span>
+          ></Base>
         )}
         {typeof children != 'string' && children}
       </Base>

package/src/Table/index.tsx

@@ -47,6 +47,15 @@ export interface TableProps extends BaseProps<'table'> {
    * @default 'default'
    */
   variant?: 'zebra' | 'default';
+  /**
+   * verticalAlign is optional.
+   * The verticalAlign property sets vertical alignment of the table-cells.
+   * @value 'top'
+   * @value 'middle'
+   * @value 'bottom'
+   * @default 'middle'
+   */
+  verticalAlign?: 'top' | 'middle' | 'bottom';
 }
 /**
  * Table component is used to wrap the sub components of a table
@@ -59,6 +68,7 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
       dense = false,
       verticalBorders = false,
       stacked = 'never',
+      verticalAlign = 'middle',
       className,
       children,
       ...props
@@ -79,6 +89,8 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
           'ds-table--dense': dense,
           'ds-table--zebra': variant === 'zebra',
           'ds-table--vertical-lines': verticalBorders,
+          'ds-table--align-top': verticalAlign === 'top',
+          'ds-table--align-bottom': verticalAlign === 'bottom',
         })}
         {...props}
       >

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

@@ -13,7 +13,7 @@ exports[`renders the Table with dataType numeric prop 1`] = `
           class="ds-table__row"
         >
           <td
-            class="ds-table__cell ds-table__cell--numeric"
+            class="ds-table__cell ds-table__cell--border ds-table__cell--numeric"
           >
             hello
           </td>
@@ -37,7 +37,7 @@ exports[`renders the Table with no props 1`] = `
           class="ds-table__row"
         >
           <td
-            class="ds-table__cell"
+            class="ds-table__cell ds-table__cell--border"
           >
             hello
           </td>

package/src/TableDataCell/index.tsx

@@ -13,6 +13,19 @@ export interface TableDataCellProps extends BaseProps<'td'> {
    * @default 'text'
    */
   dataType?: 'text' | 'numeric';
+  /**
+   * variant is optional.
+   * Use this prop to control the bottom border of the table-cell.
+   * @value 'border'
+   * @value 'none'
+   * @default 'border'
+   */
+  variant?: 'border' | 'none';
+  /**
+   * wordBreak is optional.
+   * Use this prop to control the word break of the table-cell contents.
+   */
+  wordBreak?: 'break-all' | 'none';
 }
 /**
  * Use TableDataCell inside the Table component to fill the data of a cell in a table.
@@ -21,7 +34,14 @@ export const TableDataCell = React.forwardRef<
   HTMLTableCellElement,
   TableDataCellProps
 >(function TableDataCell(
-  { dataType = 'text', className, children, ...props },
+  {
+    dataType = 'text',
+    variant = 'border',
+    wordBreak = 'none',
+    className,
+    children,
+    ...props
+  },
   ref
 ) {
   return (
@@ -30,6 +50,8 @@ export const TableDataCell = React.forwardRef<
       ref={ref}
       className={clsx(className, {
         'ds-table__cell': true,
+        'ds-table__cell--border': variant === 'border',
+        'ds-table__cell--break-all': wordBreak === 'break-all',
         'ds-table__cell--numeric': dataType === 'numeric',
       })}
       {...props}

package/src/TextArea/index.native.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import CoreTextArea from '@digigov/react-core/TextArea/index.web';
-import extend from '@digigov/react-core/utils/extend.native';
+import extend from '@digigov/react-core/utils/index.native';
 export const TextArea = extend(CoreTextArea, ({ className, ...props }) => ({
   ...props,
   multiline: true,

package/src/TextInput/index.native.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import CoreTextInput from '@digigov/react-core/TextInput/index.web';
-import extend from '@digigov/react-core/utils/extend.native';
+import extend from '@digigov/react-core/utils/index.native';
 export const TextInput = extend(CoreTextInput, ({ className, ...props }) => {
   return {
     ...props,

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

@@ -16,7 +16,7 @@ exports[`renders the TimelineHeading with size = "md" prop 1`] = `
 <body>
   <div>
     <h3
-      class="ds-timeline__heading ds-timeline__heading--md"
+      class="ds-timeline__heading ds-timeline__heading-md"
     >
       hello
     </h3>
@@ -28,7 +28,7 @@ exports[`renders the TimelineHeading with size = "sm" prop 1`] = `
 <body>
   <div>
     <h4
-      class="ds-timeline__heading ds-timeline__heading--sm"
+      class="ds-timeline__heading ds-timeline__heading-sm"
     >
       hello
     </h4>

package/src/Typography/index.tsx

@@ -29,25 +29,26 @@ export interface TypographyProps
  * Typography component is used as generic component for typography.
  * Use Typography component to extend components such as Heading, NormalText Paragraph etc.
  */
-export const Typography = React.forwardRef<HTMLHeadingElement, TypographyProps>(
-  function Typography(
-    { as, fontSize, fontWeight, className, children, ...props },
-    ref
-  ) {
-    return (
-      <Base
-        as={as}
-        ref={ref}
-        className={clsx(className, {
-          [`ds-!-font-size-${fontSize}`]: fontSize !== undefined,
-          [`ds-!-font-weight-${fontWeight}`]: fontWeight !== undefined,
-        })}
-        {...props}
-      >
-        {children}
-      </Base>
-    );
-  }
-);
+export const Typography = React.forwardRef<
+  HTMLSpanElement | HTMLParagraphElement | HTMLHeadingElement,
+  TypographyProps
+>(function Typography(
+  { as, fontSize, fontWeight, className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as={as}
+      ref={ref}
+      className={clsx(className, {
+        [`ds-!-font-size-${fontSize}`]: fontSize !== undefined,
+        [`ds-!-font-weight-${fontWeight}`]: fontWeight !== undefined,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
 
 export default Typography;

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

@@ -77,3 +77,29 @@ exports[`renders the WarningText with no props 1`] = `
   </div>
 </body>
 `;
+
+exports[`renders the WarningText with strong=false 1`] = `
+<body>
+  <div>
+    <div
+      class="ds-warning-text"
+    >
+      <div
+        class="ds-warning-text__icon"
+      >
+        !
+      </div>
+      <div
+        class="ds-warning-text__content"
+      >
+        <span
+          class="ds-warning-text__assistive"
+        >
+          Προσοχή
+        </span>
+        hello
+      </div>
+    </div>
+  </div>
+</body>
+`;

package/src/WarningText/index.test.tsx

@@ -18,3 +18,8 @@ it('renders the WarningText with dense=true', () => {
     render(<WarningText dense>hello</WarningText>).baseElement
   ).toMatchSnapshot();
 });
+it('renders the WarningText with strong=false', () => {
+  expect(
+    render(<WarningText strong={false}>hello</WarningText>).baseElement
+  ).toMatchSnapshot();
+});

package/src/WarningText/index.tsx

@@ -16,6 +16,13 @@ export interface WarningTextProps extends BaseProps<'div'> {
    * @default false
    * */
   dense?: boolean;
+  /**
+   * strong is optional.
+   * @value true if you want to emphasize importance, conveying meaning to both sighted and screen readers.
+   * @value false WarningText will be a simple div element.
+   * @default true
+   * */
+  strong?: boolean;
 }
 /**
  * WarningText.
@@ -24,9 +31,17 @@ export interface WarningTextProps extends BaseProps<'div'> {
  */
 export const WarningText = React.forwardRef<HTMLDivElement, WarningTextProps>(
   function WarningText(
-    { className, assistiveText = 'Προσοχή', dense, children, ...props },
+    {
+      className,
+      strong = true,
+      assistiveText = 'Προσοχή',
+      dense,
+      children,
+      ...props
+    },
     ref
   ) {
+    const Component = strong ? 'strong' : 'div';
     return (
       <Base
         as="div"
@@ -47,7 +62,7 @@ export const WarningText = React.forwardRef<HTMLDivElement, WarningTextProps>(
         </Base>
 
         <Base
-          as="strong"
+          as={Component}
           className={clsx({
             'ds-warning-text__content': true,
           })}

package/src/index.ts

@@ -5,16 +5,16 @@ export * from '@digigov/react-core/AccordionSectionContent';
 export * from '@digigov/react-core/AccordionSectionSummary';
 export * from '@digigov/react-core/AccordionSectionSummaryHeading';
 export * from '@digigov/react-core/Aside';
-export * from '@digigov/react-core/BackLink';
+export * from '@digigov/react-core/BackLinkBase';
 export * from '@digigov/react-core/Blockquote';
 export * from '@digigov/react-core/Bottom';
 export * from '@digigov/react-core/Breadcrumbs';
 export * from '@digigov/react-core/BreadcrumbsList';
-export * from '@digigov/react-core/BreadcrumbsListItem';
+export * from '@digigov/react-core/BreadcrumbsListItemWrapper';
 export * from '@digigov/react-core/Button';
 export * from '@digigov/react-core/ButtonGroup';
-export * from '@digigov/react-core/ButtonLink';
-export * from '@digigov/react-core/CallToAction';
+export * from '@digigov/react-core/ButtonLinkBase';
+export * from '@digigov/react-core/CallToActionBase';
 export * from '@digigov/react-core/Card';
 export * from '@digigov/react-core/CardAction';
 export * from '@digigov/react-core/CardHeading';
@@ -49,7 +49,7 @@ export * from '@digigov/react-core/FooterContent';
 export * from '@digigov/react-core/FooterContentLogos';
 export * from '@digigov/react-core/FooterHeading';
 export * from '@digigov/react-core/FooterImage';
-export * from '@digigov/react-core/FooterLink';
+export * from '@digigov/react-core/FooterLinkBase';
 export * from '@digigov/react-core/FooterList';
 export * from '@digigov/react-core/FooterListItem';
 export * from '@digigov/react-core/FooterInfo';
@@ -57,14 +57,14 @@ export * from '@digigov/react-core/FooterInfoSection';
 export * from '@digigov/react-core/FooterNavigation';
 export * from '@digigov/react-core/FooterNavigationSection';
 export * from '@digigov/react-core/FieldContainer';
-export * from '@digigov/react-core/GovGRLogo';
+export * from '@digigov/react-core/GovGRLogoBase';
 export * from '@digigov/react-core/Grid';
 export * from '@digigov/react-core/Header';
 export * from '@digigov/react-core/HeaderContent';
-export * from '@digigov/react-core/HeaderLogo';
-export * from '@digigov/react-core/HeaderSecondaryLogo';
+export * from '@digigov/react-core/HeaderLogoBase';
+export * from '@digigov/react-core/HeaderSecondaryLogoBase';
 export * from '@digigov/react-core/HeaderSection';
-export * from '@digigov/react-core/HeaderTitle';
+export * from '@digigov/react-core/HeaderTitleBase';
 export * from '@digigov/react-core/Heading';
 export * from '@digigov/react-core/HeadingCaption';
 export * from '@digigov/react-core/HellenicRepublicLogo';
@@ -81,10 +81,10 @@ export * from '@digigov/react-core/Masthead';
 export * from '@digigov/react-core/MastheadBody';
 export * from '@digigov/react-core/Nav';
 export * from '@digigov/react-core/NavList';
-export * from '@digigov/react-core/NavListItemAction';
+export * from '@digigov/react-core/NavListItemActionBase';
 export * from '@digigov/react-core/NavListItemBadge';
 export * from '@digigov/react-core/NavListItemActionContainer';
-export * from '@digigov/react-core/NavListItemLink';
+export * from '@digigov/react-core/NavListItemLinkBase';
 export * from '@digigov/react-core/NavListItemButton';
 export * from '@digigov/react-core/NavMenuContainer';
 export * from '@digigov/react-core/NavMenuContent';
@@ -151,7 +151,6 @@ export * from '@digigov/react-core/AdminLayout';
 export * from '@digigov/react-core/AdminMain';
 export * from '@digigov/react-core/AdminTopSection';
 export * from '@digigov/react-core/AutoCompleteInputBase';
-export * from '@digigov/react-core/AutoCompleteInputTypeahead';
 export * from '@digigov/react-core/AutoCompleteResultList';
 export * from '@digigov/react-core/AutoCompleteResultListItem';
 export * from '@digigov/react-core/AutoCompleteContainer';