@digigov/react-core 2.0.0-2445d5cb → 2.0.0-298cfc51

package/src/TextInput/index.tsx

@@ -1,87 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface TextInputProps extends BaseProps<'input'> {
-  /**
-   * maxWidth is optional.
-   * @value '2-char';
-   * @value '3-char';
-   * @value '4-char';
-   * @value '5-char';
-   * @value '10-char';
-   * @value '20-char';
-   */
-  maxWidth?: '2-char' | '3-char' | '4-char' | '5-char' | '10-char' | '20-char';
-
-  /**
-   * width is optional.
-   * Use width prop to define a custom width in your component.
-   * @value '25%';
-   * @value '33.3%';
-   * @value '50%';
-   * @value '66.6%';
-   * @value '75%';
-   * @value '100%';
-   * @value 'full';
-   */
-  width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
-
-  /**
-   * 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;
-  /**
-   * dense is optional.
-   * @value true TextInput will be dense.
-   * @value false
-   * @default false
-   */
-  dense?: boolean;
-}
-/**
- * TextInput component when you need to let users enter text that’s no
- * longer than a single line, such as their name or phone number.
- */
-export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
-  function TextInput(
-    {
-      type = 'text',
-      maxWidth,
-      width,
-      error,
-      dense,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) {
-    return (
-      <Base
-        as="input"
-        type={type}
-        ref={ref}
-        className={clsx(className, {
-          'ds-input': true,
-          'ds-input--error': error,
-          'ds-input--dense': dense,
-          [`ds-input--width-${maxWidth}`]: maxWidth !== undefined,
-          'ds-!-width-one-quarter': width === '25%',
-          'ds-!-width-one-third': width === '33.3%',
-          'ds-!-width-one-half': width === '50%',
-          'ds-!-width-two-thirds': width === '66.6%',
-          'ds-!-width-three-quarters': width === '75%',
-        })}
-        {...props}
-      >
-        {children}
-      </Base>
-    );
-  }
-);
-
-export default TextInput;
+export * from '@digigov/react-core/TextInput/index.web';
+export { default as default } from '@digigov/react-core/TextInput/index.web';

package/src/TextInput/index.web.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface TextInputProps extends BaseProps<'input'> {
+  /**
+   * maxWidth is optional.
+   * @value '2-char';
+   * @value '3-char';
+   * @value '4-char';
+   * @value '5-char';
+   * @value '10-char';
+   * @value '20-char';
+   */
+  maxWidth?: '2-char' | '3-char' | '4-char' | '5-char' | '10-char' | '20-char';
+
+  /**
+   * width is optional.
+   * Use width prop to define a custom width in your component.
+   * @value '25%';
+   * @value '33.3%';
+   * @value '50%';
+   * @value '66.6%';
+   * @value '75%';
+   * @value '100%';
+   * @value 'full';
+   */
+  width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
+
+  /**
+   * 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;
+  /**
+   * dense is optional.
+   * @value true TextInput will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
+}
+/**
+ * TextInput component when you need to let users enter text that’s no
+ * longer than a single line, such as their name or phone number.
+ */
+export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
+  function TextInput(
+    {
+      type = 'text',
+      maxWidth,
+      width,
+      error,
+      dense,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <Base
+        as="input"
+        type={type}
+        ref={ref}
+        className={clsx(className, {
+          'ds-input': true,
+          'ds-input--error': error,
+          'ds-input--dense': dense,
+          [`ds-input--width-${maxWidth}`]: maxWidth !== undefined,
+          'ds-!-width-one-quarter': width === '25%',
+          'ds-!-width-one-third': width === '33.3%',
+          'ds-!-width-one-half': width === '50%',
+          'ds-!-width-two-thirds': width === '66.6%',
+          'ds-!-width-three-quarters': width === '75%',
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default TextInput;

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

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Timeline with dense prop 1`] = `
 <body>
   <div>
     <ol
-      class="ds-timeline--dense ds-timeline"
+      class="ds-timeline ds-timeline--dense"
     >
       hello
     </ol>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the TimelineActions with no prop 1`] = `
 <body>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the TimelineContent with no prop 1`] = `
 <body>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the TimelineHeading with no prop 1`] = `
 <body>
@@ -16,7 +16,7 @@ exports[`renders the TimelineHeading with size = "md" prop 1`] = `
 <body>
   <div>
     <h3
-      class="ds-timeline__heading-md ds-timeline__heading"
+      class="ds-timeline__heading ds-timeline__heading--md"
     >
       hello
     </h3>
@@ -28,7 +28,7 @@ exports[`renders the TimelineHeading with size = "sm" prop 1`] = `
 <body>
   <div>
     <h4
-      class="ds-timeline__heading-sm ds-timeline__heading"
+      class="ds-timeline__heading ds-timeline__heading--sm"
     >
       hello
     </h4>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the TimelineItem with no prop 1`] = `
 <body>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Top with no props 1`] = `
 <body>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Typography fontSize=24 and as=span props 1`] = `
 <body>