Adding first approach of component DropdownItem

src/components/atoms/DropdownItem/index.mocks.json

@@ -0,0 +1,16 @@
+{
+  "testing": {
+    "basicTestId": "test-dropdown-item",
+    "testText": "Lorem Ipsum"
+  },
+  "storybook": {
+    "parameters": {
+      "componentSubtitle": "Dropdown's item single unit, which can be a link, a divider or text",
+      "docs": {
+        "description": {
+          "component": "Can be used as an anchor link `<a>`, you can also use a `<div>` and insert almost any type of content."
+        }
+      }
+    }
+  }
+}

src/components/atoms/DropdownItem/index.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { StoryFn, Meta } from '@storybook/react'
+// COMPONENTS
+import DropdownItem from '.'
+// TYPES & INTERFACES
+// MOCKS
+import { storybook, testing } from './index.mocks.json'
+
+export default {
+  title: 'Atoms/DropdownItem',
+  component: DropdownItem,
+  ...storybook,
+  args: {
+    itemText: testing.testText
+  }
+} as Meta<typeof DropdownItem>
+
+const Template: StoryFn<typeof DropdownItem> = args => (
+  <DropdownItem {...args} />
+)
+
+export const BasicExample = Template.bind({})
+BasicExample.storyName = 'Basic Example'

src/components/atoms/DropdownItem/index.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+// COMPONENTS
+import DropdownItem from '.'
+// TYPES & INTERFACES
+// MOCKS
+import { testing } from './index.mocks.json'
+
+describe('DropdownItem', () => {
+  const { basicTestId, testText } = testing
+
+  test('Should render the component', () => {
+    render(<DropdownItem itemText={testText} />)
+    const testDropdownItem = screen.getByTestId(basicTestId)
+    expect(testDropdownItem).toBeInTheDocument()
+  })
+})

src/components/atoms/DropdownItem/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+// COMPONENTS
+// TYPES & INTERFACES
+import { DropdownItemProps } from '../../../interfaces/atomProps'
+// PARSERS
+import { parseClasses, parseTestId } from '../../../functions/parsers'
+
+const DropdownItem: React.FC<DropdownItemProps> = ({
+  testId = null,
+  cssClasses = null,
+  style = null,
+  itemText,
+  isLink = false,
+  isDivider = false,
+  isActiveItem = false,
+  onClick = null
+}) => {
+  const itemTypeClass = isDivider ? 'dropdown-divider' : 'dropdown-item'
+  const dropdownItemClasses = parseClasses([
+    itemTypeClass,
+    isActiveItem && !isDivider ? 'is-active' : null,
+    cssClasses
+  ])
+
+  const dropdownItemConfig = {
+    'data-testid':
+      testId ??
+      parseTestId({ tag: itemTypeClass, parsedClasses: dropdownItemClasses }),
+    'className': dropdownItemClasses,
+    'style': style ?? undefined,
+    'onClick': onClick ?? undefined
+  }
+
+  if (isLink) {
+    return <a {...dropdownItemConfig}>{itemText}</a>
+  }
+
+  if (isDivider) return <hr {...dropdownItemConfig} />
+
+  return (
+    <div {...dropdownItemConfig}>
+      <p>{itemText}</p>
+    </div>
+  )
+}
+
+export default DropdownItem

src/components/atoms/index.ts

@@ -14,3 +14,5 @@ export { default as File } from './File'
 export { default as Checkbox } from './Checkbox'
 export { default as RadioButton } from './RadioButton'
 export { default as BreadcrumbItem } from './BreadcrumbItem'
+export { default as DropdownTrigger } from './DropdownTrigger'
+export { default as DropdownItem } from './DropdownItem'

src/interfaces/atomProps.ts

@@ -285,3 +285,21 @@ export interface BreadcrumbItemProps extends ComposedElementProps {
   /** `Function` Click function, alone does not nothing, but can be reused for other components */
   onClick?: () => void
 }
+
+export interface DropdownTriggerProps extends ComposedElementProps {
+  /** `Attribute` `Required` Sets the name will be shown on the dropdown input */
+  menuText: string
+}
+
+export interface DropdownItemProps extends ElementProps {
+  /** `Attribute` `Required` Sets the name will be shown on the item */
+  itemText: string
+  /** `Attribute` Changes item's composition into a `<a>` element to redirect user */
+  isLink?: boolean
+  /** `Attribute` Changes item's composition into a `<hr>` element to split between string or link elements */
+  isDivider?: boolean
+  /** `Styling` Marks the item as the one where user is located (based on dropdown hierarchy) */
+  isActiveItem?: boolean
+  /** `Function` Click function, alone does not nothing, but can be reused for other components */
+  onClick?: () => void
+}