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

package/src/SvgIcon/index.tsx

@@ -4,15 +4,29 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface SvgIconProps extends BaseProps<'svg'> {
   /**
-   * size prop declares the size of the svg icon.
-   * size is optional. The default value is 'md'.
-   */
+  * size prop declares the size of the svg icon.
+  * size is optional. The default value is 'md'.
+  * @value 'sm'
+  * @value 'md'
+  * @value 'lg'
+  * @value 'xl'
+  * @value 'xxl'
+  */
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
   /**
-   * variant property styles svg icon with Gov.gr palette's basic colors.
-   * variant property is optional.
-   */
+  * variant property styles svg icon with Gov.gr palette's basic colors.
+  * variant property is optional.
+  * @value 'dark'
+  * @value 'light'
+  * @value 'gray'
+  * @value 'primary'
+  * @value 'success'
+  * @value 'warning'
+  * @value 'error'
+  * @value 'focus'
+  * @value 'link'
+  */
   variant?:
     | 'dark'
     | 'light'

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the Table with dark variant prop 1`] = `
+exports[`renders the Table with dark headerVariant prop 1`] = `
 <ForwardRef(Table)
-  variant="dark"
+  headerVariant="dark"
 >
   <ForwardRef(Base)
     as="table"
@@ -17,9 +17,9 @@ exports[`renders the Table with dark variant prop 1`] = `
 </ForwardRef(Table)>
 `;
 
-exports[`renders the Table with light variant prop 1`] = `
+exports[`renders the Table with light headerVariant prop 1`] = `
 <ForwardRef(Table)
-  variant="light"
+  headerVariant="light"
 >
   <ForwardRef(Base)
     as="table"
@@ -51,7 +51,7 @@ exports[`renders the Table with no props 1`] = `
 
 exports[`renders the Table with zebra prop 1`] = `
 <ForwardRef(Table)
-  zebra={true}
+  variant="zebra"
 >
   <ForwardRef(Base)
     as="table"
@@ -72,10 +72,10 @@ exports[`renders the Table with zebra prop 2`] = `
 >
   <ForwardRef(Base)
     as="table"
-    className="govgr-table--vertical-header govgr-table--vertical-lines govgr-table"
+    className="govgr-table--vertical-lines govgr-table"
   >
     <table
-      className="govgr-table--vertical-header govgr-table--vertical-lines govgr-table"
+      className="govgr-table--vertical-lines govgr-table"
     >
       hello
     </table>

package/src/Table/index.test.tsx

@@ -7,16 +7,16 @@ it('renders the Table with no props', () => {
   expect(mount(<Table>hello</Table>)).toMatchSnapshot();
 });
 
-it('renders the Table with dark variant prop', () => {
-  expect(mount(<Table variant="dark">hello</Table>)).toMatchSnapshot();
+it('renders the Table with dark headerVariant prop', () => {
+  expect(mount(<Table headerVariant="dark">hello</Table>)).toMatchSnapshot();
 });
 
-it('renders the Table with light variant prop', () => {
-  expect(mount(<Table variant="light">hello</Table>)).toMatchSnapshot();
+it('renders the Table with light headerVariant prop', () => {
+  expect(mount(<Table headerVariant="light">hello</Table>)).toMatchSnapshot();
 });
 
 it('renders the Table with zebra prop', () => {
-  expect(mount(<Table zebra>hello</Table>)).toMatchSnapshot();
+  expect(mount(<Table variant='zebra'>hello</Table>)).toMatchSnapshot();
 });
 
 it('renders the Table with zebra prop', () => {

package/src/Table/index.tsx

@@ -4,36 +4,49 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TableProps extends BaseProps<'table'> {
   /**
-   * variant is optional.
-   * The `variant` prop is used to either give blue background color to th tags
-   * or a light grey background.
-   * Default value is undefined which results to an opaque background color.
-   */
-  variant?: 'dark' | 'light';
+  * headerVariant is optional.
+  * The `headerVariant` prop is used to either give blue background color to th tags
+  * or a light grey background.
+  * Default value is undefined which results to an opaque background color.
+  * @value 'dark'
+  * @value 'light'
+  */
+  headerVariant?: 'dark' | 'light';
   /**
-   * dense is optional.
-   * The dense prop is used to make font size smaller and give
-   * extra padding.
-   */
+  * dense is optional.
+  * The dense prop is used to make font size smaller and give
+  * extra padding.
+  * @value true
+  * @value false
+  * @default false
+  */
   dense?: boolean;
   /**
-   * zebra is optional.
-   * The zebra prop is used to make zebra table lines.
-   * Default value is false.
-   */
-  zebra?: boolean;
-  /**
-   * verticalBorders is optional.
-   * The verticalBorders prop gives extra vertical lines to the table.
-   * Default value is false.
+  * verticalBorders is optional.
+  * The verticalBorders prop gives extra vertical lines to the table.
+  * @value true
+  * @value false
+  * @default false
    */
   verticalBorders?: boolean;
   /**
-   * stacked is optional.
-   * The stacked prop gives responsiveness to the table. If used, make sure to add "data-label" to TableDataCell components.
-   * Default value is never.
-   */
+  * stacked is optional.
+  * The stacked prop gives responsiveness to the table. If used, make sure to add "data-label" to TableDataCell components.
+  * Default value is never.
+  * @value 'always'
+  * @value 'sm'
+  * @value 'md'
+  * @value 'never'
+  * @default 'never'
+  */
   stacked?: 'always' | 'sm' | 'md' | 'never';
+  /**
+   * variant is optional.
+   * @value 'default'
+   * @value 'zebra' is used to make zebra table lines. If you have 'zebra' variant, color prop to TableRow component adds nothing. 
+   * @default 'default'
+   */
+  variant?: 'zebra' | 'default';
 }
 /**
  * Table component is used to wrap the sub components of a table
@@ -41,8 +54,8 @@ export interface TableProps extends BaseProps<'table'> {
 export const Table = React.forwardRef<HTMLTableElement, TableProps>(
   function Table(
     {
+      headerVariant,
       variant,
-      zebra = false,
       dense = false,
       verticalBorders = false,
       stacked = 'never',
@@ -61,10 +74,10 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
           'govgr-table--stacked-always': stacked === 'always',
           'govgr-table--stacked-sm': stacked === 'sm',
           'govgr-table--stacked-md': stacked == 'md',
-          'govgr-table--dark': variant === 'dark',
-          'govgr-table--light': variant === 'light',
-          'govgr-table--zebra': zebra,
+          'govgr-table--dark': headerVariant === 'dark',
+          'govgr-table--light': headerVariant === 'light',
           'govgr-table--dense': dense,
+          'govgr-table--zebra': variant === 'zebra',
           'govgr-table--vertical-lines': verticalBorders,
         })}
         {...props}

package/src/TableBody/index.tsx

@@ -4,9 +4,13 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TableBodyProps extends BaseProps<'tbody'> {
   /**
-   * verticalAlign is optional. Default value is 'middle'.
-   * This prop set the vertical align of the body's content.
-   */
+  * verticalAlign is optional. Default value is 'middle'.
+  * This prop set the vertical align of the body's content.
+  * @value 'middle'
+  * @value 'top'
+  * @value 'bottom'
+  * @default 'middle'
+  */
   verticalAlign?: 'middle' | 'top' | 'bottom';
 }
 /**

package/src/TableCaption/index.tsx

@@ -4,10 +4,15 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TableCaptionProps extends BaseProps<'caption'> {
   /**
-   * size is optional.
-   * The props are 'sm' for small, 'md' for medium, 'lg' for large and 'xl' for extra large .
-   * Default value is 'md'.
-   */
+  * size is optional.
+  * The props are 'sm' for small, 'md' for medium, 'lg' for large and 'xl' for extra large .
+  * Default value is 'md'.
+  * @value 'sm'
+  * @value 'md'
+  * @value 'lg'
+  * @value 'xl'
+  * @default 'md'
+  */
   size?: 'sm' | 'md' | 'lg' | 'xl';
 }
 /**

package/src/TableContainer/index.tsx

@@ -4,8 +4,11 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TableContainerProps extends BaseProps<'div'> {
   /**
-   * border is optional. Set to true if you need a border for the Table.
-   */
+  * border is optional. Set to true if you need a border for the Table.
+  * @value true
+  * @value false
+  * @default false
+  */
   border?: boolean;
 }
 /**

package/src/TableDataCell/index.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+// import PhaseBannerTag from '@digigov/react-core/PhaseBannerTag';
 
 export interface TableDataCellProps extends BaseProps<'td'> {
   /**
-   * dataType is optional.
-   * Use numeric value when comparing columns of numbers, align the numbers to the right in table cells
-   * Default value is text which aligns texts to the center
-   */
+  * dataType is optional.
+  * Use numeric value when comparing columns of numbers, align the numbers to the right in table cells
+  * Default value is text which aligns texts to the center
+  * @value 'text'
+  * @value 'numeric'
+  * @default 'text'
+  */
   dataType?: 'text' | 'numeric';
 }
 /**

package/src/TableHeadCell/index.tsx

@@ -4,16 +4,25 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TableHeadCellProps extends BaseProps<'th'> {
   /**
-   * dataType is optional.
-   * Use numeric value prop when comparing columns of numbers, align the numbers to the right in table cells.
-   * Default value is text which aligns texts to the center
-   */
+  * dataType is optional.
+  * Use numeric value prop when comparing columns of numbers, align the numbers to the right in table cells.
+  * Default value is text which aligns texts to the center
+  * @value 'text'
+  * @value 'numeric'
+  * @default 'text'
+  */
   dataType?: 'text' | 'numeric';
   /**
-   * cellWidth is optional.
-   * Use cellWidth prop to define a custom width for a specific reference number in your table cell.
-   *
-   */
+  * cellWidth is optional.
+  * Use cellWidth prop to define a custom width for a specific reference number in your table cell.
+  *
+  * @value 'one-quarter'
+  * @value 'one-third'
+  * @value 'one-half'
+  * @value 'two-thirds'
+  * @value 'three-quarters'
+  * @value 'full'
+  */
   cellWidth?:
     | 'one-quarter'
     | 'one-third'

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

@@ -1,5 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the Table with color="secondary" prop 1`] = `
+<ForwardRef(TableRow)
+  color="secondary"
+>
+  <ForwardRef(Base)
+    as="tr"
+    className="govgr-table__row--secondary govgr-table__row"
+  >
+    <tr
+      className="govgr-table__row--secondary govgr-table__row"
+    >
+      hello
+    </tr>
+  </ForwardRef(Base)>
+</ForwardRef(TableRow)>
+`;
+
+exports[`renders the Table with highlight prop 1`] = `
+<ForwardRef(TableRow)
+  highlight={true}
+>
+  <ForwardRef(Base)
+    as="tr"
+    className="govgr-table__row--highlight govgr-table__row"
+  >
+    <tr
+      className="govgr-table__row--highlight govgr-table__row"
+    >
+      hello
+    </tr>
+  </ForwardRef(Base)>
+</ForwardRef(TableRow)>
+`;
+
 exports[`renders the Table with no props 1`] = `
 <ForwardRef(TableRow)>
   <ForwardRef(Base)

package/src/TableRow/index.test.tsx

@@ -6,3 +6,10 @@ import TableRow from '@digigov/react-core/TableRow';
 it('renders the Table with no props', () => {
   expect(mount(<TableRow>hello</TableRow>)).toMatchSnapshot();
 });
+
+it('renders the Table with highlight prop', () => {
+  expect(mount(<TableRow highlight>hello</TableRow>)).toMatchSnapshot();
+});
+it('renders the Table with color="secondary" prop', () => {
+  expect(mount(<TableRow color='secondary'>hello</TableRow>)).toMatchSnapshot();
+});

package/src/TableRow/index.tsx

@@ -4,23 +4,36 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TableRowProps extends BaseProps<'tr'> {
   /**
-   * warning is optional. Default value is false.
-   * Add the warning prop to add a warning line on the left of the row.
+  * highlight is optional.
+  * Add the highlight prop to add a highlight line on the left of the row.
+  * @value true
+  * @value false
+  * @default false
    */
-  warning?: boolean;
+  highlight?: boolean;
+
+  /**
+   * color is optional.
+   * color doesn't apply if the Table parent component has the prop variant='zebra'.
+   * @value 'primary'
+   * @value 'secondary'
+   * @default 'primary'
+   */
+  color?: 'primary' | 'secondary';
 }
 /**
  * Use TableRow inside the Table component to provide a new row to the table.
  */
 export const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
-  function TableRow({ warning = false, className, children, ...props }, ref) {
+  function TableRow({ highlight = false, color, className, children, ...props }, ref) {
     return (
       <Base
         as="tr"
         ref={ref}
         className={clsx(className, {
           'govgr-table__row': true,
-          'govgr-table__row--warning': warning,
+          'govgr-table__row--highlight': highlight,
+          'govgr-table__row--secondary': color ==='secondary',
         })}
         {...props}
       >

package/src/TabsHeading/index.tsx

@@ -4,10 +4,13 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TabsHeadingProps extends BaseProps<'h6'> {
   /**
-   * size is optional.
-   * The values are 'md' for medium and 'sm' for small.
-   * Default value is 'sm'.
-   */
+  * size is optional.
+  * The values are 'md' for medium and 'sm' for small.
+  * Default value is 'sm'.
+  * @value 'md'
+  * @value 'sm'
+  * @default 'sm'
+  */
   size?: 'md' | 'sm';
 }
 /**

package/src/TabsListItem/index.tsx

@@ -4,10 +4,12 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TabsListItemProps extends BaseProps<'a'> {
   /**
-   * selected is optional.
-   * Exaclty one TabsListItem should be selected every time.
-   * This declares that this tab is selected.
-   */
+  * selected is optional.
+  * Exaclty one TabsListItem should be selected every time.
+  * This declares that this tab is selected.
+  * @value true
+  * @value false
+  */
   selected?: boolean;
 }
 /**

package/src/TabsPanel/index.tsx

@@ -4,10 +4,12 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TabsPanelProps extends BaseProps<'div'> {
   /**
-   * active is optional.
-   * Exaclty one TabsPanel should be active every time.
-   * This declares that this content is active and should depend of the 'selected' TabsList.
-   */
+  * active is optional.
+  * Exaclty one TabsPanel should be active every time.
+  * This declares that this content is active and should depend of the 'selected' TabsList.
+  * @value true
+  * @value false
+  */
   active?: boolean;
 }
 /**

package/src/TaskListItemHeading/index.tsx

@@ -4,12 +4,19 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TaskListItemHeadingProps 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/TaskListItemTag/index.tsx

@@ -4,8 +4,11 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TaskListItemTagProps extends BaseProps<'strong'> {
   /**
-   * Set status to change the background color of the TaskListItemTag element.
-   */
+  * Set status to change the background color of the TaskListItemTag element.
+  * @value 'completed'
+  * @value 'in-progress'
+  * @value 'not-started'
+  */
   status?: 'completed' | 'in-progress' | 'not-started';
 }
 /**

package/src/TextArea/index.tsx

@@ -4,9 +4,11 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TextAreaProps extends BaseProps<'textarea'> {
   /**
-   * 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;
 }
 /**

package/src/TextInput/index.tsx

@@ -4,14 +4,26 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TextInputProps extends BaseProps<'input'> {
   /**
-   * characterWidth is optional.
-   */
+  * characterWidth is optional.
+  * @value 2
+  * @value 3
+  * @value 4
+  * @value 5
+  * @value 10
+  * @value 20
+  */
   characterWidth?: 2 | 3 | 4 | 5 | 10 | 20;
 
   /**
-   * cellWidth is optional.
-   * Use cellWidth prop to define a custom width for a specific reference number in your components.
-   */
+  * cellWidth is optional.
+  * Use cellWidth prop to define a custom width for a specific reference number in your components.
+  * @value 'one-quarter'
+  * @value 'one-third'
+  * @value 'one-half'
+  * @value 'two-thirds'
+  * @value 'three-quarters'
+  * @value 'full'
+  */
   cellWidth?:
     | 'one-quarter'
     | 'one-third'
@@ -21,9 +33,11 @@ export interface TextInputProps extends BaseProps<'input'> {
     | 'full';
 
   /**
-   * 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;
 }
 /**

package/src/Timeline/index.tsx

@@ -4,8 +4,11 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TimelineProps extends BaseProps<'ol'> {
   /**
-   * spaced is optional. Use it to add space between the list items.
-   */
+  * spaced is optional. Use it to add space between the list items.
+  * @value true
+  * @value false
+  * @default false
+  */
   spaced?: boolean;
 }
 /**

package/src/TimelineHeading/index.tsx

@@ -4,12 +4,19 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TimelineHeadingProps 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/index.ts

@@ -23,10 +23,10 @@ export * from '@digigov/react-core/TableSortIconContainer';
 export * from '@digigov/react-core/Checkbox';
 export * from '@digigov/react-core/CheckboxConditional';
 export * from '@digigov/react-core/CheckboxItem';
-export * from '@digigov/react-core/ChoiceDivider';
-export * from '@digigov/react-core/Confirmation';
-export * from '@digigov/react-core/ConfirmationBody';
-export * from '@digigov/react-core/ConfirmationTitle';
+export * from '@digigov/react-core/ChoiceDividerText';
+export * from '@digigov/react-core/Panel';
+export * from '@digigov/react-core/PanelBody';
+export * from '@digigov/react-core/PanelBody';
 export * from '@digigov/react-core/Container';
 export * from '@digigov/react-core/CopyrightContainer';
 export * from '@digigov/react-core/DateInputContainer';
@@ -62,7 +62,6 @@ export * from '@digigov/react-core/HeaderContent';
 export * from '@digigov/react-core/HeaderLogo';
 export * from '@digigov/react-core/HeaderSecondaryLogo';
 export * from '@digigov/react-core/HeaderSection';
-export * from '@digigov/react-core/HeaderSubtitle';
 export * from '@digigov/react-core/HeaderTitle';
 export * from '@digigov/react-core/Heading';
 export * from '@digigov/react-core/HeadingCaption';
@@ -97,10 +96,8 @@ export * from '@digigov/react-core/NotificationBannerContent';
 export * from '@digigov/react-core/NotificationBannerHeader';
 export * from '@digigov/react-core/NotificationBannerHeading';
 export * from '@digigov/react-core/NotificationBannerLink';
-export * from '@digigov/react-core/PageTitle';
-export * from '@digigov/react-core/PageTitleCaption';
+export * from '@digigov/react-core/Section';
 export * from '@digigov/react-core/PageTitleHeading';
-export * from '@digigov/react-core/PageTitleSection';
 export * from '@digigov/react-core/Paragraph';
 export * from '@digigov/react-core/PhaseBannerHeaderContainer';
 export * from '@digigov/react-core/PhaseBanner';