@digigov/react-core 1.0.0-002c630d → 1.0.0-6b93ebf2

package/src/PaginationListItem/index.tsx

@@ -4,16 +4,23 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface PaginationListItemProps extends BaseProps<'li'> {
   /**
-   * active is optional. Default value is false.
-   */
+  * active is optional. Default value is false.
+  * @value true
+  * @value false
+  */
   inactive?: boolean;
   /**
-   * active is optional. Default value is false.
-   */
+  * active is optional. Default value is false.
+  * @value true
+  * @value false
+  */
   currentPage?: boolean;
   /**
-   * use variant=number for list items that are navigation numbers and variant=dots for the dots item.
-   */
+  * use variant=number for list items that are navigation numbers and variant=dots for the dots item.
+  * @value 'number'
+  * @value 'dots'
+  * @default 'number'
+  */
   variant?: 'number' | 'dots';
 }
 /**

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Panel with no props 1`] = `
+<ForwardRef(Panel)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-panel--success govgr-panel"
+  >
+    <div
+      className="govgr-panel--success govgr-panel"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Panel)>
+`;

package/src/Panel/index.test.tsx

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

package/src/Panel/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface PanelProps extends BaseProps<'div'> {
+  /**
+   * variant prop is optional.
+   * variant prop is used to change the color of the panel.
+   * 'success' is the default variant.
+   */
+  variant?: 'success';
+}
+/**
+ * You should use Panel as the success of the final step of a process.
+ */
+export const Panel = React.forwardRef<HTMLDivElement, PanelProps>(
+  function Panel({ variant = 'success', className, children, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-panel': true,
+          'govgr-panel--success': variant === 'success',
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Panel;

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

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

package/src/PanelBody/index.test.tsx

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

package/src/PanelBody/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface PanelBodyProps extends BaseProps<'div'> { }
+/**
+ * PanelBody provides the body of the panel message. Use this inside Panel, after PanelTitle.
+ */
+export const PanelBody = React.forwardRef<
+  HTMLDivElement,
+  PanelBodyProps
+>(function PanelBody({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-panel__body': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default PanelBody;

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the PanelTitle with no props 1`] = `
+<ForwardRef(PanelBody)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-panel__body"
+  >
+    <div
+      className="govgr-panel__body"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(PanelBody)>
+`;

package/src/PanelTitle/index.test.tsx

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

package/src/PanelTitle/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface PanelTitleProps extends BaseProps<'h1'> { }
+/**
+ * PanelTitle provides the title of the panel message.Use this inside Panel.
+ */
+export const PanelTitle = React.forwardRef<
+  HTMLHeadingElement,
+  PanelTitleProps
+>(function PanelTitle({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="h1"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-panel__title': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default PanelTitle;

package/src/Paragraph/index.tsx

@@ -1,59 +1,19 @@
 import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import { BaseProps } from '@digigov/react-core/Base';
+import NormalText, { NormalTextProps } from '@digigov/react-core/NormalText';
 
-export interface ParagraphProps extends BaseProps<'p'> {
-  /**
-   * variant is optional.
-   * Use 'lg' when a lg paragraph is an introductory paragraph that you can use at the top of a page to summarize the content.
-   * The majority of your body should use the standard 'md' variant. This is the default value.
-   * You can use the 'sm' sparingly to make your paragraph font size smaller: 16px on larger screens and 14px on smaller screens.
-   */
-  variant?: 'lg' | 'md' | 'sm';
-
-  /**
-   * fontSize is optional.
-   * You can add this fontSize override prop in order to change the font size.
-   */
-  fontSize?: '14' | '16' | '19' | '24' | '30' | '36' | '48' | '72';
-
-  /**
-   * fontWeight is optional.
-   * You can add a fontWeight override prop to change the font weight to regular or bold.
-   */
-  fontWeight?: 'regular' | 'bold';
-}
+export interface ParagraphProps
+  extends Pick<NormalTextProps, 'variant' | 'fontSize' | 'fontWeight'>,
+  BaseProps<'p'> { }
 /**
  * Paragraph component is used for text formatting.
  */
 export const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
-  function Paragraph(
-    { variant = 'md', fontSize, fontWeight, className, children, ...props },
-    ref
-  ) {
+  function Paragraph({ children, ...props }, ref) {
     return (
-      <Base
-        as="p"
-        ref={ref}
-        className={clsx(className, {
-          'govgr-body': true,
-          'govgr-body-lg': variant === 'lg',
-          'govgr-body-sm': variant === 'sm',
-          'govgr-!-font-size-14': fontSize === '14',
-          'govgr-!-font-size-16': fontSize === '16',
-          'govgr-!-font-size-19': fontSize === '19',
-          'govgr-!-font-size-24': fontSize === '24',
-          'govgr-!-font-size-30': fontSize === '30',
-          'govgr-!-font-size-36': fontSize === '36',
-          'govgr-!-font-size-48': fontSize === '48',
-          'govgr-!-font-size-72': fontSize === '72',
-          'govgr-!-font-weight-regular': fontWeight == 'regular',
-          'govgr-!-font-weight-bold': fontWeight == 'bold',
-        })}
-        {...props}
-      >
+      <NormalText as="p" ref={ref} {...props}>
         {children}
-      </Base>
+      </NormalText>
     );
   }
 );

package/src/PhaseBanner/index.tsx

@@ -4,9 +4,12 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface PhaseBannerProps extends BaseProps<'div'> {
   /**
-   * underline is optional.
-   * Use this prop when you want to underline the phase banner.
-   */
+  * underline is optional.
+  * Use this prop when you want to underline the phase banner.
+  * @value true
+  * @value false
+  * @default false
+  */
   underline?: boolean;
 }
 /**

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

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the RadioContainer with layout=horizontal 1`] = `
+<ForwardRef(RadioContainer)
+  layout="horizontal"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-radios--horizontal govgr-radios"
+  >
+    <div
+      className="govgr-radios--horizontal govgr-radios"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(RadioContainer)>
+`;
+
 exports[`renders the RadioContainer with no props 1`] = `
 <ForwardRef(RadioContainer)>
   <ForwardRef(Base)

package/src/RadioContainer/index.test.tsx

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

package/src/RadioContainer/index.tsx

@@ -4,25 +4,28 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface RadioContainerProps extends BaseProps<'div'> {
   /**
-   * The `inline` prop controls whether the radio items will render next to each other or not.
-   * */
-  inline?: boolean;
+  * The `layout` prop controls whether the radio items will render next to each other or not.
+  * @value 'horizontal'
+  * @value 'vertical'
+  * @default 'vertical'
+  */
+  layout?: 'horizontal' | 'vertical';
 }
 /**
  * RadioContainer component is uses when users can only select one option from a list.
- * It is used as parent component to wrap RadioItem compoent.
+ * It is used as parent component to wrap RadioItem component.
  */
 export const RadioContainer = React.forwardRef<
   HTMLDivElement,
   RadioContainerProps
->(function RadioContainer({ className, children, inline, ...props }, ref) {
+>(function RadioContainer({ className, children, layout, ...props }, ref) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
         'govgr-radios': true,
-        'govgr-radios--inline': inline,
+        'govgr-radios--horizontal': layout === 'horizontal',
       })}
       {...props}
     >

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

@@ -4,20 +4,18 @@ exports[`renders the RadioItem  \`divider\` props 1`] = `
 <ForwardRef(RadioItem)
   divider="ή"
 >
-  <ForwardRef(ChoiceDivider)
-    text="ή"
-  >
+  <ForwardRef(ChoiceDividerText)>
     <ForwardRef(Base)
       as="div"
-      className="govgr-choice-divider"
+      className="govgr-choice-divider-text"
     >
       <div
-        className="govgr-choice-divider"
+        className="govgr-choice-divider-text"
       >
         ή
       </div>
     </ForwardRef(Base)>
-  </ForwardRef(ChoiceDivider)>
+  </ForwardRef(ChoiceDividerText)>
   <div
     className="govgr-radios__item"
   >
@@ -97,20 +95,18 @@ exports[`renders the RadioItem with \`name\`, \`disabled\`, \`divider\` and \`va
   name="name"
   value="someValue"
 >
-  <ForwardRef(ChoiceDivider)
-    text="ή"
-  >
+  <ForwardRef(ChoiceDividerText)>
     <ForwardRef(Base)
       as="div"
-      className="govgr-choice-divider"
+      className="govgr-choice-divider-text"
     >
       <div
-        className="govgr-choice-divider"
+        className="govgr-choice-divider-text"
       >
         ή
       </div>
     </ForwardRef(Base)>
-  </ForwardRef(ChoiceDivider)>
+  </ForwardRef(ChoiceDividerText)>
   <div
     className="govgr-radios__item"
   >

package/src/RadioItem/index.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-import ChoiceDivider from '@digigov/react-core/ChoiceDivider';
+import ChoiceDividerText from '@digigov/react-core/ChoiceDividerText';
 import LabelContainer from '@digigov/react-core/LabelContainer';
 
 export interface RadioItemProps extends BaseProps<'input'> {
   /**
-   * divider is optional.
-   * Add this prop to add a choice divider ontop of a radio item.
-   * The string is the text that it will appear above this radio item.
-   */
+  * divider is optional.
+  * Add this prop to add a choice divider ontop of a radio item.
+  * The string is the text that it will appear above this radio item.
+  */
   divider?: string;
 }
 /**
@@ -22,7 +22,7 @@ export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
     ref
   ) {
     return <>
-      {divider && <ChoiceDivider text={divider} />}
+      {divider && <ChoiceDividerText>{divider}</ChoiceDividerText>}
       <div
         className={clsx(className, {
           'govgr-radios__item': true,

package/src/Section/index.test.tsx

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

package/src/Section/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface SectionProps extends BaseProps<'div'> { }
+/**
+ * Details for the Section.
+ * Use Section component to wrap PageTitleHeading component.
+ */
+export const Section = React.forwardRef<HTMLDivElement, SectionProps>(
+  function Section({ className, children, ...props }, ref) {
+    return (
+      <Base as="div" ref={ref} className={clsx(className, {})} {...props}>
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Section;

package/src/SectionBreak/index.tsx

@@ -4,14 +4,22 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface SectionBreakProps extends BaseProps<'hr'> {
   /**
-   * visible is optional.
-   * By default, SectionBreak only visible by its margin. You can add the 'visible' prop to make it visible with a separator line.
-   */
+  * visible is optional.
+  * By default, SectionBreak only visible by its margin. You can add the 'visible' prop to make it visible with a separator line.
+  * @value true
+  * @value false
+  * @default true
+  */
   visible?: boolean;
 
   /**
-   * size is optional and it is about the different size margins.
-   */
+  * size is optional and it is about the different size margins.
+  * @value 'xl'
+  * @value 'lg'
+  * @value 'md'
+  * @value 'sm'
+  * @default 'sm'
+  */
   size?: 'xl' | 'lg' | 'md' | 'sm';
 }
 /**

package/src/SingleCharacterInputItem/index.tsx

@@ -4,20 +4,26 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface SingleCharacterInputItemProps extends BaseProps<'input'> {
   /**
-   * error is optional. The default value is false.
-   * Use this prop when there is an error at the input.
-   */
+  * error is optional. The default value is false.
+  * Use this prop when there is an error at the input.
+  * @value true
+  * @value false
+  */
   error?: boolean;
   /**
-   * pattern is optional. The default value is [0-9].
-   * Use this prop when you want to give a specific format input.
-   */
+  * pattern is optional. The default value is [0-9].
+  * Use this prop when you want to give a specific format input.
+
+  * @default '[0-9]*'
+  */
   pattern?: string;
   /**
-   * maxLength property is optional
-   * maxLength prop specifies the max length of the input field.
-   * maxLength default value is 1.
-   */
+  * maxLength property is optional
+  * maxLength prop specifies the max length of the input field.
+  * maxLength default value is 1.
+
+  * @default 1
+  */
   maxLength?: number;
 }
 /**

package/src/StepNavAccordionHeadingText/index.tsx

@@ -4,20 +4,26 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface StepNavAccordionHeadingTextProps extends BaseProps<'span'> {
   /**
-   * Use open prop to change the text state under the accordion heanding text.
-   * open is false by default.
-   *
-   */
+  * Use open prop to change the text state under the accordion heanding text.
+  * open is false by default.
+  *
+  * @value true
+  * @value false
+  */
   open?: boolean;
   /**
-   * Use openLabel to display the open state text under the accordion heanding text.
-   *
-   */
+  * Use openLabel to display the open state text under the accordion heanding text.
+  *
+
+  * @default 'Εμφάνιση'
+  */
   openLabel?: string;
   /**
-   * Use closeLabel to display the close state text under the accordion heanding text.
-   *
-   */
+  * Use closeLabel to display the close state text under the accordion heanding text.
+  *
+
+  * @default 'Απόκρυψη'
+  */
   closeLabel?: string;
 }
 /**

package/src/StepNavAccordionSummaryHeading/index.tsx

@@ -4,12 +4,19 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface StepNavAccordionSummaryHeadingProps extends BaseProps<'h2'> {
   /**
-   * size is optional. 'lg' is the default value.
-   */
+  * size is optional. 'lg' is the default value.
+  * @value 'lg'
+  * @value 'md'
+  * @value 'sm'
+  * @default 'lg'
+  */
   size?: 'lg' | 'md' | 'sm';
   /**
-   * element is optional. 'h2' is the default value.
-   */
+  * element is optional. 'h2' is the default value.
+  * @value 'h2'
+  * @value 'h3'
+  * @value 'h4'
+  */
   element?: 'h2' | 'h3' | 'h4';
 }
 

package/src/StepNavCircleNumber/index.tsx

@@ -4,10 +4,13 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface StepNavCircleNumberProps extends BaseProps<'span'> {
   /**
-   * Use border prop to add or remove border from StepNavCircleNumber component.
-   * Default prop border is true.
-   *
-   */
+  * Use border prop to add or remove border from StepNavCircleNumber component.
+  * Default prop border is true.
+  *
+  * @value true
+  * @value false
+  * @default true
+  */
   border?: boolean;
 }
 

package/src/SummaryList/index.tsx

@@ -4,10 +4,13 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface SummaryListProps extends BaseProps<'dl'> {
   /**
-   * border is optional.
-   * By default, SummaryList has borders. You can remove borders by using border prop.
-   * By default is true
-   */
+  * border is optional.
+  * By default, SummaryList has borders. You can remove borders by using border prop.
+  * By default is true
+  * @value true
+  * @value false
+  * @default true
+  */
   border?: boolean;
 }
 /**

package/src/SummaryListItem/index.tsx

@@ -4,10 +4,13 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface SummaryListItemProps extends BaseProps<'div'> {
   /**
-   *  border is optional.
-   *  By default, SummaryListItem has borders. You can remove borders by using border prop.
-   *  By default is true
-   **/
+  *  border is optional.
+  *  By default, SummaryListItem has borders. You can remove borders by using border prop.
+  *  By default is true
+  ** @value true
+  * @value false
+  * @default true
+  */
   border?: boolean;
 }
 /**