@digigov/react-core 0.21.0 → 0.22.0

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

@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the CheckboxItem with \`disabled\` prop 1`] = `
+<ForwardRef(CheckboxItem)
+  disabled={true}
+>
+  <div
+    className="govgr-checkboxes__item"
+  >
+    <label
+      className="govgr-checkboxes__label--disabled govgr-label govgr-checkboxes__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-checkboxes__input"
+        disabled={true}
+        type="checkbox"
+      >
+        <input
+          className="govgr-checkboxes__input"
+          disabled={true}
+          type="checkbox"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(CheckboxItem)>
+`;
+
 exports[`renders the CheckboxItem with \`name\` prop 1`] = `
 <ForwardRef(CheckboxItem)
   name="example"
@@ -14,13 +42,49 @@ exports[`renders the CheckboxItem with \`name\` prop 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-checkboxes__input"
+        disabled={false}
+        name="example"
+        type="checkbox"
+      >
+        <input
+          className="govgr-checkboxes__input"
+          disabled={false}
+          name="example"
+          type="checkbox"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(CheckboxItem)>
+`;
+
+exports[`renders the CheckboxItem with \`value\` \`name\` and \`disabled\` props 1`] = `
+<ForwardRef(CheckboxItem)
+  disabled={true}
+  name="example"
+  value="example"
+>
+  <div
+    className="govgr-checkboxes__item"
+  >
+    <label
+      className="govgr-checkboxes__label--disabled govgr-label govgr-checkboxes__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-checkboxes__input"
+        disabled={true}
         name="example"
         type="checkbox"
+        value="example"
       >
         <input
           className="govgr-checkboxes__input"
+          disabled={true}
           name="example"
           type="checkbox"
+          value="example"
         />
       </ForwardRef(Base)>
     </label>
@@ -42,11 +106,13 @@ exports[`renders the CheckboxItem with \`value\` prop 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-checkboxes__input"
+        disabled={false}
         type="checkbox"
         value="example"
       >
         <input
           className="govgr-checkboxes__input"
+          disabled={false}
           type="checkbox"
           value="example"
         />
@@ -68,10 +134,12 @@ exports[`renders the CheckboxItem with no props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-checkboxes__input"
+        disabled={false}
         type="checkbox"
       >
         <input
           className="govgr-checkboxes__input"
+          disabled={false}
           type="checkbox"
         />
       </ForwardRef(Base)>

package/src/CheckboxItem/index.test.tsx

@@ -17,3 +17,17 @@ it('renders the CheckboxItem with `value` prop', () => {
     mount(<CheckboxItem value="example">hello</CheckboxItem>)
   ).toMatchSnapshot();
 });
+
+it('renders the CheckboxItem with `disabled` prop', () => {
+  expect(mount(<CheckboxItem disabled>hello</CheckboxItem>)).toMatchSnapshot();
+});
+
+it('renders the CheckboxItem with `value` `name` and `disabled` props', () => {
+  expect(
+    mount(
+      <CheckboxItem value="example" name="example" disabled>
+        hello
+      </CheckboxItem>
+    )
+  ).toMatchSnapshot();
+});

package/src/CheckboxItem/index.tsx

@@ -12,6 +12,11 @@ export interface CheckboxItemProps extends BaseProps<'input'> {
    * Value property is optional and it specifies the value of an <input> element.
    */
   value?: string;
+  /**
+   * disabled prop disables the checkbox input.
+   * disabled property is optional and it is false by default.
+   */
+  disabled?: boolean;
 }
 /**
  * Details for the CheckboxItem.
@@ -21,7 +26,10 @@ export interface CheckboxItemProps extends BaseProps<'input'> {
 export const CheckboxItem = React.forwardRef<
   HTMLInputElement,
   CheckboxItemProps
->(function CheckboxItem({ name, value, className, children, ...props }, ref) {
+>(function CheckboxItem(
+  { name, value, className, disabled = false, children, ...props },
+  ref
+) {
   return (
     <div
       className={clsx(className, {
@@ -31,6 +39,7 @@ export const CheckboxItem = React.forwardRef<
       <label
         className={clsx({
           'govgr-label govgr-checkboxes__label': true,
+          'govgr-checkboxes__label--disabled': disabled === true,
         })}
       >
         {children}
@@ -43,6 +52,7 @@ export const CheckboxItem = React.forwardRef<
           className={clsx({
             'govgr-checkboxes__input': true,
           })}
+          disabled={disabled}
           {...props}
         />
       </label>

package/src/DetailsSummary/index.tsx

@@ -2,20 +2,26 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import clsx from 'clsx';
 
-export interface DetailsSummaryProps extends BaseProps<'summary'> {}
+export interface DetailsSummaryProps extends BaseProps<'summary'> {
+  /*
+  ** size is optional. Default value is 'm'. 
+  */
+  size?: 'm' | 'l';
+}
 /**
  * Use this inside Details.DetailsSummary will be the text to click on.
  */
 export const DetailsSummary = React.forwardRef<
   HTMLElement,
   DetailsSummaryProps
->(function DetailsSummary({ className, children, ...props }, ref) {
+>(function DetailsSummary({size, className, children, ...props }, ref) {
   return (
     <Base
       as="summary"
       ref={ref}
       className={clsx(className, {
         'govgr-details__summary': true,
+        'govgr-details__summary--l': size==='l',
       })}
       {...props}
     >

package/src/FieldContainer/index.tsx

@@ -15,7 +15,7 @@ export const FieldContainer = React.forwardRef<
   HTMLDivElement,
   FieldContainerProps
 >(function FieldContainer(
-  { error, className, children, xs = 12, md = 12, lg = 12, xl = 12 },
+  { error, className, children, xs = 12, md = 12, lg = 12, xl = 12, ...props },
   ref
 ) {
   return (
@@ -30,6 +30,7 @@ export const FieldContainer = React.forwardRef<
       md={md}
       lg={lg}
       xl={xl}
+      {...props}
     >
       {children}
     </Grid>

package/src/Nav/index.tsx

@@ -14,13 +14,37 @@ export interface NavProps extends BaseProps<'nav'> {
    * layout is horizontal by default.
    */
   layout?: 'vertical' | 'horizontal';
+  /**
+   * hidden is optional.
+   * hidden prop hides the nav element when it is called from a navItem.
+   */
+  hidden?: boolean;
+  /**
+   * fixed is optional.
+   * fixed prop allows element to be positioned relative to the viewport
+   */
+  fixed?: boolean;
+  /**
+   * border is optional.
+   * border prop contains border-bottom styling.
+   */
+  border?: boolean;
 }
 /**
  * Nav is mainly used under the Header.
  * This is a wrapper for the NavList component.
  */
 export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
-  { className, open = false, layout = 'horizontal', children, ...props },
+  {
+    className,
+    open = false,
+    layout = 'horizontal',
+    hidden = false,
+    fixed = true,
+    border = true,
+    children,
+    ...props
+  },
   ref
 ) {
   return (
@@ -29,8 +53,11 @@ export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
       ref={ref}
       className={clsx(className, {
         'govgr-horizontal-nav': true,
-        'govgr-nav-horizontal--border': layout === 'horizontal',
+        'govgr-horizontal-nav--order': layout === 'horizontal',
+        'govgr-nav-horizontal--fixed': fixed,
+        'govgr-nav-horizontal--border': border,
         'govgr-horizontal-nav--open': open,
+        'govgr-horizontal-nav--hidden': hidden,
       })}
       {...props}
     >

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

@@ -14,11 +14,13 @@ exports[`renders the RadioItem  value props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-radios__input"
+        disabled={false}
         type="radio"
         value="someValue"
       >
         <input
           className="govgr-radios__input"
+          disabled={false}
           type="radio"
           value="someValue"
         />
@@ -28,6 +30,34 @@ exports[`renders the RadioItem  value props 1`] = `
 </ForwardRef(RadioItem)>
 `;
 
+exports[`renders the RadioItem with disabled prop 1`] = `
+<ForwardRef(RadioItem)
+  disabled={true}
+>
+  <div
+    className="govgr-radios__item"
+  >
+    <label
+      className="govgr-radios__label--disabled govgr-label govgr-radios__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-radios__input"
+        disabled={true}
+        type="radio"
+      >
+        <input
+          className="govgr-radios__input"
+          disabled={true}
+          type="radio"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(RadioItem)>
+`;
+
 exports[`renders the RadioItem with name  props 1`] = `
 <ForwardRef(RadioItem)
   name="name"
@@ -42,11 +72,13 @@ exports[`renders the RadioItem with name  props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-radios__input"
+        disabled={false}
         name="name"
         type="radio"
       >
         <input
           className="govgr-radios__input"
+          disabled={false}
           name="name"
           type="radio"
         />
@@ -71,12 +103,48 @@ exports[`renders the RadioItem with name and value props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-radios__input"
+        disabled={false}
+        name="name"
+        type="radio"
+        value="someValue"
+      >
+        <input
+          className="govgr-radios__input"
+          disabled={false}
+          name="name"
+          type="radio"
+          value="someValue"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(RadioItem)>
+`;
+
+exports[`renders the RadioItem with name disabled and value props 1`] = `
+<ForwardRef(RadioItem)
+  disabled={true}
+  name="name"
+  value="someValue"
+>
+  <div
+    className="govgr-radios__item"
+  >
+    <label
+      className="govgr-radios__label--disabled govgr-label govgr-radios__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-radios__input"
+        disabled={true}
         name="name"
         type="radio"
         value="someValue"
       >
         <input
           className="govgr-radios__input"
+          disabled={true}
           name="name"
           type="radio"
           value="someValue"
@@ -99,10 +167,12 @@ exports[`renders the RadioItem with no props 1`] = `
       <ForwardRef(Base)
         as="input"
         className="govgr-radios__input"
+        disabled={false}
         type="radio"
       >
         <input
           className="govgr-radios__input"
+          disabled={false}
           type="radio"
         />
       </ForwardRef(Base)>

package/src/RadioItem/index.test.tsx

@@ -26,3 +26,17 @@ it('renders the RadioItem with name and value props', () => {
     )
   ).toMatchSnapshot();
 });
+
+it('renders the RadioItem with disabled prop', () => {
+  expect(mount(<RadioItem disabled>hello</RadioItem>)).toMatchSnapshot();
+});
+
+it('renders the RadioItem with name disabled and value props', () => {
+  expect(
+    mount(
+      <RadioItem name={'name'} value={'someValue'} disabled>
+        hello
+      </RadioItem>
+    )
+  ).toMatchSnapshot();
+});

package/src/RadioItem/index.tsx

@@ -12,13 +12,21 @@ export interface RadioItemProps extends BaseProps<'input'> {
    * Value property is optional and it specifies the value of an <input> element.
    */
   value?: string;
+  /**
+   * disabled prop disables the radio input.
+   * disabled property is optional and it is false by default.
+   */
+  disabled?: boolean;
 }
 /**
  * RadioItem component is used for display radio buttons.
  * RadioItem component must be included inside Radio component, as a children component.
  */
 export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
-  function RadioItem({ name, value, className, children, ...props }, ref) {
+  function RadioItem(
+    { name, value, className, disabled = false, children, ...props },
+    ref
+  ) {
     return (
       <div
         className={clsx(className, {
@@ -28,6 +36,7 @@ export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
         <label
           className={clsx({
             'govgr-label govgr-radios__label': true,
+            'govgr-radios__label--disabled': disabled === true,
           })}
         >
           {children}
@@ -40,6 +49,7 @@ export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
             className={clsx({
               'govgr-radios__input': true,
             })}
+            disabled={disabled}
             {...props}
           />
         </label>

package/src/SectionBreak/index.tsx

@@ -12,13 +12,16 @@ export interface SectionBreakProps extends BaseProps<'hr'> {
   /**
    * size is optional and it is about the different size margins.
    */
-  size?: 'xl' | 'l' | 'm';
+  size?: 'xl' | 'l' | 'm' | 's';
 }
 /**
  * SectionBreak is used to create a thematic break between sections of content.
  */
 export const SectionBreak = React.forwardRef<HTMLHRElement, SectionBreakProps>(
-  function SectionBreak({ visible, size, className, ...props }, ref) {
+  function SectionBreak(
+    { visible = true, size = 's', className, ...props },
+    ref
+  ) {
     return (
       <Base
         as="hr"

package/src/SvgIcon/index.tsx

@@ -7,7 +7,7 @@ export interface SvgIconProps extends BaseProps<'svg'> {
    * size prop declares the size of the svg icon.
    * size is optional. The default value is 'm'.
    */
-  size?: 's' | 'm' | 'l' | 'xl';
+  size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
 
   /**
    * variant property styles svg icon with Gov.gr palette's basic colors.

package/src/index.ts

@@ -1,3 +1,5 @@
+export * from '@digigov/react-core/AccessibilityIcon';
+export * from '@digigov/react-core/AccessibilityTextIcon';
 export * from '@digigov/react-core/Accordion';
 export * from '@digigov/react-core/AccordionControls';
 export * from '@digigov/react-core/AccordionSection';

package/src/registry.js

@@ -1,4 +1,6 @@
 
+import * as _digigov_react_core_AccessibilityIcon from '@digigov/react-core/AccessibilityIcon';
+import * as _digigov_react_core_AccessibilityTextIcon from '@digigov/react-core/AccessibilityTextIcon';
 import * as _digigov_react_core_Accordion from '@digigov/react-core/Accordion';
 import * as _digigov_react_core_AccordionControls from '@digigov/react-core/AccordionControls';
 import * as _digigov_react_core_AccordionSection from '@digigov/react-core/AccordionSection';
@@ -176,6 +178,8 @@ function lazyImport(pkgImport) {
   )
 }
 export default {
+  '@digigov/react-core/AccessibilityIcon': lazyImport(_digigov_react_core_AccessibilityIcon),
+  '@digigov/react-core/AccessibilityTextIcon': lazyImport(_digigov_react_core_AccessibilityTextIcon),
   '@digigov/react-core/Accordion': lazyImport(_digigov_react_core_Accordion),
   '@digigov/react-core/AccordionControls': lazyImport(_digigov_react_core_AccordionControls),
   '@digigov/react-core/AccordionSection': lazyImport(_digigov_react_core_AccordionSection),