@digigov/react-core 0.2.0 → 0.3.0

package/src/TextInput/index.test.tsx

@@ -31,210 +31,226 @@ it('renders the TextInput with characterWidth=20', () => {
   expect(mount(<TextInput characterWidth={20}></TextInput>)).toMatchSnapshot();
 });
 
-it('renders the TextInput with width=one-quarter', () => {
+it('renders the TextInput with cellWidth=one-quarter', () => {
   expect(
-    mount(<TextInput width={'one-quarter'}></TextInput>)
+    mount(<TextInput cellWidth={'one-quarter'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with width=one-third', () => {
-  expect(mount(<TextInput width={'one-third'}></TextInput>)).toMatchSnapshot();
+it('renders the TextInput with cellWidth=one-third', () => {
+  expect(
+    mount(<TextInput cellWidth={'one-third'}></TextInput>)
+  ).toMatchSnapshot();
 });
 
-it('renders the TextInput with width=one-half', () => {
-  expect(mount(<TextInput width={'one-half'}></TextInput>)).toMatchSnapshot();
+it('renders the TextInput with cellWidth=one-half', () => {
+  expect(
+    mount(<TextInput cellWidth={'one-half'}></TextInput>)
+  ).toMatchSnapshot();
 });
 
-it('renders the TextInput with width=two-thirds', () => {
-  expect(mount(<TextInput width={'two-thirds'}></TextInput>)).toMatchSnapshot();
+it('renders the TextInput with cellWidth=two-thirds', () => {
+  expect(
+    mount(<TextInput cellWidth={'two-thirds'}></TextInput>)
+  ).toMatchSnapshot();
 });
 
-it('renders the TextInput with width=three-quarters', () => {
+it('renders the TextInput with cellWidth=three-quarters', () => {
   expect(
-    mount(<TextInput width={'three-quarters'}></TextInput>)
+    mount(<TextInput cellWidth={'three-quarters'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with width=full', () => {
-  expect(mount(<TextInput width={'full'}></TextInput>)).toMatchSnapshot();
+it('renders the TextInput with cellWidth=full', () => {
+  expect(mount(<TextInput cellWidth={'full'}></TextInput>)).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=2 and with width=one-quarter', () => {
+it('renders the TextInput with characterWidth=2 and with cellWidth=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={2} width={'one-quarter'}></TextInput>)
+    mount(<TextInput characterWidth={2} cellWidth={'one-quarter'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=3 and with width=one-quarter', () => {
+it('renders the TextInput with characterWidth=3 and with cellWidth=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={3} width={'one-quarter'}></TextInput>)
+    mount(<TextInput characterWidth={3} cellWidth={'one-quarter'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=4 and with width=one-quarter', () => {
+it('renders the TextInput with characterWidth=4 and with cellWidth=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={4} width={'one-quarter'}></TextInput>)
+    mount(<TextInput characterWidth={4} cellWidth={'one-quarter'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput  with with characterWidth=5 with width=one-quarter', () => {
+it('renders the TextInput  with with characterWidth=5 with cellWidth=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={5} width={'one-quarter'}></TextInput>)
+    mount(<TextInput characterWidth={5} cellWidth={'one-quarter'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=20 and with width=one-quarter', () => {
+it('renders the TextInput with characterWidth=20 and with cellWidth=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={20} width={'one-quarter'}></TextInput>)
+    mount(<TextInput characterWidth={20} cellWidth={'one-quarter'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=2 and with width=one-third', () => {
+it('renders the TextInput with characterWidth=2 and with cellWidth=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={2} width={'one-third'}></TextInput>)
+    mount(<TextInput characterWidth={2} cellWidth={'one-third'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=3 and with width=one-third', () => {
+it('renders the TextInput with characterWidth=3 and with cellWidth=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={3} width={'one-third'}></TextInput>)
+    mount(<TextInput characterWidth={3} cellWidth={'one-third'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=4 and with width=one-third', () => {
+it('renders the TextInput with characterWidth=4 and with cellWidth=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={4} width={'one-third'}></TextInput>)
+    mount(<TextInput characterWidth={4} cellWidth={'one-third'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput  with with characterWidth=5 with width=one-third', () => {
+it('renders the TextInput  with with characterWidth=5 with cellWidth=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={5} width={'one-third'}></TextInput>)
+    mount(<TextInput characterWidth={5} cellWidth={'one-third'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=20 and with width=one-third', () => {
+it('renders the TextInput with characterWidth=20 and with cellWidth=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={20} width={'one-third'}></TextInput>)
+    mount(<TextInput characterWidth={20} cellWidth={'one-third'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=2 and with width=one-half', () => {
+it('renders the TextInput with characterWidth=2 and with cellWidth=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={2} width={'one-half'}></TextInput>)
+    mount(<TextInput characterWidth={2} cellWidth={'one-half'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=3 and with width=one-half', () => {
+it('renders the TextInput with characterWidth=3 and with cellWidth=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={3} width={'one-half'}></TextInput>)
+    mount(<TextInput characterWidth={3} cellWidth={'one-half'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=4 and with width=one-half', () => {
+it('renders the TextInput with characterWidth=4 and with cellWidth=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={4} width={'one-half'}></TextInput>)
+    mount(<TextInput characterWidth={4} cellWidth={'one-half'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput  with with characterWidth=5 with width=one-half', () => {
+it('renders the TextInput  with with characterWidth=5 with cellWidth=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={5} width={'one-half'}></TextInput>)
+    mount(<TextInput characterWidth={5} cellWidth={'one-half'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=20 and with width=one-half', () => {
+it('renders the TextInput with characterWidth=20 and with cellWidth=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={20} width={'one-half'}></TextInput>)
+    mount(<TextInput characterWidth={20} cellWidth={'one-half'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=2 and with width=two-thirds', () => {
+it('renders the TextInput with characterWidth=2 and with cellWidth=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={2} width={'two-thirds'}></TextInput>)
+    mount(<TextInput characterWidth={2} cellWidth={'two-thirds'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=3 and with width=two-thirds', () => {
+it('renders the TextInput with characterWidth=3 and with cellWidth=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={3} width={'two-thirds'}></TextInput>)
+    mount(<TextInput characterWidth={3} cellWidth={'two-thirds'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=4 and with width=two-thirds', () => {
+it('renders the TextInput with characterWidth=4 and with cellWidth=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={4} width={'two-thirds'}></TextInput>)
+    mount(<TextInput characterWidth={4} cellWidth={'two-thirds'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput  with with characterWidth=5 with width=two-thirds', () => {
+it('renders the TextInput  with with characterWidth=5 with cellWidth=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={5} width={'two-thirds'}></TextInput>)
+    mount(<TextInput characterWidth={5} cellWidth={'two-thirds'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=20 and with width=two-thirds', () => {
+it('renders the TextInput with characterWidth=20 and with cellWidth=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={20} width={'two-thirds'}></TextInput>)
+    mount(<TextInput characterWidth={20} cellWidth={'two-thirds'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=2 and with width=three-quarters', () => {
+it('renders the TextInput with characterWidth=2 and with cellWidth=three-quarters', () => {
   expect(
-    mount(<TextInput characterWidth={2} width={'three-quarters'}></TextInput>)
+    mount(
+      <TextInput characterWidth={2} cellWidth={'three-quarters'}></TextInput>
+    )
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=3 and with width=three-quarters', () => {
+it('renders the TextInput with characterWidth=3 and with cellWidth=three-quarters', () => {
   expect(
-    mount(<TextInput characterWidth={3} width={'three-quarters'}></TextInput>)
+    mount(
+      <TextInput characterWidth={3} cellWidth={'three-quarters'}></TextInput>
+    )
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=4 and with width=three-quarters', () => {
+it('renders the TextInput with characterWidth=4 and with cellWidth=three-quarters', () => {
   expect(
-    mount(<TextInput characterWidth={4} width={'three-quarters'}></TextInput>)
+    mount(
+      <TextInput characterWidth={4} cellWidth={'three-quarters'}></TextInput>
+    )
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput  with with characterWidth=5 with width=three-quarters', () => {
+it('renders the TextInput  with with characterWidth=5 with cellWidth=three-quarters', () => {
   expect(
-    mount(<TextInput characterWidth={5} width={'three-quarters'}></TextInput>)
+    mount(
+      <TextInput characterWidth={5} cellWidth={'three-quarters'}></TextInput>
+    )
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=20 and with width=three-quarters', () => {
+it('renders the TextInput with characterWidth=20 and with cellWidth=three-quarters', () => {
   expect(
-    mount(<TextInput characterWidth={20} width={'three-quarters'}></TextInput>)
+    mount(
+      <TextInput characterWidth={20} cellWidth={'three-quarters'}></TextInput>
+    )
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=2 and with width=full', () => {
+it('renders the TextInput with characterWidth=2 and with cellWidth=full', () => {
   expect(
-    mount(<TextInput characterWidth={2} width={'full'}></TextInput>)
+    mount(<TextInput characterWidth={2} cellWidth={'full'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=3 and with width=full', () => {
+it('renders the TextInput with characterWidth=3 and with cellWidth=full', () => {
   expect(
-    mount(<TextInput characterWidth={3} width={'full'}></TextInput>)
+    mount(<TextInput characterWidth={3} cellWidth={'full'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=4 and with width=full', () => {
+it('renders the TextInput with characterWidth=4 and with cellWidth=full', () => {
   expect(
-    mount(<TextInput characterWidth={4} width={'full'}></TextInput>)
+    mount(<TextInput characterWidth={4} cellWidth={'full'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput  with with characterWidth=5 with width=full', () => {
+it('renders the TextInput  with with characterWidth=5 with cellWidth=full', () => {
   expect(
-    mount(<TextInput characterWidth={5} width={'full'}></TextInput>)
+    mount(<TextInput characterWidth={5} cellWidth={'full'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=20 and with width=full', () => {
+it('renders the TextInput with characterWidth=20 and with cellWidth=full', () => {
   expect(
-    mount(<TextInput characterWidth={20} width={'full'}></TextInput>)
+    mount(<TextInput characterWidth={20} cellWidth={'full'}></TextInput>)
   ).toMatchSnapshot();
 });

package/src/TextInput/index.tsx

@@ -14,9 +14,10 @@ export interface TextInputProps extends InputElementAttributes {
   characterWidth?: 2 | 3 | 4 | 5 | 10 | 20;
 
   /**
-   * width is optional.
+   * cellWidth is optional.
+   * Use cellWidth prop to define a custom width for a specific reference number in your components.
    */
-  width?:
+  cellWidth?:
     | 'one-quarter'
     | 'one-third'
     | 'one-half'
@@ -40,7 +41,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       type = 'text',
       name,
       characterWidth,
-      width,
+      cellWidth,
       error,
       className,
       children,
@@ -61,12 +62,12 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           'govgr-input--width-5': characterWidth === 5,
           'govgr-input--width-10': characterWidth === 10,
           'govgr-input--width-20': characterWidth === 20,
-          'govgr-!-width-one-quarter': width === 'one-quarter',
-          'govgr-!-width-one-third': width === 'one-third',
-          'govgr-!-width-one-half': width === 'one-half',
-          'govgr-!-width-two-thirds': width === 'two-thirds',
-          'govgr-!-width-three-quarters': width === 'three-quarters',
-          'govgr-!-width-full': width === 'full',
+          'govgr-!-width-one-quarter': cellWidth === 'one-quarter',
+          'govgr-!-width-one-third': cellWidth === 'one-third',
+          'govgr-!-width-one-half': cellWidth === 'one-half',
+          'govgr-!-width-two-thirds': cellWidth === 'two-thirds',
+          'govgr-!-width-three-quarters': cellWidth === 'three-quarters',
+          'govgr-!-width-full': cellWidth === 'full',
           'govgr-error-input': error === true,
         })}
         {...props}

package/src/index.ts

@@ -102,6 +102,13 @@ export { default as SummaryListItem } from '@digigov/react-core/SummaryListItem'
 export { default as SummaryListItemAction } from '@digigov/react-core/SummaryListItemAction';
 export { default as SummaryListItemKey } from '@digigov/react-core/SummaryListItemKey';
 export { default as SummaryListItemValue } from '@digigov/react-core/SummaryListItemValue';
+export { default as Table } from '@digigov/react-core/Table';
+export { default as TableRow } from '@digigov/react-core/TableRow';
+export { default as TableCaption } from '@digigov/react-core/TableCaption';
+export { default as TableHead } from '@digigov/react-core/TableHead';
+export { default as TableBody } from '@digigov/react-core/TableBody';
+export { default as TableDataCell } from '@digigov/react-core/TableDataCell';
+export { default as TableHeaderCell } from '@digigov/react-core/TableHeaderCell';
 export { default as TabsList } from '@digigov/react-core/TabsList';
 export { default as TabsListItem } from '@digigov/react-core/TabsListItem';
 export { default as TabsPanel } from '@digigov/react-core/TabsPanel';