Merge pull request #1719 from natura-cosmeticos/DSY-999-debug

Dsy 999 debug

packages/react/src/components/Debug/Debug.props.ts

@@ -0,0 +1,11 @@
+export interface DebugProps {
+  /**
+   * Specify an optional className to be added to your Debug
+   */
+  className?: string
+
+  /**
+   * Optional ID for testing
+   */
+  testID?: string;
+}

packages/react/src/components/Debug/Debug.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import { Debug, DebugProps } from '.'
+
+const componentStatus = `
+- - -
+
+**NOTE FOR UXs**: This component is available in the following variants:
+
+  - ❌ Standard
+
+With the following attribute statuses:
+
+  - **Attributes:**
+    - ❌ \`Types\`
+
+- - -
+`
+
+export default {
+  title: 'Components/Debug',
+  component: Debug,
+  parameters: {
+    componentSubtitle: '',
+    docs: { description: { component: componentStatus } }
+  }
+} as Meta
+
+export const Playground: Story<DebugProps> = (args) => (
+  <Debug {...args} />
+)

packages/react/src/components/Debug/Debug.styles.ts

@@ -0,0 +1,10 @@
+import { createUseStyles } from 'react-jss'
+import { Theme } from '@naturacosmeticos/natds-themes'
+
+const styles = createUseStyles((theme: Theme) => ({
+  example: {
+    display: 'flex'
+  }
+}))
+
+export default styles

packages/react/src/components/Debug/Debug.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Debug from '.'
+import renderWithTheme from '../../helpers/renderWithTheme'
+
+describe('Debug component', () => {
+  it('should render correctly with default props', () => {
+    const { styles, component } = renderWithTheme(<Debug />)
+
+    expect([styles.toString(), component.container]).toMatchSnapshot()
+  })
+})

packages/react/src/components/Debug/Debug.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import styles from './Debug.styles'
+import { DebugProps } from './Debug.props'
+
+const Debug = React.forwardRef<HTMLElement, DebugProps>(
+  (props, ref) => {
+    const {
+      className = '',
+      ...rest
+    } = props
+    const { example } = styles()
+
+    return (
+      <span
+        className={`${className} ${example}`}
+        ref={ref}
+        {...rest}
+      >
+        Debug
+      </span>
+    )
+  }
+)
+
+export default Debug

packages/react/src/components/Debug/index.ts

@@ -0,0 +1,5 @@
+import Debug from './Debug'
+
+export { Debug }
+export { DebugProps } from './Debug.props'
+export default Debug

packages/react/src/index.ts

@@ -32,3 +32,4 @@ export * from './components/Switch'
 export * from './components/Tag'
 export * from './components/Typography'
 export * from './components/Chip'
+export * from './components/Debug'