@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-871b6be5

package/src/Paragraph/index.test.tsx

@@ -7,48 +7,48 @@ it('renders the Paragraph with no props', () => {
   expect(mount(<Paragraph>hello</Paragraph>)).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead', () => {
-  expect(mount(<Paragraph variant={'lg'}>hello</Paragraph>)).toMatchSnapshot();
+it('renders the Paragraph with size=lead', () => {
+  expect(mount(<Paragraph size={'lg'}>hello</Paragraph>)).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal', () => {
-  expect(mount(<Paragraph variant={'md'}>hello</Paragraph>)).toMatchSnapshot();
+it('renders the Paragraph with size=normal', () => {
+  expect(mount(<Paragraph size={'md'}>hello</Paragraph>)).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small', () => {
-  expect(mount(<Paragraph variant={'sm'}>hello</Paragraph>)).toMatchSnapshot();
+it('renders the Paragraph with size=small', () => {
+  expect(mount(<Paragraph size={'sm'}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=14', () => {
-  expect(mount(<Paragraph fontSize={'14'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={14}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=16', () => {
-  expect(mount(<Paragraph fontSize={'16'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={16}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=19', () => {
-  expect(mount(<Paragraph fontSize={'19'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={19}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=24', () => {
-  expect(mount(<Paragraph fontSize={'24'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={24}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=30', () => {
-  expect(mount(<Paragraph fontSize={'30'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={30}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=36', () => {
-  expect(mount(<Paragraph fontSize={'36'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={36}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=48', () => {
-  expect(mount(<Paragraph fontSize={'48'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={48}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=72', () => {
-  expect(mount(<Paragraph fontSize={'72'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={72}>hello</Paragraph>)).toMatchSnapshot();
 });
 it('renders the Paragraph with fontWeight=regular', () => {
   expect(
@@ -66,258 +66,258 @@ it('renders the Paragraph with fontWeight=bold', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=14', () => {
+it('renders the Paragraph with size=lead and fontSize=14', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'14'}>
+      <Paragraph size={'lg'} fontSize={14}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=16', () => {
+it('renders the Paragraph with size=lead and fontSize=16', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'16'}>
+      <Paragraph size={'lg'} fontSize={16}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=19', () => {
+it('renders the Paragraph with size=lead and fontSize=19', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'19'}>
+      <Paragraph size={'lg'} fontSize={19}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=24', () => {
+it('renders the Paragraph with size=lead and fontSize=24', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'14'}>
+      <Paragraph size={'lg'} fontSize={14}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=30', () => {
+it('renders the Paragraph with size=lead and fontSize=30', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'30'}>
+      <Paragraph size={'lg'} fontSize={30}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=36', () => {
+it('renders the Paragraph with size=lead and fontSize=36', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'36'}>
+      <Paragraph size={'lg'} fontSize={36}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=48', () => {
+it('renders the Paragraph with size=lead and fontSize=48', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'48'}>
+      <Paragraph size={'lg'} fontSize={48}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=72', () => {
+it('renders the Paragraph with size=lead and fontSize=72', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'72'}>
+      <Paragraph size={'lg'} fontSize={72}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=14', () => {
+it('renders the Paragraph with size=small and fontSize=14', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'14'}>
+      <Paragraph size={'sm'} fontSize={14}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=16', () => {
+it('renders the Paragraph with size=small and fontSize=16', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'16'}>
+      <Paragraph size={'sm'} fontSize={16}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=19', () => {
+it('renders the Paragraph with size=small and fontSize=19', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'19'}>
+      <Paragraph size={'sm'} fontSize={19}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=24', () => {
+it('renders the Paragraph with size=small and fontSize=24', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'14'}>
+      <Paragraph size={'sm'} fontSize={14}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=30', () => {
+it('renders the Paragraph with size=small and fontSize=30', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'30'}>
+      <Paragraph size={'sm'} fontSize={30}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=36', () => {
+it('renders the Paragraph with size=small and fontSize=36', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'36'}>
+      <Paragraph size={'sm'} fontSize={36}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=48', () => {
+it('renders the Paragraph with size=small and fontSize=48', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'48'}>
+      <Paragraph size={'sm'} fontSize={48}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=72', () => {
+it('renders the Paragraph with size=small and fontSize=72', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'72'}>
+      <Paragraph size={'sm'} fontSize={72}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=14', () => {
+it('renders the Paragraph with size=normal and fontSize=14', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'14'}>
+      <Paragraph size={'md'} fontSize={14}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=16', () => {
+it('renders the Paragraph with size=normal and fontSize=16', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'16'}>
+      <Paragraph size={'md'} fontSize={16}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=19', () => {
+it('renders the Paragraph with size=normal and fontSize=19', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'19'}>
+      <Paragraph size={'md'} fontSize={19}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=24', () => {
+it('renders the Paragraph with size=normal and fontSize=24', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'14'}>
+      <Paragraph size={'md'} fontSize={14}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=30', () => {
+it('renders the Paragraph with size=normal and fontSize=30', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'30'}>
+      <Paragraph size={'md'} fontSize={30}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=36', () => {
+it('renders the Paragraph with size=normal and fontSize=36', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'36'}>
+      <Paragraph size={'md'} fontSize={36}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=48', () => {
+it('renders the Paragraph with size=normal and fontSize=48', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'48'}>
+      <Paragraph size={'md'} fontSize={48}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=72', () => {
+it('renders the Paragraph with size=normal and fontSize=72', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'72'}>
+      <Paragraph size={'md'} fontSize={72}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
-it('renders the Paragraph with variant=normal, fontSize=72 and fontWeight="regular', () => {
+it('renders the Paragraph with size=normal, fontSize=72 and fontWeight="regular', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'72'} fontWeight="regular">
+      <Paragraph size={'md'} fontSize={72} fontWeight="regular">
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
-it('renders the Paragraph with variant=normal, fontSize=72 and fontWeight="bold', () => {
+it('renders the Paragraph with size=normal, fontSize=72 and fontWeight="bold', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'72'} fontWeight="bold">
+      <Paragraph size={'md'} fontSize={72} fontWeight="bold">
         hello
       </Paragraph>
     )

package/src/Paragraph/index.tsx

@@ -3,7 +3,7 @@ import { BaseProps } from '@digigov/react-core/Base';
 import NormalText, { NormalTextProps } from '@digigov/react-core/NormalText';
 
 export interface ParagraphProps
-  extends Pick<NormalTextProps, 'variant' | 'fontSize' | 'fontWeight'>,
+  extends Pick<NormalTextProps, 'size' | 'fontSize' | 'fontWeight'>,
   BaseProps<'p'> { }
 /**
  * Paragraph component is used for text formatting.

package/src/PhaseBannerHeaderContainer/__snapshots__/inde.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the PhaseBannerHeaderContainer with no props 1`] = `
 <ForwardRef(PhaseBannerHeaderContainer)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-phase-banner_header"
+    className="govgr-phase-banner__header"
   >
     <div
-      className="govgr-phase-banner_header"
+      className="govgr-phase-banner__header"
     >
       hello
     </div>

package/src/PhaseBannerHeaderContainer/index.tsx

@@ -14,7 +14,7 @@ export const PhaseBannerHeaderContainer = React.forwardRef<
       ref={ref}
       {...props}
       className={clsx({
-        'govgr-phase-banner_header': true,
+        'govgr-phase-banner__header': true,
       })}
     >
       {children}

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

@@ -4,10 +4,10 @@ exports[`renders the PhaseBannerTag with no props 1`] = `
 <ForwardRef(PhaseBannerTag)>
   <ForwardRef(Base)
     as="strong"
-    className="govgr-tag govgr-phase-banner__tag"
+    className="govgr-phase-banner__tag"
   >
     <strong
-      className="govgr-tag govgr-phase-banner__tag"
+      className="govgr-phase-banner__tag"
     >
       hello
     </strong>

package/src/PhaseBannerTag/index.tsx

@@ -15,7 +15,6 @@ export const PhaseBannerTag = React.forwardRef<
       as="strong"
       ref={ref}
       className={clsx(className, {
-        'govgr-tag': true,
         'govgr-phase-banner__tag': true,
       })}
       {...props}

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

@@ -13,17 +13,14 @@ exports[`renders the Blockquote with no props 1`] = `
         <ForwardRef(Grid)
           className="govgr-field"
           item={true}
-          lg={12}
-          md={12}
-          xl={12}
           xs={12}
         >
           <ForwardRef(Base)
             as="div"
-            className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+            className="govgr-field xs:govgr-grid__col-span-12"
           >
             <div
-              className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+              className="govgr-field xs:govgr-grid__col-span-12"
             >
               <ForwardRef(LabelContainer)>
                 <ForwardRef(Base)

package/src/ResultsActionBar/__snapshots__/indext.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the ResultsActionBar with no props 1`] = `
 <ForwardRef(ResultsActionBar)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-results-action-bar"
+    className="govgr-results__action-bar"
   >
     <div
-      className="govgr-results-action-bar"
+      className="govgr-results__action-bar"
     >
       hello
     </div>

package/src/ResultsActionBar/index.tsx

@@ -15,7 +15,7 @@ export const ResultsActionBar = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'govgr-results-action-bar': true,
+        'govgr-results__action-bar': true,
       })}
       {...props}
     >

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

@@ -4,10 +4,10 @@ exports[`renders the ResultsHeading with no props 1`] = `
 <ForwardRef(ResultsHeading)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-results-heading"
+    className="govgr-results__heading"
   >
     <div
-      className="govgr-results-heading"
+      className="govgr-results__heading"
     >
       hello
     </div>

package/src/ResultsHeading/index.tsx

@@ -16,7 +16,7 @@ export const ResultsHeading = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'govgr-results-heading': true,
+        'govgr-results__heading': true,
       })}
       {...props}
     >

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

@@ -4,18 +4,27 @@ exports[`renders the ResultsHeadingActions with no props 1`] = `
 <ForwardRef(ResultsHeadingActions)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-results-heading__actions"
+    className="govgr-results__actions"
   >
     <div
-      className="govgr-results-heading__actions"
+      className="govgr-results__actions"
     >
       hello
-      <a
-        className="govgr-link govgr-link-filters"
-        href="#"
+      <ForwardRef(Button)
+        className="govgr-link-filters"
       >
-        Φίλτρα
-      </a>
+        <ForwardRef(Base)
+          as="button"
+          className="govgr-link-filters govgr-btn-primary govgr-btn"
+          printHidden={true}
+        >
+          <button
+            className="govgr-link-filters govgr-btn-primary govgr-btn govgr-print-hidden"
+          >
+            Φίλτρα
+          </button>
+        </ForwardRef(Base)>
+      </ForwardRef(Button)>
     </div>
   </ForwardRef(Base)>
 </ForwardRef(ResultsHeadingActions)>

package/src/ResultsHeadingActions/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-import LinkBase from '@digigov/react-core/LinkBase';
+import Button from '@digigov/react-core/Button';
 
 export interface ResultsHeadingActionsProps extends BaseProps<'div'> {}
 /**
@@ -11,20 +11,20 @@ export interface ResultsHeadingActionsProps extends BaseProps<'div'> {}
 export const ResultsHeadingActions = React.forwardRef<
   HTMLDivElement,
   ResultsHeadingActionsProps
->(function ResultsHeadingActions({ className, children, ...props }, ref) {
+>(function ResultsHeadingActions({ className, onClick, children, ...props }, ref) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
-        'govgr-results-heading__actions': true,
+        'govgr-results__actions': true,
       })}
       {...props}
     >
       {children}
-      <LinkBase className="govgr-link-filters" href="#">
+      <Button className="govgr-link-filters">
         Φίλτρα
-      </LinkBase>
+      </Button>
     </Base>
   );
 });

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

@@ -2,34 +2,49 @@
 
 exports[`renders the SearchButton with no prop 1`] = `
 <ForwardRef(SearchButton)>
-  <ForwardRef(Base)
-    as="button"
-    className="govgr-btn govgr-input__search-btn"
+  <ForwardRef(Button)
+    className="govgr-input__search-btn"
   >
-    <button
-      className="govgr-btn govgr-input__search-btn"
+    <ForwardRef(Base)
+      as="button"
+      className="govgr-input__search-btn govgr-btn-primary govgr-btn"
+      printHidden={true}
     >
-      <ForwardRef(SearchIcon)>
-        <ForwardRef(Base)
-          aria-hidden="true"
-          as="svg"
-          className="govgr-search-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <svg
-            aria-hidden="true"
-            className="govgr-search-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
+      <button
+        className="govgr-input__search-btn govgr-btn-primary govgr-btn govgr-print-hidden"
+      >
+        <SearchIcon>
+          <ForwardRef(Icon)
+            icon="search"
           >
-            <path
-              d="M22,19.9l-5.4-5.4c0.9-1.3,1.4-2.8,1.4-4.5c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.7,0,3.2-0.5,4.5-1.4l5.4,5.4L22,19.9z M10,15c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S12.8,15,10,15z"
-            />
-          </svg>
-        </ForwardRef(Base)>
-      </ForwardRef(SearchIcon)>
-    </button>
-  </ForwardRef(Base)>
+            <ForwardRef(SvgIcon)
+              className="govgr-svg-icon--search"
+            >
+              <ForwardRef(Base)
+                aria-hidden="true"
+                as="svg"
+                className="govgr-svg-icon--search govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <svg
+                  aria-hidden="true"
+                  className="govgr-svg-icon--search govgr-svg-icon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <search>
+                    <path
+                      d="M22,19.9l-5.4-5.4c0.9-1.3,1.4-2.8,1.4-4.5c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.7,0,3.2-0.5,4.5-1.4l5.4,5.4L22,19.9z M10,15c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S12.8,15,10,15z"
+                    />
+                  </search>
+                </svg>
+              </ForwardRef(Base)>
+            </ForwardRef(SvgIcon)>
+          </ForwardRef(Icon)>
+        </SearchIcon>
+      </button>
+    </ForwardRef(Base)>
+  </ForwardRef(Button)>
 </ForwardRef(SearchButton)>
 `;

package/src/SearchButton/index.tsx

@@ -6,7 +6,7 @@ import { SearchIcon } from '@digigov/react-icons';
 export interface SearchButtonProps extends ButtonProps {}
 /**
  * Use the SearchButton component to help users carry out a search action.
- * SearchButton component must be used inside SearchSection component.
+ * SearchButton component must be used inside SearchContainer component.
  */
 export const SearchButton = React.forwardRef<
   HTMLButtonElement,